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 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")
|
||||
|
|
|
|||
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