Verejna cast, hezci 404ka, refaktoring

src/pages/public/FlightDetailPage.vue

@@ -1,9 +1,50 @@
 <script setup>
+import {onMounted, watch} from "vue";
+import {fetchFlight, flight, flightName, loading} from "src/composables/objects/flight";
+import {useRoute} from "vue-router";
+import PhotoCarousel from "components/flights/PhotoCarousel.vue";
+import FlightTrackMap from "components/flights/FlightTrackMap.vue";
+import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
+import {useAppStore} from "stores/App";
+import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
+
+const routeParams = useRoute().params
+
+onMounted(() => {
+  fetchFlight(routeParams.id, routeParams.username);
+})
+
+watch(flight, (newVal) => {
+  const flightNameFormatted = flightName(newVal);
+  useAppStore().setPageTitle(flightNameFormatted);
+  useAppStore().setBreadcrumbs([
+    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+    {label: flightNameFormatted}
+  ]);
+});
 
 </script>
 
 <template>
-  <div>
-    Detail letu
-  </div>
+
+  <FlightDetailSkeleton v-if="loading || !flight"/>
+
+  <template v-else>
+
+    <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!flight.isPublic">
+      Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
+    </q-banner>
+
+
+    <q-card class="q-mx-md q-my-md flight-detail-card">
+      <PhotoCarousel :cover-photo-url="flight.coverPhoto.url" :photos="flight.photos"/>
+      <q-card-section>
+        <FlightBasicInfo :flight="flight"/>
+
+        <article class="q-my-lg" v-html="flight.description"/>
+
+        <FlightTrackMap :flight="flight"/>
+      </q-card-section>
+    </q-card>
+  </template>
 </template>

src/pages/public/IndexPage.vue

@@ -3,8 +3,9 @@
 </script>
 
 <template>
+  <div>
+    <h1>Pochlub se svým polétáním!</h1>
 
-  <router-link :to='{"name": "login"}'>Login</router-link>
-  <router-link :to='{"name": "registration"}'>Register</router-link>
-
+    <p>Létáš? Kam si archivuješ fotky a trasy? Polétání.cz je aplikace pro sdílení informací o tvých výletech vzduchem.</p>
+  </div>
 </template>

src/pages/public/LoginPage.vue

@@ -17,7 +17,7 @@ const logUser = () => {
 <template>
   <q-page class="window-height window-width row justify-center">
       <q-card square style="width:95%; max-width: 450px; height:400px;" class="q-mt-lg">
-        <q-card-section class="bg-accent">
+        <q-card-section class="bg-primary">
           <h4 class="text-h5 q-my-md text-white">Login</h4>
         </q-card-section>
         <q-card-section>
@@ -36,10 +36,10 @@ const logUser = () => {
         </q-card-section>
 
         <q-card-actions class="q-px-lg">
-          <q-btn unelevated size="lg" class="full-width" label="Sign In" @click.prevent="logUser()"/>
+          <q-btn unelevated size="lg" class="full-width" label="Přihlásit se" @click.prevent="logUser()"/>
         </q-card-actions>
         <q-card-section class="text-center q-pa-sm">
-          <p class="text-grey-6">Forgot your password?</p>
+          <router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>
         </q-card-section>
       </q-card>
 

src/pages/public/PilotProfilePage.vue

@@ -45,13 +45,11 @@ const flights = storeToRefs(useFlightsStore()).items;
       </q-banner>
 
       <template v-else>
-        <h3>Lety</h3>
-
-      <FlightsList
-        :items="flights"
-        :displayVisibilityInfo="false"
-        :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
-      />
+        <FlightsList
+          :items="flights"
+          :displayVisibilityInfo="loggedUser.id === pilot.id"
+          :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+        />
       </template>
 
     </div>
@@ -63,10 +61,11 @@ const flights = storeToRefs(useFlightsStore()).items;
       </div>
 
       <h3>{{ pilot.name }}</h3>
+      <div class="text-subtitle1">
+        Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
+      </div>
 
       <div class="q-my-lg" v-html="pilot.description"/>
-
-      Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
     </div>
 
   </div>

src/pages/public/RegisterPage.vue

@@ -37,43 +37,37 @@ const registerUser = () => {
 </script>
 
 <template>
-  <q-page
-    class="window-height window-width row justify-center items-center"
-  >
-    <div class="column q-pa-lg">
-      <div class="row">
-        <q-card square class="shadow-24" style="width:300px;height:485px;">
-          <q-card-section class="bg-deep-purple-7">
-            <h4 class="text-h5 text-white q-my-md">Registration</h4>
-          </q-card-section>
-          <q-card-section>
-            <q-form class="q-px-sm q-pt-xl q-pb-lg" @submit.prevent="registerUser">
-              <q-input square clearable v-model="name" type="text" label="Name">
-                <template v-slot:prepend>
-                  <q-icon name="person"/>
-                </template>
-              </q-input>
+  <q-page class="row justify-center">
+    <q-card style="width:95%; max-width: 450px; height: 500px" >
+      <q-card-section class="bg-primary">
+        <h4 class="text-h5 text-white q-my-md">Registrace</h4>
+      </q-card-section>
+      <q-card-section>
+        <q-form class="q-px-sm q-pt-xl q-pb-lg" @submit.prevent="registerUser">
+          <q-input square clearable v-model="name" type="text" label="Name">
+            <template v-slot:prepend>
+              <q-icon name="person"/>
+            </template>
+          </q-input>
 
-              <q-input square clearable v-model="email" type="email" label="E-mail">
-                <template v-slot:prepend>
-                  <q-icon name="email"/>
-                </template>
-              </q-input>
-              <q-input square clearable v-model="password" type="password" label="Password">
-                <template v-slot:prepend>
-                  <q-icon name="lock"/>
-                </template>
-              </q-input>
-            </q-form>
-          </q-card-section>
-          <q-card-actions class="q-px-lg">
-            <q-btn @click="registerUser" unelevated size="lg" color="purple-4" class="full-width text-white" label="Get Started"/>
-          </q-card-actions>
-          <q-card-section class="text-center q-pa-sm">
-            <router-link :to="{name: 'login'}" class="text-grey-6">Return to login</router-link>
-          </q-card-section>
-        </q-card>
-      </div>
-    </div>
+          <q-input square clearable v-model="email" type="email" label="E-mail">
+            <template v-slot:prepend>
+              <q-icon name="email"/>
+            </template>
+          </q-input>
+          <q-input square clearable v-model="password" type="password" label="Password">
+            <template v-slot:prepend>
+              <q-icon name="lock"/>
+            </template>
+          </q-input>
+        </q-form>
+      </q-card-section>
+      <q-card-actions class="q-px-lg">
+        <q-btn @click="registerUser" unelevated size="lg" class="full-width" label="Registrovat"/>
+      </q-card-actions>
+      <q-card-section class="text-center q-pa-sm">
+        <router-link :to="{name: 'login'}" class="text-grey-6">Zpět na login</router-link>
+      </q-card-section>
+    </q-card>
   </q-page>
 </template>