Fullscreen u planovace

2024-05-02 16:29:17 +02:00
parent 8dd0a16918
commit be8966b5c1
5 changed files with 69 additions and 25 deletions
@@ -0,0 +1,139 @@
+<script setup>
+import {computed, ref, watch} from "vue";
+import {minutesToHumanReadable} from "src/composables/datetimeUtils";
+import {useFlightPlanUtils} from "src/composables/flightPlan";
+
+const props = defineProps({
+  flightPlan: {
+    type: Object,
+    required: true
+  },
+  plannedSpeed: {
+    type: Number,
+    required: false,
+    default: 150
+  },
+  isFullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  insertPosition: {
+    type: Number,
+    required: true
+  }
+});
+
+const emits = defineEmits(["open", "change-insert-position", "fullscren-toggle"])
+
+
+const getDuration = (distance, speed) => Math.round(distance / speed * 60)
+
+const totalDistance = computed(() => {
+  if (!props.flightPlan.track.length) return null;
+
+  return Math.round(props.flightPlan.track.map(t => t.distance).reduce((a, b) => a + b));
+});
+const totalTime = computed(() => {
+  if (!props.flightPlan.track.length) return null;
+
+  return props.flightPlan.track.map(t => getDuration(t.distance, props.plannedSpeed)).reduce((a, b) => a + b)
+});
+
+</script>
+
+<template>
+  <q-list bordered class="q-ml-md-md q-pt-md">
+
+    <q-item>
+      <q-item-section>
+        <div style="display: flex; justify-content: space-between">
+          <q-btn
+            @click="emits('change-insert-position', 0)"
+            icon="add"
+            :color="insertPosition === 0 ? 'primary' : 'grey'"
+            size="sm"
+          >
+            <template v-if="insertPosition === 0">Přidávám na začátek</template>
+          </q-btn>
+
+          <q-btn
+            @click='emits("fullscreen-toggle")'
+            size="sm"
+            :icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+          />
+        </div>
+      </q-item-section>
+    </q-item>
+
+    <q-scroll-area style="height: 50vh">
+      <template v-for="(segment, i) in props.flightPlan.track" :key="segment">
+        <q-item dense>
+          <q-item-section>
+            <q-item-label>{{ segment.from.name }}</q-item-label>
+            <q-item-label caption class="q-py-sm" v-if="segment.distance">
+              {{ segment.bearing }}°,
+              {{ segment.distance }} km,
+              {{ minutesToHumanReadable(getDuration(segment.distance, props.plannedSpeed)) }}
+            </q-item-label>
+            <q-item-label>
+              <q-btn
+                @click="emits('change-insert-position', i+1)"
+                icon="add"
+                size="sm"
+                class="q-ml-lg q-mb-sm"
+                :round="insertPosition !== i+1"
+                :color="insertPosition === i+1 ? 'primary' : 'grey'"
+              >
+                <template v-if="insertPosition === i+1">Přidávám sem</template>
+              </q-btn>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+
+
+        <q-item dense v-if="segment.to && i === props.flightPlan.track.length - 1">
+          <q-item-section>
+            <q-item-label>
+              {{ segment.to.name }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-scroll-area>
+    <q-item>
+      <q-item-section>
+        <div>
+          <q-btn
+            @click="emits('change-insert-position', flightPlan.track.length + 1)"
+            icon="add"
+            size="sm"
+            :color="insertPosition === flightPlan.track.length + 1? 'primary' : 'grey'"
+          >
+            <template v-if="insertPosition === flightPlan.track.length + 1">Přidávám na konec</template>
+          </q-btn>
+        </div>
+      </q-item-section>
+    </q-item>
+    <template v-if="totalDistance">
+      <q-item>
+        <q-item-section>
+          <q-separator/>
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section>
+          Celková vzdálenost: {{ totalDistance }} km
+          <br>
+          Plánovaná doba letu: {{ minutesToHumanReadable(totalTime) }}
+        </q-item-section>
+      </q-item>
+    </template>
+    <q-item>
+      <q-item-section>
+        <q-btn @click="emits('open')" color="secondary">
+          {{ totalDistance ? 'Upravit trasu' : 'Sestavit trasu' }}
+        </q-btn>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>