@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Query/Weather.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class='col-12 row g-0'>
+        <div class='col-12'>
+            <label class='subheader mx-2'>{{ props.weather?.properties.forecastGenerator || 'National Weather Service' }}</label>
+        </div>
+        <div
+            v-if='props.weather'
+            class='col-12'
+        >
+            <TablerSlidedown :click-anywhere-expand='true'>
+                <div class='d-flex align-items-center py-2 px-2'>
+                    <component
+                        :is='getIcon(props.weather.properties.periods[0].shortForecast)'
+                        size='40'
+                        stroke='1'
+                    />
+
+                    <div class='d-flex mx-2'>
+                        <div
+                            style='font-size: 30px;'
+                            v-text='props.weather.properties.periods[0].temperature'
+                        />
+                        <div
+                            class='mx-1 my-1'
+                            v-text='"°" + props.weather.properties.periods[0].temperatureUnit'
+                        />
+                    </div>
+                    <div class='d-flex ms-auto'>
+                        <div
+                            class='mx-2'
+                            style='font-size: 20px;'
+                            v-text='props.weather.properties.periods[0].shortForecast'
+                        />
+                    </div>
+                </div>
+
+                <div class='row px-2 pb-2'>
+                    <div class='col-6 mb-2'>
+                        <div class='d-flex align-items-center text-muted'>
+                            <IconWind
+                                :size='20'
+                                stroke='1'
+                            />
+                            <span class='ms-2 small'>Wind</span>
+                        </div>
+                        <div class='ms-4'>
+                            {{ props.weather.properties.periods[0].windSpeed }} {{ props.weather.properties.periods[0].windDirection }}
+                        </div>
+                    </div>
+                    <div class='col-6 mb-2'>
+                        <div class='d-flex align-items-center text-muted'>
+                            <IconDroplet
+                                :size='20'
+                                stroke='1'
+                            />
+                            <span class='ms-2 small'>Humidity</span>
+                        </div>
+                        <div class='ms-4'>
+                            {{ props.weather.properties.periods[0].relativeHumidity.value }}%
+                        </div>
+                    </div>
+                    <div class='col-6 mb-2'>
+                        <div class='d-flex align-items-center text-muted'>
+                            <IconTemperature
+                                :size='20'
+                                stroke='1'
+                            />
+                            <span class='ms-2 small'>Dewpoint</span>
+                        </div>
+                        <div class='ms-4'>
+                            {{ Math.round(props.weather.properties.periods[0].dewpoint.value) }}°C
+                        </div>
+                    </div>
+                    <div class='col-6 mb-2'>
+                        <div class='d-flex align-items-center text-muted'>
+                            <IconUmbrella
+                                :size='20'
+                                stroke='1'
+                            />
+                            <span class='ms-2 small'>Precipitation</span>
+                        </div>
+                        <div class='ms-4'>
+                            {{ props.weather.properties.periods[0].probabilityOfPrecipitation.value || 0 }}%
+                        </div>
+                    </div>
+                </div>
+
+                <template #expanded>
+                    <div class='col-12 border-top pt-2'>
+                        <template
+                            v-for='(period, i) in forecastPeriods'
+                            :key='period.number'
+                        >
+                            <div
+                                v-if='i === 0 || !isSameDay(period.startTime, forecastPeriods[i-1].startTime)'
+                                class='px-2 py-1 font-weight-bold small text-muted border-bottom'
+                                :class='{ "mt-2": i > 0 }'
+                            >
+                                {{ moment(period.startTime).format('dddd, MMM Do') }}
+                            </div>
+                            <div
+                                class='d-flex align-items-center px-2 py-1'
+                                :class='{ "border-top": i > 0 && isSameDay(period.startTime, forecastPeriods[i-1].startTime) }'
+                            >
+                                <div
+                                    style='width: 80px;'
+                                    class='small font-weight-bold'
+                                >
+                                    <div v-text='period.name' />
+                                    <div
+                                        class='text-muted'
+                                        style='font-size: 0.7rem'
+                                        v-text='moment(period.startTime).format("h A")'
+                                    />
+                                </div>
+                                <component
+                                    :is='getIcon(period.shortForecast)'
+                                    :size='24'
+                                    stroke='1'
+                                    class='mx-2'
+                                />
+                                <div
+                                    class='flex-grow-1 small'
+                                    v-text='period.shortForecast'
+                                />
+                                <div class='ms-auto font-weight-bold'>
+                                    {{ period.temperature }}°
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+            </TablerSlidedown>
+        </div>
+        <div
+            v-else
+            class='col-12 d-flex py-2 px-2'
+        >
+            <div
+                class='mx-2'
+                style='font-size: 20px;'
+            >
+                No Forecast Found
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { computed } from 'vue';
+import type { SearchReverse } from '../../../types.ts';
+import moment from 'moment';
+import {
+    TablerSlidedown
+} from '@tak-ps/vue-tabler';
+import {
+    IconSun,
+    IconMoon,
+    IconCloud,
+    IconCloudRain,
+    IconSnowflake,
+    IconCloudStorm,
+    IconCloudFog,
+    IconWind,
+    IconDroplet,
+    IconTemperature,
+    IconUmbrella
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    weather: SearchReverse["weather"]
+}>();
+
+const forecastPeriods = computed(() => {
+    if (!props.weather) return [];
+    return props.weather.properties.periods.slice(1);
+});
+
+function isSameDay(d1: string, d2: string) {
+    return moment(d1).isSame(d2, 'day');
+}
+
+function getIcon(forecast: string) {
+    const f = forecast.toLowerCase();
+    if (f.includes('sunny')) return IconSun;
+    if (f.includes('clear')) return IconMoon;
+    if (f.includes('cloud')) return IconCloud;
+    if (f.includes('rain') || f.includes('shower')) return IconCloudRain;
+    if (f.includes('snow')) return IconSnowflake;
+    if (f.includes('storm') || f.includes('thunder')) return IconCloudStorm;
+    if (f.includes('fog')) return IconCloudFog;
+    if (f.includes('wind')) return IconWind;
+    return IconCloud;
+}
+</script>

package/src/components/CloudTAK/QueryView.vue

@@ -0,0 +1,134 @@
+<template>
+    <div
+        class='sticky-top col-12 border-bottom border-light bg-dark'
+        style='border-radius: 0px;'
+    >
+        <div class='modal-header px-0 mx-2 d-flex align-items-center'>
+            <div class='modal-title'>
+                Query Mode
+            </div>
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Refresh'
+                    @click='fetch'
+                >
+                    <IconRefresh
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+    </div>
+    <div
+        class='col-12 overflow-auto'
+        style='height: calc(100% - 106px)'
+    >
+        <Coordinate
+            v-if='coords'
+            :model-value='coords'
+            class='py-2'
+        />
+
+        <TablerAlert
+            v-if='error'
+            :err='error'
+        />
+        <TablerLoading
+            v-else-if='!query'
+            desc='Querying...'
+        />
+        <template v-else>
+            <QueryReverse
+                :reverse='query.reverse'
+                :elevation='query.elevation'
+                class='py-2'
+            />
+
+            <QueryWeather
+                :weather='query.weather'
+                class='py-2'
+            />
+
+            <QuerySun
+                :sun='query.sun'
+                class='py-2'
+            />
+
+            <QueryMagnetic
+                v-if='query.magnetic'
+                :magnetic='query.magnetic'
+                class='py-2'
+            />
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, watch, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import type { SearchReverse } from '../../types.ts';
+import {
+    IconRefresh
+} from '@tabler/icons-vue';
+import { std, stdurl } from '../../std.ts';
+import { useMapStore } from '../../stores/map.ts';
+import QueryWeather from './Query/Weather.vue';
+import QuerySun from './Query/Sun.vue';
+import QueryMagnetic from './Query/Magnetic.vue';
+import QueryReverse from './Query/Reverse.vue';
+import {
+    TablerAlert,
+    TablerLoading,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import Coordinate from './util/Coordinate.vue';
+
+const route = useRoute();
+const mapStore = useMapStore();
+
+const error = ref<Error | undefined>();
+const query = ref<SearchReverse | undefined>();
+
+const coords = computed<number[] | undefined>(() => {
+    return route.params.coords
+        ? String(route.params.coords).split(',').map(c => Number(c))
+        : undefined
+});
+
+watch(coords, async () => {
+    await fetch();
+})
+
+onMounted(async () => {
+    await fetch();
+});
+
+async function fetch() {
+    query.value = undefined;
+
+    if (coords.value && coords.value.length >= 2) {
+        try {
+            error.value = undefined;
+            
+            // Query MapLibre terrain elevation if available
+            let elevation: number | undefined;
+            try {
+                const terrainElevation = mapStore.map.queryTerrainElevation([coords.value[0], coords.value[1]]);
+                elevation = terrainElevation !== null ? terrainElevation : undefined;
+            } catch {
+                // No terrain data available
+            }
+            
+            const url = stdurl(`/api/search/reverse/${coords.value[0]}/${coords.value[1]}`);
+            if (elevation !== undefined && elevation !== null) {
+                url.searchParams.append('elevation', String(elevation));
+            }
+            
+            query.value = await std(url) as SearchReverse;
+        } catch (err) {
+            error.value = err instanceof Error ? err : new Error(String(err));
+        }
+    }
+}
+</script>

package/src/components/CloudTAK/RadialMenu/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Alexey Nesterenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/components/CloudTAK/RadialMenu/README.md

@@ -0,0 +1,63 @@
+# Radial Menu in Pure JavaScript, HTML and SVG
+
+## Controls
+
+ 1. Go to [https://axln.github.io/radial-menu-js/index.html](https://axln.github.io/radial-menu-js/index.html).
+
+ 2. Click Open Menu button.
+
+ 3. You can use mouse, mouse wheel and keyboard for navigation:
+    * Arrow keys and mouse wheel to select menu item.
+    * Enter to choose the selected menu item.
+    * Esc/Backspace to return to parent menu and close menu.
+ 
+ ## Usage Example
+ 
+ ```javascript
+var svgMenu = new RadialMenu({
+    parent      : document.body,
+    size        : 400,
+    closeOnClick: true,
+    menuItems   : [
+      {
+        id: 'item1',
+        title: 'Item 1'
+      },
+      {
+        id: 'item2',
+        title: 'Item 2'
+      },
+      {
+        id: 'more',
+        title: 'More...',
+        items: [
+          {
+            id: 'subitem1',
+            title: 'Subitem 1'
+          },
+          {
+            id: 'item2',
+            title: 'Subitem 2'
+          }
+        ]
+      }
+    ],
+    onClick: function (item) {
+      console.log('You have clicked:', item);
+    }
+});
+
+  var openMenu = document.getElementById('menu');
+  openMenu.onclick = function () {
+    svgMenu.open();
+  };
+
+  var closeMenu = document.getElementById('close');
+  closeMenu.onclick = function () {
+    svgMenu.close();
+  };
+```
+
+## License
+
+MIT

package/src/components/CloudTAK/RadialMenu/RadialMenu.css

@@ -0,0 +1,85 @@
+div.menuHolder {
+    user-select: none;
+    -moz-user-select: none;
+    position: relative;
+}
+
+svg.icons {
+    display: none;
+}
+
+svg.menu {
+    position: absolute;
+    overflow: visible;
+    transition: 0.2s;
+    transition-timing-function: ease-out;
+}
+
+svg.menu.inner {
+    transform: scale(0.66) rotate(-10deg);
+    opacity: 0;
+    visibility: hidden;
+}
+
+svg.menu.outer {
+    transform: scale(1.5) rotate(10deg);
+    opacity: 0;
+    visibility: hidden;
+}
+
+g.sector {
+    pointer-events: visiblePainted;
+}
+
+svg.menu > g > path {
+    fill: #000000c0;
+}
+
+svg.menu > g.sector > path {
+    cursor: pointer;
+    /*transition: 0.1s;*/
+}
+
+svg.menu > g.sector > text,
+svg.menu > g.sector > use {
+    cursor: pointer;
+    fill: white;
+
+    /*text-shadow: 1px 1px 0 #000000A0;*/
+}
+
+svg.menu > g.sector:hover > path {
+    fill: #F9A602D0;
+
+}
+
+svg.menu > g.sector.selected > path {
+    /*fill: #F9A602D0;*/
+    /*fill: #009900D0 !important;*/
+    fill: #32CD32D0 !important;
+}
+
+svg.menu > g.center:hover > circle {
+    fill: #F9A602D0;
+}
+
+svg.menu > g.center > circle {
+    cursor: pointer;
+    fill: #00000080;
+}
+
+svg.menu > g.center > text,
+svg.menu > g.center > use {
+    cursor: pointer;
+    fill: white;
+}
+
+.radial-menu-popup .maplibregl-popup-content {
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+}
+
+.radial-menu-popup .maplibregl-popup-tip {
+    display: none;
+}