JustZoe101/Zonneplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(dashboard,history): replace ViewModels with Pinia stores and improve backend

Browse Source
This commit is contained in:
JustZoe101
2026-08-05 09:23:18 +02:00
parent a0387126de
commit 90930cd223
29 changed files with 1372 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/features/dashboard/pages/Index.vue
+90 -120
View File
@@ -3,14 +3,14 @@ import { t } from 'i18next';
import moment from 'moment';
import { onMounted } from 'vue';
import Price from '../components/Price.vue';
import useDashboardViewModel from '../viewmodels/DashboardViewModel';
import { useDashboardStore } from '@/stores/dashboard';
import Error from '@/components/Error.vue';
import Loading from '@/components/Loading.vue';
const model = useDashboardViewModel();
const store = useDashboardStore();
onMounted(() => {
model.getDashboardData();
store.fetchDashboardData();
});
</script>
@@ -18,124 +18,94 @@ onMounted(() => {
<h1 class="mb-4 text-3xl font-black text-primary">
{{ t('dashboard.title') }}
</h1>
<div v-if="model.isLoading"></div>
<div class="mb-4 flex flex-col gap-2" v-if="model.dashboardData.value">
<h2 class="text-2xl font-black text-primary">
{{ t('dashboard.electricity') }}
</h2>
<div class="flex flex-wrap gap-4">
<Price
v-if="
model.dashboardData.value?.electricity.totalPriceTaxIncluded
"
:label="t('dashboard.current_electricity_price')"
:price="
model.dashboardData.value?.electricity.totalPriceTaxIncluded
"
:time="moment(model.dashboardData.value?.electricity.startDate)"
/>
<Price
v-if="
model.dashboardData.value?.electricityCheapest
?.totalPriceTaxIncluded
"
:label="t('dashboard.cheapest_electricity_price')"
:price="
model.dashboardData.value?.electricityCheapest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.electricityCheapest
?.startDate,
)
"
/>
<Price
v-if="
model.dashboardData.value?.electricityDurable
?.totalPriceTaxIncluded
"
:label="t('dashboard.durable_electricity_price')"
:price="
model.dashboardData.value?.electricityDurable
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.electricityDurable
?.startDate,
)
"
/>
<Price
v-if="
model.dashboardData.value?.electricityPriciest
?.totalPriceTaxIncluded
"
:label="t('dashboard.priciest_electricity_price')"
:price="
model.dashboardData.value?.electricityPriciest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.electricityPriciest
?.startDate,
)
"
/>
<Loading v-if="store.isLoading" />
<template v-else-if="store.dashboardData">
<div class="mb-4 flex flex-col gap-2">
<h2 class="text-2xl font-black text-primary">
{{ t('dashboard.electricity') }}
</h2>
<div class="flex flex-wrap gap-4">
<Price
v-if="
store.dashboardData.electricity?.totalPriceTaxIncluded
"
:label="t('dashboard.current_electricity_price')"
:price="
store.dashboardData.electricity.totalPriceTaxIncluded
"
:time="moment(store.dashboardData.electricity.startDate)"
/>
<Price
v-if="
store.dashboardData.electricityCheapest
?.totalPriceTaxIncluded
"
:label="t('dashboard.cheapest_electricity_price')"
:price="
store.dashboardData.electricityCheapest
.totalPriceTaxIncluded
"
:time="
moment(
store.dashboardData.electricityCheapest.startDate,
)
"
/>
<Price
v-if="
store.dashboardData.electricityDurable
?.totalPriceTaxIncluded
"
:label="t('dashboard.durable_electricity_price')"
:price="
store.dashboardData.electricityDurable
.totalPriceTaxIncluded
"
:time="
moment(store.dashboardData.electricityDurable.startDate)
"
/>
<Price
v-if="
store.dashboardData.electricityPriciest
?.totalPriceTaxIncluded
"
:label="t('dashboard.priciest_electricity_price')"
:price="
store.dashboardData.electricityPriciest
.totalPriceTaxIncluded
"
:time="
moment(
store.dashboardData.electricityPriciest.startDate,
)
"
/>
</div>
</div>
</div>
<div class="mb-4 flex flex-col gap-2" v-if="model.dashboardData.value">
<h2 class="text-2xl font-black text-primary">
{{ t('dashboard.gas') }}
</h2>
<div class="flex flex-wrap gap-4">
<Price
v-if="model.dashboardData.value?.gas.totalPriceTaxIncluded"
:label="t('dashboard.current_gas_price')"
:price="model.dashboardData.value?.gas.totalPriceTaxIncluded"
:time="
moment(model.dashboardData.value?.gas.startDate).format(
'DD-MM-YYYY',
)
"
/>
<Price
v-if="
model.dashboardData.value?.gasCheapest
?.totalPriceTaxIncluded
"
:label="t('dashboard.cheapest_gas_price')"
:price="
model.dashboardData.value?.gasCheapest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.gasCheapest?.startDate,
).format('DD-MM-YYYY')
"
/>
<Price
v-if="
model.dashboardData.value?.gasPriciest
?.totalPriceTaxIncluded
"
:label="t('dashboard.priciest_gas_price')"
:price="
model.dashboardData.value?.gasPriciest
?.totalPriceTaxIncluded
"
:time="
moment(
model.dashboardData.value?.gasPriciest?.startDate,
).format('DD-MM-YYYY')
"
/>
<div class="mb-4 flex flex-col gap-2">
<h2 class="text-2xl font-black text-primary">
{{ t('dashboard.gas') }}
</h2>
<div class="flex flex-wrap gap-4">
<Price
v-if="store.dashboardData.gas?.totalPriceTaxIncluded"
:label="t('dashboard.current_gas_price')"
:price="store.dashboardData.gas.totalPriceTaxIncluded"
:time="
moment(store.dashboardData.gas.startDate).format(
'DD-MM-YYYY',
)
"
/>
</div>
</div>
</template>
<div
v-else-if="!store.isLoading && !store.dashboardData"
class="rounded-xl bg-gray-100 p-8 text-center text-gray-500"
>
{{ t('dashboard.no_data') }}
</div>
<Error :message="model.error.value" v-if="model.error.value" />
<Loading v-if="model.isLoading.value" />
<Error :message="store.error" v-if="store.error" />
</template>