Added new Dashboard
This commit is contained in:
Luca Haid
@@ -0,0 +1,273 @@
|
||||
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)"/>
|
||||
<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>
|
||||
`,
|
||||
props:
|
||||
{
|
||||
selectedNetworkOwner: {type: String, required: true},
|
||||
selectedCampaign: {type: String, required: true},
|
||||
selectedGemeinde: {type: String, required: true},
|
||||
}
|
||||
,
|
||||
data() {
|
||||
return {
|
||||
filterOptions: {
|
||||
netOwners: [],
|
||||
campaigns: [],
|
||||
gemeinden: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.fetchNetOwnerFilterOptions();
|
||||
await this.fetchCampaignFilterOptions();
|
||||
await this.fetchCampaignGemeindeFilterOptions();
|
||||
},
|
||||
methods: {
|
||||
async fetchNetOwnerFilterOptions() {
|
||||
const response = await axios.get(`${window.TT_CONFIG['BASE_URL']}/getNetOwnerFilterOptions`);
|
||||
this.filterOptions.netOwners = [{value: 'all', text: 'Alle'}, ...response.data];
|
||||
},
|
||||
async fetchCampaignFilterOptions() {
|
||||
const response = await axios.post(`${window.TT_CONFIG['BASE_URL']}/getCampaignFilterOptions`, {netOwners: this.selectedNetworkOwner === 'all' ? undefined : this.selectedNetworkOwner});
|
||||
this.filterOptions.campaigns = [{value: 'all', text: 'Alle'}, ...response.data];
|
||||
},
|
||||
async fetchCampaignGemeindeFilterOptions() {
|
||||
const response = await axios.post(`${window.TT_CONFIG['BASE_URL']}/getCampaignGemeindeFilterOptions`,
|
||||
{netOwners: this.selectedNetworkOwner === 'all' ? undefined : this.selectedNetworkOwner, campaigns: this.selectedCampaign === 'all' ? undefined : this.selectedCampaign});
|
||||
this.filterOptions.gemeinden = [{value: 'all', text: 'Alle'}, ...response.data];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedNetworkOwner() {
|
||||
this.fetchCampaignFilterOptions();
|
||||
this.fetchCampaignGemeindeFilterOptions();
|
||||
},
|
||||
selectedCampaign() {
|
||||
this.fetchCampaignGemeindeFilterOptions();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Vue.component('tt-dashboard-display-card', {
|
||||
props: ['header', 'icon', 'text', 'subHeaders', 'color'],
|
||||
computed: {
|
||||
cardHeight() {
|
||||
return `${96 + 25 * this.subHeaders.length}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-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"
|
||||
:subHeaders="[
|
||||
'Vollanschluss: ' + (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss)),
|
||||
'Vorsorgeanschluss: ' + (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge))
|
||||
]"
|
||||
color="#28a745"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="Bestellungen gesamt EFH"
|
||||
icon="fas fa-home"
|
||||
:text="dashboardData.order_efh"
|
||||
:subHeaders="[
|
||||
'Vollanschluss: ' + dashboardData.order_efh_vollanschluss,
|
||||
'Vorsorgeanschluss: ' + dashboardData.order_efh_vorsorge
|
||||
]"
|
||||
color="#17a2b8"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="Bestellungen gesamt MPH"
|
||||
icon="fas fa-building"
|
||||
:text="dashboardData.order_mph"
|
||||
:subHeaders="[
|
||||
'Vollanschluss: ' + dashboardData.order_mph_vollanschluss,
|
||||
'Vorsorgeanschluss: ' + dashboardData.order_mph_vorsorge
|
||||
]"
|
||||
color="#dbab1a"
|
||||
/>
|
||||
</div>
|
||||
<hr>
|
||||
<h4 class="mt-4">Baufortschritt</h4>
|
||||
<div class="dashboard-cards position-relative">
|
||||
<tt-dashboard-display-card
|
||||
header="140 - Leerrohr an der Grundstücksgrenze abgelegt"
|
||||
icon="fas fa-road"
|
||||
:text="dashboardData.baufortschritt_140 + ' / ' + dashboardData.order_actual_order"
|
||||
:subHeaders="[]"
|
||||
color="#6c757d"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="Installationspaket erhalten"
|
||||
icon="fas fa-box-open"
|
||||
:text="dashboardData.installationspaket_erhalten + ' / ' + dashboardData.order_efh"
|
||||
:subHeaders="[]"
|
||||
color="#007bff"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="Leerrohr im Haus"
|
||||
icon="fas fa-house-user"
|
||||
:text="dashboardData.lehrrohr_im_haus + ' / ' + dashboardData.order_efh"
|
||||
:subHeaders="[]"
|
||||
color="#ffc107"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="Inhauskabel verlegt EFH"
|
||||
icon="fas fa-plug"
|
||||
:text="dashboardData.inhouse_kabel_verlegt_efh + ' / ' + dashboardData.order_efh"
|
||||
:subHeaders="[]"
|
||||
color="#28a745"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="Inhauskabel verlegt MPH"
|
||||
icon="fas fa-building-user"
|
||||
:text="dashboardData.inhouse_kabel_verlegt_mph + ' / ' + dashboardData.order_mph"
|
||||
:subHeaders="[]"
|
||||
color="#17a2b8"
|
||||
/>
|
||||
</div>
|
||||
<hr>
|
||||
<h4 class="mt-4">Installationsfortschritt</h4>
|
||||
<div class="dashboard-cards position-relative">
|
||||
<tt-dashboard-display-card
|
||||
header="245 - Installation freigegeben"
|
||||
icon="fas fa-tools"
|
||||
:text="dashboardData.installationsfortschritt_245 + ' / ' + dashboardData.order_actual_order"
|
||||
:subHeaders="[]"
|
||||
color="#6c757d"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="300 - ONT installiert"
|
||||
icon="fas fa-wifi"
|
||||
:text="dashboardData.ont_installiert_300 + ' / ' + dashboardData.order_actual_order"
|
||||
:subHeaders="[]"
|
||||
color="#007bff"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="350 - Vollanschluss dokumentiert (Vollanschluss)"
|
||||
icon="fas fa-file-alt"
|
||||
:text="dashboardData.vollanschluss_dokumentiert_350 + ' / ' + (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss))"
|
||||
:subHeaders="[
|
||||
'' // Add any additional info if needed.
|
||||
] "
|
||||
color="#ffc107"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="351 - Vorsorgeanschluss dokumentiert (Vorsorgeanschluss)"
|
||||
icon="fas fa-file-alt"
|
||||
:text="dashboardData.vorsorge_dokumentiert_351 + ' / ' + (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge))"
|
||||
:subHeaders="[]"
|
||||
color="#ffc107"
|
||||
/>
|
||||
<tt-dashboard-display-card
|
||||
header="500 - Provider bestellt"
|
||||
icon="fas fa-shopping-cart"
|
||||
:text="dashboardData.provider_bestellt_500 + ' / ' + dashboardData.order_actual_order"
|
||||
:subHeaders="[]"
|
||||
color="#28a745"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</tt-card>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
dashboardData: {
|
||||
order_max_home_addrdb: 0,
|
||||
order_actual_order: "0",
|
||||
order_efh: "0",
|
||||
order_efh_vorsorge: "0",
|
||||
order_efh_vollanschluss: "0",
|
||||
order_mph: "0",
|
||||
order_mph_vorsorge: "0",
|
||||
order_mph_vollanschluss: "0",
|
||||
baufortschritt_140: "0",
|
||||
installationspaket_erhalten: "0",
|
||||
lehrrohr_im_haus: "0",
|
||||
inhouse_kabel_verlegt_efh: "0",
|
||||
inhouse_kabel_verlegt_mph: "0",
|
||||
installationsfortschritt_245: "0",
|
||||
ont_installiert_300: "0",
|
||||
vollanschluss_dokumentiert_350: "0",
|
||||
vorsorge_dokumentiert_351: "0",
|
||||
provider_bestellt_500: "0"
|
||||
},
|
||||
selectedNetworkOwner: 'all',
|
||||
selectedCampaign: 'all',
|
||||
selectedGemeinde: 'all',
|
||||
isLoading: false
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.fetchDashboardData();
|
||||
},
|
||||
methods: {
|
||||
async fetchDashboardData() {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
const response = await axios.post(`${window.TT_CONFIG['BASE_URL']}/getDashboardData`, {
|
||||
netOwners: this.selectedNetworkOwner === 'all' ? '' : this.selectedNetworkOwner,
|
||||
campaigns: this.selectedCampaign === 'all' ? '' : this.selectedCampaign,
|
||||
gemeinden: this.selectedGemeinde === 'all' ? '' : this.selectedGemeinde,
|
||||
});
|
||||
|
||||
console.log(response.data);
|
||||
this.dashboardData = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching dashboard data:', error);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedNetworkOwner() {
|
||||
this.fetchDashboardData();
|
||||
},
|
||||
selectedCampaign() {
|
||||
this.fetchDashboardData();
|
||||
},
|
||||
selectedGemeinde() {
|
||||
this.fetchDashboardData();
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user