From 838e2a16faf8090e40f4cca52902f8c7351b5067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Thu, 15 Aug 2024 08:25:34 +0200
Subject: [PATCH] schedule-list responsive

---
 .../list/schedule-list.component.html         |  79 ++++++-----
 .../list/schedule-list.component.less         | 133 ++++++++++++++++--
 .../angular/src/environments/environment.ts   |   2 +-
 src/main/angular/src/styles.less              |   3 +
 4 files changed, 171 insertions(+), 46 deletions(-)

diff --git a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html b/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
index fafb7df..0df5a4a 100644
--- a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
+++ b/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
@@ -2,48 +2,53 @@
   <button (click)="create()">+ Hinzufügen</button>
 </p>
 
-<table>
-  <tr>
-    <th>&nbsp;</th>
-    <th>Bezeichnung</th>
-    <th colspan="3">Nächste</th>
-    <th colspan="3">Eigenschaft</th>
-    <th>Massenausführung</th>
-    <th colspan="3">Letzte</th>
-    <th>&nbsp;</th>
-  </tr>
-  <tr *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
+<div class="schedules">
+  <div class="scheduleBox" *ngFor="let schedule of schedules; trackBy: Schedule.trackBy">
+    <div class="schedule" [class.scheduleEnabled]="schedule.enabled">
 
-    <td class="boolean" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled">
-      <fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
-      <fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
-    </td>
+      <div class="header">
 
-    <td [routerLink]="['/Schedule', {id: schedule.id}]">
-      {{schedule.title}}
-    </td>
+        <div class="enabled" (click)="set(schedule, 'enabled', !schedule.enabled)" [class.true]="schedule.enabled" [class.false]="!schedule.enabled">
+          <fa-icon *ngIf="schedule.enabled" [icon]="faCheckCircle"></fa-icon>
+          <fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
+        </div>
 
-    <td class="number first" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.dayName}}</td>
-    <td class="number middle" [class.empty]="!schedule.next?.nextFuzzyTimestamp">:&nbsp;</td>
-    <td class="number last" [class.empty]="!schedule.next?.nextFuzzyTimestamp">{{schedule.next?.nextFuzzyTimestamp.timeString}}</td>
+        <div class="title" [routerLink]="['/Schedule', {id: schedule.id}]">
+          {{ schedule.title }}
+        </div>
 
-    <td class="number first" [class.empty]="!schedule.next?.property">{{schedule.next?.property?.title}}</td>
-    <td class="number middle" [class.empty]="!schedule.next?.property">&nbsp;=&nbsp;</td>
-    <td class="number last" [class.empty]="!schedule.next?.property">
-      <app-entry-value *ngIf="schedule.next" [entry]="schedule.next" [allowChange]="false"></app-entry-value>
-    </td>
+        <div class="delete" (click)="delete(schedule)">
+          <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
+        </div>
 
-    <td [class.empty]="!schedule.next?.bulk">
-      {{schedule.next?.bulk?.name}}
-    </td>
+      </div>
 
-    <td class="number first" [class.empty]="!schedule.last?.lastFuzzyTimestamp">{{schedule.last?.lastFuzzyTimestamp.dayName}}</td>
-    <td class="number middle" [class.empty]="!schedule.last?.lastFuzzyTimestamp">:&nbsp;</td>
-    <td class="number last" [class.empty]="!schedule.last?.lastFuzzyTimestamp">{{schedule.last?.lastFuzzyTimestamp.timeString}}</td>
+      <div class="timestampBox timestampBoxNext">
+        <div class="timestampTitle">
+          Nächste Ausführung:
+        </div>
+        <div class="timestampTimestamp">
+          <ng-container *ngIf="schedule.next">{{ schedule.next?.nextFuzzyTimestamp.dayName }}:&nbsp;{{ schedule.next?.nextFuzzyTimestamp.timeString }}</ng-container>
+          <ng-container *ngIf="!schedule.next">- - -</ng-container>
+        </div>
+        <div class="timestampBulk" [class.timestampBulkEmpty]="!schedule.next?.bulk" *ngIf="schedule.next?.bulk">
+          {{ schedule.next?.bulk?.name }}
+        </div>
+      </div>
 
-    <td class="delete" (click)="delete(schedule)">
-      <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </td>
+      <div class="timestampBox timestampBoxLast">
+        <div class="timestampTitle">
+          Zuletzt:
+        </div>
+        <div class="timestampTimestamp">
+          <ng-container *ngIf="schedule.last">{{ schedule.last?.lastFuzzyTimestamp.dayName }}:&nbsp;{{ schedule.last?.lastFuzzyTimestamp.timeString }}</ng-container>
+          <ng-container *ngIf="!schedule.last">- - -</ng-container>
+        </div>
+        <div class="timestampBulk" [class.timestampBulkEmpty]="!schedule.last?.bulk" *ngIf="schedule.last?.bulk">
+          {{ schedule.last?.bulk?.name }}
+        </div>
+      </div>
 
-  </tr>
-</table>
+    </div>
+  </div>
+</div>
diff --git a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less b/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
index 36a87cf..546f786 100644
--- a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
+++ b/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
@@ -1,11 +1,128 @@
-select {
-  background-color: transparent;
-  border-width: 0;
-  width: 100%;
-  outline: none;
-  font-family: monospace;
+.schedules {
+  font-size: 4vw;
+  padding: 0.25em;
+
+  .scheduleBox {
+
+    .schedule {
+      margin: 0.25em;
+      border: 0.1em solid gray;
+      border-radius: 0.2em;
+      background-color: #FFF0F0;
+
+      .header {
+        border-bottom: 0.1em solid gray;
+
+        .enabled {
+          float: left;
+          padding: 0.5em;
+        }
+
+        .title {
+          float: left;
+          padding: 0.5em;
+          font-weight: bold;
+        }
+
+        .delete {
+          float: right;
+          padding: 0.5em;
+        }
+
+      }
+
+      .timestampBoxNext {
+        clear: left;
+        float: left;
+        width: 100%;
+        height: 4em;
+        border-bottom: 0.1em solid lightgray;
+
+        div {
+          float: left;
+          padding: 0.1em;
+          height: 2em;
+        }
+
+        .timestampTitle {
+          // -
+        }
+
+        .timestampTimestamp {
+          float: right;
+          text-align: right;
+        }
+
+        .timestampBulk {
+          clear: both;
+          float: right;
+          width: 100%;
+          text-align: right;
+        }
+
+        .timestampBulkEmpty {
+          clear: both;
+          float: right;
+          width: 100%;
+          text-align: right;
+          color: gray;
+        }
+
+      }
+
+      .timestampBoxLast {
+        clear: left;
+        float: left;
+        width: 100%;
+        color: gray;
+        font-size: 80%;
+
+        div {
+          float: left;
+          padding: 0.1em;
+          height: 2em;
+        }
+
+        .timestampTitle {
+          width: 4em;
+        }
+
+        .timestampTimestamp {
+          text-align: right;
+        }
+
+        .timestampBulk {
+          float: right;
+          text-align: right;
+        }
+
+        .timestampBulkEmpty {
+          float: right;
+          text-align: right;
+          color: gray;
+        }
+
+      }
+
+    }
+
+    .scheduleEnabled {
+      background-color: #F0FFF0;
+    }
+
+  }
+
 }
 
-th {
-  background-color: lightblue;
+@media (min-width: 1001px) {
+
+  .schedules {
+    font-size: 16px;
+
+    .scheduleBox {
+      float: left;
+      width: 33.33%;
+    }
+  }
+
 }
diff --git a/src/main/angular/src/environments/environment.ts b/src/main/angular/src/environments/environment.ts
index eb18ddd..5e41d22 100644
--- a/src/main/angular/src/environments/environment.ts
+++ b/src/main/angular/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 import {getBaseUrl} from "./UrlHelper";
 
-const PROD: boolean = false;
+const PROD: boolean = true;
 
 export const environment = {
   production: false,
diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less
index 7ec0458..a5dcad5 100644
--- a/src/main/angular/src/styles.less
+++ b/src/main/angular/src/styles.less
@@ -9,7 +9,10 @@ a {
 }
 
 div {
+  box-sizing: border-box;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 img {