Fotogalerie se zoomem, uprava verejnych avataru

src/components/AvatarFromPhoto.vue

@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  size: {
+    type: Number,
+    required: false,
+    default: 120
+  },
+  src: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <q-avatar :size="`${size}px`">
+    <div :style="`width: ${size}px; height: ${size}px; background-image: url('${src}'); background-size: cover`">
+    </div>
+  </q-avatar>
+</template>

src/components/flights/FlightBasicInfo.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {flight} from "src/composables/objects/flight";
-import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {FORMAT_DATE, FORMAT_TIME, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import WeatherInfo from "components/weather/WeatherInfo.vue";
 
 const props = defineProps({
@@ -14,7 +14,15 @@ const props = defineProps({
 <template>
   <q-list bordered separator>
     <q-item>
+      <q-item-section avatar>
+        <q-icon name="event"/>
+      </q-item-section>
+      <q-item-section>
+        {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
+      </q-item-section>
+    </q-item>
 
+    <q-item>
       <q-list>
         <q-item>
           <q-item-section avatar>
@@ -22,7 +30,8 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              {{ flight.takeoffAirport.name }}
+              <strong>{{ flight.takeoffAirport.name }}</strong>,
+              čas vzletu: {{ formatDatetime(flight.takeoffDatetime, FORMAT_TIME) }}
 
               <WeatherInfo class="q-mx-sm" v-if="flight.takeoffWeatherInfo" :weather="flight.takeoffWeatherInfo"/>
             </div>
@@ -44,7 +53,8 @@ const props = defineProps({
           </q-item-section>
           <q-item-section>
             <div>
-              {{ flight.landingAirport.name }}
+              <strong>{{ flight.landingAirport.name }}</strong>,
+              čas přistání: {{ formatDatetime(flight.landingDatetime, FORMAT_TIME) }}
               <WeatherInfo class="q-mx-sm" v-if="flight.landingWeatherInfo" :weather="flight.landingWeatherInfo"/>
             </div>
           </q-item-section>
@@ -52,15 +62,6 @@ const props = defineProps({
       </q-list>
     </q-item>
 
-
-    <q-item>
-      <q-item-section avatar>
-        <q-icon name="event"/>
-      </q-item-section>
-      <q-item-section>
-        {{ formatDatetime(flight.takeoffDatetime) }}
-      </q-item-section>
-    </q-item>
     <q-item>
       <q-item-section avatar>
         <q-icon name="schedule"/>
@@ -74,6 +75,7 @@ const props = defineProps({
         <q-icon name="people"/>
       </q-item-section>
       <q-item-section>
+        Link jen pro prihlasene!
         <router-link :to="{name: 'copilotDetail', params: {id: flight.copilot.id}}">
           {{ flight.copilot.name }}
         </router-link>

src/components/flights/FlightsList.vue

@@ -1,9 +1,10 @@
 <script setup>
-import {formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {FORMAT_DATE, formatDatetime, minutesToHumanReadable} from "src/composables/datetimeUtils";
 import {computed} from "vue";
 import {useQuasar} from "quasar";
 import {useFlightsStore} from "stores/Flights";
 import {flightName} from "../../composables/objects/flight";
+import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
 
 const props = defineProps({
   items: {
@@ -33,15 +34,13 @@ const props = defineProps({
       :to="{name: routeDetail.name, params:{...routeDetail.params, id: flight.id}}"
     >
       <q-item-section avatar>
-        <q-avatar size="150px">
-          <div v-if="flight.coverPhoto" :style="`width: 150px; height: 150px; background-image: url('${flight.coverPhoto.thumbnailUrl}'); background-size: cover`"></div>
-        </q-avatar>
+        <AvatarFromPhoto :size="120" v-if="flight.coverPhoto" :src="flight.coverPhoto.thumbnailUrl" />
       </q-item-section>
       <q-item-section>
-        <h5>{{ flightName(flight) }}</h5>
-        <div class="text-secondary">
+        <div class="text-h5">{{ flightName(flight) }}</div>
+        <div class="text-secondary q-mt-md">
           <q-icon name="flight_takeoff"/>
-          {{ formatDatetime(flight.takeoffDatetime) }}
+          {{ formatDatetime(flight.takeoffDatetime, FORMAT_DATE) }}
         </div>
         <div class="text-secondary">
           <q-icon name="schedule"/>
@@ -52,6 +51,12 @@ const props = defineProps({
           <q-icon name="flight"/>
           {{ flight.aircraft.callSign }}
         </div>
+
+        <div class="text-secondary" v-if="flight.copilot">
+          <q-icon name="person" />
+          {{ flight.copilot.name }}
+        </div>
+
       </q-item-section>
 
       <q-item-section side top v-if="flight.isPublic && displayVisibilityInfo">

src/components/photos/PhotoDetail.vue

@@ -2,6 +2,7 @@
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
 import {computed, onMounted, ref} from "vue";
 import {formatDatetime} from "src/composables/datetimeUtils";
+import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
 
 const props = defineProps({
   photos: {
@@ -65,44 +66,41 @@ const showExtra = ref(false);
       <q-card-section>
         <div class="row">
           <div class="col-12">
-            <q-img
-              :draggable="false"
-              style="max-height: 90vh"
-              fit="contain"
-              :src="photo.url"
+            <div class="text-center">
+              <inner-image-zoom move-type="pan" :zoomScale="0.75" :hide-hint="true" :src="photo.url"/>
+            </div>
+
+            <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
-                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>
+            </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>
             <strong v-if="photo.name !== ''">{{ photo.name }}</strong>
             <p v-if="photo.description !== ''">{{ photo.description }}</p>
           </div>
@@ -148,3 +146,15 @@ const showExtra = ref(false);
     </q-card>
   </q-dialog>
 </template>
+
+<style>
+.iiz {
+  width: 100%;
+  height: 90vh;
+}
+
+.iiz__img {
+  max-height: 90vh !important;
+  margin: 0 auto;
+}
+</style>

src/components/profile/ProfileForm.vue

@@ -13,9 +13,6 @@ const props = defineProps({
   }
 });
 const formData = reactive({
-  name: '',
-  publicUsername: '',
-  description: '',
   avatarImage: null,
   titleImage: null,
 });
@@ -59,16 +56,6 @@ watch(() => props.user, (newVal) => {
         <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

@@ -1,7 +1,11 @@
 <script setup>
-import {onMounted} from "vue";
+import {onMounted, reactive, watch} from "vue";
 import {useRoute} from "vue-router";
 import {useUserStore} from "stores/User";
+import {commonProps} from "src/composables/inputs";
+import RichTextEditor from "components/inputs/RichTextEditor.vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {setDefaultData} from "src/composables/form/formHandling";
 
 const props = defineProps({
   user: {
@@ -11,11 +15,14 @@ const props = defineProps({
   }
 })
 
-const username = useRoute().params.username;
-
-onMounted(() => {
-  useUserStore().fetchByUsername(username);
+const formData = reactive({
+  name: '',
+  publicUsername: '',
+  description: '',
 });
+watch(() => props.user, (newVal) => {
+  setDefaultData(formData, props.user)
+}, {immediate: true});
 </script>
 
 <template>
@@ -29,4 +36,16 @@ onMounted(() => {
       <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>
+
+  <FormWrapper v-model="formData">
+   <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/weather/WeatherInfo.vue

@@ -38,15 +38,6 @@ const openDetail = ref(false);
           </q-item-section>
         </q-item>
 
-        <q-item>
-          <q-item-section avatar>
-            QNH
-          </q-item-section>
-          <q-item-section>
-            {{ weather.qnh }} hPa
-          </q-item-section>
-        </q-item>
-
         <q-item>
           <q-item-section avatar>
             <q-icon name="air"/>
@@ -58,14 +49,32 @@ const openDetail = ref(false);
           </q-item-section>
         </q-item>
 
+        <q-item>
+          <q-item-section avatar>
+            <q-icon name="water_drop"/>
+          </q-item-section>
+          <q-item-section>
+            {{ weather.rain }}mm
+          </q-item-section>
+        </q-item>
+
         <q-item>
           <q-item-section avatar>
             <q-icon name="mdi-thermometer"/>
           </q-item-section>
           <q-item-section>
-            Teplota: {{ weather.temperatureSurface }} &deg; C
+            Teplota: {{ weather.temperatureSurface }}&deg; C
             <br>
-            Rosný bod: {{ weather.dewpointSurface }} &deg; C
+            Rosný bod: {{ weather.dewpointSurface }}&deg; C
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            QNH
+          </q-item-section>
+          <q-item-section>
+            {{ weather.qnh }} hPa
           </q-item-section>
         </q-item>
       </q-list>