-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (127 loc) · 7.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bei der Planung von Kinder- und Jugendfreizeiten ist es organisatorisch von Vorteil, wenn die Leitenden nicht mehrere Tage hintereinander die Hauptleitung übernehmen müssen. Der DayMatcher 3000 hilft bei der optimalen Verteilung.">
<title>DayMatcher 3000</title>
<link rel="stylesheet" href="./styles/0_base.css" />
<link rel="stylesheet" href="./styles/1_typography.css" />
<link rel="stylesheet" href="./styles/2_structure.css" />
<link rel="stylesheet" href="./styles/3_table.css" />
<link rel="stylesheet" href="./styles/4_form.css" />
<script src="./scripts/main.js" defer type="module"></script>
</head>
<body>
<main x-data="matcher">
<h1>DayMatcher 3000 🗓</h1>
<p>Bei der Planung von Kinder- und Jugendfreizeiten ist es organisatorisch von Vorteil, wenn die Leitenden nicht mehrere Tage hintereinander die Hauptleitung übernehmen müssen. Der <strong>DayMatcher 3000</strong> hilft bei der zeitsparenden und fairen Verteilung von Tagesleitung, Küchendienst und Putzdienst.</p>
<p>Das System erstellt als Ergebnis eine Tabelle mit den optimal verteilten Tagesleitungen. Auch die Aufteilung zu Küchendienst und Putzdienst wird so geregelt: Wer an dem einen Tag Tagesleitung ist, kümmert sich am Tag darauf um die Küche und am dritten Tag um den Putzdienst. Der Küchendienst am Abend wird jedoch im Idealfall von der Tagesleitung übernommen. So kann die restliche Leiterrunde in der Zeit den nächsten Tag besprechen, da dieser für die aktuelle Tagesleitung weniger relevant ist, da sie den Tag in der Küche verbringen wird.</p>
<h2>1. Tagesplanung</h2>
<p>Füge hier die Tage der geplanten Aktion hinzu. Wenn einzelne Tage bereits fest mit einem Leitungsteam geplant sind, kannst du auch das entsprechend eintragen. Ansonsten lässt du das Feld leer, damit der DayMatcher automatisch ein Leitungsteam auswählt. Du kannst mehrere Namen mit Kommata trennen.</p>
<section>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Programm</th>
<th colspan="2">Leitende</th>
</tr>
</thead>
<tbody>
<template x-for="(day, index) in days">
<tr>
<th x-text="index + 1"></th>
<td>
<input x-bind:name="'program-' + index" x-model="days[index].program" placeholder="Geländespiel" />
</td>
<td>
<input x-bind:name="'leaders-' + index" x-model="days[index].leaders" placeholder="Anna, Till" />
</td>
<td>
<button x-on:click="days.splice(index, 1)" class="icon">🗑</button>
</td>
</tr>
</template>
</tbody>
</table>
<button x-on:click="days.push({ program: '', leaders: '' })">Tag hinzufügen</button>
</section>
<section>
<h2>2. Leitungsteams</h2>
<p>Lege hier eine Liste mit freien Leitungsteams an, die der <strong>DayMatcher 3000</strong> auf die freien Tage verteilen soll. Du kannst mehrere Namen mit Kommata trennen.</p>
<ul class="leaders">
<template x-for="(leader, index) in free">
<li>
<span x-text="leader"></span>
<button x-on:click="free.splice(index, 1)" class="icon">🗑</button>
</li>
</template>
</ul>
<form x-on:submit.prevent="if (newTeam.length > 0) { free.push(newTeam); newTeam = ''; }" x-data="{ newTeam: '' }">
<input x-model="newTeam" /><br>
<br>
<button type="submit">Leitungsteam hinzufügen</button>
</form>
</section>
<section>
<h2>3. Ergebnis</h2>
<p>Der <strong>DayMatcher 3000</strong> verteilt auf Knopfdruck die Leitungsteams auf die freien Tage. Das System macht dies nach dem Zufallsprinzip, sodass jedes Mal ein anderes Ergebnis herauskommen kann.</p>
<p class="error" x-show="free.length !== freeDays">
Du benötigst genauso viele freie Leitungsteams wie unvergebene Tagesleitungen.
</p>
<table x-show="solution.length > 0">
<thead>
<tr>
<th>Tag</th>
<th>Programm</th>
<th>Tagesleitung</th>
<th>Küchenteam</th>
<th>Putzteam</th>
</tr>
</thead>
<tbody>
<template x-for="(day, index) in solution">
<tr>
<th x-text="index + 1"></th>
<td>
<span class="fake-input" x-text="days[index].program.length > 0 ? days[index].program || '–' : '–'"></span>
</td>
<td>
<span class="fake-input" x-text="day.join(', ')"></span>
</td>
<td>
<span class="fake-input" x-text="getDay(solution, index, -1).join(', ')"></span>
</td>
<td>
<span class="fake-input" x-text="getDay(solution, index, -2).join(', ')"></span>
</td>
</tr>
</template>
</tbody>
</table>
<label for="options-pause">Pause nach Tagesleitung</label>
<select name="options-pause" x-model="options.pause">
<option value="0">0 Tage</option>
<option value="1">1 Tag</option>
<option value="2">2 Tage</option>
<option value="3">3 Tage</option>
</select>
<br><br>
<button x-bind:disabled="free.length !== freeDays" x-on:click="solve()" type="button">Teams verteilen</button>
<p><small>Tipp: Leitungsteams, die über mehrere Tage hintereinander bestehen bleiben sollen, einfach als einen Tag eintragen. Die Ergebnis-Tabelle kann kopiert und in Office-Programme übertragen werden.</small></p>
</section>
</main>
<footer>
<div id="smallprint">
<a href="https://plausible.io/tillsanders.github.io%2Fday-matcher-3000">Statistik</a>
<a href="https://till-sanders.de/privacy">Datenschutz</a>
<a href="https://till-sanders.de/about">Impressum</a>
<a href="https://github.com/tillsanders/day-matcher-3000" title="Projekt auf GitHub">GitHub</a>
</div>
</footer>
<!-- GitHub Corner (https://tholman.com/github-corners/) -->
<a href="https://github.com/tillsanders/day-matcher-3000" class="github-corner" aria-label="Projekt auf GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9B2; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<script defer data-domain="tillsanders.github.io/day-matcher-3000" src="https://plausible.io/js/plausible.js"></script>
</body>
</html>