Refaktoring verejneho profilu, pridani zobrazeni udalosti

2023-10-14 22:43:16 +02:00
parent 5b47c56c6f
commit 4c8952117b
12 changed files with 228 additions and 49 deletions
@@ -0,0 +1,74 @@
+<script setup>
+import {onMounted, watch} from "vue";
+import {event, fetchEvent, loading} from "src/composables/objects/event";
+import {useRoute} from "vue-router";
+import {useAppStore} from "stores/App";
+import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
+import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
+import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
+import PilotProfileCard from "components/profile/PilotProfileCard.vue";
+import EventDetailSkeleton from "components/event/EventDetailSkeleton.vue";
+import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
+import FAB from "components/FAB.vue";
+import FlightsList from "components/flights/FlightsList.vue";
+
+const routeParams = useRoute().params;
+onMounted(() => {
+  fetchEvent(routeParams.id, routeParams.username);
+  fetchUser(routeParams.username)
+})
+
+watch(event, (newVal) => {
+  // const eventNameFormatted = eventName(newVal);
+  useAppStore().setPageTitle(newVal.name);
+  useAppStore().setBreadcrumbs([
+    {to: {name: 'homepage'}, label: "Polétání.cz"},
+    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+    {to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
+    {label: newVal.name}
+  ]);
+});
+
+</script>
+
+<template>
+  <div>
+    <EventDetailSkeleton v-if="loading || !event"/>
+
+
+    <template v-else>
+      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
+        Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
+      </q-banner>
+
+
+      <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
+        <q-item>
+          <q-item-section>
+            Od: {{ formatDatetime(event.dateFrom, FORMAT_DATE) }}
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            Do: {{ formatDatetime(event.dateTo, FORMAT_DATE) }}
+          </q-item-section>
+        </q-item>
+      </q-list>
+
+      <article v-html="event.description"/>
+      <h3>Lety</h3>
+
+      <q-banner v-if="event.flights.length === 0" class="bg-light-blue text-white">
+        Zatím tu nemáš uložené žádné lety.
+      </q-banner>
+
+      <FlightsList
+        v-else
+        :items="event.flights"
+        :route-detail="{name: 'publicFlightDetail', params: {username: routeParams.username}}"
+      />
+
+    </template>
+  </div>
+</template>