web page showing the counter
This commit is contained in:
boyska
parent
b95d96bc0f
commit
20c30d0b05
4 changed files with 90 additions and 7 deletions
43
pizzicore/pages/index.html
Normal file
43
pizzicore/pages/index.html
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
span { width: 100%; margin: 0 auto; }
|
||||||
|
header { width: 100%; margin: 0px auto; }
|
||||||
|
body {
|
||||||
|
background: #ddd;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#container {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
img, svg, text {
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
height: auto !important;
|
||||||
|
width: auto !important;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.counter { line-height: 1; margin: 0; }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body data-cid="0">
|
||||||
|
<!--h1 id="counter">asd</h1-->
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<img>
|
||||||
|
<svg viewBox="0 0 40 18">
|
||||||
|
<text x="0" y="15">Fit Me</text>
|
||||||
|
</svg>
|
||||||
|
</img>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/static/js/fitty.min.js"></script>
|
||||||
|
<script type="application/javascript" src="/static/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -2,17 +2,14 @@ import secrets
|
||||||
import logging
|
import logging
|
||||||
import dbm
|
import dbm
|
||||||
from collections import defaultdict
|
from collections import defaultdict
|
||||||
|
from mimetypes import guess_type
|
||||||
|
|
||||||
from asyncio.queues import Queue
|
from asyncio.queues import Queue
|
||||||
from fastapi import (
|
from fastapi import FastAPI, WebSocket, HTTPException, Depends, status, Response
|
||||||
FastAPI,
|
|
||||||
WebSocket,
|
|
||||||
HTTPException,
|
|
||||||
Depends,
|
|
||||||
status,
|
|
||||||
)
|
|
||||||
from starlette.websockets import WebSocketDisconnect
|
from starlette.websockets import WebSocketDisconnect
|
||||||
from fastapi.security import HTTPBasic, HTTPBasicCredentials
|
from fastapi.security import HTTPBasic, HTTPBasicCredentials
|
||||||
|
from fastapi.encoders import jsonable_encoder
|
||||||
|
from fastapi.staticfiles import StaticFiles
|
||||||
from pydantic import BaseModel
|
from pydantic import BaseModel
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -86,6 +83,7 @@ class Manager:
|
||||||
|
|
||||||
|
|
||||||
app = FastAPI()
|
app = FastAPI()
|
||||||
|
app.mount("/static", StaticFiles(directory="static"), name="static")
|
||||||
manager = Manager()
|
manager = Manager()
|
||||||
counter_store = Store(
|
counter_store = Store(
|
||||||
n=1, db_path="/var/lib/pizzicore/pizzicore.dbm", manager=manager
|
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)
|
manager.unsubscribe(cid, q)
|
||||||
return
|
return
|
||||||
await q.get()
|
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")
|
||||||
|
|
|
||||||
24
pizzicore/static/js/app.js
Normal file
24
pizzicore/static/js/app.js
Normal file
|
|
@ -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()
|
||||||
6
pizzicore/static/js/fitty.min.js
vendored
Normal file
6
pizzicore/static/js/fitty.min.js
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
/**
|
||||||
|
* fitty v2.3.5 - Snugly resizes text to fit its parent container
|
||||||
|
* Copyright (c) 2021 Rik Schennink <rik@pqina.nl> (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)}));
|
||||||
Loading…
Reference in a new issue