From cc9941d1d3bc340bc5e52541da7548c5049d09f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Thu, 15 Apr 2021 12:23:22 +0200
Subject: [PATCH] Negative Werte werden deutlich dargestellt.

---
 ui/public/less/lesslib/colors.less |  1 +
 ui/public/less/lesslib/layout.less |  7 +++++++
 ui/src/routes/Views.svelte         | 10 +++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/ui/public/less/lesslib/colors.less b/ui/public/less/lesslib/colors.less
index beab906..bdcae0f 100644
--- a/ui/public/less/lesslib/colors.less
+++ b/ui/public/less/lesslib/colors.less
@@ -6,6 +6,7 @@ Definition der Farben
 @hueSub: 215;
 
 @mainColor: hsl(@hueMain, 90%, 29%);
+@redColor: hsl(0, 90%, 29%);
 @mainColorDark: darken(@mainColor,66%,relativ);
 @mainColorLight: lighten(@mainColor,66%,relativ);
 @subColor: hsl(@hueSub, 90%, 29%);
diff --git a/ui/public/less/lesslib/layout.less b/ui/public/less/lesslib/layout.less
index 50f30b2..ab1e143 100644
--- a/ui/public/less/lesslib/layout.less
+++ b/ui/public/less/lesslib/layout.less
@@ -79,6 +79,13 @@ main {
                         border-bottom: @mainColor solid thin;
                     }
                 }
+            };
+            tbody {
+                td.absence-time {
+                    color: @redColor;
+                    text-decoration-line: underline;
+                    text-decoration-style: dashed;
+                }
             }
         }
         form {
diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte
index 5401f0b..0a665a2 100644
--- a/ui/src/routes/Views.svelte
+++ b/ui/src/routes/Views.svelte
@@ -1,6 +1,14 @@
 <script>
     export let params;
     console.log(params)
+    if (!String.prototype.startsWith) {
+        String.prototype.startsWith = function(searchString, position) {
+            position = position || 0;
+            return this.indexOf(searchString, position) === position;
+        };
+    }
+    $: isNegative = time => time.startsWith('-') ? 'absence-time' : '';
+    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time;
 </script>
 
 <svelte:head>
@@ -36,7 +44,7 @@
                         <td>{record.period}</td>
                         <td>{record.workingDays}</td>
                         <td>{record.totalHours}</td>
-                        <td>{record.overtime}</td>
+                        <td class="{ isNegative(record.overtime) }">{cutMinusChar(record.overtime)}</td>
                     </tr>
                 {/each}
                 </tbody>