thetool/public/js/pages/DashboardAdb/DashboardAdb.js

Vue.component('dashboard-location-selector-adb', {
    template: `
      <div class="dashboard-data-selector">
        <tt-select sm row label="Netzgebiet" :value="selectedNetwork" :options="filterOptions.netOwners" @input="$emit('update:selectedNetwork', $event)"/>
      </div>
    `,
    props: {
        selectedNetwork: {type: String, required: true}
    },
    data: () => ({
        filterOptions: {
            netOwners: []
        }
    }),
    mounted() {
        this.fetchNetworkFilterOptions();
    },
    methods: {
        async fetchNetworkFilterOptions() {
            const { data } = await axios.get(`${window.TT_CONFIG['BASE_PATH']}/DashboardNew/getNetworkFilterOptions`);
            this.filterOptions.netOwners = [{value: 'all', text: 'Alle'}, ...data];
        }
    }
});

Vue.component('tt-dashboard-display-card', {
    props: ['header', 'icon', 'text', 'subHeaders', 'color'],
    computed: {
        cardHeight() {
            return `${96 + 25 * this.subHeaders?.length ?? 0}px`;
        }
    },
    template: `
      <div class="card">
        <div class="card-body p-0" :style="{ backgroundColor: color }">
          <div :style="{ height: cardHeight }" class="p-2">
            <div class="float-right">
              <i :class="icon" class="text-white widget-icon font-24"></i>
            </div>
            <h5 class="text-white font-weight-normal mt-0">{{ header }}</h5>
            <h3 class="mt-2 text-white">{{ text }}</h3>
            <div class="text-white font-weight-light tt-dashboard-display-card-sub-header-container">
              <p v-for="(subHeader, index) in subHeaders" :key="index" class="mb-0">{{ subHeader }}</p>
            </div>
          </div>
        </div>
      </div>
    `
})

Vue.component('dashboard-adb-content', {
    props: ['addressDbData'],
    template: `
      <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 + ' (' + 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"
          />

          <tt-dashboard-display-card
              header="Einfamilienhäuser gesamt"
              icon="fas fa-home"
              :text="addressDbData.efh_counts.sum + ' (' + addressDbData.efh_counts.sum_homes + ')'"
              :subHeaders="[
                    '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"
          />

          <tt-dashboard-display-card
              header="Mehrparteienhäuser gesamt"
              icon="fas fa-city"
              :text="addressDbData.mph_counts.sum + ' (' + addressDbData.mph_counts.sum_homes + ')'"
              :subHeaders="[
                    '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-building"
              :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>
      </div>
    `
})


Vue.component('dashboard-adb', {
    template: `
        <tt-card>
            <template v-slot:header>
                <h3>Adressdatenbank Statistiken</h3>
            </template>
            <tt-loader v-if="isLoading" style="margin: -5rem -1.5rem -1.5rem;"/>
            <div class="dashboard-adb">
                <dashboard-location-selector-adb
                    :selectedNetwork="selectedNetwork"
                    @update:selectedNetwork="selectedNetwork = $event"
                />
                <hr>
                
                <dashboard-adb-content v-if="!isLoading && addressDbData" :addressDbData="addressDbData"/>
            </div>
        </tt-card>
    `,
    data: () => ({
        addressDbData: null,
        selectedNetwork: 'all',
        isLoading: false
    }),
    mounted() {
        this.fetchAddressDbData();
    },
    methods: {
        async fetchAddressDbData() {
            this.isLoading = true;
            const netzParam = this.selectedNetwork !== 'all' ? `?netzgebiet_id=${this.selectedNetwork}` : '';
            const url = `${window.TT_CONFIG['BASE_PATH']}/DashboardNew/getDashboardAddressDBData${netzParam}`;
            const { data } = await axios.get(url);
            this.addressDbData = data;
            this.isLoading = false;
        }
    },
    watch: {
        selectedNetwork() {
            this.fetchAddressDbData();
        }
    }
});