2025-05-13 11:41:39 +02:00
parent a6d577023f
commit 11ebed70a7
5 changed files with 453 additions and 20 deletions
@@ -0,0 +1,186 @@
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() {
        return {
            filterOptions: {
                netOwners: []
            }
        };
    },
    async mounted() {
        await this.fetchNetworkFilterOptions();
    },
    methods: {
        async fetchNetworkFilterOptions() {
            const response = await axios.get(`${window.TT_CONFIG['BASE_PATH']}/DashboardNew/getNetworkFilterOptions`);
            this.filterOptions.netOwners = [{value: 'all', text: 'Alle'}, ...response.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"
                :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
                ]"
                color="#28a745"
            />
          <tt-dashboard-display-card
              header="Einfamilienhäuser gesamt"
              icon="fas fa-home"
              :text="addressDbData.efh_counts.sum"
              :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
                ]"
              color="#17a2b8"
          />
          <tt-dashboard-display-card
              header="Mehrparteienhäuser gesamt"
              icon="fas fa-city"
              :text="addressDbData.mph_counts.sum"
              :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
                ]"
              color="#f5b902"
          />
        </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>
    `
});
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() {
        return {
            addressDbData: null,
            selectedNetwork: 'all',
            isLoading: false
        };
    },
    async mounted() {
        await this.fetchAddressDbData();
    },
    methods: {
        async fetchAddressDbData() {
            this.isLoading = true;
            try {
                // Use the correct API endpoint as specified
                const netzgebietId = this.selectedNetwork === 'all' ? '' : this.selectedNetwork;
                const url = `${window.TT_CONFIG['BASE_PATH']}/DashboardNew/getDashboardAddressDBData${netzgebietId ? '?netzgebiet_id=' + netzgebietId : ''}`;
                const response = await axios.get(url);
                this.addressDbData = response.data;
                console.log('Address DB data:', this.addressDbData);
            } catch (error) {
                console.error('Error fetching address DB data:', error);
            } finally {
                this.isLoading = false;
            }
        }
    },
    watch: {
        selectedNetwork() {
            this.fetchAddressDbData();
        }
    }
});