From bef7cc4a6e4398e6f122ef47c928f4cfbb6535fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Thu, 12 Sep 2024 09:30:01 +0200
Subject: [PATCH] css generalized 'tile' (ChannelList)

---
 .../channel/list/channel-list.component.html  | 44 +++++++++----------
 .../channel/list/channel-list.component.less  | 24 +++++++++-
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/main/angular/src/app/pages/channel/list/channel-list.component.html b/src/main/angular/src/app/pages/channel/list/channel-list.component.html
index 8f94a4d..ec24333 100644
--- a/src/main/angular/src/app/pages/channel/list/channel-list.component.html
+++ b/src/main/angular/src/app/pages/channel/list/channel-list.component.html
@@ -1,24 +1,24 @@
-<table>
-  <tr>
-    <th>Titel</th>
-    <th>Typ</th>
-    <th colspan="3">Adresse</th>
-    <th>DPT</th>
-    <th colspan="2">Wert</th>
-  </tr>
-  <tr *ngFor="let channel of channels">
-    <td>{{channel.title}}</td>
-    <td>{{channel.type}}</td>
+<div class="tiles">
+  <div class="tile" *ngFor="let channel of channels">
+    <div>
+      {{ channel.title }}
+    </div>
+    <div class="left">
+      {{ channel.type }}
+    </div>
     <ng-container *ngIf="channel.type === 'KnxGroup'">
-      <td class="first number">{{asKnxGroup(channel).addresMain}}&nbsp;/&nbsp;</td>
-      <td class="middle number">{{asKnxGroup(channel).addresMid}}&nbsp;/&nbsp;</td>
-      <td class="last number">{{asKnxGroup(channel).addresSub}}</td>
-      <td class="number">{{asKnxGroup(channel).dpt}}</td>
+      <div class="left">
+        {{ asKnxGroup(channel).addresMain }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresMid }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresSub }}
+      </div>
+      <div class="right">
+        DPT {{ asKnxGroup(channel).dpt }}
+      </div>
     </ng-container>
-    <ng-container *ngIf="channel.type === 'Logic'">
-      <td colspan="4">{{asLogic(channel).operator}}</td>
-    </ng-container>
-    <td class="number">{{channel.value}}</td>
-    <td>{{channel.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-  </tr>
-</table>
+    <div class="timestamp">
+      {{ channel.timestamp | date:'yyyy-MM-dd HH:mm:ss' || '-' }}
+    </div>
+    <div class="value">
+      {{ channel.value || '-' }}
+    </div>
+  </div>
+</div>
diff --git a/src/main/angular/src/app/pages/channel/list/channel-list.component.less b/src/main/angular/src/app/pages/channel/list/channel-list.component.less
index 1922e7f..dc4ef2e 100644
--- a/src/main/angular/src/app/pages/channel/list/channel-list.component.less
+++ b/src/main/angular/src/app/pages/channel/list/channel-list.component.less
@@ -1,3 +1,23 @@
-table {
-  width: 100%;
+@import "../../../../config";
+
+div {
+  padding: @padding;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.timestamp {
+  clear: left;
+  float: left;
+}
+
+.value {
+  clear: right;
+  float: right;
 }