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>