@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,195 +0,0 @@
-<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

@@ -1,134 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,63 +0,0 @@
-# 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

@@ -1,85 +0,0 @@
-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;
-}