Changed Dashboard

public/js/pages/DashboardNew/DashboardNew.css

@@ -38,6 +38,12 @@
     margin-top: 20px;
 }
 
+.dashboard-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-top: 20px;
+}
+
 
 @media (min-width: 768px) {
     .dashboard-cards {

public/js/pages/DashboardNew/DashboardNew.js

@@ -190,6 +190,39 @@ Vue.component('tt-timeline-chart', {
 
 Vue.component('dashboard-default', {
     props: ['dashboardData'],
+    data() {
+        return {
+            selectedTimeframe: 'all',
+            window: window,
+            moment: moment
+        }
+    },
+    methods: {
+        exportTimeline() {
+        //     we need all timelines with "ONT installiert", "Leerrohr", "Bestellungen"
+            const data = this.dashboardData.timeline[0].map((item, index) => ({
+                date: item.date,
+                bestellungen: item.value,
+                leerrohr: this.dashboardData.timeline_leerrohr[0][index].value,
+                ont_installiert: this.dashboardData.timeline_ont_installed[0][index].value
+            }));
+
+            // dont use any library for the csv
+            const csv = [
+                ['Datum', 'Bestellungen', 'Leerrohr', 'ONT installiert'],
+                ...data.map(item => [item.date, item.bestellungen, item.leerrohr, item.ont_installiert])
+            ].map(row => row.join(',')).join('\n');
+
+            const blob = new Blob([csv], {type: 'text/csv'});
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+
+            a.href = url;
+            a.download = 'timeline.csv';
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+    },
     template: `
     <div>
                     <h4 class="mt-4">Bestellungen</h4>
@@ -307,13 +340,25 @@ Vue.component('dashboard-default', {
 
                     <hr>
                     <h4 class="mt-4">Bestellverlauf</h4>
+      
+<!--      add 4 new buttons here tt-button "Letzten 4 Wochen, Letzte 3 Monate, Letzten 6 Monate-->
+                    <div class="dashboard-buttons">
+                      <tt-button text="CSV Download" additional-class="btn-success" @click="exportTimeline" icon="fas fa-download"/>
+                      <tt-button text="Letzten 4 Wochen" additional-class="btn-primary" @click="selectedTimeframe = '4 weeks'" v-if="selectedTimeframe !== '4 weeks'"/>
+                      <tt-button text="Letzte 3 Monate" additional-class="btn-primary" @click="selectedTimeframe = '3 months'" v-if="selectedTimeframe !== '3 months'"/>
+                      <tt-button text="Letzte 6 Monate" additional-class="btn-primary" @click="selectedTimeframe = '6 months'" v-if="selectedTimeframe !== '6 months'"/>
+                      <tt-button text="Alle" additional-class="btn-primary" @click="selectedTimeframe = 'all'" v-if="selectedTimeframe !== 'all'"/>
+                    </div>
+      
                     <div class="dashboard-chart">
                       <tt-timeline-chart
                           v-if="dashboardData.timeline.length > 0"
                           :datasets="[
         {
             label: 'Bestellungen',
-            data: dashboardData.timeline[0],
+            data: dashboardData.timeline[0].filter(item => {
+                return selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))
+            }),
             color: 'rgb(75, 192, 192)',
             fill: true,
             yAxisID: 'y',
@@ -321,7 +366,7 @@ Vue.component('dashboard-default', {
         },
         {
             label: 'Leerrohr',
-            data: dashboardData.timeline_leerrohr[0],
+            data: dashboardData.timeline_leerrohr[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
             color: 'rgb(255, 99, 132)',
             fill: false,
             yAxisID: 'y',
@@ -329,7 +374,7 @@ Vue.component('dashboard-default', {
         },
         {
             label: 'ONT installiert',
-            data: dashboardData.timeline_ont_installed[0],
+            data: dashboardData.timeline_ont_installed[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
             color: 'rgb(54, 162, 235)',
             fill: false,
             yAxisID: 'y',
@@ -347,6 +392,13 @@ Vue.component('dashboard-default', {
 
 Vue.component('dashboard-rml', {
     props: ['dashboardData'],
+    data() {
+        return {
+            selectedTimeframe: 'all',
+            window: window,
+            moment: moment
+        }
+    },
     template: `
              <div>
                <h4 class="mt-4">Bestellungen</h4>
@@ -439,46 +491,40 @@ Vue.component('dashboard-rml', {
 
                <hr>
                <h4 class="mt-4">Bestellverlauf</h4>
+               <div class="dashboard-buttons">
+                 <tt-button text="CSV Download" additional-class="btn-success" @click="exportTimeline" icon="fas fa-download"/>
+                 <tt-button text="Letzten 4 Wochen" additional-class="btn-primary" @click="selectedTimeframe = '4 weeks'" v-if="selectedTimeframe !== '4 weeks'"/>
+                 <tt-button text="Letzte 3 Monate" additional-class="btn-primary" @click="selectedTimeframe = '3 months'" v-if="selectedTimeframe !== '3 months'"/>
+                 <tt-button text="Letzte 6 Monate" additional-class="btn-primary" @click="selectedTimeframe = '6 months'" v-if="selectedTimeframe !== '6 months'"/>
+                 <tt-button text="Alle" additional-class="btn-primary" @click="selectedTimeframe = 'all'" v-if="selectedTimeframe !== 'all'"/>
+               </div>
+
                <div class="dashboard-chart">
                  <tt-timeline-chart
                      v-if="dashboardData.timeline.length > 0"
                      :datasets="[
         {
             label: 'Bestellungen',
-                        data: dashboardData.timeline[0],
+            data: dashboardData.timeline[0].filter(item => {
-                        color: 'rgb(23, 162, 184)',
+                return selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))
+            }),
+            color: 'rgb(75, 192, 192)',
             fill: true,
             yAxisID: 'y',
-                        order: 5
-                    },
-                    {
-                        label: 'Summe von 244+245',
-                        data: dashboardData.timeline_inhouse_kabel_verlegt_efh[0],
-                        color: 'rgb(0, 123, 255)',
-                        fill: false,
-                        yAxisID: 'y',
-                        order: 4
-                    },
-                    {
-                        label: 'Status 500 Energie Steiermark',
-                        data: dashboardData.timeline_status_500_energie_steiermark[0],
-                        color: 'rgb(40, 167, 69)',
-                        fill: false,
-                        yAxisID: 'y',
             order: 3
         },
         {
-                        label: 'Status 500 Magenta',
+            label: 'Leerrohr',
-                        data: dashboardData.timeline_status_500_magenta[0],
+            data: dashboardData.timeline_leerrohr[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
-                        color: 'rgb(226, 0, 116)',
+            color: 'rgb(255, 99, 132)',
             fill: false,
             yAxisID: 'y',
             order: 2
         },
         {
-                        label: 'Status 500 Salzburg AG',
+            label: 'ONT installiert',
-                        data: dashboardData.timeline_status_500_salzburg_ag[0],
+            data: dashboardData.timeline_ont_installed[0].filter(item => selectedTimeframe === 'all' || moment(item.date).isAfter(moment().subtract(selectedTimeframe.split(' ')[0], selectedTimeframe.split(' ')[1]))),
-                        color: 'rgb(0, 102, 179)',
+            color: 'rgb(54, 162, 235)',
             fill: false,
             yAxisID: 'y',
             order: 1
@@ -487,9 +533,9 @@ Vue.component('dashboard-rml', {
                      label="KW"
                      :showGrid="false"
                  />
+
                </div>
-             </div>
+             </div>    `
-    `
 })