diff options
| author | Julian Jørgensen <julian@jtle.dk> | 2024-05-23 21:34:28 +0200 |
|---|---|---|
| committer | Julian Jørgensen <julian@jtle.dk> | 2024-05-23 21:34:28 +0200 |
| commit | 19f8454a680c5231df68fee36ed9758587df316c (patch) | |
| tree | 33521610573c6e075a5625e861c8677caa5dc615 /templates | |
| parent | dd11cf4ab199e5d53d03dc95b24007a12727ad70 (diff) | |
Rudimentary task editing
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 75 | ||||
| -rw-r--r-- | templates/parts/entry.html | 81 | ||||
| -rw-r--r-- | templates/parts/entryRows.html | 12 |
3 files changed, 115 insertions, 53 deletions
diff --git a/templates/index.html b/templates/index.html index 3654855..c408fb0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,6 +6,9 @@ <title>Tidsreg</title> + <!-- TODO REMOVE --> + <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.js" integrity="sha384-qbtR4rS9RrUMECUWDWM2+YGgN3U4V4ZncZ0BvUcg9FGct0jqXz3PUdVpU1p0yrXS" crossorigin="anonymous"></script> + <style> .flex { display: flex; @@ -28,7 +31,14 @@ border-color: green; } -.entry-bar { +.status-stopped { + border-color: red; +} +.status-detached { + border-color: blue; +} + +#entry-bar { border-width: 3px; border-style: solid; padding: 10px; @@ -46,48 +56,11 @@ <body> <div id="controls-bar"> <button>I går</button> - <input type="date"</input> + <input type="date" /> <button>I morgen</button> </div> <div class="flex"> - <div class="status-started entry-bar"> - <div class="flex just-start"> - <div class="entry-box"> - <b>Interval</b> - <div> - <label for="fromTime">Fra: </label> - <input id="fromTime" type="time" class="form-control" aria-label="Time start"> - </div> - <div> - <label for="toTime">Til: </label> - <input id="toTime" type="time" class="form-control" aria-label="Time stop"> - </div> - </div> - <div class="entry-box"> - <b>Mærker</b><br> - <select> - <option value="-">-</option> - <option value="SVT-232">SVT-232</option> - <option value="Ferie">Ferie</option> - </select><br> - <select> - <option value="-">-</option> - <option value="SVT-232">SVT-232</option> - <option value="Ferie">Ferie</option> - </select> - </div> - <div class="entry-box"> - <b>Kommentar</b><br> - <textarea></textarea> - </div> - <div class="entry-box"> - <b>Status</b><br> - <i class="status-started">I gang</i><br> - <span>1:34 timer</span> - </div> - </div> - <button>Start ny</button> - </div> + {{template "entry.html" .Entry}} <div class="flex-grow week-bar"> <b>Uge 42</b> </div> @@ -96,20 +69,16 @@ <div class="flex-grow"> <table> <thead> - <th>-</th> - <th>Fra</th> - <th>Til</th> - <th>Mærker</th> - <th>Beskrivelse</th> - </thead> - <tbody> <tr> - <td><input type="checkbox" /></td> - <td><input type="time" /></td> - <td></td> - <td>Ferie, SVT-232</td> - <td>Ting og sager</td> - </tbody> + <th>Id</th> + <th>Fra</th> + <th>Til</th> + <th>Mærker</th> + <th>Beskrivelse</th> + <th>Handlinger</th> + </tr> + </thead> + {{ template "entryRows.html" . }} </table> </div> </div> diff --git a/templates/parts/entry.html b/templates/parts/entry.html new file mode 100644 index 0000000..f99fb90 --- /dev/null +++ b/templates/parts/entry.html @@ -0,0 +1,81 @@ +<form id="entry-bar" autocomplete="off" class="status-{{if .Detached}}detached{{else}}{{if .Task}}started{{else}}stopped{{end}}{{end}}"> + <input style="display: none;" value="{{ if .Task }}{{ .Task.Id }}{{end}}" type="text" name="id" /> + {{ if .Detached }} + <span>{{ if gt .Task.Id -1 }}Redigerer opgave {{ .Task.Id }}{{else}}Redigerer ny opgave{{end}}{{ if .Tracking }}, med opgave i baggrunden!{{else}}.{{end}}</span><br> + {{end}} + <div class="flex just-start"> + <div class="entry-box"> + <b>Interval</b> + <div> + <label for="fromTime">Fra: </label> + <input name="from" id="fromTime" type="time" class="form-control" {{if .Task}}value="{{formatTime .Task.From}}" required{{end}} aria-label="Time start"> + </div> + <div> + <label for="toTime">Til: </label> + <input name="to" id="toTime" type="time" class="form-control" {{if not .Detached}}disabled{{end}} aria-label="Time stop"> + </div> + </div> + <div class="entry-box"> + <b>Mærker</b><br> + <select> + <option value="-">-</option> + <option value="SVT-232">SVT-232</option> + <option value="Ferie">Ferie</option> + </select><br> + <select> + <option value="-">-</option> + <option value="SVT-232">SVT-232</option> + <option value="Ferie">Ferie</option> + </select> + </div> + <div class="entry-box"> + <b>Kommentar</b><br> + <textarea name="comment">{{if .Task}}{{.Task.Comment}}{{end}}</textarea> + </div> + <div class="entry-box"> + <b>Status</b><br> + {{ if not .Detached}}<i>{{ if .Task }}I gang{{ else }}Stoppet{{ end }}</i><br>{{end}} + {{ if .Task }}<span>1:34 timer</span>{{ end }} + </div> + </div> + + {{ if .Task }} + <button + hx-put="/save{{if .Detached}}?detached=true{{end}}" + hx-trigger="click" + hx-target="#entry-bar" + hx-swap="outerHTML" + >Gem + </button> + {{end}} + {{ if .Detached }} + <button + hx-get="/tracking" + hx-trigger="click" + hx-target="#entry-bar" + hx-swap="outerHTML" + >Tilbage</button> + {{ else }} + {{ if .Task }} + <button + hx-post="/stop" + hx-trigger="click" + hx-target="#entry-bar" + hx-swap="outerHTML" + >Stop</button> + {{ else }} + <button + hx-post="/start" + hx-trigger="click" + hx-target="#entry-bar" + hx-swap="outerHTML" + >Start ny</button> + {{ end }} + <button + hx-get="/newDetached" + hx-trigger="click" + hx-target="#entry-bar" + hx-swap="outerHTML" + >Manuel</button> + {{ end }} +</form> diff --git a/templates/parts/entryRows.html b/templates/parts/entryRows.html new file mode 100644 index 0000000..1b364e3 --- /dev/null +++ b/templates/parts/entryRows.html @@ -0,0 +1,12 @@ +<tbody hx-trigger="changedTasks from:body" hx-get="/entryRows"> + {{ range $task := .Tasks }} + <tr> + <td>{{ $task.Id }}</td> + <td><input type="time" disabled value="{{formatTime $task.From }}" /></td> + <td><input type="time" disabled value="{{formatTime $task.To }}" /></td> + <td>{{ if $task.Tag}}{{ $task.Tag }}{{end}}</td> + <td>{{ $task.Comment }}</td> + <td></td> + </tr> + {{ end }} +</tbody> |