Updated Dashboard and made it live

public/js/pages/DashboardNew/DashboardNew.js

@@ -1,7 +1,7 @@
 Vue.component('dashboard-location-selector', {
     template: `
-                <div class="dashboard-data-selector">
-                  <tt-select sm label="Netzbesitzer" :value="selectedNetworkOwner" :options="filterOptions.netOwners" @input="$emit('update:selectedNetworkOwner', $event)"/>
+                <div class="dashboard-data-selector" :class="{ 'dashboard-data-selector--no-net-owner': !showNetOwnerFilter }">
+                  <tt-select sm label="Netzbesitzer" v-if="showNetOwnerFilter" :value="selectedNetworkOwner" :options="filterOptions.netOwners" @input="$emit('update:selectedNetworkOwner', $event)"/>
                   <tt-select sm label="Kampagne" :value="selectedCampaign" :options="filterOptions.campaigns" @input="$emit('update:selectedCampaign', $event)"/>
                   <tt-select sm label="Gemeinde" :value="selectedGemeinde" :options="filterOptions.gemeinden" @input="$emit('update:selectedGemeinde', $event)"/>
                 </div>
@@ -15,6 +15,7 @@ Vue.component('dashboard-location-selector', {
     ,
     data() {
         return {
+            showNetOwnerFilter: window.TT_CONFIG["IS_ADMIN"] === 'true',
             filterOptions:        {
                 netOwners: [],
                 campaigns: [],
@@ -189,137 +190,140 @@ Vue.component('tt-timeline-chart', {
 
 Vue.component('dashboard-new', {
     template: `
-      <tt-card>
-        <tt-loader v-if="isLoading" style="margin: -1.5rem"/>
-        <div class="dashboard-new">
-          <dashboard-location-selector
-              :selectedNetworkOwner="selectedNetworkOwner"
-              :selectedCampaign="selectedCampaign"
-              :selectedGemeinde="selectedGemeinde"
-              @update:selectedNetworkOwner="selectedNetworkOwner = $event"
-              @update:selectedCampaign="selectedCampaign = $event"
-              @update:selectedGemeinde="selectedGemeinde = $event"
-          />
-          <hr>
-          <h4 class="mt-4">Bestellungen</h4>
-          <div class="dashboard-cards position-relative">
-            <tt-dashboard-display-card
-              header="Bestellungen gesamt"
-              icon="fas fa-check"
-              :text="dashboardData.order_actual_order + ' / ' + dashboardData.order_max_home_addrdb + ' (' + Math.round((dashboardData.order_actual_order / dashboardData.order_max_home_addrdb) * 100) + '%)'"
-              :subHeaders="[
+                <tt-card>
+                  <template v-slot:header>
+                    <h3>Akquise Statistiken</h3>
+                  </template>
+                  <tt-loader v-if="isLoading" style="margin: -5rem -1.5rem -1.5rem;"/>
+                  <div class="dashboard-new">
+                    <dashboard-location-selector
+                        :selectedNetworkOwner="selectedNetworkOwner"
+                        :selectedCampaign="selectedCampaign"
+                        :selectedGemeinde="selectedGemeinde"
+                        @update:selectedNetworkOwner="selectedNetworkOwner = $event"
+                        @update:selectedCampaign="selectedCampaign = $event"
+                        @update:selectedGemeinde="selectedGemeinde = $event"
+                    />
+                    <hr>
+                    <h4 class="mt-4">Bestellungen</h4>
+                    <div class="dashboard-cards position-relative">
+                      <tt-dashboard-display-card
+                          header="Bestellungen gesamt"
+                          icon="fas fa-check"
+                          :text="dashboardData.order_actual_order + ' / ' + dashboardData.order_max_home_addrdb + ' (' + Math.round((dashboardData.order_actual_order / dashboardData.order_max_home_addrdb) * 100) + '%)'"
+                          :subHeaders="[
                   // add percentage in () here 
                 'Vollanschluss: ' + (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss)) + ' (' + Math.round(((parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss)) / parseInt(dashboardData.order_actual_order) * 100)) + '%)',
                 'Vorsorgeanschluss: ' + (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge)) + ' (' + Math.round(((parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge)) / parseInt(dashboardData.order_actual_order) * 100)) + '%)'
               ]"
-              color="#28a745"
-            />
-            <tt-dashboard-display-card
-              header="Bestellungen gesamt EFH"
-              icon="fas fa-home"
-              :text="dashboardData.order_efh"
-              :subHeaders="[
+                          color="#28a745"
+                      />
+                      <tt-dashboard-display-card
+                          header="Bestellungen gesamt EFH"
+                          icon="fas fa-home"
+                          :text="dashboardData.order_efh"
+                          :subHeaders="[
                 'Vollanschluss: ' + dashboardData.order_efh_vollanschluss + ' (' + Math.round((dashboardData.order_efh_vollanschluss / dashboardData.order_efh) * 100) + '%)',
                 'Vorsorgeanschluss: ' + dashboardData.order_efh_vorsorge + ' (' + Math.round((dashboardData.order_efh_vorsorge / dashboardData.order_efh) * 100) + '%)'
               ]"
-              color="#17a2b8"
-            />
-            <tt-dashboard-display-card
-              header="Bestellungen gesamt MPH"
-              icon="fas fa-building"
-              :text="dashboardData.order_mph"
-              :subHeaders="[
+                          color="#17a2b8"
+                      />
+                      <tt-dashboard-display-card
+                          header="Bestellungen gesamt MPH"
+                          icon="fas fa-building"
+                          :text="dashboardData.order_mph"
+                          :subHeaders="[
                 'Vollanschluss: ' + dashboardData.order_mph_vollanschluss + ' (' + Math.round((dashboardData.order_mph_vollanschluss / dashboardData.order_mph) * 100) + '%)',
                 'Vorsorgeanschluss: ' + dashboardData.order_mph_vorsorge + ' (' + Math.round((dashboardData.order_mph_vorsorge / dashboardData.order_mph) * 100) + '%)'
               ]"
-              color="#f5b902"
-            />
-          </div>
-          <hr>
-          <h4 class="mt-4">Baufortschritt</h4>
-          <div class="dashboard-cards position-relative">
-            <tt-dashboard-display-card
-              header="Leerrohr an der Grundstücksgrenze abgelegt"
-              icon="fas fa-road"
-              :text="dashboardData.baufortschritt_140 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.baufortschritt_140 / dashboardData.order_actual_order) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#28a745"
-            />
-            <tt-dashboard-display-card
-              header="Installationspaket erhalten"
-              icon="fas fa-box-open"
-              :text="dashboardData.installationspaket_erhalten + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.installationspaket_erhalten / dashboardData.order_efh) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#17a2b8"
-            />
-            <tt-dashboard-display-card
-              header="Leerrohr im Haus"
-              icon="fas fa-house-user"
-              :text="dashboardData.lehrrohr_im_haus + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.lehrrohr_im_haus / dashboardData.order_efh) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#f5b902"
-            />
-            <tt-dashboard-display-card
-              header="Inhousekabel verlegt EFH"
-              icon="fas fa-plug"
-              :text="dashboardData.inhouse_kabel_verlegt_efh + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_efh / dashboardData.order_efh) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#007bff"
-            />
-            <tt-dashboard-display-card
-              header="Inhousekabel verlegt MPH"
-              icon="fas fa-building-user"
-              :text="dashboardData.inhouse_kabel_verlegt_mph + ' / ' + dashboardData.order_mph + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_mph / dashboardData.order_mph) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#0bb36c"
-            />
-          </div>
-          <hr>
-          <h4 class="mt-4">Installationsfortschritt</h4>
-          <div class="dashboard-cards position-relative">
-            <tt-dashboard-display-card
-              header="Installation freigegeben"
-              icon="fas fa-tools"
-              :text="dashboardData.installationsfortschritt_245 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.installationsfortschritt_245 / dashboardData.order_actual_order) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#28a745"
-            />
-            <tt-dashboard-display-card
-              header="ONT installiert"
-              icon="fas fa-wifi"
-              :text="dashboardData.ont_installiert_300 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.ont_installiert_300 / dashboardData.order_actual_order) * 100) + '%)'"
-              :subHeaders="[]"
-              color="#17a2b8"
-            />
-            <tt-dashboard-display-card
-              header="Vollanschluss dokumentiert"
-              icon="fas fa-file-alt"
-              :text="dashboardData.vollanschluss_dokumentiert_350 + ' / ' + (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss)) + ' (' + Math.round((dashboardData.vollanschluss_dokumentiert_350 / (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss))) * 100) + '%)'"
-              :subHeaders="[]"
-                color="#f5b902"
-            />
-            <tt-dashboard-display-card
-                header="Vorsorgeanschluss dokumentiert"
-                icon="fas fa-file-alt"
-                :text="dashboardData.vorsorge_dokumentiert_351 + ' / ' + (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge)) + ' (' + Math.round((dashboardData.vorsorge_dokumentiert_351 / (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge))) * 100) + '%)'"
-                :subHeaders="['']"
-                color="#007bff"
-            />
-            <tt-dashboard-display-card
-                header="Provider bestellt"
-                icon="fas fa-shopping-cart"
-                :text="dashboardData.provider_bestellt_500 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.provider_bestellt_500 / dashboardData.order_actual_order) * 100) + '%)'"
-                :subHeaders="[]"
-                color="#0bb36c"
-            />
-          </div>
+                          color="#f5b902"
+                      />
+                    </div>
+                    <hr>
+                    <h4 class="mt-4">Baufortschritt</h4>
+                    <div class="dashboard-cards position-relative">
+                      <tt-dashboard-display-card
+                          header="Leerrohr an der Grundstücksgrenze abgelegt"
+                          icon="fas fa-road"
+                          :text="dashboardData.baufortschritt_140 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.baufortschritt_140 / dashboardData.order_actual_order) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#28a745"
+                      />
+                      <tt-dashboard-display-card
+                          header="Installationspaket erhalten"
+                          icon="fas fa-box-open"
+                          :text="dashboardData.installationspaket_erhalten + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.installationspaket_erhalten / dashboardData.order_efh) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#17a2b8"
+                      />
+                      <tt-dashboard-display-card
+                          header="Leerrohr im Haus"
+                          icon="fas fa-house-user"
+                          :text="dashboardData.lehrrohr_im_haus + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.lehrrohr_im_haus / dashboardData.order_efh) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#f5b902"
+                      />
+                      <tt-dashboard-display-card
+                          header="Inhousekabel verlegt EFH"
+                          icon="fas fa-plug"
+                          :text="dashboardData.inhouse_kabel_verlegt_efh + ' / ' + dashboardData.order_efh + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_efh / dashboardData.order_efh) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#007bff"
+                      />
+                      <tt-dashboard-display-card
+                          header="Inhousekabel verlegt MPH"
+                          icon="fas fa-building-user"
+                          :text="dashboardData.inhouse_kabel_verlegt_mph + ' / ' + dashboardData.order_mph + ' (' + Math.round((dashboardData.inhouse_kabel_verlegt_mph / dashboardData.order_mph) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#0bb36c"
+                      />
+                    </div>
+                    <hr>
+                    <h4 class="mt-4">Installationsfortschritt</h4>
+                    <div class="dashboard-cards position-relative">
+                      <tt-dashboard-display-card
+                          header="Installation freigegeben"
+                          icon="fas fa-tools"
+                          :text="dashboardData.installationsfortschritt_245 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.installationsfortschritt_245 / dashboardData.order_actual_order) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#28a745"
+                      />
+                      <tt-dashboard-display-card
+                          header="ONT installiert"
+                          icon="fas fa-wifi"
+                          :text="dashboardData.ont_installiert_300 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.ont_installiert_300 / dashboardData.order_actual_order) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#17a2b8"
+                      />
+                      <tt-dashboard-display-card
+                          header="Vollanschluss dokumentiert"
+                          icon="fas fa-file-alt"
+                          :text="dashboardData.vollanschluss_dokumentiert_350 + ' / ' + (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss)) + ' (' + Math.round((dashboardData.vollanschluss_dokumentiert_350 / (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss))) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#f5b902"
+                      />
+                      <tt-dashboard-display-card
+                          header="Vorsorgeanschluss dokumentiert"
+                          icon="fas fa-file-alt"
+                          :text="dashboardData.vorsorge_dokumentiert_351 + ' / ' + (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge)) + ' (' + Math.round((dashboardData.vorsorge_dokumentiert_351 / (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge))) * 100) + '%)'"
+                          :subHeaders="['']"
+                          color="#007bff"
+                      />
+                      <tt-dashboard-display-card
+                          header="Provider bestellt"
+                          icon="fas fa-shopping-cart"
+                          :text="dashboardData.provider_bestellt_500 + ' / ' + dashboardData.order_actual_order + ' (' + Math.round((dashboardData.provider_bestellt_500 / dashboardData.order_actual_order) * 100) + '%)'"
+                          :subHeaders="[]"
+                          color="#0bb36c"
+                      />
+                    </div>
 
-          <hr>
-          <h4 class="mt-4">Bestellverlauf</h4>
-          <div class="dashboard-chart">
-            <tt-timeline-chart
-                v-if="dashboardData.timeline.length > 0"
-                :datasets="[
+                    <hr>
+                    <h4 class="mt-4">Bestellverlauf</h4>
+                    <div class="dashboard-chart">
+                      <tt-timeline-chart
+                          v-if="dashboardData.timeline.length > 0"
+                          :datasets="[
         {
             label: 'Bestellungen',
             data: dashboardData.timeline[0],
@@ -345,13 +349,13 @@ Vue.component('dashboard-new', {
             order: 1
         }
     ]"
-                label="KW"
-                :showGrid="false"
-            />
+                          label="KW"
+                          :showGrid="false"
+                      />
 
-          </div>
-        </div>
-      </tt-card>
+                    </div>
+                  </div>
+                </tt-card>
               `,
     data() {
         return {