Homepage, verejna cast, vetsi sada uprav a oprav

src/pages/public/FlightDetailPage.vue

@@ -7,17 +7,21 @@ 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";
+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";
 
-const routeParams = useRoute().params
-
+const routeParams = useRoute().params;
 onMounted(() => {
   fetchFlight(routeParams.id, routeParams.username);
+  fetchUser(routeParams.username)
 })
 
 watch(flight, (newVal) => {
   const flightNameFormatted = flightName(newVal);
   useAppStore().setPageTitle(flightNameFormatted);
   useAppStore().setBreadcrumbs([
+    {to: {name: 'homepage'}, label: "Polétání.cz"},
     {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
     {label: flightNameFormatted}
   ]);
@@ -26,7 +30,6 @@ watch(flight, (newVal) => {
 </script>
 
 <template>
-
   <div>
     <FlightDetailSkeleton v-if="loading || !flight"/>
 
@@ -35,21 +38,22 @@ watch(flight, (newVal) => {
         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
-          v-if="flight.coverPhoto"
-          :cover-photo-url="flight.coverPhoto.url"
+          :cover-photo-url="flight.coverPhoto?.url"
           :photos="flight.photos"
         />
         <q-card-section>
-          <FlightBasicInfo :flight="flight"/>
+          <FlightBasicInfo :flight="flight" :show-copilots="false"/>
 
           <article class="q-my-lg" v-html="flight.description"/>
 
           <FlightTrackMap :flight="flight"/>
         </q-card-section>
       </q-card>
-    </template>
+      </template>
+
+    <PublicProfileSkeleton v-if="pilotLoading"/>
+    <PilotProfileCard :pilot="pilot" v-else />
   </div>
 </template>

src/pages/public/IndexPage.vue

@@ -1,11 +1,88 @@
 <script setup>
-
 </script>
 
 <template>
-  <div>
-    <h1>Pochlub se svým polétáním!</h1>
+  <q-layout view="lHh Lpr lFf" style="background: url('hp/bg.jpg'); background-size: cover;">
 
-    <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>
+    <q-header class="bg-semi-transparent text-black" elevated>
+      <q-toolbar>
+        <q-toolbar-title>
+          Polétání.cz
+        </q-toolbar-title>
+
+        <q-btn rounded class="q-mx-sm" :to="{name: 'login'}" flat>Přihlášení</q-btn>
+        <q-btn rounded class="q-mx-sm" :to="{name: 'registration'}" color="primary">Registrace</q-btn>
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container class="q-py-none">
+      <q-page>
+        <div class="row q-mx-md">
+          <div class="xs-hide sm-hide col-md-6 text-center">
+            <q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
+          </div>
+
+          <div class="col col-md-6">
+            <div class="info-box bg-semi-transparent q-mx-lg  q-py-lg q-px-lg rounded-borders">
+              <div class="text-h2 text-center">Pochlub se polétáním</div>
+
+              <q-timeline color="primary" class="q-my-lg">
+                <q-timeline-entry title="Zaznamenej si let">
+                  <div>
+                    Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
+                  </div>
+                </q-timeline-entry>
+
+
+                <q-timeline-entry title="Vyber a nahraj fotky">
+                  <div>
+                    Máš nějaké fotky z letu? Nahraj je ke svému letu! A pokud mají v sobě uloženou informaci o poloze, polétání.cz ti zobrazí i místo kde fotka vznikla.
+                  </div>
+                </q-timeline-entry>
+
+                <q-timeline-entry title="Ulož trasu">
+                  <div>
+                    Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
+                  </div>
+                </q-timeline-entry>
+
+                <q-timeline-entry title="Popiš zážitek">
+                  <div>
+                    Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
+                  </div>
+                </q-timeline-entry>
+
+                <q-timeline-entry title="Sdílej">
+                  <div>
+                    Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a sdílet odkaz kde chceš. Třeba s tvým kopilotem.
+                  </div>
+                </q-timeline-entry>
+              </q-timeline>
+
+                      <div class="text-center q-my-lg">
+          <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
+        </div>
+            </div>
+          </div>
+        </div>
+
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
+
+<style lang="scss">
+.bg-semi-transparent {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+}
+
+.info-box {
+  font-size: 150%;
+}
+
+.app-screen {
+  max-height: 85vh;
+}
+
+</style>

src/pages/public/LoginPage.vue

@@ -15,33 +15,38 @@ const logUser = () => {
 </script>
 
 <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-primary">
-          <h4 class="text-h5 q-my-md text-white">Login</h4>
-        </q-card-section>
-        <q-card-section>
-          <q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
-            <q-input square clearable v-model="email" type="email" label="Email">
-              <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-layout view="lHh Lpr lFf">
+    <q-page-container>
 
-        <q-card-actions class="q-px-lg">
-          <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">
-          <router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>
-        </q-card-section>
-      </q-card>
+      <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-primary">
+            <h4 class="text-h5 q-my-md text-white">Login</h4>
+          </q-card-section>
+          <q-card-section>
+            <q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
+              <q-input square clearable v-model="email" type="email" label="Email">
+                <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-page>
+          <q-card-actions class="q-px-lg">
+            <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">
+            <router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>
+          </q-card-section>
+        </q-card>
+
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>

src/pages/public/PilotProfilePage.vue

@@ -1,48 +1,38 @@
 <script setup>
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
-import {useAppStore} from "stores/App";
-import {onMounted, ref} from "vue";
-import {useUserStore} from "stores/User";
+import {onMounted} from "vue";
 import {useRoute} from "vue-router";
-import {useFlightsStore} from "stores/Flights";
-import {storeToRefs} from "pinia";
 import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
 import FlightsList from "components/flights/FlightsList.vue";
 import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
+import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
+import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
+import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
+import {storeToRefs} from "pinia";
+import {useUserStore} from "stores/User";
+import {useAppStore} from "stores/App";
+import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 
-const props = defineProps({
-  loggedUser: {
-    type: Object,
-    required: false
-  }
-})
-
+const loggedUser = storeToRefs(useUserStore()).user;
 const username = useRoute().params.username;
-const pilot = ref(null)
-const loading = ref(true);
-
 onMounted(() => {
-  loading.value = true;
-  useUserStore().fetchDetail(username).then((user) => {
-    pilot.value = user;
-    useAppStore().setPageTitle(pilot.value.name);
-  }).finally(() => {
-    loading.value = false
-  });
-
-  useFlightsStore().fetch(username);
+  fetchUser(username).then(user => {
+    useAppStore().setPageTitle(user.publicUsername);
+    useAppStore().setBreadcrumbs([
+      {to: {name: 'homepage'}, label: "Polétání.cz"},
+      {label: `@${user.publicUsername}`},
+    ])
+  })
+  fetchFlights(username);
 })
-
-const flights = storeToRefs(useFlightsStore()).items;
-
 </script>
 
 <template>
-  <FlightsListSkeleton v-if="loading || !pilot"/>
+  <div class="row">
+    <div class="col-12 col-md-8">
+      <FlightsListSkeleton v-if="flightsLoading"/>
 
-  <div class="row" v-else>
-    <div class="col">
-      <q-banner class="bg-primary text-white" v-if="flights.length === 0">
+      <q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
         Tento pilot zatím nepublikoval žádný let.
       </q-banner>
 
@@ -54,23 +44,10 @@ const flights = storeToRefs(useFlightsStore()).items;
         />
       </template>
     </div>
-    <div class="col-4 sm-hide">
-      <q-card class="q-mr-md" flat>
-        <q-img :src="pilot.titleImageUrl" v-if="pilot.titleImageUrl"/>
-        <q-card-section>
-          <div class="text-center" :style="`margin-top: ${pilot.titleImageUrl ? '-100' : '0'}px`">
-            <AvatarFromPhoto :size="150" :src="pilot.avatarImageUrl" v-if="pilot.avatarImageUrl" class="q-mb-sm"/>
-            <div class="text-h3">{{ pilot.name }}</div>
-            <div class="text-subtitle1 text-weight-thin">
-            Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
-          </div>
-          </div>
+    <div class="col-12 col-md-4">
+      <PublicProfileSkeleton v-if="pilotLoading"/>
 
-
-
-          <div class="q-my-lg" v-html="pilot.description"/>
-        </q-card-section>
-      </q-card>
+      <PilotProfileCard v-else :pilot="pilot" />
     </div>
 
   </div>

src/pages/public/RegisterPage.vue

@@ -46,47 +46,52 @@ const rules = {
 </script>
 
 <template>
-  <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
-          ref="form"
-          class="q-px-sm q-pt-xl q-pb-lg"
-          @submit.prevent="registerUser"
-        >
-          <q-input square clearable v-model="formData.name" type="text" label="Jméno">
-            <template v-slot:prepend>
-              <q-icon name="person"/>
-            </template>
-          </q-input>
+  <q-layout view="lHh Lpr lFf">
+    <q-page-container>
 
-          <q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
-            <template v-slot:prepend>
-              <q-icon name="email"/>
-            </template>
-          </q-input>
-          <q-input square clearable v-model="formData.password" type="password" label="Heslo" :rules="rules.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>
+      <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
+              ref="form"
+              class="q-px-sm q-pt-xl q-pb-lg"
+              @submit.prevent="registerUser"
+            >
+              <q-input square clearable v-model="formData.name" type="text" label="Jméno">
+                <template v-slot:prepend>
+                  <q-icon name="person"/>
+                </template>
+              </q-input>
+
+              <q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
+                <template v-slot:prepend>
+                  <q-icon name="email"/>
+                </template>
+              </q-input>
+              <q-input square clearable v-model="formData.password" type="password" label="Heslo" :rules="rules.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>
+    </q-page-container>
+  </q-layout>
 </template>