From 2610f9b67e4a915859c029da9b17e9d262b6564e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20J=C3=B8rgensen?= <julian@jtle.dk>
Date: Sat, 25 May 2024 11:53:43 +0200
Subject: Add task ui and editing

---
 templates/index.html           | 62 +++++++++++++++++++++++-------------------
 templates/parts/entry.html     | 12 ++++----
 templates/parts/entryRows.html |  2 +-
 templates/parts/task.html      | 18 ++++++++++++
 templates/parts/taskRows.html  | 11 ++++++++
 5 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 templates/parts/task.html
 create mode 100644 templates/parts/taskRows.html

(limited to 'templates')

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>
-- 
cgit v1.2.3