139 lines
4.8 KiB
Vue
139 lines
4.8 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 useDashboardViewModel from '../viewmodels/DashboardViewModel';
|
|
import Error from '@/components/Error.vue';
|
|
|
|
const model = useDashboardViewModel();
|
|
|
|
onMounted(() => {
|
|
model.getDashboardData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="mb-4 text-3xl font-black text-primary">
|
|
{{ t('dashboard.title') }}
|
|
</h1>
|
|
<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,
|
|
)
|
|
"
|
|
/>
|
|
</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>
|
|
</div>
|
|
<Error :message="model.error.value" v-if="model.error.value" />
|
|
</template>
|