Rework addTime

This commit is contained in:
2024-04-16 23:34:20 +02:00
parent 13a85f4218
commit 6dbad4dbc8
4 changed files with 196 additions and 155 deletions

View File

@ -21,41 +21,60 @@ templ TimerTokenForm(timer model.Timer) {
</p>
}
templ TimerView(timer model.Timer) {
<div class="timer">
<h1>Timer "{ timer.Name }"</h1>
<p><a href="/">Back to list</a></p>
<p>Start time: <local-date>{ timer.StartTime.AsUTCString() }</local-date></p>
<p>End time: <local-date>{ timer.EndTime.AsUTCString() }</local-date></p>
<p>
Total time:
<timer-countdown
start={ timer.StartTime.AsUTCString() }
end={ timer.EndTime.AsUTCString() }
></timer-countdown>
</p>
<p>
Remaining time:
<timer-countdown
end={ timer.EndTime.AsUTCString() }
></timer-countdown>
</p>
if !timer.IsFinished() {
<h3>Add time</h3>
<p>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/15m") }>15 minutes</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/30m") }>30 minutes</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/1h") }>1 hour</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/2h") }>2 hours</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/6h") }>6 hours</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/12h") }>12 hours</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/1d") }>1 day</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/1w") }>1 week</button>
<button hx-target="closest .timer" hx-post={ fmt.Sprint("/timer/", timer.Id, "/addTime/4w") }>4 weeks</button>
</p>
}
<h3>API token</h3>
@TimerTokenForm(timer)
</div>
func renderTimeString(value int, unit string) string {
s := ""
if value > 1 { s = "s" }
return fmt.Sprint(value, " ", unit, s)
}
templ timeButton(id model.UUID, value int, unit string) {
<button
hx-target=".timer-info"
hx-post={ fmt.Sprint("/timer/", id, "/addTime") }
hx-include="next input"
>{ renderTimeString(value, unit) }</button>
<input type="hidden" name="timeToAdd" value={ fmt.Sprint(value, "", unit[:1]) } />
}
templ TimerInfo(timer model.Timer) {
<h1>Timer "{ timer.Name }"</h1>
<p><a href="/">Back to list</a></p>
<p>Start time: <local-date>{ timer.StartTime.AsUTCString() }</local-date></p>
<p>End time: <local-date>{ timer.EndTime.AsUTCString() }</local-date></p>
<p>
Total time:
<timer-countdown
start={ timer.StartTime.AsUTCString() }
end={ timer.EndTime.AsUTCString() }
></timer-countdown>
</p>
<p>
Remaining time:
<timer-countdown
end={ timer.EndTime.AsUTCString() }
></timer-countdown>
</p>
}
templ TimerView(timer model.Timer) {
<div class="timer-info">
@TimerInfo(timer)
</div>
if !timer.IsFinished() {
<h3>Add time</h3>
<p>
@timeButton(timer.Id, 15, "minute")
@timeButton(timer.Id, 30, "minute")
@timeButton(timer.Id, 1, "hour")
@timeButton(timer.Id, 2, "hour")
@timeButton(timer.Id, 6, "hour")
@timeButton(timer.Id, 12, "hour")
@timeButton(timer.Id, 1, "day")
@timeButton(timer.Id, 1, "week")
@timeButton(timer.Id, 4, "week")
</p>
}
<h3>API token</h3>
@TimerTokenForm(timer)
}