miklo
/
queue-manager
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add scroll

This commit is contained in:
miklo 2025-12-04 13:24:52 +01:00
parent 9e356b9da4
commit 1415f2a8f0
2 changed files with 69 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.py
View File

@ -80,7 +80,6 @@ def current_api():
# Admin UI: start/reset system by providing count of tickets (1..N)
# @app.route("/admin", methods=[":wGET", "POST"])
def admin():
db = get_db()

70
src/templates/infokiosk.html
View File

@ -8,26 +8,33 @@
:root { height: 100%; }
html, body { height: 100%; margin: 0; font-family: Helvetica, Arial; color: #000; }
.viewport { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
.video-area{
flex:0 0 85%;
position:relative;
overflow:hidden;
background:#000;
}
.video-area { flex: 0 0 85%; position: relative; overflow: hidden; background: #000; }
body { background: #fdb515; }
.info-bar {
flex: 0 0 15%;
background: #fdb515;
color: #000;
display: flex;
// display: block;
width: 300% ;
align-items: center;
vertical-align:middle;
box-sizing: border-box;
height: 15vh;
min-height: 50px;
padding-left: 4vh;
padding-right: 4vh;
overflow: hidden;
white-space: nowrap;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
.video-area video {
position: absolute;
@ -39,24 +46,12 @@
object-fit: cover;
}
.info-bar, .info-bar .info-left, .info-bar .info-right {
font-size: 5vh;
font-weight:700;
line-height: 1;
}
.info-left, .info-right{
display:flex;
align-items:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.info-left{flex:1 1 70%; font-weight:700;}
.info-right{flex:0 0 auto; margin-left:16px; font-weight:700;}
.num-inline {
display: inline-block;
margin-left: 1vh;
@ -64,63 +59,54 @@
border: 0.4vh solid #000;
border-radius: 0.8vh;
background: transparent;
font-weight:700;
line-height: 1;
vertical-align: middle;
}
@media (max-width: 700px) {
.video-area{flex-basis:70%}
.video-area { flex-basis: 70%; }
}
</style>
<script>
async function fetchCurrent() {
try {
const r = await fetch('/current', { cache: 'no-store' });
const j = await r.json();
// update inline list in info bar
const numList = document.getElementById('num-list');
const nums = j.current || [];
if(nums.length === 0){
numList.innerHTML = '-';
} else {
numList.innerHTML = nums.map(n => '<span class="num-inline">' + String(n) + '</span>').join(' ');
}
// update waiting count
document.getElementById('waiting-count').textContent = (j.waiting != null) ? j.waiting : '0';
const waitingCount = j.waiting != null ? j.waiting : '0';
const infoText = 'Chcesz spróbować swoich sił w lutowaniu? Odbierz numer i sprawdzaj kolejkę na queue.hswro.org';
const numsFormatted = nums.map(n => `<span class="num-inline">${n}</span>`).join(' ');
const numList = nums.length > 0 ? `| Zapraszamy z numerami: ${numsFormatted}` : '';
const combinedText = `${infoText} | Oczekujących: ${waitingCount} ${numList}`;
// Wstawienie tekstu do dolnego paska
document.getElementById('info-bar-text-1').innerHTML = combinedText;
// document.getElementById('info-bar-text-2').innerHTML = combinedText;
} catch (e) {
console.error('fetchCurrent error', e);
}
}
window.addEventListener('load', () => {
fetchCurrent();
// poll time
setInterval(fetchCurrent, 5000);
});
</script>
</head>
<body>
<div class="viewport">
<div class="video-area">
<video id="bgvideo" autoplay loop playsinline>
<video id="bgvideo" autoplay loop muted playsinline>
<source src="{{ url_for('static', filename='background.mp4') }}" type="video/mp4">
</video>
</div>
<div class="info-bar">
<div id="info-left" class="info-left">
Zapraszamy z numerami: <span id="num-list">-</span>
</div>
<div class="info-right">
Oczekujących: <span id="waiting-count" style="margin-left:1vh;">0</span>
</div>
<div id="info-bar-text-1" class="info-left">-</div>
</div>
</div>
</body>
</html>