[refactor] further templating work
This commit is contained in:
3
.prettierignore
Normal file
3
.prettierignore
Normal file
@@ -0,0 +1,3 @@
|
||||
src-tauri/templates/overlay/browsersource.html.j2
|
||||
**/*.css.j2
|
||||
**/*.js.j2
|
||||
@@ -2,7 +2,7 @@
|
||||
"plugins": ["prettier-plugin-jinja-template"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.j2"],
|
||||
"files": ["**/*.j2"],
|
||||
"options": {
|
||||
"parser": "jinja-template"
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
Reference in New Issue
Block a user