update

src/components/SchedulePage.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { apiGetDays } from './client';
+import type { Schedule } from './models';
+import { formatRussianDate, getRelativeDayName } from './date';
+import { capitalizeFirstLetter } from './text';
+
+const schedule = ref<Schedule>({ days: [] })
+
+onMounted(async () => {
+  schedule.value = await apiGetDays()
+})
+
+</script>
+
+<template>
+  <div>
+    <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>
+          {{ performance.time_collection }}
+        </div>
+        <div>
+          {{ performance.time_start }}
+        </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 1px rebeccapurple;
+  margin: 10px 0;
+  padding: 15px;
+  border-radius: 10px;
+}
+
+.performance-block {
+
+}
+</style>