Homepage, lepsi POI

src/components/basicSkeletons/BasicTextSkeleton.vue

@@ -0,0 +1,23 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+
+const props = defineProps({
+  lines: {
+    type: Number,
+    required: false,
+    default: 3
+  },
+  paragraphs: {
+    type: Number,
+    required: false,
+    default: 1
+  }
+})
+</script>
+
+<template>
+  <div v-for="i in paragraphs" :key="i">
+    <q-skeleton type="text" :width="randomInt(80, 100)+'%'" v-for="j in lines - 1" :key="j"/>
+    <q-skeleton type="text" :width="randomInt(15, 100)+'%'"/>
+  </div>
+</template>

src/components/flights/FlightDetailSkeleton.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {randomInt} from "src/composables/random";
-import ListItemSkeleton from "components/ListItemSkeleton.vue";
+import ListItemSkeleton from "components/basicSkeletons/ListItemSkeleton.vue";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
 </script>
 
 <template>
@@ -25,11 +26,8 @@ import ListItemSkeleton from "components/ListItemSkeleton.vue";
       </q-list>
 
       <article class="q-my-lg">
-      <q-skeleton
-        v-for="i in randomInt(5,8)" :key="i"
-        type="text" :width="randomInt(90, 100)+'%'"
-      />
-        </article>
+        <BasicTextSkeleton :lines="randomInt(5, 10)" :paragraphs="randomInt(1, 3)" />
+      </article>
 
       <q-skeleton height="400px" square class="q-mt-lg"/>
     </q-card-section>

src/components/flights/form/FlightFormBasic.vue

@@ -5,6 +5,7 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import DatetimePicker from "components/inputs/DatetimePicker.vue";
 import ComboboxInput from "components/inputs/ComboboxInput.vue";
 import {commonProps} from "src/composables/inputs";
+import {isRequired} from "src/composables/form/rules";
 
 const props = defineProps({
     aircrafts: {
@@ -34,7 +35,13 @@ const formData = reactive({
   description: "",
 });
 
-const rules = {};
+const rules = {
+  aircraft: [isRequired],
+  takeoffDatetime: [isRequired],
+  takeoffAirport: [isRequired],
+  landingDatetime: [isRequired],
+  landingAirport: [isRequired],
+};
 watch(() => props.flight, (newVal) => {
   if (newVal) {
     setDefaultData(formData, newVal);
@@ -50,7 +57,8 @@ const aircrafts = computed(() => {
 
 watch(() => formData.takeoffDatetime, () => {
   if (!formData.landingDatetime) {
-    formData.landingDatetime = formData.takeoffDatetime;
+    formData.landingDatetime = structuredClone(formData.takeoffDatetime);
+    formData.landingDatetime.setTime(formData.landingDatetime.getTime() + 3600 * 1000);
   }
 });
 watch(() => formData.takeoffAirport, () => {
@@ -71,10 +79,10 @@ watch(() => formData.takeoffAirport, () => {
 
           <q-card-section>
             <ComboboxInput
+              :rules="rules.aircraft"
               v-bind="commonProps"
               :options="aircrafts"
               v-model="formData.aircraft"
-              :key="formData.aircraft"
               label="Letadlo"
             />
           </q-card-section>
@@ -90,12 +98,14 @@ watch(() => formData.takeoffAirport, () => {
           <q-card-section>
             <DatetimePicker
               v-model="formData.takeoffDatetime"
+              :rules="rules.takeoffDatetime"
               label="Datum a čas vzletu: "
               v-bind="commonProps"
             />
 
             <ComboboxInput
               :options="airports"
+              :rules="rules.takeoffAirport"
               v-model="formData.takeoffAirport"
               label="Letiště vzletu"
               v-bind="commonProps"
@@ -115,6 +125,7 @@ watch(() => formData.takeoffAirport, () => {
             <DatetimePicker
               v-model="formData.landingDatetime"
               :min-date="formData.takeoffDatetime"
+              :rules="rules.landingDatetime"
               label="Datum a čas přistání"
               v-bind="commonProps"
             />
@@ -124,6 +135,7 @@ watch(() => formData.takeoffAirport, () => {
               v-model="formData.landingAirport"
               label="Letiště přistání"
               v-bind="commonProps"
+              :rules="rules.landingAirport"
               :enable-new-values="false"
             />
           </q-card-section>

src/components/inputs/ComboboxInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {ref, watch} from "vue";
 
 const props = defineProps({
   modelValue: {
@@ -19,6 +19,16 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  optionLabel: {
+    type: String,
+    required: false,
+    default: "name"
+  },
+  optionValue: {
+    type: String,
+    required: false,
+    default: "id"
+  }
 })
 
 const model = ref({});
@@ -32,6 +42,9 @@ watch(model, (val) => {
 
   let value = val;
   if (typeof val === 'string') value = {name: val};
+  if (value['__typename']) {
+    delete value['__typename'];
+  }
   emit("update:modelValue", value);
 })
 
@@ -72,7 +85,6 @@ const filterFn = (val, update, abort) => {
     availableOptions.value = availableOptions.value.map(i => ({id: i.id, name: i.name}))
   })
 }
-
 </script>
 
 <template>
@@ -80,23 +92,23 @@ const filterFn = (val, update, abort) => {
     v-model="model"
     use-input
     input-debounce="100"
-    :display-value="`${model?.name || ''}`"
+    :display-value="`${model ? model[optionLabel] : ''}`"
     :rules="rules"
     @filter="filterFn"
     @input-value="inputValueChanged"
     @blur="handleOnBlur"
     @clear="clearValue"
     :options="availableOptions"
-    option-label="name"
-    option-value="id"
+    :option-label="optionLabel"
+    :option-value="optionValue"
     :new-value-mode="enableNewValues ? 'add' : 'toggle'"
     clear-icon="clear"
     :v-bind="$attrs"
   >
-    <template v-slot:no-option>
+    <template v-slot:no-option v-if="enableNewValues">
       <q-item v-if="inputValue">
         <q-item-section avatar>
-          <q-avatar text-color="green" size="32px"  icon="add" />
+          <q-avatar text-color="green" size="32px" icon="add"/>
         </q-item-section>
         <q-item-section class="text-grey">
           <span>Vytvořit novou hodnotu <q-chip>{{ inputValue }}</q-chip></span>

src/components/inputs/DatetimePicker.vue

@@ -15,35 +15,18 @@ const props = defineProps({
   minDate: {
     type: [String, Date],
     required: false
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => ([]),
   }
 })
 
 let dateModel = ref("");
 let timeModel = ref("");
-
 let originalTime, originalDate;
 
-// onMounted(() => {
-// let emitDefaultValue = false;
-// if (props.modelValue) {
-//   let modelVal = props.modelValue;
-//   if (typeof modelVal === 'string') {
-//     modelVal = parseDate(props.modelValue);
-//     emitDefaultValue = true;
-//   }
-//
-//   dateModel.value = formatDatetime(modelVal, "YYYY-MM-DD");
-//   timeModel.value = formatDatetime(modelVal, "HH:mm:ss");
-// }
-//
-// setOriginalValues();
-// if (emitDefaultValue) {
-//   emitModelUpdate();
-// }
-// });
-// TODO: ^^ by asi slo prepsat do watchera, viz ComboboxInput
-
-
 const publicModel = computed(() => {
   if (!dateModel.value) {
     return "";
@@ -57,6 +40,8 @@ const popupProxy = ref(null);
 const model = computed(() => dateModel.value + "T" + timeModel.value);
 const emit = defineEmits(['update:modelValue']);
 const emitModelUpdate = () => {
+  if (dateModel.value === '' || timeModel.value === '') return;
+
   const val = parseDate(model.value);
   emit("update:modelValue", val);
 
@@ -128,7 +113,7 @@ watch(() => props.modelValue, (newVal) => {
 </script>
 
 <template>
-  <q-input readonly v-bind="commonProps" v-model="publicModel">
+  <q-input readonly v-bind="commonProps" v-model="publicModel" :rules="rules">
     <template #append>
       <q-icon name="event"/>
     </template>

src/components/poi/POIDetailSkeleton.vue

@@ -1,5 +1,21 @@
-<script setup></script>
+<script setup>
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+</script>
 
 <template>
-  <em>POI detail skeleton</em>
+  <div>
+
+    <BasicTextSkeleton :lines="randomInt(4, 8)" />
+
+    <q-skeleton type="rect" width="100%" class="q-my-lg" height="400px"/>
+
+    <div class="row">
+      <div class="col-12 col-sm-4 col-md-4 col-lg-3" v-for="i in randomInt(3, 10)" :key="i">
+        <q-card class="q-my-sm q-mx-sm">
+          <q-skeleton type="rect" width="100%" height="200px"/>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>

src/components/poi/POIForm.vue

@@ -5,25 +5,36 @@ import {setDefaultData} from "src/composables/form/formHandling";
 import MapGPSInput from "components/inputs/MapGPSInput.vue";
 import {useQuasar} from "quasar";
 import {errorObject} from "src/composables/dialog";
+import {commonProps} from "src/composables/inputs";
+import {isRequired} from "src/composables/form/rules";
+import ComboboxInput from "components/inputs/ComboboxInput.vue";
 
 const props = defineProps({
   poi: {
     type: Object,
     required: false,
     default: () => ({})
+  },
+  types: {
+    type: Array,
+    required: false,
+    default: () => ([])
   }
 })
 
 const formData = reactive({
   name: null,
+  description: null,
   gpsLatitude: null,
   gpsLongitude: null,
+  type: null,
   isPublic: false,
 });
 
 const poiNameForMap = ref("");
 onMounted(() => {
   setDefaultData(formData, props.poi);
+  // formData.type = {id: poi.type.id, name: poi.type.name};
   poiNameForMap.value = props.poi.name;
 })
 
@@ -35,6 +46,10 @@ const resetMap = () => {
   showResetMapButton.value = false;
 }
 
+const rules = {
+  name: [isRequired]
+}
+
 const zoom = ref(10);
 const $q = useQuasar();
 const handlePositionNotFound = () => {
@@ -46,19 +61,17 @@ const handlePositionNotFound = () => {
 <template>
   <FormWrapper v-model="formData">
     <q-input
-      class="q-my-lg"
-      outlined
-      standout
       v-model="formData.name"
       @change="showResetMapButton=true"
       label="Jméno bodu"
+      v-bind="commonProps"
+      :rules="rules.name"
     >
       <template #append v-if="showResetMapButton">
         <q-btn @click="resetMap" icon="gps_fixed" round flat text-color="green" title="Nastav pozici na mapě"/>
       </template>
     </q-input>
 
-
     <MapGPSInput
       v-if="poiNameForMap"
       :key="poiNameForMap"
@@ -69,6 +82,10 @@ const handlePositionNotFound = () => {
       @not-found="handlePositionNotFound"
     />
 
+    <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis" />
+
+    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps" />
+
     <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
   </FormWrapper>
 </template>

src/components/poi/POIList.vue

@@ -8,14 +8,19 @@ const props = defineProps({
 </script>
 <template>
   <q-list bordered separator>
-    <q-item clickable v-ripple v-for="poi of items" :key="poi">
+    <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="{name: 'poiDetail', params: {id: poi.id}}">
       <q-item-section avatar>
-        <q-avatar icon="place" color="primary" text-color="white"/>
+        <q-avatar :icon="poi.type?.icon || 'place'" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
-        <router-link :to="{name: 'poiDetail', params: {id: poi.id}}">
-          {{ poi.name }}
-        </router-link>
+        {{ poi.name }}
+        <div class="text-secondary" v-if="poi.type">
+        {{ poi.type.name }}
+
+        </div>
+      </q-item-section>
+      <q-item-section side top v-if="poi.isPublic">
+        <q-icon name="visibility"></q-icon>
       </q-item-section>
     </q-item>
   </q-list>