diff --git a/pizzicore/pages/prenotati.html b/pizzicore/pages/prenotati.html
new file mode 100644
index 0000000..6417ffa
--- /dev/null
+++ b/pizzicore/pages/prenotati.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pizzicore/pizzicore.py b/pizzicore/pizzicore.py
index ebb3e8e..d04c6e9 100644
--- a/pizzicore/pizzicore.py
+++ b/pizzicore/pizzicore.py
@@ -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")
diff --git a/pizzicore/static/css/common.css b/pizzicore/static/css/common.css
new file mode 100644
index 0000000..367e24c
--- /dev/null
+++ b/pizzicore/static/css/common.css
@@ -0,0 +1,3 @@
+body { font-family: sans-serif; }
+nav { font-size: 200%; margin-bottom: 0.5em; }
+nav a { padding-right: 2em; }
diff --git a/pizzicore/static/css/style.css b/pizzicore/static/css/style.css
new file mode 100644
index 0000000..0e14c3a
--- /dev/null
+++ b/pizzicore/static/css/style.css
@@ -0,0 +1,4 @@
+#numero {
+ font-size: 5em;
+}
+.hide { display: none; }
diff --git a/pizzicore/static/js/common.js b/pizzicore/static/js/common.js
new file mode 100644
index 0000000..b3784f8
--- /dev/null
+++ b/pizzicore/static/js/common.js
@@ -0,0 +1,2 @@
+var WS_BASE = "wss://" + window.location.host + "/v1";
+
diff --git a/pizzicore/static/js/prenota-sw.js b/pizzicore/static/js/prenota-sw.js
new file mode 100644
index 0000000..13107b9
--- /dev/null
+++ b/pizzicore/static/js/prenota-sw.js
@@ -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',
+ });
+ }
+})
diff --git a/pizzicore/static/js/prenota-webworker-ws.js b/pizzicore/static/js/prenota-webworker-ws.js
new file mode 100644
index 0000000..d2f8f45
--- /dev/null
+++ b/pizzicore/static/js/prenota-webworker-ws.js
@@ -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
+ }
+}
diff --git a/pizzicore/static/js/prenota.js b/pizzicore/static/js/prenota.js
new file mode 100644
index 0000000..2f2ec34
--- /dev/null
+++ b/pizzicore/static/js/prenota.js
@@ -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 = ""
+ }
+})()
+