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%);

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 {

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>