109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, watch } from 'vue';
|
|
import moment from 'moment';
|
|
import { useHistoryStore } from '@/stores/history';
|
|
import Chart from '../components/Chart.vue';
|
|
import Loading from '@/components/Loading.vue';
|
|
import Error from '@/components/Error.vue';
|
|
import { t } from 'i18next';
|
|
|
|
const store = useHistoryStore();
|
|
|
|
onMounted(() => {
|
|
store.fetchHistoryData(moment().format('YYYY-MM-DD'));
|
|
});
|
|
|
|
watch(
|
|
() => store.selectedDate,
|
|
(value) => {
|
|
if (value) {
|
|
store.fetchHistoryData(value);
|
|
}
|
|
},
|
|
);
|
|
|
|
const electricityChartData = computed(
|
|
() =>
|
|
store.historyData?.electricity
|
|
.filter((e) => e.totalPriceTaxIncluded != null)
|
|
.map((e) => ({
|
|
label: moment(e.startDate).format('HH:mm'),
|
|
value: e.totalPriceTaxIncluded,
|
|
})) ?? [],
|
|
);
|
|
|
|
const gasChartData = computed(
|
|
() =>
|
|
store.historyData?.gas
|
|
.filter((g) => g.totalPriceTaxIncluded != null)
|
|
.map((g) => ({
|
|
label: moment(g.startDate).format('DD-MM-YYYY'),
|
|
value: g.totalPriceTaxIncluded,
|
|
})) ?? [],
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="mb-4 text-3xl font-black text-primary">
|
|
{{ t('history.title') }}
|
|
</h1>
|
|
<div class="mb-6">
|
|
<label
|
|
for="date-select"
|
|
class="mb-2 block text-sm font-medium text-gray-700"
|
|
>
|
|
{{ t('history.select_date') }}
|
|
</label>
|
|
<input
|
|
id="date-select"
|
|
type="date"
|
|
:value="store.selectedDate"
|
|
@input="
|
|
store.selectedDate = ($event.target as HTMLInputElement).value
|
|
"
|
|
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm shadow-sm focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none"
|
|
/>
|
|
</div>
|
|
<Loading v-if="store.isLoading" />
|
|
<template v-else-if="store.historyData">
|
|
<div class="mb-6">
|
|
<h2 class="mb-2 text-xl font-bold text-primary">
|
|
{{ t('history.electricity_prices') }}
|
|
</h2>
|
|
<Chart
|
|
v-if="electricityChartData.length > 0"
|
|
:data="electricityChartData"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="rounded-xl bg-gray-100 p-8 text-center text-gray-500"
|
|
>
|
|
{{ t('history.no_electricity_data') }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 class="mb-2 text-xl font-bold text-primary">
|
|
{{ t('history.gas_prices') }}
|
|
</h2>
|
|
<Chart
|
|
v-if="gasChartData.length > 0"
|
|
:data="gasChartData"
|
|
color="#3b82f6"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="rounded-xl bg-gray-100 p-8 text-center text-gray-500"
|
|
>
|
|
{{ t('history.no_gas_data') }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div
|
|
v-else-if="!store.isLoading && !store.historyData"
|
|
class="rounded-xl bg-gray-100 p-8 text-center text-gray-500"
|
|
>
|
|
{{ t('history.no_data') }}
|
|
</div>
|
|
<Error v-if="store.error" :message="store.error" />
|
|
</template>
|