Verified Commit 5a7a30f5 authored by Aral Balkan's avatar Aral Balkan
Browse files

Disable action fields when offline

parent 43459568
...@@ -3,11 +3,16 @@ ...@@ -3,11 +3,16 @@
text-align: center; text-align: center;
} }
.your-patronage-is-paused-message { #your-patronage-is-paused-message, #offline-message {
font-size: 1.5em; font-size: 1.5em;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
background-color: #FEE59E; background-color: #FEE59E;
color: #783806; color: #783806;
padding: 0.25em; padding: 0.25em;
} }
\ No newline at end of file
#offline-message {
background-color: #C7D4CC;
color: #304349;
}
...@@ -28,15 +28,19 @@ ...@@ -28,15 +28,19 @@
<section id='active-patronage' ${isActive ? '' : 'hidden'}> <section id='active-patronage' ${isActive ? '' : 'hidden'}>
<h1>Your patronage</h1> <h1>Your patronage</h1>
<p id='offline-message' hidden>You’re offline.</p>
<section id='resume-your-patronage' ${isPaused ? '' : 'hidden'}> <section id='resume-your-patronage' ${isPaused ? '' : 'hidden'}>
<p class='your-patronage-is-paused-message'>Your patronage is paused.</p> <p id='your-patronage-is-paused-message'>Your patronage is paused.</p>
<h2>Resume your patronage</h2> <h2>Resume your patronage</h2>
<p>This will resume your patronage effective immediately. You can pause it again at any point.</p> <p>This will resume your patronage effective immediately. You can pause it again at any point.</p>
<form id='resume'> <form id='resume'>
<input id='resume-button' type='submit' value='Resume my patronage' /> <fieldset id='resume-fields'>
<input id='resume-button' type='submit' value='Resume my patronage' />
</fieldset>
</form> </form>
</section> </section>
...@@ -62,10 +66,12 @@ ...@@ -62,10 +66,12 @@
<p>This will update your patronage amount effective immediately.</p> <p>This will update your patronage amount effective immediately.</p>
<form id='update'> <form id='update'>
<label for='amount'>Amount (€/month):<label> <fieldset id='update-fields' disabled>
<input id='patronageAmount' type='text' value='${patronageAmount}'> <label for='amount'>Amount (€/month):<label>
<br><br> <input id='patronageAmount' type='text' value='${patronageAmount}'>
<input id='update-button' type='submit' value='Update my patronage' /> <br><br>
<input id='update-button' type='submit' value='Update my patronage' />
</fieldset>
</form> </form>
</section> </section>
...@@ -75,7 +81,9 @@ ...@@ -75,7 +81,9 @@
<p>This will pause your patronage effective immediately. You can resume it again at any point.</p> <p>This will pause your patronage effective immediately. You can resume it again at any point.</p>
<form id='pause'> <form id='pause'>
<input id='pause-button' type='submit' value='Pause my patronage' /> <fieldset id='pause-fields' disabled>
<input id='pause-button' type='submit' value='Pause my patronage' />
</fieldset>
</form> </form>
</section> </section>
...@@ -85,7 +93,9 @@ ...@@ -85,7 +93,9 @@
<p>This will stop your monthly patronage effective immediately.</p> <p>This will stop your monthly patronage effective immediately.</p>
<form id='cancel'> <form id='cancel'>
<input id='cancel-button' type='submit' value='Cancel my patronage' /> <fieldset id='cancel-fields' disabled>
<input id='cancel-button' type='submit' value='Cancel my patronage' />
</fieldset>
</form> </form>
</section> </section>
</section> </section>
......
const $ = document.querySelector.bind(document)
window.addEventListener('load', _ => { window.addEventListener('load', _ => {
$ = document.querySelector.bind(document)
const Modal = Swal const Modal = Swal
const socket = new WebSocket(`wss://${window.location.hostname}/patron`) const socket = new WebSocket(`wss://${window.location.hostname}/patron`)
...@@ -8,10 +9,15 @@ window.addEventListener('load', _ => { ...@@ -8,10 +9,15 @@ window.addEventListener('load', _ => {
// Handle connectivity. // Handle connectivity.
socket.onopen = _ => { socket.onopen = _ => {
$('#status').innerHTML = '<span style="color: green">Online</span>' $('#status').innerHTML = '<span style="color: green">Online</span>'
enableActions()
} }
socket.onclose = _ => { socket.onclose = _ => {
$('#status').innerHTML = 'Offline' $('#status').innerHTML = 'Offline'
enableActions(false)
$('#offline-message').hidden = false
} }
socket.onerror = error => { socket.onerror = error => {
...@@ -87,7 +93,9 @@ window.addEventListener('load', _ => { ...@@ -87,7 +93,9 @@ window.addEventListener('load', _ => {
// Connectivity. // Connectivity.
// //
function enableActions (enabled = true) {
['update', 'pause', 'resume', 'cancel'].forEach(action => $(`#${action}-fields`).disabled = !enabled)
}
// //
// Interface. // Interface.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment