Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mission Layer UI Updates #434

Merged
merged 8 commits into from
Dec 2, 2024
Merged

Mission Layer UI Updates #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d87b60d
Update Deps
ingalls Dec 2, 2024
3ebd9c1
Update Internal Overlay Type
ingalls Dec 2, 2024
eaf0d8d
Use computed feats
ingalls Dec 2, 2024
318cee7
Use GUID for now
ingalls Dec 2, 2024
f674f2d
Use MissionLayerTree in CoT sidepanel
ingalls Dec 2, 2024
570d871
Use orhaned list in tree
ingalls Dec 2, 2024
bec3de0
Move flyTo onto COT object
ingalls Dec 2, 2024
370c89b
Fix lints & checks
ingalls Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions api/lib/api/mission-layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export default class {
opts?: Static<typeof MissionOptions>
): Promise<TAKList<Static<typeof MissionLayer>>> {
let res;

if (this.#isGUID(name)) {
const url = new URL(`/Marti/api/missions/guid/${this.#encodeName(name)}/layers`, this.api.url);

Expand Down
270 changes: 146 additions & 124 deletions api/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

320 changes: 165 additions & 155 deletions api/web/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

35 changes: 1 addition & 34 deletions api/web/src/components/CloudTAK/CoTView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@

<TablerIconButton
title='Zoom To'
@click='zoomTo'
@click='cot.flyTo()'
>
<IconZoomPan
:size='32'
Expand Down Expand Up @@ -607,10 +607,8 @@
<script setup lang='ts'>
import { ref, computed, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import type { LngLatBoundsLike, FlyToOptions, LngLatLike } from 'maplibre-gl'
import type COT from '../../../src/stores/base/cot.ts';
import type { COTType } from '../../../src/types.ts';
import { useMapStore } from '../../../src/stores/map.ts';
import { OriginMode } from '../../../src/stores/base/cot.ts'
import Mission from '../../../src/stores/base/mission.ts'
import {
Expand Down Expand Up @@ -658,7 +656,6 @@ const cotStore = useCOTStore();
import { useProfileStore } from '../../../src/stores/profile.ts';
import { useVideoStore } from '../../../src/stores/videos.ts';

const mapStore = useMapStore();
const profileStore = useProfileStore();
const videoStore = useVideoStore();
const route = useRoute();
Expand Down Expand Up @@ -766,34 +763,4 @@ async function deleteCOT() {
await cotStore.delete(cot.value.id);
router.push('/');
}

function zoomTo() {
if (!cot.value) return;
if (!mapStore.map) throw new Error('Map not initialized');

if (cot.value.geometry.type === "Point") {
const flyTo: FlyToOptions = {
speed: Infinity,
center: cot.value.properties.center as LngLatLike,
zoom: 14
};

if (mapStore.map.getZoom() < 3) {
flyTo.zoom = 4;
}

mapStore.map.flyTo(flyTo)
} else {
mapStore.map.fitBounds(cot.value.bounds() as LngLatBoundsLike, {
maxZoom: 14,
padding: {
top: 20,
bottom: 20,
left: 20,
right: 20
},
speed: Infinity,
})
}
}
</script>
1 change: 1 addition & 0 deletions api/web/src/components/CloudTAK/Menu/Mission.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@
</div>

<router-view
:menu='true'
:mission='mission'
:token='token'
:role='role'
Expand Down
232 changes: 125 additions & 107 deletions api/web/src/components/CloudTAK/Menu/Mission/MissionLayerTree.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,134 @@
<template>
<TablerLoading v-if='loading' />
<div
v-for='layer in layers'
v-else
:key='layer.uid'
>
<div class='col-12 hover-dark d-flex align-items-center px-2 py-1'>
<IconChevronRight
v-if='layer.type === "UID" && !opened.has(layer.uid)'
:size='32'
stroke='1'
class='cursor-pointer'
@click='opened.add(layer.uid)'
/>
<IconChevronDown
v-else-if='layer.type === "UID" && opened.has(layer.uid)'
:size='32'
stroke='1'
class='cursor-pointer'
@click='opened.delete(layer.uid)'
/>

<IconFiles
v-if='layer.type === "CONTENTS"'
:size='32'
stroke='1'
/>
<IconMapPins
v-else-if='layer.type === "UID"'
:size='32'
stroke='1'
/>
<IconFolder
v-else-if='layer.type === "GROUP"'
:size='32'
stroke='1'
/>
<IconMap
v-else-if='layer.type === "MAPLAYER"'
:size='32'
stroke='1'
/>
<IconPin
v-else-if='layer.type === "ITEM"'
:size='32'
stroke='1'
/>
<template v-else>
<SingleFeature
v-for='feat of orphanedFeats'
:key='feat.id'
:delete-button='false'
:feature='orphanedFeats'
:mission='mission'
/>
<div
v-for='layer in layers'
:key='layer.uid'
>
<div class='col-12 hover-dark d-flex align-items-center px-3 py-2'>
<IconChevronRight
v-if='layer.type === "UID" && !opened.has(layer.uid)'
:size='20'
stroke='1'
class='cursor-pointer'
@click='opened.add(layer.uid)'
/>
<IconChevronDown
v-else-if='layer.type === "UID" && opened.has(layer.uid)'
:size='20'
stroke='1'
class='cursor-pointer'
@click='opened.delete(layer.uid)'
/>

<span
class='mx-2'
v-text='layer.name'
/>
<IconFiles
v-if='layer.type === "CONTENTS"'
:size='20'
stroke='1'
/>
<IconMapPins
v-else-if='layer.type === "UID"'
:size='20'
stroke='1'
/>
<IconFolder
v-else-if='layer.type === "GROUP"'
:size='20'
stroke='1'
/>
<IconMap
v-else-if='layer.type === "MAPLAYER"'
:size='20'
stroke='1'
/>
<IconPin
v-else-if='layer.type === "ITEM"'
:size='20'
stroke='1'
/>

<div class='ms-auto btn-list d-flex align-items-center'>
<span
v-if='layer.type === "UID"'
class='mx-3 ms-auto badge border text-white'
:class='{
"bg-blue": layer.uids && layer.uids.length > 0,
"bg-gray": !layer.uids || layer.uids.length === 0
}'
v-text='`${layer.uids ? layer.uids.length : 0} Features`'
class='mx-2'
v-text='layer.name'
/>

<TablerIconButton
v-if='role && role.permissions.includes("MISSION_WRITE")'
title='Edit Name'
:size='24'
@click='edit.add(layer.uid)'
>
<IconPencil stroke='1' />
</TablerIconButton>

<TablerDelete
v-if='role && role.permissions.includes("MISSION_WRITE")'
displaytype='icon'
:size='24'
@delete='deleteLayer(layer)'
/>
<div class='ms-auto btn-list d-flex align-items-center'>
<span
v-if='layer.type === "UID"'
class='mx-3 ms-auto badge border text-white'
:class='{
"bg-blue": layer.uids && layer.uids.length > 0,
"bg-gray": !layer.uids || layer.uids.length === 0
}'
v-text='`${layer.uids ? layer.uids.length : 0} Features`'
/>

<TablerIconButton
v-if='role && role.permissions.includes("MISSION_WRITE")'
title='Edit Name'
:size='24'
@click='edit.add(layer.uid)'
>
<IconPencil stroke='1' />
</TablerIconButton>

<TablerDelete
v-if='role && role.permissions.includes("MISSION_WRITE")'
displaytype='icon'
:size='24'
@delete='deleteLayer(layer)'
/>
</div>
</div>
</div>

<MissionLayerEdit
v-if='edit.has(layer.uid)'
:mission='mission'
:layer='layer'
:role='role'
@cancel='edit.delete(layer.uid)'
@layer='emit("refresh")'
/>
<div
v-else-if='opened.has(layer.uid) && layer.type === "UID"'
class='mx-2'
>
<SingleFeature
v-for='cot of cots(layer)'
:key='cot.id'
:delete-button='false'
:feature='cot'
<MissionLayerEdit
v-if='edit.has(layer.uid)'
:mission='mission'
/>
<MissionLayerTree
v-if='layer.mission_layers && layer.mission_layers.length'
:layers='layer.mission_layers as Array<MissionLayer>'
:feats='feats'
:mission='mission'
:token='token'
:layer='layer'
:role='role'
@refresh='emit("refresh")'
/>
<TablerNone
v-if='!layer.uids || !layer.uids.length'
:create='false'
:compact='true'
class='py-2'
@cancel='edit.delete(layer.uid)'
@layer='emit("refresh")'
/>
<div
v-else-if='opened.has(layer.uid) && layer.type === "UID"'
class='mx-2'
>
<SingleFeature
v-for='cot of cots(layer)'
:key='cot.id'
:delete-button='false'
:feature='cot'
:mission='mission'
/>
<MissionLayerTree
v-if='layer.mission_layers && layer.mission_layers.length'
:layers='layer.mission_layers as Array<MissionLayer>'
:feats='feats'
:mission='mission'
:token='token'
:role='role'
@refresh='emit("refresh")'
/>
<TablerNone
v-if='!layer.uids || !layer.uids.length'
:create='false'
:compact='true'
class='py-2'
/>
</div>
</div>
</div>
</template>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { ref, computed } from 'vue';
import type { Mission, MissionLayer, MissionRole, Feature } from '../../../../../src/types.ts';
import Subscription from '../../../../../src/stores/base/mission.ts';
import MissionLayerTree from './MissionLayerTree.vue';
Expand Down Expand Up @@ -151,6 +159,7 @@ const props = defineProps<{
layers: Array<MissionLayer>,
feats: Map<string, Feature>,
mission: Mission,
orphaned?: Set<string>,
token?: string,
role?: MissionRole
}>();
Expand All @@ -159,6 +168,15 @@ const opened = ref<Set<string>>(new Set());
const edit = ref<Set<string>>(new Set());
const loading = ref(false);

const orphanedFeats = computed<Feature[]>(() => {
const feats = [];
for (const uid of props.orphaned || []) {
const feat = props.feats.get(uid);
if (feat) feats.push(feat);
}
return feats;
})

function cots(layer: MissionLayer): Array<Feature> {
const cots = [];
for (const cot of (layer.uids || [])) {
Expand Down
Loading
Loading