Homepage, lepsi POI

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>