From c7c69a8c903fa69edcffaa449182b3ff85da8160 Mon Sep 17 00:00:00 2001 From: boyska Date: Sat, 20 Aug 2022 16:48:26 +0200 Subject: [PATCH] vue rewrite start --- pizzicore/pages/spa.html | 9 +++++ pizzicore/pizzicore.py | 4 +++ pizzicore/static/js/spa.js | 62 +++++++++++++++++++++++++++++++++ pizzicore/static/vue/counter.js | 7 ++++ 4 files changed, 82 insertions(+) create mode 100644 pizzicore/pages/spa.html create mode 100644 pizzicore/static/js/spa.js create mode 100644 pizzicore/static/vue/counter.js diff --git a/pizzicore/pages/spa.html b/pizzicore/pages/spa.html new file mode 100644 index 0000000..5ff43bc --- /dev/null +++ b/pizzicore/pages/spa.html @@ -0,0 +1,9 @@ + + + +
+
+ + + + diff --git a/pizzicore/pizzicore.py b/pizzicore/pizzicore.py index 2ae87c7..b689758 100644 --- a/pizzicore/pizzicore.py +++ b/pizzicore/pizzicore.py @@ -214,3 +214,7 @@ async def root_page(): @app.get("/prenota") async def prenota_page(): return await get_page("pages/prenotati.html") + +@app.get("/new") +async def prenota_page(): + return await get_page("pages/spa.html") diff --git a/pizzicore/static/js/spa.js b/pizzicore/static/js/spa.js new file mode 100644 index 0000000..d10843f --- /dev/null +++ b/pizzicore/static/js/spa.js @@ -0,0 +1,62 @@ +const { createApp } = Vue + +var app = createApp({ + data() { + return { + counter: -1, + } + }, + components: { + 'CounterController': Vue.defineAsyncComponent( () => import('/static/vue/counter.js') ) + }, + template: ` + + + `, +}) +app.mount('#app') + +app.component( + 'counter-controller', + { + data: () => { counter: 0; }, + template: `
{{counter}}
`, + } +) + + +function get_cid() { + return document.getElementsByTagName('body')[0].dataset.cid; +} + +function get_url(cid) +{ + if(cid === undefined) { + cid = get_cid() + } + + var url = ""; + if(window.location.protocol == "http:") { + url += "ws://" + } else { + url = "wss://" + } + url += window.location.host + '/v1/ws/counter/'; + url += cid + return url; +} + +function do_websocket(cid, callback) +{ + const socket = new WebSocket(get_url(cid)); + socket.onmessage = function(evt) { + var msg = JSON.parse(evt.data) + callback(msg.value) + } + socket.onclose = function() { + setTimeout(do_websocket, 3000) + } + socket.onerror = socket.onclose +} +do_websocket() + diff --git a/pizzicore/static/vue/counter.js b/pizzicore/static/vue/counter.js new file mode 100644 index 0000000..0f840a8 --- /dev/null +++ b/pizzicore/static/vue/counter.js @@ -0,0 +1,7 @@ +const template = `
{{counter}}
` + +export default { + props: ["queue_num"], + data() { return { counter: -1 } }, + template: template, +}