102 lines
4.3 KiB
Cheetah
102 lines
4.3 KiB
Cheetah
{{template "base" .}}
|
||
|
||
{{define "title"}}Abstimmungen{{end}}
|
||
|
||
{{define "body"}}
|
||
<div class="page-header">
|
||
<h1 class="page-title">Abstimmungen</h1>
|
||
<p class="page-subtitle">Aktuelle Abstimmungen der Digitalen Partei Österreich</p>
|
||
</div>
|
||
|
||
{{if .Issues}}
|
||
<div class="card-grid">
|
||
{{range .Issues}}
|
||
<div class="card">
|
||
<div class="card-title">{{.Title}}</div>
|
||
<div class="card-text">{{.Description}}</div>
|
||
<div style="font-size:13px; color:var(--text-muted); margin-top:4px;">
|
||
{{.StartTime.Format "02.01.2006"}} – {{.EndTime.Format "02.01.2006"}}
|
||
</div>
|
||
<div style="display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;">
|
||
<a href="/issues/{{.ID}}" class="btn btn--primary">Details</a>
|
||
{{if $.CanWriteIssues}}
|
||
<button class="btn btn--danger"
|
||
hx-delete="/issues/{{.ID}}"
|
||
hx-confirm="Abstimmung wirklich löschen?">Löschen</button>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{else}}
|
||
<p style="color: var(--text-muted);">Keine Abstimmungen vorhanden.</p>
|
||
{{end}}
|
||
|
||
{{if .CanWriteIssues}}
|
||
<details style="margin-top:32px;">
|
||
<summary class="btn btn--primary" style="display:inline-block; cursor:pointer; list-style:none;">+ Neue Abstimmung</summary>
|
||
<div class="auth-card" style="max-width:520px; margin-top:16px;">
|
||
<h2 class="auth-title">Neue Abstimmung</h2>
|
||
<form method="POST" action="/issues">
|
||
<div class="form-group">
|
||
<label class="form-label">Titel</label>
|
||
<input class="form-input" name="title" type="text" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Beschreibung</label>
|
||
<textarea class="form-input" name="description" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Beginn</label>
|
||
<div style="display:flex; gap:8px;">
|
||
<input class="form-input" name="start_date" type="date" required style="flex:1; min-width:0;">
|
||
{{template "time-input" (dict "name" "start_clock" "value" "12:00" "required" true)}}
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Ende</label>
|
||
<div style="display:flex; gap:8px;">
|
||
<input class="form-input" name="end_date" type="date" required style="flex:1; min-width:0;">
|
||
{{template "time-input" (dict "name" "end_clock" "value" "12:00" "required" true)}}
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Optionen (mind. 2)</label>
|
||
<div id="options-list" style="display:flex; flex-direction:column; gap:8px;">
|
||
<input class="form-input" name="options" type="text" placeholder="Option 1" required>
|
||
<input class="form-input" name="options" type="text" placeholder="Option 2" required>
|
||
</div>
|
||
<button type="button" class="btn btn--secondary" style="margin-top:8px;" onclick="addOption()">+ Option hinzufügen</button>
|
||
</div>
|
||
<button class="btn btn--primary" type="submit">Erstellen</button>
|
||
</form>
|
||
<script>
|
||
(function() {
|
||
function pad(n) { return String(n).padStart(2, '0'); }
|
||
function fmtDate(d) {
|
||
return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate());
|
||
}
|
||
const start = new Date();
|
||
const end = new Date(start);
|
||
end.setDate(end.getDate() + 7);
|
||
document.querySelector('input[name="start_date"]').value = fmtDate(start);
|
||
document.querySelector('input[name="end_date"]').value = fmtDate(end);
|
||
})();
|
||
|
||
function addOption() {
|
||
const list = document.getElementById('options-list');
|
||
const n = list.children.length + 1;
|
||
const input = document.createElement('input');
|
||
input.className = 'form-input';
|
||
input.name = 'options';
|
||
input.type = 'text';
|
||
input.placeholder = 'Option ' + n;
|
||
list.appendChild(input);
|
||
input.focus();
|
||
}
|
||
</script>
|
||
</div>
|
||
</details>
|
||
{{end}}
|
||
{{end}}
|