gancio-flyers/templates/index.html

54 lines
1.7 KiB
HTML
Raw Normal View History

2023-10-09 17:52:29 +02:00
<!doctype html>
<style media="screen">
body {
font-size: 18px;
}
select, label, input {
font-size: 20px;
}
input[type="checkbox"] {
width: 18px;
height: 18px;
}
</style>
2023-10-09 17:52:29 +02:00
<title>Generatore di volantini</title>
<h1>Generatore di volantini per balotta.org</h1>
2023-10-09 17:52:29 +02:00
<div>
Scegli gli eventi che vuoi mettere nel volantino e premi genera.
<br>
2023-10-17 22:55:48 +02:00
Per stampare fai "File >> Stampa" Scegli come destinazione "Salva come PDF", seleziona il giusto formato di carta (A3) e ricordati di selezionare anche "Print background".
2023-10-09 17:52:29 +02:00
<br>
2023-10-17 22:54:31 +02:00
L'attuale layout può contenere fino a <span id="maxEvents"></span> eventi.
2023-10-09 17:52:29 +02:00
</div>
2023-10-16 18:35:45 +02:00
<br>
2023-10-09 17:52:29 +02:00
<form action="/flyer" target="_blank">
<label for="template">Scegli un template: </label>
2023-10-17 22:54:31 +02:00
<select onchange="templateSelected(this.value)" id="template" name="template">
2023-10-17 20:18:31 +02:00
{% for template in templates %}
<option value="{{template.name}}">{{template.name}}</option>
{% endfor %}
</select>
<br><br>
2023-10-17 20:18:31 +02:00
{% for event in events %}
<input type="checkbox" id="{{event.id}}" name="events" value="{{event.id}}">
2023-10-09 17:52:29 +02:00
<label for="{{event.id}}"> {{loop.index}} [ {{event.when}} ] {{ event.title }}</label><br>
{% endfor %}
<br>
<input type="submit" value="Genera il volantino">
2023-10-09 17:52:29 +02:00
</form>
<script>
const templates={{templates|tojson}}
2023-10-17 22:54:31 +02:00
function templateSelected(templateName) {
const template = templates.find((t) => t.name == templateName)
const events = document.querySelectorAll("[name=events]")
2023-10-17 22:54:31 +02:00
document.querySelector("#maxEvents").innerHTML = template.maxEvents
var maxEvents = template.maxEvents
events.forEach((e) => {
e.checked = maxEvents > 0
maxEvents--
})
}
2023-10-17 22:54:31 +02:00
document.querySelector("#template").value = "{{default_template}}"
templateSelected("{{default_template}}")
</script>