Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

src/components/copilots/CopilotEditForm.vue

@@ -1,5 +0,0 @@
-<script setup></script>
-
-<template>
-  edit form
-</template>

src/components/copilots/CopilotForm.vue

@@ -0,0 +1,30 @@
+<script setup>
+
+import {onMounted, reactive} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+
+const props = defineProps({
+  copilot: {
+    type: Object
+  }
+})
+
+const formData = reactive({
+  name: null,
+});
+
+onMounted(() => {
+  if (props.copilot) {
+    setDefaultData(formData, props.copilot);
+  }
+})
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+    <q-input v-bind="commonProps" label="Jméno" v-model="formData.name" />
+  </FormWrapper>
+</template>

src/components/copilots/CopilotListSkeleton.vue

@@ -1,5 +1,16 @@
-<script setup></script>
+<script setup>
+import {randomInt} from "src/composables/random";
+</script>
 
 <template>
-  <em>Copilot skeleton</em>
+  <q-list bordered separator>
+    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
+      <q-item-section avatar>
+        <q-skeleton type="QAvatar"/>
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(10,25)+'%'"/>
+      </q-item-section>
+    </q-item>
+  </q-list>
 </template>

src/components/copilots/CopilotsList.vue

@@ -16,7 +16,7 @@ const props = defineProps({
         <q-avatar icon="person" color="primary" text-color="white"/>
       </q-item-section>
       <q-item-section>
-        <router-link :to="{name: 'pilotDetail', params: {id: pilot.id }}">
+        <router-link :to="{name: 'copilotDetail', params: {id: pilot.id }}">
           {{ pilot.name }}
         </router-link>
       </q-item-section>