Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

2023-08-07 23:22:28 +02:00
parent 09d2f25523
commit c4603cf090
55 changed files with 891 additions and 408 deletions
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  cloudcover: {
+    type: Number,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <q-icon name="mdi-weather-sunny" v-if="cloudcover < 20"/>
+    <q-icon name="mdi-weather-partly-cloudy" v-else-if="cloudcover < 75"/>
+    <q-icon name="mdi-weather-cloudy" v-else/>
+</template>
@@ -0,0 +1,74 @@
+<script setup>
+import {ref} from "vue";
+import CloudCoverIcon from "components/weather/CloudCoverIcon.vue";
+
+const props = defineProps({
+  weather: {
+    type: Object,
+    required: true
+  }
+})
+
+const kmhToKnots = (speedKmh) => {
+  return Math.round(speedKmh / 0.53996);
+}
+
+const openDetail = ref(false);
+</script>
+
+<template>
+
+  <q-btn rounded @click="openDetail = true" v-bind="$attrs">
+    <CloudCoverIcon :cloudcover="weather.cloudcoverTotal"/>
+
+    <q-icon name="navigation" :style="`transform: rotate(${weather.windDirectionSurface}deg)`"/>
+  </q-btn>
+
+  <q-dialog v-model="openDetail">
+    <q-card>
+      <q-list>
+        <q-item>
+          <q-item-section avatar>
+            <CloudCoverIcon :cloudcover="weather.cloudcoverTotal"/>
+          </q-item-section>
+          <q-item-section>
+            Pokrytí oblačností (celkové): {{ weather.cloudcoverTotal }} %
+            <br>
+            Nízké mraky: {{ weather.cloudcoverLow }} %
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            QNH
+          </q-item-section>
+          <q-item-section>
+            {{ weather.qnh }} hPa
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            <q-icon name="air"/>
+          </q-item-section>
+          <q-item-section>
+            <div :title="`${weather.windSpeedSurface} km/h`">
+              {{ kmhToKnots(weather.windSpeedSurface) }} kt, {{ weather.windDirectionSurface }} &deg;
+            </div>
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section avatar>
+            <q-icon name="mdi-thermometer"/>
+          </q-item-section>
+          <q-item-section>
+            Teplota: {{ weather.temperatureSurface }} &deg; C
+            <br>
+            Rosný bod: {{ weather.dewpointSurface }} &deg; C
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card>
+  </q-dialog>
+</template>