add "prenota" page to webserver

This commit is contained in:
boyska 2021-10-09 20:37:51 +02:00
parent 00e238384b
commit e6a2e23197
8 changed files with 184 additions and 0 deletions

View file

@ -0,0 +1,25 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/static/css/common.css" />
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/prenota">Prenotati</a>
</nav>
<div id="form-section">
<form id="form" class="hide">
<label for="tuonumero">Imposta una notifica al numero</label>
<input type="number" id="tuonumero" name="tuonumero" min="1" max="5000">
<a href="#" id="btn-prenotati" >Prenotati</button>
</form>
</div>
<div id="errors"> </div>
<script src="/static/js/common.js"></script>
<script src="/static/js/prenota.js"></script>
</body>
</html>

View file

@ -158,3 +158,7 @@ async def get_page(fname):
@app.get("/")
async def root_page():
return await get_page("pages/index.html")
@app.get("/prenota")
async def root_page():
return await get_page("pages/prenotati.html")

View file

@ -0,0 +1,3 @@
body { font-family: sans-serif; }
nav { font-size: 200%; margin-bottom: 0.5em; }
nav a { padding-right: 2em; }

View file

@ -0,0 +1,4 @@
#numero {
font-size: 5em;
}
.hide { display: none; }

View file

@ -0,0 +1,2 @@
var WS_BASE = "wss://" + window.location.host + "/v1";

View file

@ -0,0 +1,9 @@
self.addEventListener('message', event => {
if(event.data.cmd === 'show-notify') {
registration.showNotification(event.data.msg, {
vibrate: [200,100, 100,100, 200],
silent: false,
lang: 'it',
});
}
})

View file

@ -0,0 +1,20 @@
console.log("webworker")
var socket = null;
function onWebSocketMessage(evt) {
data = JSON.parse(evt.data)
postMessage(data.value)
}
onmessage = function(e) {
if(e.data.cmd === 'close') {
console.log("chiudo")
if(socket !== null) {
socket.close()
socket = null
}
} else if(e.data.cmd === 'open') {
socket = new WebSocket(e.data.baseurl + "/ws/counter/0");
socket.onmessage = onWebSocketMessage
}
}

View file

@ -0,0 +1,117 @@
"use strict"
var NOTIFY = false
if ("Notification" in window) {
NOTIFY = true
}
var SERVICEWORKER = false
if('serviceWorker' in navigator) {
SERVICEWORKER = true
}
var serviceWorker = null
function initNotify() {
if(NOTIFY === true) {
if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
if (permission !== "granted") {
NOTIFY = false
}
});
}
}
}
function notify(msg) {
if(NOTIFY === false) {
alert(msg)
return
}
if(SERVICEWORKER) {
console.log("notify: uso la modernità")
serviceWorker.postMessage({cmd: 'show-notify', msg: msg})
} else {
console.log("notify: uso fallback")
new Notification(msg, {
vibrate: [200,100, 100,100, 200],
silent: false,
lang: 'it',
});
}
}
function prenotatiWorker(worker, prenotato) {
worker.postMessage({cmd: "open", baseurl: WS_BASE})
worker.onmessage = function(e) {
console.log("ricevo", e)
console.log("data=", e.data)
if(e.data >= prenotato) {
console.log("chiudo")
notify("sbrigati: siamo al " + e.data)
worker.postMessage({cmd: "close"})
} else {
var field = document.querySelector('#tuonumero');
field.value = e.data
}
}
}
function prenotati(prenotato) {
var url = WS_BASE + "/ws/counter/0";
let socket = new WebSocket(url);
socket.onmessage = function(evt) {
var data = JSON.parse(evt.data)
if (data.value >= prenotato) {
notify("eddaje sbrigate")
socket.close()
} else {
var field = document.querySelector('#tuonumero');
field.value = data.value
}
}
}
function inizializzaNumero() {
var url = (WS_BASE + "/counter/0").replace("wss:", "https:");
var req = new Request(url)
fetch(req).then((response) => {
response.json().then((data) => {
console.log("mi dicono", data)
var field = document.querySelector('#tuonumero');
field.value = parseInt(data.value, 10) + 10
document.getElementById('form').classList.remove('hide')
})
})
}
(function() {
var webSocketWorker = null;
if(SERVICEWORKER) {
// Create shared worker.
webSocketWorker = new Worker('/static/js/prenota-webworker-ws.js');
navigator.serviceWorker.register('/static/js/prenota-sw.js') .then((reg) => {
serviceWorker = reg.active
}).catch((error) => {
console.error("Error in registration of Service Worker", error)
SERVICEWORKER = false
webSocketWorker.terminate()
console.log("fallback a tecnologie piu vecchie")
})
}
inizializzaNumero()
document.getElementById('btn-prenotati').onclick = function () {
var val = document.querySelector('#form > input').value
initNotify()
var field = document.querySelector('#tuonumero');
field.setAttribute('disabled', 'disabled')
var value = parseInt(val,10)
if(SERVICEWORKER) {
prenotatiWorker(webSocketWorker, value)
} else {
prenotati(value)
}
field.value = ""
}
})()