Prvni naznak verejne casti, sprava profilu

src/pages/profile/ProfilePage.vue

@@ -1,13 +1,45 @@
 <script setup>
 import {useUserStore} from "stores/User";
-import {onMounted} from "vue";
-import {useFlightsStore} from "stores/Flights";
+import ProfileForm from "components/profile/ProfileForm.vue";
+import {useAppStore} from "stores/App";
+import {storeToRefs} from "pinia";
+import {useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+import {ref} from "vue";
+import ChangePasswordForm from "components/profile/ChangePasswordForm.vue";
+import PublicProfileInfo from "components/profile/PublicProfileInfo.vue";
 
-const loggedUser = useUserStore().user
+useAppStore().setPageTitle("Profil");
+const loggedUser = storeToRefs(useUserStore()).user;
+
+const $q = useQuasar();
+const handleSave = (formData) => {
+  useUserStore().update(loggedUser.id, formData).then((user) => {
+    $q.notify(successObject("Uspesne upraveno"));
+  });
+};
+const openedTab = ref("profile");
 </script>
 
 <template>
-  Profile page
+  <q-tabs class="q-my-lg" v-model="openedTab">
+    <q-tab name="profile">Profil</q-tab>
+    <q-tab name="changePassword">Změna hesla</q-tab>
+    <q-tab name="publicProfile">Veřejný profil</q-tab>
+  </q-tabs>
 
-  {{ loggedUser }}
+  <q-tab-panels v-model="openedTab">
+    <q-tab-panel name="profile">
+      <ProfileForm :user="loggedUser" @save="handleSave"/>
+    </q-tab-panel>
+
+    <q-tab-panel name="changePassword">
+      <ChangePasswordForm @save="handleSave" />
+    </q-tab-panel>
+
+    <q-tab-panel name="publicProfile">
+      <PublicProfileInfo :user="loggedUser" />
+    </q-tab-panel>
+
+  </q-tab-panels>
 </template>

src/pages/profile/details/AircraftDetailPage.vue

@@ -41,7 +41,7 @@ watch(aircraft, (newVal) => {
   <AircraftDetailSkeleton v-if="loading || !aircraft"/>
   <template v-else>
 
-    <q-card>
+    <q-card class="q-mx-md q-my-md flight-detail-card">
       <q-img :src="aircraft.photoUrl"/>
 
       <q-card-section>

src/pages/profile/details/FlightDetailPage.vue

@@ -10,14 +10,16 @@ import {successObject} from "src/composables/dialog";
 import MapWithMarkers from "components/map/MapWithMarkers.vue";
 import FAB from "components/FAB.vue";
 import PhotoDetail from "components/photos/PhotoDetail.vue";
+import {useFlightsStore} from "stores/Flights";
 
 
 const $q = useQuasar();
 const $router = useRouter();
 const displayedPhoto = ref(null);
+const flightId = parseInt(useRoute().params.id);
 
 onMounted(() => {
-  fetchFlight(useRoute().params.id).then(() => {
+  fetchFlight(flightId).then(() => {
     if (flight.value.photos.length === 0) return;
     displayedPhoto.value = flight.value.coverPhoto.url || flight.value.photos[0].url;
   })
@@ -91,6 +93,12 @@ const displayMap = computed(() => {
     flight.value.landingAirport.id !== flight.value.takeoffAirport.id
   )
 });
+
+const togglePublicVisibility = () => {
+  useFlightsStore().update(flightId, {isPublic: !flight.value.isPublic}).then(() => {
+    $q.notify(successObject("Uspesne nastaveno"));
+  })
+}
 </script>
 
 
@@ -98,7 +106,7 @@ const displayMap = computed(() => {
   <FlightDetailSkeleton v-if="loading || !flight"/>
 
   <template v-else>
-    <q-card class="q-mx-md q-my-md">
+    <q-card class="q-mx-md q-my-md flight-detail-card">
       <q-carousel
         v-if="flight.photos.length > 0"
         animated
@@ -128,13 +136,34 @@ const displayMap = computed(() => {
       </q-card-section>
 
       <q-card-actions align="right">
+        <q-btn @click="togglePublicVisibility" :icon="flight.isPublic ? 'visibility' : 'visibility_off'" rounded flat text-color="primary">
+          <q-tooltip>
+
+            {{ flight.isPublic ? 'je verejny' : 'neni verejny'}}
+
+          </q-tooltip>
+        </q-btn>
+
         <q-btn @click="handleDeleteAndRedirect" icon="delete" rounded flat text-color="red"/>
       </q-card-actions>
     </q-card>
 
-    <PhotoDetail v-if="photoData" v-model="openPhotoDetail" :photo="photoData.photo" :photos="photoData.allPhotos" :opened-index="photoData.idx"/>
+    <PhotoDetail
+      v-if="photoData"
+      v-model="openPhotoDetail"
+      :photo="photoData.photo"
+      :photos="photoData.allPhotos"
+      :opened-index="photoData.idx"
+    />
 
     <FAB :router-link="{name: 'flightEdit', params:{id: flight.id}}" mode="edit"/>
-
   </template>
 </template>
+
+<style>
+.flight-detail-card {
+  width: 100%;
+  max-width: 700px;
+  margin: 0 auto;
+}
+</style>

src/pages/profile/forms/NewFlightPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {onMounted} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useFlightsStore} from "stores/Flights";
 import {useRouter} from "vue-router";
@@ -39,7 +39,5 @@ const handleSave = (formData) => {
 
 <template>
   <FlightFormSteps :disabled="['copilot', 'track', 'photos', 'notes']"/>
-
   <FlightFormBasic @save="handleSave" :aircrafts="aircrafts" :airports="airports" :locations="locations" />
-
 </template>

src/pages/public/FlightDetailPage.vue

@@ -0,0 +1,9 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+    Detail letu
+  </div>
+</template>

src/pages/public/PilotProfilePage.vue

@@ -0,0 +1,73 @@
+<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 {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";
+
+const props = defineProps({
+  loggedUser: {
+    type: Object,
+    required: false
+  }
+})
+
+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);
+})
+
+const flights = storeToRefs(useFlightsStore()).items;
+
+</script>
+
+<template>
+  <FlightsListSkeleton v-if="loading || !pilot"/>
+  <div class="row" v-else>
+    <div class="col">
+      <q-banner class="bg-primary text-white" v-if="flights.length === 0">
+        Tento pilot zatím nepublikoval žádný let.
+      </q-banner>
+
+      <template v-else>
+        <h3>Lety</h3>
+
+      <FlightsList
+        :items="flights"
+        :displayVisibilityInfo="false"
+        :route-detail="{name: 'publicFlightDetail', params: {username: username}}"
+      />
+      </template>
+
+    </div>
+    <div class="col-4 sm-hide">
+      <div class="text-center">
+        <q-avatar size="150px">
+          <img :src="pilot.avatarImageUrl" alt="">
+        </q-avatar>
+      </div>
+
+      <h3>{{ pilot.name }}</h3>
+
+      <div class="q-my-lg" v-html="pilot.description"/>
+
+      Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
+    </div>
+
+  </div>
+</template>