[refactor] further templating work

This commit is contained in:
2026-03-11 03:40:49 +01:00
parent 7298a8c8ff
commit 948bbf74d1
6 changed files with 50 additions and 32 deletions

3
.prettierignore Normal file
View File

@@ -0,0 +1,3 @@
src-tauri/templates/overlay/browsersource.html.j2
**/*.css.j2
**/*.js.j2

View File

@@ -2,7 +2,7 @@
"plugins": ["prettier-plugin-jinja-template"],
"overrides": [
{
"files": ["*.j2"],
"files": ["**/*.j2"],
"options": {
"parser": "jinja-template"
}

View File

@@ -1,18 +1,20 @@
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background: transparent;
margin: 0;
padding: 0;
}
{{ style }}
body {
background: transparent;
margin: 0;
padding: 0;
}
{{ source_style }}
</style>
</head>
<body>
</head>
<body>
{{ content }}
<script>
{{ script }}
{{ script }}
</script>
</body>
</body>
</html>

View File

@@ -1,27 +1,32 @@
.countdown-item {
display: flex;
}
.countdown-list.vertical {
flex-direction: column;
}
.countdown-list.horizontal {
flex-direction: row;
}
.countdown-item {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.countdown-item.hidden {
display: none;
}
#timer-{{ id }} {
font-size: {{ font_size }}rem;
{% for c in countdowns %}
#timer-{{ c.id }} {
font-size: {{ c.font_size }}rem;
font-family: monospace;
color: {{ text_color }};
color: {{ c.text_color }};
text-shadow: 2px 2px 4px black;
}
#icon { width: { icon_size }; height: { icon_size }; vertical-align: middle; margin-right: 0.5rem; }
#icon-{{ c.id }} {
width: {{ c.icon_size }};
height: {{ c.icon_size }};
vertical-align: middle;
margin-right: 0.5rem;
}
{% endfor %}

View File

@@ -1,10 +1,18 @@
<div class="countdown-list {{ layout }}">
{% for c in countdowns %}
<div id="countdown-{{ c.id }}" class="countdown-item{% if hide_idle and c.state == 'Idle' %} hidden{% endif %}">
{% if c.icon %}<img ...>{% endif %}
<span id="timer-{{ c.id }}" style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}">
{{ c.remaining }}
</span>
<div
id="countdown-{{ c.id }}"
class="countdown-item{% if hide_idle and c.state == 'Idle' %}hidden{% endif %}"
>
{% if c.icon %}
<img id="icon-{{ c.id }}" src="{{ c.icon }}" alt="{{ c.name }}" />
{% endif %}
<span
id="timer-{{ c.id }}"
style="font-size:{{ c.font_size }}rem; color:{{ c.text_color }}"
>
{{ c.remaining }}
</span>
</div>
{% endfor %}
</div>

View File

@@ -1,14 +1,14 @@
const hideIdle = {{ hide_idle | lower }};
const es = new EventSource('/sse/countdown/{{ id }}');
es.addEventListener('tick', e => {
const es = new EventSource('/sse/group/{{ id }}');
es.addEventListener('countdown-tick', e => {
const {id, remaining} = JSON.parse(e.data);
document.getElementById('countdown-' + id).innerText = remaining;
document.getElementById('timer-' + id).textContent = remaining;
});
es.AddEventListener('state', e => {
es.addEventListener('countdown-state', e => {
const {id, state} = JSON.parse(e.data);
if (hideIdle) {
document.getElementById('countdown-' + id).style.display = state === 'idle' ? 'none' : '';
document.getElementById('countdown-' + id).style.display = state === 'Idle' ? 'none' : '';
}
}
});
es.addEventListener('reload', () => location.reload());
es.onerror = () => setTimeout(() => location.reload(), 3000);