add "prenota" page to webserver
This commit is contained in:
parent
00e238384b
commit
e6a2e23197
8 changed files with 184 additions and 0 deletions
25
pizzicore/pages/prenotati.html
Normal file
25
pizzicore/pages/prenotati.html
Normal 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>
|
||||
|
|
@ -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")
|
||||
|
|
3
pizzicore/static/css/common.css
Normal file
3
pizzicore/static/css/common.css
Normal file
|
@ -0,0 +1,3 @@
|
|||
body { font-family: sans-serif; }
|
||||
nav { font-size: 200%; margin-bottom: 0.5em; }
|
||||
nav a { padding-right: 2em; }
|
4
pizzicore/static/css/style.css
Normal file
4
pizzicore/static/css/style.css
Normal file
|
@ -0,0 +1,4 @@
|
|||
#numero {
|
||||
font-size: 5em;
|
||||
}
|
||||
.hide { display: none; }
|
2
pizzicore/static/js/common.js
Normal file
2
pizzicore/static/js/common.js
Normal file
|
@ -0,0 +1,2 @@
|
|||
var WS_BASE = "wss://" + window.location.host + "/v1";
|
||||
|
9
pizzicore/static/js/prenota-sw.js
Normal file
9
pizzicore/static/js/prenota-sw.js
Normal 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',
|
||||
});
|
||||
}
|
||||
})
|
20
pizzicore/static/js/prenota-webworker-ws.js
Normal file
20
pizzicore/static/js/prenota-webworker-ws.js
Normal 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
|
||||
}
|
||||
}
|
117
pizzicore/static/js/prenota.js
Normal file
117
pizzicore/static/js/prenota.js
Normal 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 = ""
|
||||
}
|
||||
})()
|
||||
|
Loading…
Reference in a new issue