generated from VLADIMIR/template_frontend
59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue';
|
||
import { apiGetDays } from './client';
|
||
import type { Schedule } from './models';
|
||
import { formatRussianDate, getRelativeDayName, timeAgo } from './date';
|
||
import { capitalizeFirstLetter } from './text';
|
||
|
||
const schedule = ref<Schedule>({ updateTime: "", days: [] })
|
||
|
||
onMounted(async () => {
|
||
schedule.value = await apiGetDays()
|
||
})
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
Обновлено: {{ timeAgo(schedule.updateTime) }}
|
||
<div v-for="day in schedule.days" :key="day.date" class="day-block">
|
||
{{ capitalizeFirstLetter(formatRussianDate(day.date)) }}
|
||
<span v-if="getRelativeDayName(day.date) !== ''">({{ getRelativeDayName(day.date) }})</span>
|
||
<div v-for="performance in day.performances" :key="performance.name" class="performance-block">
|
||
<div v-if="performance.timeCollection !== '' && performance.timeCollection !== '-'">
|
||
Сбор: {{ performance.timeCollection }}
|
||
</div>
|
||
<div v-if="performance.timeStart !== '' && performance.timeStart !== '-'">
|
||
Время: {{ performance.timeStart }}
|
||
</div>
|
||
<div>
|
||
Место: {{ capitalizeFirstLetter(performance.place) }}
|
||
</div>
|
||
<div>
|
||
{{ capitalizeFirstLetter(performance.name) }}
|
||
</div>
|
||
<div>
|
||
Номера:
|
||
<div v-for="number in performance.numbers" :key="number.name">
|
||
- {{ number.name }}
|
||
</div>
|
||
</div>
|
||
<div v-if="performance.costumes !== '' && performance.costumes !== '-'">
|
||
{{ capitalizeFirstLetter(performance.costumes) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.day-block {
|
||
border: solid 2px #000058;
|
||
margin: 10px 0;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.performance-block {}
|
||
</style>
|