From 6498a181c8d258b4827370c4c7c64c162e6572e6 Mon Sep 17 00:00:00 2001
From: Niko Reunanen <niko.reunanen@ntsol.io>
Date: Sat, 1 Mar 2025 11:16:26 +0200
Subject: [PATCH] Better formatting for total hours table in the modal. Include
 the project identifier in the total hour computation.

---
 back-end/main.go                      |  7 ++++---
 front-end/src/components/Controls.vue | 13 +++++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/back-end/main.go b/back-end/main.go
index fd45a6a..8a13299 100644
--- a/back-end/main.go
+++ b/back-end/main.go
@@ -21,8 +21,9 @@ type Entry struct {
 }
 
 type Project struct {
-	Id   string
-	Name string
+	Id         string
+	Identifier string
+	Name       string
 }
 
 func main() {
@@ -75,7 +76,7 @@ func main() {
 			projects_map = make(map[string]string)
 
 			for _, e := range projects {
-				projects_map[e.Id] = e.Name
+				projects_map[e.Id] = fmt.Sprintf("(%s) %s", e.Identifier, e.Name)
 			}
 
 			var hours map[string]float64
diff --git a/front-end/src/components/Controls.vue b/front-end/src/components/Controls.vue
index 6ff8679..347cd6e 100644
--- a/front-end/src/components/Controls.vue
+++ b/front-end/src/components/Controls.vue
@@ -58,18 +58,15 @@ async function showModalTotalHours() {
   <Button label=">" @click="setDate(1)" style="margin-left: 3px;" />
   <Button label="total hours" @click="showModalTotalHours" style="margin-left: 20px;" />
   <Dialog v-model:visible="modalTotalHours.visible" modal header="Total hours">
-    <table>
+    <table style="width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px;">
       <tbody>
         <tr v-for="project in Object.keys(modalTotalHours.hours)">
-          <td>{{ project }}</td>
-          <td>{{ modalTotalHours.hours[project] }}</td>
-        </tr>
-        <tr v-if="modalTotalHours.total > 0">
-          <td colspan="2"><hr /></td>
+          <td style="border: 1px solid #ccc; padding: 8px;">{{ project }}</td>
+          <td style="border: 1px solid #ccc; padding: 8px;">{{ modalTotalHours.hours[project] }}</td>
         </tr>
         <tr>
-          <td>Total hours</td>
-          <td>{{ modalTotalHours.total }}</td>
+          <td style="border: 1px solid #ccc; padding: 8px; background: #f4f4f4; font-weight: bold;">Total hours</td>
+          <td style="border: 1px solid #ccc; padding: 8px; background: #f4f4f4; font-weight: bold;">{{ modalTotalHours.total }}</td>
         </tr>
       </tbody>
     </table>