diff --git a/pizzicore/pages/index.html b/pizzicore/pages/index.html
new file mode 100644
index 0000000..e70fd06
--- /dev/null
+++ b/pizzicore/pages/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pizzicore/pizzicore.py b/pizzicore/pizzicore.py
index fbe1a64..ebb3e8e 100644
--- a/pizzicore/pizzicore.py
+++ b/pizzicore/pizzicore.py
@@ -2,17 +2,14 @@ import secrets
import logging
import dbm
from collections import defaultdict
+from mimetypes import guess_type
from asyncio.queues import Queue
-from fastapi import (
- FastAPI,
- WebSocket,
- HTTPException,
- Depends,
- status,
-)
+from fastapi import FastAPI, WebSocket, HTTPException, Depends, status, Response
from starlette.websockets import WebSocketDisconnect
from fastapi.security import HTTPBasic, HTTPBasicCredentials
+from fastapi.encoders import jsonable_encoder
+from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
@@ -86,6 +83,7 @@ class Manager:
app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
manager = Manager()
counter_store = Store(
n=1, db_path="/var/lib/pizzicore/pizzicore.dbm", manager=manager
@@ -148,3 +146,15 @@ async def websocket_counter(websocket: WebSocket, cid: int):
manager.unsubscribe(cid, q)
return
await q.get()
+
+
+async def get_page(fname):
+ with open(fname) as f:
+ content = f.read()
+ content_type, _ = guess_type(fname)
+ return Response(content, media_type=content_type)
+
+
+@app.get("/")
+async def root_page():
+ return await get_page("pages/index.html")
diff --git a/pizzicore/static/js/app.js b/pizzicore/static/js/app.js
new file mode 100644
index 0000000..7c87b8d
--- /dev/null
+++ b/pizzicore/static/js/app.js
@@ -0,0 +1,24 @@
+function get_url()
+{
+ var url = "";
+ if(window.location.protocol == "http:") {
+ url += "ws://"
+ } else {
+ url = "wss://"
+ }
+ url += window.location.host + '/v1/ws/counter/';
+ url += document.getElementsByTagName('body')[0].dataset.cid;
+ return url;
+}
+
+function do_websocket()
+{
+ const socket = new WebSocket(get_url());
+ socket.addEventListener('message', function(evt) {
+ console.log('received', evt.data)
+ var msg = JSON.parse(evt.data)
+ counter = document.getElementsByTagName('text')[0];
+ counter.textContent = msg.value.toString()
+ })
+}
+do_websocket()
diff --git a/pizzicore/static/js/fitty.min.js b/pizzicore/static/js/fitty.min.js
new file mode 100644
index 0000000..6286418
--- /dev/null
+++ b/pizzicore/static/js/fitty.min.js
@@ -0,0 +1,6 @@
+/**
+ * fitty v2.3.5 - Snugly resizes text to fit its parent container
+ * Copyright (c) 2021 Rik Schennink (https://pqina.nl/)
+ */
+
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).fitty=t()}(this,(function(){"use strict";return function(e){if(e){var t=function(e){return[].slice.call(e)},n=0,i=1,r=2,o=3,l=[],u=null,a="requestAnimationFrame"in e?function(){e.cancelAnimationFrame(u),u=e.requestAnimationFrame((function(){return f(l.filter((function(e){return e.dirty&&e.active})))}))}:function(){},c=function(e){return function(){l.forEach((function(t){return t.dirty=e})),a()}},f=function(e){e.filter((function(e){return!e.styleComputed})).forEach((function(e){e.styleComputed=m(e)})),e.filter(y).forEach(v);var t=e.filter(p);t.forEach(d),t.forEach((function(e){v(e),s(e)})),t.forEach(S)},s=function(e){return e.dirty=n},d=function(e){e.availableWidth=e.element.parentNode.clientWidth,e.currentWidth=e.element.scrollWidth,e.previousFontSize=e.currentFontSize,e.currentFontSize=Math.min(Math.max(e.minSize,e.availableWidth/e.currentWidth*e.previousFontSize),e.maxSize),e.whiteSpace=e.multiLine&&e.currentFontSize===e.minSize?"normal":"nowrap"},p=function(e){return e.dirty!==r||e.dirty===r&&e.element.parentNode.clientWidth!==e.availableWidth},m=function(t){var n=e.getComputedStyle(t.element,null);return t.currentFontSize=parseFloat(n.getPropertyValue("font-size")),t.display=n.getPropertyValue("display"),t.whiteSpace=n.getPropertyValue("white-space"),!0},y=function(e){var t=!1;return!e.preStyleTestCompleted&&(/inline-/.test(e.display)||(t=!0,e.display="inline-block"),"nowrap"!==e.whiteSpace&&(t=!0,e.whiteSpace="nowrap"),e.preStyleTestCompleted=!0,t)},v=function(e){e.element.style.whiteSpace=e.whiteSpace,e.element.style.display=e.display,e.element.style.fontSize=e.currentFontSize+"px"},S=function(e){e.element.dispatchEvent(new CustomEvent("fit",{detail:{oldValue:e.previousFontSize,newValue:e.currentFontSize,scaleFactor:e.currentFontSize/e.previousFontSize}}))},h=function(e,t){return function(){e.dirty=t,e.active&&a()}},b=function(e){return function(){l=l.filter((function(t){return t.element!==e.element})),e.observeMutations&&e.observer.disconnect(),e.element.style.whiteSpace=e.originalStyle.whiteSpace,e.element.style.display=e.originalStyle.display,e.element.style.fontSize=e.originalStyle.fontSize}},w=function(e){return function(){e.active||(e.active=!0,a())}},z=function(e){return function(){return e.active=!1}},F=function(e){e.observeMutations&&(e.observer=new MutationObserver(h(e,i)),e.observer.observe(e.element,e.observeMutations))},g={minSize:16,maxSize:512,multiLine:!0,observeMutations:"MutationObserver"in e&&{subtree:!0,childList:!0,characterData:!0}},W=null,E=function(){e.clearTimeout(W),W=e.setTimeout(c(r),C.observeWindowDelay)},M=["resize","orientationchange"];return Object.defineProperty(C,"observeWindow",{set:function(t){var n="".concat(t?"add":"remove","EventListener");M.forEach((function(t){e[n](t,E)}))}}),C.observeWindow=!0,C.observeWindowDelay=100,C.fitAll=c(o),C}function x(e,t){var n=Object.assign({},g,t),i=e.map((function(e){var t=Object.assign({},n,{element:e,active:!0});return function(e){e.originalStyle={whiteSpace:e.element.style.whiteSpace,display:e.element.style.display,fontSize:e.element.style.fontSize},F(e),e.newbie=!0,e.dirty=!0,l.push(e)}(t),{element:e,fit:h(t,o),unfreeze:w(t),freeze:z(t),unsubscribe:b(t)}}));return a(),i}function C(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"string"==typeof e?x(t(document.querySelectorAll(e)),n):x([e],n)[0]}}("undefined"==typeof window?null:window)}));