@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/CloudTAK/Menu/Mission/MissionCreate.vue

@@ -1,372 +0,0 @@
-<template>
-    <div class='col-12'>
-        <div class='modal-header'>
-            <div class='row'>
-                <div class='col-auto'>
-                    <IconLock
-                        v-if='mission.passwordProtected'
-                        :size='32'
-                        stroke='1'
-                    />
-                    <IconLockOpen
-                        v-else
-                        :size='32'
-                        stroke='1'
-                    />
-                </div>
-                <div class='col-auto row'>
-                    <div class='col-12'>
-                        <span>Create Mission</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <TablerLoading
-            v-if='loading'
-            desc='Saving Mission'
-        />
-        <template v-else>
-            <div class='modal-body row g-2'>
-                <div class='col-12'>
-                    <TablerInput
-                        v-model='mission.name'
-                        :error='missionNameValidity'
-                        label='Name'
-                    />
-                </div>
-
-                <div
-                    v-if='templates.length || templatesLoading'
-                    class='col-12'
-                >
-                    <div class='d-flex align-items-center mb-2'>
-                        <label class='subheader my-0'>Templates</label>
-                        <div class='ms-auto'>
-                            <TablerIconButton
-                                v-if='!showSearch'
-                                title='Search Templates'
-                                @click='showSearch = true'
-                            >
-                                <IconSearch
-                                    :size='20'
-                                    stroke='1'
-                                />
-                            </TablerIconButton>
-                            <TablerIconButton
-                                v-else
-                                title='Close Search'
-                                @click='showSearch = false; templatesPaging.filter = "";'
-                            >
-                                <IconX
-                                    :size='20'
-                                    stroke='1'
-                                />
-                            </TablerIconButton>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if='showSearch'
-                        class='mb-2'
-                    >
-                        <TablerInput
-                            v-model='templatesPaging.filter'
-                            placeholder='Search Templates...'
-                            :autofocus='true'
-                        />
-                    </div>
-
-                    <TablerLoading
-                        v-if='templatesLoading'
-                        desc='Loading Templates'
-                    />
-                    <div
-                        v-else-if='templates.length'
-                        class='row g-2'
-                    >
-                        <div
-                            v-for='template in templates'
-                            :key='template.id'
-                            class='col-3'
-                            @click='selectedTemplate = template.id'
-                        >
-                            <div
-                                class='card p-2 text-center cursor-pointer h-100 d-flex flex-column align-items-center justify-content-center'
-                                :class='{ "bg-primary-lt": selectedTemplate === template.id }'
-                            >
-                                <img
-                                    v-if='template.icon'
-                                    :src='template.icon'
-                                    class='mb-2'
-                                    style='height: 32px; width: 32px; object-fit: contain;'
-                                    :style='template.icon.includes("image/svg+xml") ? "filter: brightness(0) invert(1);" : ""'
-                                >
-                                <IconLayout
-                                    v-else
-                                    :size='32'
-                                    stroke='1'
-                                    class='mb-2'
-                                />
-                                <div class='small lh-1'>
-                                    {{ template.name }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        v-else
-                        class='text-center fst-italic text-muted'
-                    >
-                        No Templates Found
-                    </div>
-                </div>
-
-                <div class='col-12'>
-                    <TablerInput
-                        v-model='mission.description'
-                        label='Description'
-                    />
-                </div>
-
-                <div class='col-12'>
-                    <label class='px-2 w-100'>Channels</label>
-
-                    <GroupSelect
-                        v-model='mission.groups'
-                        :active='true'
-                        direction='IN'
-                    />
-                </div>
-
-                <label
-                    class='subheader mt-3 cursor-pointer'
-                    @click='advanced = !advanced'
-                >
-                    <IconSquareChevronRight
-                        v-if='!advanced'
-                        :size='32'
-                        stroke='1'
-                    />
-                    <IconChevronDown
-                        v-else
-                        :size='32'
-                        stroke='1'
-                    />
-                    Advanced Options
-                </label>
-
-                <div
-                    v-if='advanced'
-                    class='col-12'
-                >
-                    <div class='row g-2'>
-                        <div class='col-12'>
-                            <label class='px-2 w-100'>Keywords</label>
-                            <TagEntry
-                                placeholder='Enter Keywords'
-                                @tags='mission.keywords = $event'
-                            />
-                        </div>
-
-                        <div class='col-12'>
-                            <TablerToggle
-                                v-model='mission.passwordProtected'
-                                label='Password Protected'
-                            />
-                            <TablerInput
-                                v-if='mission.passwordProtected'
-                                v-model='mission.password'
-                                :disabled='!mission.passwordProtected'
-                                type='password'
-                                label='Password'
-                            />
-                        </div>
-
-                        <div class='col-12'>
-                            <TablerEnum
-                                v-model='mission.role'
-                                label='Default Role'
-                                :options='["Read-Only", "Subscriber", "Owner"]'
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                <div class='col-12 d-flex'>
-                    <div class='ms-auto'>
-                        <button
-                            class='btn btn-primary'
-                            @click='createMission'
-                        >
-                            Create Mission
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed, watch, onMounted } from 'vue';
-import { server } from '../../../../std.ts';
-import type { Mission_Create, MissionTemplateList } from '../../../../types.ts';
-import { useMapStore } from '../../../../stores/map.ts'
-import {
-    IconLock,
-    IconLockOpen,
-    IconSquareChevronRight,
-    IconChevronDown,
-    IconSearch,
-    IconX,
-    IconLayout
-} from '@tabler/icons-vue';
-import GroupSelect from '../../util/GroupSelect.vue';
-import TagEntry from '../../util/TagEntry.vue';
-import Overlay from '../../../../base/overlay.ts';
-import {
-    TablerInput,
-    TablerEnum,
-    TablerToggle,
-    TablerLoading,
-    TablerIconButton
-} from '@tak-ps/vue-tabler';
-
-const mapStore = useMapStore();
-const emit = defineEmits(['mission']);
-
-const attempted = ref(false);
-const loading = ref(false);
-const advanced = ref(false);
-
-const templates = ref<MissionTemplateList['items']>([]);
-const templatesLoading = ref(false);
-const showSearch = ref(false);
-
-const templatesPaging = ref({
-    filter: ''
-});
-
-const selectedTemplate = ref<string | null>(null);
-
-const mission = ref({
-    name: '',
-    password: '',
-    passwordProtected: false,
-    role: 'Subscriber',
-    description: '',
-    groups: [],
-    keywords: [],
-    hashtags: ''
-});
-
-watch(templatesPaging, async () => {
-    await listTemplates();
-}, { deep: true });
-
-onMounted(async () => {
-    await listTemplates();
-});
-
-async function listTemplates() {
-    templatesLoading.value = true;
-
-    const res = await server.GET('/api/template/mission', {
-        params: {
-            query: {
-                limit: 10,
-                sort: 'created',
-                page: 0,
-                order: 'desc',
-                filter: templatesPaging.value.filter || ''
-            }
-        }
-    })
-
-    if (res.error) throw new Error(res.error.message);
-
-    if (!res.data.items.length && !templatesPaging.value.filter) {
-        templates.value = [];
-    } else {
-        templates.value = [{
-            id: 'default',
-            name: 'Default',
-            icon: '',
-            description: '',
-            created: '',
-            updated: '',
-        }, ...res.data.items];
-
-        if (!selectedTemplate.value) selectedTemplate.value = 'default';
-    }
-    templatesLoading.value = false;
-}
-
-const missionNameValidity = computed<string>(() => {
-    // eslint-disable-next-line no-useless-escape
-    if (!mission.value.name.match(/^[\p{L}\p{N}\w\d\s\.\(\)!=@#$&^*_\-\+\[\]\{\}:,\.\/\|\\]*$/u)) {
-        return 'Contains Invalid Character'
-    } else if (mission.value.name.length > 1024) {
-        return 'Exceeds 1024 Characters'
-    } else if (attempted.value && mission.value.name.length === 0) {
-        return 'Cannot be empty'
-    }
-
-    return '';
-});
-
-async function createMission() {
-    attempted.value = true;
-
-    if (missionNameValidity.value) return;
-
-    loading.value = true;
-    try {
-        loading.value = true;
-
-        const body: Mission_Create = {
-            name: mission.value.name,
-            group: mission.value.groups,
-            description: mission.value.description || '',
-            keywords: mission.value.keywords || []
-        };
-
-        if (mission.value.role === 'Subscriber') body.defaultRole = 'MISSION_SUBSCRIBER';
-        if (mission.value.role === 'Read-Only') body.defaultRole = 'MISSION_READONLY_SUBSCRIBER';
-        if (mission.value.role === 'Owner') body.defaultRole = 'MISSION_OWNER';
-
-        if (mission.value.passwordProtected) body.password = mission.value.password;
-
-        if (selectedTemplate.value !== 'default') {
-            if (!body.keywords) body.keywords = [];
-            body.keywords.push(`template:${selectedTemplate.value}`);
-        }
-
-        const res = await server.POST('/api/marti/mission', {
-            body
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        const missionOverlay = await Overlay.create({
-            name: res.data.name,
-            url: `/mission/${encodeURIComponent(res.data.name)}`,
-            type: 'geojson',
-            mode: 'mission',
-            token: res.data.token,
-            mode_id: res.data.guid,
-        })
-
-        mapStore.overlays.push(missionOverlay);
-
-        await mapStore.loadMission(res.data.guid);
-
-        emit('mission', res.data);
-
-        loading.value = false;
-    } catch (err) {
-        loading.value = false;
-        throw err;
-    }
-}
-</script>