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

Disable action fields when offline

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