From 2ccca9e98140e496f404d191644ecd3a1b71b507 Mon Sep 17 00:00:00 2001
From: Tobias Peper <tobias@peper.info>
Date: Fri, 11 Apr 2025 21:38:15 +0200
Subject: [PATCH] Aktueller Stand

---
 src/app/app.component.html         | 43 +++++++++++++++++-------------
 src/app/app.component.ts           | 10 +++++++
 src/app/chart/chart.component.html |  2 +-
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 66ae61c..4d6a2ed 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,23 +1,28 @@
 <main class="main">
-  <div ngbDropdown class="d-inline-block" #houseDrop="ngbDropdown">
-    Haushalt: 
-    <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
-      {{getHouseName()}}
-    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-      <button ngbDropdownItem (click)="$event.stopPropagation(); houseId=1;">Kerpen</button>
-      <button ngbDropdownItem (click)="$event.stopPropagation(); houseId=2;">Rommerskirchen</button>
-    </div>
-  </div>
-  <div ngbDropdown class="d-inline-block">
-    <button type="button" class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>
-      Zeitraum
-    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
-      <button ngbDropdownItem (click)="$event.stopPropagation(); duration=120;">letzte 2 Stunden</button>
-      <button ngbDropdownItem (click)="$event.stopPropagation(); duration=360;">letzte 6 Stunden</button>
-      <button ngbDropdownItem (click)="$event.stopPropagation(); duration=1440;">letzte 24 Stunden</button>
-    </div>
+  <div class="row row-cols-auto">
+    <div class="col">
+      <div ngbDropdown class="d-inline-block" #houseDrop="ngbDropdown">
+        <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
+          Haushalt: {{getHouseName()}}
+        </button>
+        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+          <button ngbDropdownItem (click)="$event.stopPropagation(); houseId=1;">Kerpen</button>
+          <button ngbDropdownItem (click)="$event.stopPropagation(); houseId=2;">Rommerskirchen</button>
+        </div>
+      </div>
+      </div>
+    <div class="col">
+      <div ngbDropdown class="d-inline-block">
+        <button type="button" class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>
+          Zeitraum: {{getDurationName()}}
+        </button>
+        <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
+          <button ngbDropdownItem (click)="$event.stopPropagation(); duration=120;">letzte 2 Stunden</button>
+          <button ngbDropdownItem (click)="$event.stopPropagation(); duration=360;">letzte 6 Stunden</button>
+          <button ngbDropdownItem (click)="$event.stopPropagation(); duration=1440;">letzte 24 Stunden</button>
+        </div>
+      </div>
+      </div>
   </div>
   <div ngbAccordion>
     <div ngbAccordionItem>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 209c1d3..117830c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -39,6 +39,16 @@ export class AppComponent implements OnInit, OnChanges {
     }
   }
 
+  getDurationName(): string {
+    var hours: number;
+    if (this.duration) {
+      hours = this.duration / 60;
+      return 'letzte ' + hours + ' Stunden';
+    } else {
+      return 'Unbekannt';
+    }
+  }
+
   houseId: number | undefined = undefined;
   duration: number | undefined = undefined;
 }
diff --git a/src/app/chart/chart.component.html b/src/app/chart/chart.component.html
index ee4f8bf..320e9f3 100644
--- a/src/app/chart/chart.component.html
+++ b/src/app/chart/chart.component.html
@@ -1,3 +1,3 @@
-<div style="border: 1px solid blueviolet;display: block; width: 100%; height: 400px;">
+<div style="border: 1px solid blueviolet;display: block; width: 100%; height: 70%;">
   <canvas id="canvas"></canvas>
 </div>