112 lines
4.0 KiB
Vue
112 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { t } from 'i18next';
|
|
import moment from 'moment';
|
|
import { onMounted } from 'vue';
|
|
import Price from '../components/Price.vue';
|
|
import { useDashboardStore } from '@/stores/dashboard';
|
|
import Error from '@/components/Error.vue';
|
|
import Loading from '@/components/Loading.vue';
|
|
|
|
const store = useDashboardStore();
|
|
|
|
onMounted(() => {
|
|
store.fetchDashboardData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="mb-4 text-3xl font-black text-primary">
|
|
{{ t('dashboard.title') }}
|
|
</h1>
|
|
<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 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="store.error" v-if="store.error" />
|
|
</template>
|