From 32d162c7c596d6cad8c753a1bcbee15fa09a41c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gi=C3=B2=20Diani?= <mail@gionathandiani.name>
Date: Sat, 4 Jan 2025 18:16:12 +0100
Subject: [PATCH] =?UTF-8?q?=C3=9Cberarbeitung=20Detailansicht.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/resources/css/app.css              |  72 +++++++--
 dashboard/resources/views/property.blade.php | 148 ++++++++++++++-----
 2 files changed, 167 insertions(+), 53 deletions(-)

diff --git a/dashboard/resources/css/app.css b/dashboard/resources/css/app.css
index d2ff42f..76da0d2 100644
--- a/dashboard/resources/css/app.css
+++ b/dashboard/resources/css/app.css
@@ -54,6 +54,45 @@ dd + dt{
   margin-top: .2em;
 }
 
+button[popovertarget]{
+  cursor: pointer;
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  background: #5470c6;
+}
+
+button[popovertarget]::before{
+  content: '?';
+  color: #fff;
+  font-weight: 700;
+}
+
+button[popovertarget]>span{
+  position: absolute;
+  left: -999em;
+  top: -999em;
+}
+
+[popover] {
+  border: none;
+  border-radius: 1em;
+  background: #fff;
+  padding: 1.5em;
+  border-radius: var(--small-border);
+  box-shadow: .0625em .0625em .625em rgba(0, 0, 0, 0.1);
+  max-width: 40em;
+  top: 4em;
+  margin: 0 auto;
+}
+
+[popover]::backdrop{
+  background-color: rgba(0,0,0,.5);
+}
+
+
 /*
   9. Create a root stacking context
 */
@@ -65,7 +104,6 @@ nav>ul{
   list-style: none;
 }
 
-
 body>header{
     position: fixed;
     top: 0;
@@ -81,31 +119,41 @@ body>header{
 
 main{
     width: 100%;
-    height: calc(100vh - 4em);
-    padding-top: 4em;
+    height: 100vh;
+    padding: 4em 0 1em;
     display: grid;
-    grid-template-columns: repeat(2, minmax(25%, 50%));
-    grid-template-rows: repeat(2, 1fr);
-    gap: 1em;
-
+    grid-template-columns: repeat(4, minmax(10%, 50%));
+    grid-template-rows: repeat(3, 1fr) 4em;
+    grid-template-areas:
+      "chart2 chart2 chart5 chart5"
+      "chart1 chart1 chart3 chart4"
+      "chart1 chart1 chart3 chart4"
+      "timeline timeline timeline timeline";
+    gap: .5em;
 }
 
 article{
     background: #f9f9f9;
     border: .0625em solid #ccc;
-    box-shadow: 0 0 .3em #ccc;
-    border-radius: 3px;
+    box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
+    border-radius: .2em;
     display: grid;
 }
 
 article.header{
     grid-template-columns: 100%;
-    grid-template-rows: 2em 1fr;
-    padding: 1em;
+    grid-template-rows: minmax(1%, 10%) 1fr;
+    padding: .5em 1em 1em .5em;
+}
+
+article>header{
+  display: grid;
+  grid-template-columns: 1fr 1em;
+  grid-template-rows: 1fr;
 }
 
 article>header>h2{
-    font-size: 1em;
+    font-size: .8em;
     font-weight: 600;
 }
 
diff --git a/dashboard/resources/views/property.blade.php b/dashboard/resources/views/property.blade.php
index f92d337..b5e9469 100644
--- a/dashboard/resources/views/property.blade.php
+++ b/dashboard/resources/views/property.blade.php
@@ -1,27 +1,9 @@
 @extends('base')
 @section('main')
-<article class="header">
-    <header>
-        <h2>
-            Angaben zur Property
-        </h2>
-    </header>
-    <dl>
-        @foreach ($base as $dt => $dd)
-        <dt>{{ $dt }}</dt>
-        <dd>
-            @if ($dt === 'property_platform_id')
-            <a href="https://www.e-domizil.ch/rental/{{ $dd }}" rel="noopener noreferrer" target="_blank">
-                {{ $dd }}
-            </a>
-            @else
-                {{ $dd }}
-            @endif
-        </dd>
-        @endforeach
-    </dl>
+<article style="grid-area: timeline;">
+    <div id="timeline"></div>
 </article>
-<article class="header" style="grid-row-start: 1; grid-row-end: 3;">
+<article class="header" style="grid-area: chart1;">
     <header>
         <h2 id="belegung-title">
             Belegung am {{ json_decode($extractiondates)[0] }}
@@ -29,7 +11,16 @@
     </header>
     <div id="chart-calendar"></div>
 </article>
-<article class="header">
+<article class="header" style="grid-area: chart3;">
+    <header>
+        <h2>
+            Auslastung nach Monat am 2024-04-15T07:06:22
+        </h2>
+    </header>
+    <div id="chart-capacity-monthly">
+    </div>
+</article>
+<article class="header" style="grid-area: chart2;">
     <header>
         <h2>
             Entwicklung der Verfügbarkeit
@@ -37,7 +28,72 @@
     </header>
     <div id="chart-capacity"></div>
 </article>
+<article class="header" style="grid-area: chart4;">
+    <header>
+        <h2>
+            Auslastung Tage für Monat
+        </h2>
+    </header>
+
+</article>
 <script type="module">
+const chartTimeline = document.getElementById('timeline');
+const cTimeline = echarts.init(chartTimeline);
+
+const cTimelineOptions = {
+    grid: {
+        show: false,
+    },
+    timeline: {
+        data: {!! $extractiondates !!},
+        playInterval: 2000,
+        axisType: 'time',
+        left: 8,
+        right: 8,
+        bottom: 0,
+        label: {
+            show: false
+        }
+    }
+};
+
+cTimeline.setOption(cTimelineOptions);
+
+const chartCapacityMonthly = document.getElementById('chart-capacity-monthly');
+const cCapacityMonthly = echarts.init(chartCapacityMonthly);
+
+const cCapacityMonthlyOptions = {
+    timeline: {
+        show: false,
+        data: {!! $extractiondates !!},
+        axisType: 'time',
+    },
+    grid: {
+        top: 0,
+        bottom: 25,
+        left: 50,
+        right: 10
+    },
+    xAxis: {
+        type: 'value',
+        max: 100
+    },
+    yAxis: {
+        type: 'category',
+    },
+    options: [{
+        yAxis: {
+            data: ['Apr 24', 'May 24', 'Jun 24', 'Aug 24', 'Sep 24', 'Oct 24', 'Nov 24', 'Dec 24', 'Jan 25', 'Feb 25', 'Mar 25', 'Apr 25', 'May 25', 'Jun 25', 'Jul 25', 'Aug 25', 'Sep 25', 'Oct 25']
+        },
+        series: [{
+            type: 'bar',
+            data: [100, 80, 20, 20, 3, 23, 34, 23, 45, 12, 34,23,45,12,34,45,12,34]
+        }]
+    }]
+};
+
+cCapacityMonthly.setOption(cCapacityMonthlyOptions);
+
 const chartCapacity = document.getElementById('chart-capacity');
 const cCapacity = echarts.init(chartCapacity);
 
@@ -46,9 +102,10 @@ const cCapacityOptions = {
     trigger: 'axis'
   },
   grid: {
-    left: '0',
+    top: 20,
+    left: 0,
     right: 10,
-    bottom: '0',
+    bottom: 0,
     containLabel: true
   },
   xAxis: {
@@ -72,26 +129,20 @@ const cCapacityOptions = {
 
 cCapacity.setOption(cCapacityOptions);
 
-
 const chartCalendar = document.getElementById('chart-calendar');
 const cCalendar = echarts.init(chartCalendar);
 const h2Belegung = document.getElementById('belegung-title');
 
 const cCalendarOptions = {
     timeline: {
+        show: false,
         data: {!! $extractiondates !!},
-        playInterval: 2000,
         axisType: 'time',
-        left: 0,
-        right: 0,
-        label: {
-            show: false
-        }
     },
     visualMap: {
         categories: [0,1,2],
         inRange: {
-            color: ['red', 'purple', 'green']
+            color: ['#d95f02', '#7570b3', '#1b9e77']
         },
         formatter: (cat) => {
             switch (cat) {
@@ -112,25 +163,25 @@ const cCalendarOptions = {
         {
           orient: 'horizontal',
           range: '2024',
-          top: '6.25%',
+          top: '15%',
           right: 10,
-          bottom: '68.75%',
+          bottom: '65%',
           left: 50,
         },
         {
           orient: 'horizontal',
           range: '2025',
-          top: '37.5%',
+          top: '47%',
           right: 10,
-          bottom: '37.25%',
+          bottom: '33%',
           left: 50,
         },
         {
           orient: 'horizontal',
           range: '2026',
-          top: '68.75%',
+          top: '79%',
           right: 10,
-          bottom: '6.25%',
+          bottom: '1%',
           left: 50,
         }
     ],
@@ -161,13 +212,26 @@ const cCalendarOptions = {
 };
 
 cCalendar.setOption(cCalendarOptions);
-cCalendar.on('timelinechanged', (e) => {
-    // Change header text according to datapoint
+
+
+cTimeline.on('timelinechanged', (e) => {
+
     h2Belegung.innerText = "Belegung am "+cCalendarOptions.timeline.data[e.currentIndex];
 
     // Set markpoint on linechart
     let x = cCapacityOptions.xAxis.data[e.currentIndex];
     let y = cCapacityOptions.series.data[e.currentIndex];
+
+    cCapacityMonthly.dispatchAction({
+        type: 'timelineChange',
+        currentIndex: e.currentIndex
+    });
+
+     cCalendar.dispatchAction({
+        type: 'timelineChange',
+        currentIndex: e.currentIndex
+    });
+
     cCapacity.setOption({
         series: {
             markPoint: {
@@ -177,16 +241,18 @@ cCalendar.on('timelinechanged', (e) => {
             }
         }
     });
+
 })
 
 cCapacity.on('click', 'series', (e) => {
 
     // Switch to correct calendar in the timeline
-    cCalendar.dispatchAction({
+    cTimeline.dispatchAction({
         type: 'timelineChange',
         currentIndex: e.dataIndex
     });
 
+
 });