Prvni naznak verejne casti, sprava profilu

src/components/flights/FlightsList.vue

@@ -9,6 +9,16 @@ const props = defineProps({
   items: {
     type: Array,
     required: true
+  },
+  routeDetail: {
+    type: Object,
+    required: false,
+    default: () => ({name: 'flightDetail', params: {}})
+  },
+  displayVisibilityInfo: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 });
 
@@ -16,14 +26,16 @@ const props = defineProps({
 
 <template>
   <q-list bordered separator class="q-mx-md q-my-md">
-    <q-item v-for="flight of items" :key="flight" ripple clickable :to="{name: 'flightDetail', params:{id: flight.id}}">
+    <q-item
+      v-for="flight of items" :key="flight"
+      ripple
+      clickable
+      :to="{name: routeDetail.name, params:{...routeDetail.params, id: flight.id}}"
+    >
       <q-item-section avatar>
-
         <q-avatar size="100px">
           <div v-if="flight.coverPhoto" :style="`width: 100px; height: 100px; background-image: url('${flight.coverPhoto.thumbnailUrl}'); background-size: cover`"></div>
         </q-avatar>
-
-
       </q-item-section>
       <q-item-section>
         {{ flightName(flight) }}
@@ -32,8 +44,8 @@ const props = defineProps({
           {{ formatDatetime(flight.takeoffDatetime) }}
         </div>
         <div class="text-secondary">
-          <q-icon name="schedule" />
-        {{ minutesToHumanReadable(flight.durationMinCalculated) }}
+          <q-icon name="schedule"/>
+          {{ minutesToHumanReadable(flight.durationMinCalculated) }}
 
         </div>
         <div class="text-secondary">
@@ -41,6 +53,10 @@ const props = defineProps({
           {{ flight.aircraft.callSign }}
         </div>
       </q-item-section>
+
+      <q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">
+        <q-icon name="visibility"></q-icon>
+      </q-item-section>
     </q-item>
   </q-list>
 </template>

src/components/flights/form/FlightFormPhotos.vue

@@ -26,8 +26,13 @@ const formData = reactive({
       outlined
       standout
       multiple
+      accept=".jpg, .jpeg"
       v-model="formData.photos"
       label="Vybert fotky k nahrání"
-    />
+    >
+      <template #prepend>
+        <q-icon name="upload" />
+      </template>
+    </q-file>
   </FormWrapper>
 </template>

src/components/flights/form/FlightFormTrack.vue

@@ -51,7 +51,17 @@ onMounted(() => {
 <template>
   <FormWrapper v-model="formData">
 
-    <q-file v-model="formData.gpxTrack" v-bind="commonProps" label="Trasa v GPX" hint="Slouží pro vykreslení kompletní a detailní trasy"/>
+    <q-file
+      accept=".gpx"
+      v-model="formData.gpxTrack"
+      v-bind="commonProps"
+      label="Nahrát trasu v GPX"
+      hint="Slouží pro vykreslení kompletní a detailní trasy"
+    >
+      <template #prepend>
+        <q-icon name="upload" />
+      </template>
+    </q-file>
 
     <template v-if="flight.gpxTrackUrl">
       <q-icon name="check" color="green" /> Trasa nahrána
@@ -64,7 +74,7 @@ onMounted(() => {
       :options="locations"
       @select="addTrackItem"
       clearable
-      label="Otočný bod"
+      label="Přidat otočný bod"
       hint="Nastav významné otočné body"
     />
 

src/components/inputs/RichTextEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {ref, watch} from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -26,9 +26,9 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 
 const content = ref("");
-onMounted(() => {
+watch(() => props.modelValue, (newVal) => {
   content.value = props.modelValue;
-})
+}, {immediate: true})
 
 watch(content, () => emit("update:modelValue", content.value));
 

src/components/photos/PhotoDetail.vue

@@ -48,29 +48,74 @@ const prevPhoto = () => {
   if (photoIndex.value > 0) photoIndex.value--;
 }
 
+const showExtra = ref(false);
 </script>
 
 <template>
-  <q-dialog v-model="open" full-width  @keyup.left="prevPhoto" @keyup.right="nextPhoto">
-    <q-card>
+  <q-dialog
+    v-model="open"
+    full-width
+  >
+    <q-card
+      v-touch-swipe.mouse.left="prevPhoto"
+      v-touch-swipe.mouse.right="nextPhoto"
+      @keyup.left="prevPhoto"
+      @keyup.right="nextPhoto"
+    >
       <q-card-section>
         <div class="row">
-          <div class="col-12 col-sm-12 col-md-9">
-            <q-img :src="photo.url"/>
+          <div class="col-12">
+            <q-img
+              :draggable="false"
+              style="max-height: 90vh"
+              fit="contain"
+              :src="photo.url"
+            >
+              <q-btn
+                class="absolute all-pointer-events"
+                round
+                flat
+                icon="info"
+                :text-color="showExtra ? 'primary' : 'white'"
+                style="background: rgba(0, 0, 0, 0.25); top: 8px; right: 8px"
+                @click="showExtra = !showExtra"
+              />
+              <q-btn
+                class="absolute all-pointer-events"
+                style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
+                @click="prevPhoto"
+                v-if="photoIndex > 0"
+                icon="chevron_left"
+                text-color="white"
+                flat
+                rounded
+              >
+              </q-btn>
+              <q-btn
+                class="absolute all-pointer-events"
+                style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
+                @click="nextPhoto"
+                v-if="photoIndex < photos.length - 1"
+                icon-right="chevron_right"
+                text-color="white"
+                flat
+                rounded
+              >
+              </q-btn>
+            </q-img>
             <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
-
             <p v-if="photo.description !== ''">{{ photo.description }}</p>
-
-            <div class="text-center q-my-sm">
-              <q-btn @click="prevPhoto" v-if="photoIndex > 0" icon="chevron_left" flat rounded>Předchozí</q-btn>
-              <q-btn @click="nextPhoto" v-if="photoIndex < photos.length - 1" icon-right="chevron_right" flat rounded>Další</q-btn>
-            </div>
-
           </div>
-          <div class="col-12 col-sm-12 col-md-3">
-            <EmbeddedMap class="q-mx-sm" v-if="photo.gpsLatitude && photo.gpsLongitude" :gps-latitude="photo.gpsLatitude" :gps-longitude="photo.gpsLongitude"/>
 
-            <q-list>
+          <div class="col-12 q-my-md" v-if="showExtra">
+            <EmbeddedMap
+              v-if="photo.gpsLatitude && photo.gpsLongitude"
+              class="q-mx-sm"
+              :gps-latitude="photo.gpsLatitude"
+              :gps-longitude="photo.gpsLongitude"
+            />
+
+            <q-list dense>
               <q-item v-if="photo.pointOfInterest">
                 <q-item-section avatar>
                   <q-avatar icon="marker"></q-avatar>

src/components/profile/ChangePasswordForm.vue

@@ -0,0 +1,40 @@
+<script setup>
+
+import {reactive, ref} from "vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+
+const formData = reactive({
+  oldPassword: null,
+  newPassword: null,
+});
+const visiblePassword = ref(false);
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+    <q-input
+      v-model="formData.oldPassword"
+      type="password"
+      label="Staré heslo"
+      v-bind="commonProps"
+    />
+
+    <q-input
+      v-model="formData.newPassword"
+      :type="visiblePassword ? 'text' : 'password'"
+      label="Nové heslo"
+      v-bind="commonProps"
+    >
+      <template #append>
+        <q-btn
+          flat
+          round
+          :icon="visiblePassword ? 'visibility' : 'visibility_off'"
+          @click="visiblePassword = !visiblePassword"
+        />
+      </template>
+    </q-input>
+  </FormWrapper>
+</template>

src/components/profile/ProfileForm.vue

@@ -0,0 +1,74 @@
+<script setup>
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+import {reactive, watch} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import RichTextEditor from "components/inputs/RichTextEditor.vue";
+
+const props = defineProps({
+  user: {
+    type: Object,
+    required: false,
+    default: null
+  }
+});
+const formData = reactive({
+  name: null,
+  publicUsername: null,
+  description: null,
+  avatarImage: null,
+  titleImage: null,
+});
+
+watch(() => props.user, (newVal) => {
+  setDefaultData(formData, props.user)
+}, {immediate: true});
+</script>
+
+
+<template>
+  <FormWrapper v-model="formData">
+
+    <div class="text-center">
+      <q-avatar size="200px">
+        <img :src="user.avatarImageUrl" alt="Profilový obrázek"/>
+      </q-avatar>
+    </div>
+
+    <q-file
+      v-model="formData.avatarImage"
+      accept="image/jpeg"
+      v-bind="commonProps"
+      label="Nahrát avatar"
+    >
+      <template #prepend>
+        <q-icon name="upload"/>
+      </template>
+    </q-file>
+
+    <div class="text-center">
+      <q-img :src="user.titleImageUrl" width="50%"/>
+    </div>
+
+    <q-file
+      v-model="formData.titleImage"
+      accept="image/jpeg"
+      v-bind="commonProps" label="Nahrát titulní fotku"
+    >
+      <template #prepend>
+        <q-icon name="upload"/>
+      </template>
+    </q-file>
+
+    <q-input v-model="formData.name" label="Jméno" v-bind="commonProps"/>
+    <q-input
+      v-model="formData.publicUsername"
+      label="Veřejné uživatelské jméno"
+      hint="Vyplň jméno pro zpřístupnění záznamů ve veřejné části aplikace"
+      v-bind="commonProps"
+    />
+
+    <RichTextEditor v-model="formData.description" label="Veřejný podpis" />
+  </FormWrapper>
+
+</template>

src/components/profile/PublicProfileInfo.vue

@@ -0,0 +1,32 @@
+<script setup>
+import {onMounted} from "vue";
+import {useRoute} from "vue-router";
+import {useUserStore} from "stores/User";
+
+const props = defineProps({
+  user: {
+    type: Object,
+    required: false,
+    default: null
+  }
+})
+
+const username = useRoute().params.username;
+
+onMounted(() => {
+  useUserStore().fetchByUsername(username);
+});
+</script>
+
+<template>
+  <q-list>
+    <q-item v-if="user.publicUsername">
+      <router-link target="_blank" :to="{name: 'publicProfileDetail', params: {username: user.publicUsername}}">
+        @{{user.publicUsername}}
+      </router-link>
+    </q-item>
+    <q-item v-else>
+      <q-icon name="" color="red" /> Nastav si veřejné uživatelské jméno pro zpřístupnění profilu a sdílení záznamů s ostatními
+    </q-item>
+  </q-list>
+</template>