refactor(dashboard,history): replace ViewModels with Pinia stores and improve backend
This commit is contained in:
@@ -13,7 +13,7 @@ defineProps<{
|
||||
<div class="font-bold text-primary uppercase">{{ label }}</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-4xl font-black">
|
||||
€{{ price?.toPrecision(2).toString().replace('.', ',') }}
|
||||
€{{ price?.toFixed(2).replace('.', ',') }}
|
||||
</div>
|
||||
<div class="text-sm text-black/50">
|
||||
{{ moment.isMoment(time) ? time.format('DD-MM-YYYY HH:mm') : time }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { create } from 'axios';
|
||||
import { ref } from 'vue';
|
||||
import DashboardData = App.Features.Dashboard.Data.DashboardData;
|
||||
|
||||
export default function useDashboardViewModel() {
|
||||
const isLoading = ref<boolean>(false);
|
||||
const error = ref<string>();
|
||||
const dashboardData = ref<DashboardData>();
|
||||
|
||||
function getDashboardData() {
|
||||
isLoading.value = true;
|
||||
|
||||
const client = create();
|
||||
client
|
||||
.get<DashboardData>('/api/energy-prices')
|
||||
.then((res) => {
|
||||
dashboardData.value = res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
error.value = err.response.data.message;
|
||||
})
|
||||
.finally(() => (isLoading.value = false));
|
||||
}
|
||||
|
||||
return { isLoading, dashboardData, error, getDashboardData };
|
||||
}
|
||||
Reference in New Issue
Block a user