diff options
author | Julian Jørgensen <julian@jtle.dk> | 2024-05-25 11:53:43 +0200 |
---|---|---|
committer | Julian Jørgensen <julian@jtle.dk> | 2024-05-25 11:53:43 +0200 |
commit | 2610f9b67e4a915859c029da9b17e9d262b6564e (patch) | |
tree | 4504bf2d995703f583fff199b1ae7e54eef4e432 /templates | |
parent | 6cdd02af0684500b5376d4d4a08feb796fdaf889 (diff) |
Add task ui and editingold
Diffstat (limited to 'templates')
-rw-r--r-- | templates/index.html | 62 | ||||
-rw-r--r-- | templates/parts/entry.html | 12 | ||||
-rw-r--r-- | templates/parts/entryRows.html | 2 | ||||
-rw-r--r-- | templates/parts/task.html | 18 | ||||
-rw-r--r-- | templates/parts/taskRows.html | 11 |
5 files changed, 70 insertions, 35 deletions
diff --git a/templates/index.html b/templates/index.html index b2dc6b0..18ca5f0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -14,6 +14,10 @@ display: flex; } +.dir-column { + flex-direction: column; +} + .flex-grow { flex-grow: 1; } @@ -22,26 +26,39 @@ justify-content: flex-start; } -.week-bar { +.just-space-between { + justify-content: space-between; +} + +#task-bar { margin-left: 10px; border: 1px solid black; } +.short { + max-width: 50px; +} + .status-started { - border-color: green; + background-color: lightgreen; } .status-stopped { - border-color: red; + background-color: lightblue; } + .status-detached { - border-color: blue; + background-color: lightyellow; } #entry-bar { - border-width: 3px; - border-style: solid; + border: 1px solid black; + padding-top: 10px; +} + +#entry-form { padding: 10px; + margin-buttom: 10px; } .entry-box { @@ -50,6 +67,12 @@ #controls-bar { margin-bottom: 10px; } + +#taskForm { + background-color: lightblue; + padding: 10px; + max-width: 500px; +} </style> </head> @@ -60,7 +83,7 @@ <button hx-get="/" hx-replace-url="true" hx-params="date" hx-vals='{"date": "{{.DateInfo.Tomorrow}}"}' hx-target="body">I morgen</button> </div> <div class="flex"> - <div> + <div id="entry-bar"> {{template "entry.html" .Entry}} <div> <div> @@ -80,8 +103,8 @@ </div> </div> </div> - <div class="flex-grow week-bar"> - <form> + <div id="task-bar"> + <form autocomplete="off"> <label for="timeRangeSelect">Vis fra: </label> <select id="timeRangeSelect"> <option value="week">Uge</option> @@ -96,25 +119,8 @@ <option value="m30">30 min</option> </select> </form> - <table> - <tbody> - <tr> - <td>Trifork</td> - <td /> - <td /> - </tr> - <tr> - <td /> - <td>SVT-112: fdsa Dsa ds wqw fdsf fds</td> - <td /> - </tr> - <tr> - <td /> - <td>Helligdag</td> - <td /> - </tr> - </tbody> - </table> + {{ template "task.html" .Task }} + {{ template "taskRows.html" . }} </div> </div> </body> diff --git a/templates/parts/entry.html b/templates/parts/entry.html index 300f543..52f2eb3 100644 --- a/templates/parts/entry.html +++ b/templates/parts/entry.html @@ -1,4 +1,4 @@ -<form id="entry-bar" autocomplete="off" class="status-{{if .Detached}}detached{{else}}{{if .Entry}}started{{else}}stopped{{end}}{{end}}"> +<form id="entry-form" autocomplete="off" class="status-{{if .Detached}}detached{{else}}{{if .Entry}}started{{else}}stopped{{end}}{{end}}"> <input style="display: none;" value="{{ if .Entry }}{{ .Entry.Id }}{{end}}" type="text" name="id" /> {{ if .Detached }} <span>{{ if gt .Entry.Id -1 }}Redigerer opgave {{ .Entry.Id }}{{else}}Redigerer ny opgave{{end}}{{ if .Tracking }}, med opgave i baggrunden!{{else}}.{{end}}</span><br> @@ -43,7 +43,7 @@ <button hx-put="/save{{if .Detached}}?detached=true{{end}}" hx-trigger="click" - hx-target="#entry-bar" + hx-target="#entry-form" hx-swap="outerHTML" >Gem </button> @@ -53,7 +53,7 @@ <button hx-get="/tracking" hx-trigger="click" - hx-target="#entry-bar" + hx-target="#entry-form" hx-swap="outerHTML" >Tilbage</button> {{ end }} @@ -62,21 +62,21 @@ <button hx-post="/stop" hx-trigger="click" - hx-target="#entry-bar" + hx-target="#entry-form" hx-swap="outerHTML" >Stop</button> {{ else }} <button hx-post="/start" hx-trigger="click" - hx-target="#entry-bar" + hx-target="#entry-form" hx-swap="outerHTML" >Start ny</button> {{ end }} <button hx-get="/newDetached" hx-trigger="click" - hx-target="#entry-bar" + hx-target="#entry-form" hx-swap="outerHTML" >Manuel</button> {{ end }}<input readonly type="text" name="date" {{if .Entry}}value="{{ .Entry.Date }}"{{end}} /> diff --git a/templates/parts/entryRows.html b/templates/parts/entryRows.html index 9e9c0eb..8f10ee3 100644 --- a/templates/parts/entryRows.html +++ b/templates/parts/entryRows.html @@ -7,7 +7,7 @@ <td>{{ if $entry.Tag}}{{ $entry.Tag }}{{end}}</td> <td>{{ $entry.Comment }}</td> <td> - {{ if $entry.To }}<button hx-trigger="click" hx-swap="outerHTML" hx-target="#entry-bar" hx-get="/edit?id={{$entry.Id}}">e</button>{{end}} + {{ if $entry.To }}<button hx-trigger="click" hx-swap="outerHTML" hx-target="#entry-form" hx-get="/edit?id={{$entry.Id}}">e</button>{{end}} </td> </tr> {{ end }} diff --git a/templates/parts/task.html b/templates/parts/task.html new file mode 100644 index 0000000..a366dcf --- /dev/null +++ b/templates/parts/task.html @@ -0,0 +1,18 @@ +<form id="taskForm" autocomplete="off"> + {{if gt .Task.Id -1}} + <label for="taskIdInput">Opgave: </label> + <input name="id" class="short" type="text" readonly value="{{.Task.Id}}" /> + <button hx-get="/task/empty" hx-trigger="click" hx-target="#taskForm" hx-swap="outerHTML">X</button><br> + {{end}} + <div class="flex dir-column"> + <input type="text" name="text" value="{{.Task.Text}}" /> + <div class="flex just-space-between"> + <div> + <label for="taskGroupInput">Gruppe: </label> + <input name="group" id="taskGroupInput" {{if .Task.Group}}value="{{.Task.Group}}"{{end}} type="text" /> + </div> + <input class="short" name="ident" type="text" {{if .Task.Ident}}value="{{.Task.Ident}}"{{end}} /> + </div> + </div> + <button hx-post="/task/save" hx-trigger="click" hx-target="#taskForm" hx-swap="outerHTML">Save</button> +</form> diff --git a/templates/parts/taskRows.html b/templates/parts/taskRows.html new file mode 100644 index 0000000..a2a6020 --- /dev/null +++ b/templates/parts/taskRows.html @@ -0,0 +1,11 @@ +<table> + <tbody hx-swap="outerHTML" hx-trigger="changedTasks from:body" hx-get="/task/list"> + {{ range $task := .Tasks }} + <tr> + <td>Trifork</td> + <td /> + <td /> + </tr> + {{ end }} + </tbody> +</table> |