added new pop columns

public/js/pages/DashboardAdb/DashboardAdb.css

@@ -19,7 +19,7 @@
 
 .dashboard-cards {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
 }
 
@@ -50,19 +50,19 @@
 
 @media (min-width: 768px) {
     .dashboard-cards {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
     }
 }
 
 @media (min-width: 1000px) {
     .dashboard-cards {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
     }
 }
 
 @media (min-width: 1332px) {
     .dashboard-cards {
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
     }
 }
 

public/js/pages/DashboardAdb/DashboardAdb.js

@@ -53,31 +53,29 @@ Vue.component('tt-dashboard-display-card', {
 Vue.component('dashboard-adb-content', {
     props: ['addressDbData'],
     template: `
-    <div>
+      <div>
         <h4 class="mt-4">Gebäude</h4>
         <div class="dashboard-cards position-relative">
-            <tt-dashboard-display-card
-                header="Gebäude gesamt"
-                icon="fas fa-building"
-                :text="addressDbData.sum_counts.sum"
-                :subHeaders="[
-                    'Wohneinheiten: ' + addressDbData.sum_counts.sum_homes,
-                    'Planned: ' + addressDbData.sum_counts.op_state_planned,
-                    'Passed: ' + addressDbData.sum_counts.op_state_passed,
-                    'Connected: ' + addressDbData.sum_counts.op_state_connected
+          <tt-dashboard-display-card
+              header="Gebäude gesamt"
+              icon="fas fa-building"
+              :text="addressDbData.sum_counts.sum + ' (' + addressDbData.sum_counts.sum_homes + ')'"
+              :subHeaders="[
+                    'Planned: ' + addressDbData.sum_counts.op_state_planned + ' (' + addressDbData.sum_counts.op_state_planned_homes + ')',
+                    'Passed: ' + addressDbData.sum_counts.op_state_passed + ' (' + addressDbData.sum_counts.op_state_passed_homes + ')',
+                    'Connected: ' + addressDbData.sum_counts.op_state_connected + ' (' + addressDbData.sum_counts.op_state_connected_homes + ')'
                 ]"
-                color="#28a745"
-            />
+              color="#28a745"
+          />
 
           <tt-dashboard-display-card
               header="Einfamilienhäuser gesamt"
               icon="fas fa-home"
-              :text="addressDbData.efh_counts.sum"
+              :text="addressDbData.efh_counts.sum + ' (' + addressDbData.efh_counts.sum_homes + ')'"
               :subHeaders="[
-                    'Wohneinheiten: ' + addressDbData.efh_counts.sum_homes,
-                    'Planned: ' + addressDbData.efh_counts.op_state_planned,
-                    'Passed: ' + addressDbData.efh_counts.op_state_passed,
-                    'Connected: ' + addressDbData.efh_counts.op_state_connected
+                    'Planned: ' + addressDbData.efh_counts.op_state_planned + ' (' + addressDbData.efh_counts.op_state_planned_homes + ')',
+                    'Passed: ' + addressDbData.efh_counts.op_state_passed + ' (' + addressDbData.efh_counts.op_state_passed_homes + ')',
+                    'Connected: ' + addressDbData.efh_counts.op_state_connected + ' (' + addressDbData.efh_counts.op_state_connected_homes + ')'
                 ]"
               color="#17a2b8"
           />
@@ -85,52 +83,32 @@ Vue.component('dashboard-adb-content', {
           <tt-dashboard-display-card
               header="Mehrparteienhäuser gesamt"
               icon="fas fa-city"
-              :text="addressDbData.mph_counts.sum"
+              :text="addressDbData.mph_counts.sum + ' (' + addressDbData.mph_counts.sum_homes + ')'"
               :subHeaders="[
-                    'Wohneinheiten: ' + addressDbData.mph_counts.sum_homes,
-                    'Planned: ' + addressDbData.mph_counts.op_state_planned,
-                    'Passed: ' + addressDbData.mph_counts.op_state_passed,
-                    'Connected: ' + addressDbData.mph_counts.op_state_connected
+                    'Planned: ' + addressDbData.mph_counts.op_state_planned + ' (' + addressDbData.mph_counts.op_state_planned_homes + ')',
+                    'Passed: ' + addressDbData.mph_counts.op_state_passed + ' (' + addressDbData.mph_counts.op_state_passed_homes + ')',
+                    'Connected: ' + addressDbData.mph_counts.op_state_connected + ' (' + addressDbData.mph_counts.op_state_connected_homes + ')'
                 ]"
               color="#f5b902"
           />
+
+          <tt-dashboard-display-card
+              header="Andere"
+              icon="fas fa-city"
+              :text="(parseInt(addressDbData.other_types.type_greenfield) + parseInt(addressDbData.other_types.type_transformer_station) + parseInt(addressDbData.other_types.type_others)) + ' (' +
+                (parseInt(addressDbData.other_types.type_greenfield_homes) + parseInt(addressDbData.other_types.type_transformer_station_homes) + parseInt(addressDbData.other_types.type_others_homes)) + ')'"
+              :subHeaders="[
+                    'Greenfield: ' + addressDbData.other_types.type_greenfield + ' (' + addressDbData.other_types.type_greenfield_homes + ')',
+                    'Transformatorstationen: ' + addressDbData.other_types.type_transformer_station + ' (' + addressDbData.other_types.type_transformer_station_homes + ')',
+                    'Andere: ' + addressDbData.other_types.type_others + ' (' + addressDbData.other_types.type_others_homes + ')'
+                ]"
+              color="#007bff"
+          />
         </div>
-      
-      
-        <hr>
-        <h4 class="mt-4">Andere Typen</h4>
-        <div class="dashboard-cards position-relative">
-            <tt-dashboard-display-card
-                header="Greenfield"
-                icon="fas fa-leaf"
-                :text="addressDbData.other_types.type_greenfield"
-                :subHeaders="[
-                    'Wohneinheiten: ' + addressDbData.other_types.type_greenfield_homes
-                ]"
-                color="#0bb36c"
-            />
-            <tt-dashboard-display-card
-                header="Transformatorstationen"
-                icon="fas fa-bolt"
-                :text="addressDbData.other_types.type_transformer_station"
-                :subHeaders="[
-                    'Wohneinheiten: ' + addressDbData.other_types.type_transformer_station_homes
-                ]"
-                color="#007bff"
-            />
-            <tt-dashboard-display-card
-                header="Andere"
-                icon="fas fa-question-circle"
-                :text="addressDbData.other_types.type_others"
-                :subHeaders="[
-                    'Wohneinheiten: ' + addressDbData.other_types.type_others_homes
-                ]"
-                color="#6c757d"
-            />
-        </div>
-    </div>
+      </div>
     `
-});
+})
+
 
 Vue.component('dashboard-adb', {
     template: `