Skip to content

Commit

Permalink
Add very basic style section
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Mar 8, 2024
1 parent 0501425 commit f5a2243
Showing 1 changed file with 105 additions and 31 deletions.
136 changes: 105 additions & 31 deletions api/web/src/components/CloudTAK/Menu/Overlays.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,109 @@
<template>
<div>
<div class='col-12 border-bottom border-light'>
<div class='modal-header px-0 mx-2'>
<IconCircleArrowLeft @click='$emit("close")' class='cursor-pointer'/>
<div class='modal-title'>Overlays</div>
<div class='btn-list'>
<IconPlus @click='$emit("datas")' class='cursor-pointer' v-tooltip='"Add Overlay"'/>
<template v-if='isEditing && isEditing.single'>
<div class='col-12 border-bottom border-light'>
<div class='modal-header px-0 mx-2'>
<IconCircleArrowLeft @click='isEditing.single = false' class='cursor-pointer'/>

<div class='modal-title'>
<IconPaintFilled v-if='isEditing.single.type === "fill"'/>
<span v-text='isEditing.single.id'/>
</div>
<div class='btn-list'></div>
</div>
</div>
<div class="col-lg py-2 px-3">
<label class='subheader pb-2'>Filter</label>
<div class='col-12 bg-gray-500 px-2 my-2 py-2'>
<span v-text='isEditing.single.filter'/>
</div>
</div>
<div class="col-lg py-2 px-3">
<label class='subheader pb-2'>Source Layer</label>
<div class='col-12 bg-gray-500 px-2 my-2 py-2'>
<span v-text='isEditing.single["source-layer"]'/>
</div>
</div>
<div class="col-lg py-2 px-3">
<label class='subheader'>Layout</label>
<div v-if='Object.keys(isEditing.single.layout).length === 0' class='col-12 d-flex bg-gray-500 px-2 my-2 py-2'>
None
</div>
<div :key='p' v-for='p of Object.keys(isEditing.single.layout)' class='col-12 d-flex bg-gray-500 px-2 my-2 py-2'>
<span v-text='p'/>
<span class='ms-auto' v-text='isEditing.single.layout[p]'/>
</div>
</div>
<div class="col-lg py-2 px-3">
<label class='subheader'>Paint</label>
<div v-if='Object.keys(isEditing.single.paint).length === 0' class='col-12 d-flex bg-gray-500 px-2 my-2 py-2'>
None
</div>
<div :key='p' v-for='p of Object.keys(isEditing.single.paint)' class='col-12 d-flex bg-gray-500 px-2 my-2 py-2'>
<span v-text='p'/>
<span class='ms-auto' v-text='isEditing.single.paint[p]'/>
</div>
</div>
</template>
<template v-else-if='isEditing'>
<div class='col-12 border-bottom border-light'>
<div class='modal-header px-0 mx-2'>
<IconCircleArrowLeft @click='isEditing = false' class='cursor-pointer'/>
<div class='modal-title' v-text='isEditing.layer.name'></div>
<div class='btn-list'></div>
</div>
</div>
<div :key='l' v-for='l of isEditing.layer.layers' class="col-lg py-2 px-3 hover-dark">
<div class='py-2 px-2 hover-dark cursor-pointer'>
<div @click='isEditing.single = l' class='user-select-none' v-text='l.id'/>
</div>
</div>
</div>
<TablerLoading v-if='loading'/>
</template>
<template v-else>
<div :key='layer.url' v-for='layer in layers' class="col-lg py-2 px-3 hover-dark">
<div class='py-2 px-2 hover-dark'>
<div class='col-12 d-flex align-items-center'>
<IconEye v-if='layer.visible === "visible"' @click='flipVisible(layer)' class='cursor-pointer' v-tooltip='"Hide Layer"'/>
<IconEyeOff v-else @click='flipVisible(layer)' class='cursor-pointer' v-tooltip='"Show Layer"'/>
<div class='col-12 border-bottom border-light'>
<div class='modal-header px-0 mx-2'>
<IconCircleArrowLeft @click='$emit("close")' class='cursor-pointer'/>
<div class='modal-title'>Overlays</div>
<div class='btn-list'>
<IconPlus @click='$emit("datas")' class='cursor-pointer' v-tooltip='"Add Overlay"'/>
</div>
</div>
</div>
<TablerLoading v-if='loading'/>
<template v-else>
<div :key='layer.url' v-for='layer in layers' class="col-lg py-2 px-3 hover-dark">
<div @click='editor(layer)' class='py-2 px-2 hover-dark' :class='{
"cursor-pointer": ["data", "profile"].includes(layer.mode) && layer.type === "vector"
}'>
<div class='col-12 d-flex align-items-center'>
<IconEye v-if='layer.visible === "visible"' @click='flipVisible(layer)' class='cursor-pointer' v-tooltip='"Hide Layer"'/>
<IconEyeOff v-else @click='flipVisible(layer)' class='cursor-pointer' v-tooltip='"Show Layer"'/>

<span class='mx-2'>
<IconMap v-if='layer.type === "raster"' v-tooltip='"Raster"'/>
<IconVector v-else v-tooltip='"Vector"'/>
</span>
<span class='mx-2'>
<IconMap v-if='layer.type === "raster"' v-tooltip='"Raster"'/>
<IconVector v-else v-tooltip='"Vector"'/>
</span>

<span class='mx-2' v-text='layer.name'/>
<span class='mx-2 user-select-none' v-text='layer.name'/>

<div class='ms-auto btn-list'>
<IconMaximize v-if='getSource(layer).bounds' @click='zoomTo(getSource(layer).bounds)' class='cursor-pointer' v-tooltip='"Zoom To Overlay"'/>
<TablerDelete
:key='layer.id'
v-if='layer.mode === "mission" || layer.name.startsWith("data-") || layer.name.startsWith("profile-")'
displaytype='icon'
@delete='removeLayer(layer)'
v-tooltip='"Delete Overlay"'
/>
<div class='ms-auto btn-list'>
<IconMaximize v-if='getSource(layer).bounds' @click='zoomTo(getSource(layer).bounds)' class='cursor-pointer' v-tooltip='"Zoom To Overlay"'/>
<TablerDelete
:key='layer.id'
v-if='layer.mode === "mission" || layer.name.startsWith("data-") || layer.name.startsWith("profile-")'
displaytype='icon'
@delete='removeLayer(layer)'
v-tooltip='"Delete Overlay"'
/>
</div>
</div>
</div>

<div v-if='layer.type === "raster"' class='col-12' style='margin-left: 30px; padding-right: 40px;' step=''>
<TablerRange label='Opacity' v-model='layer.opacity' @change='updateOpacity(layer)' :min='0' :max='1' :step='0.1'/>
<div v-if='layer.type === "raster"' class='col-12' style='margin-left: 30px; padding-right: 40px;' step=''>
<TablerRange label='Opacity' v-model='layer.opacity' @change='updateOpacity(layer)' :min='0' :max='1' :step='0.1'/>
</div>
</div>
</div>
</div>
</template>
</template>
</div>
</template>
Expand All @@ -53,6 +116,7 @@ import {
} from '@tak-ps/vue-tabler';
import {
IconCircleArrowLeft,
IconPaintFilled,
IconMaximize,
IconVector,
IconEyeOff,
Expand All @@ -69,6 +133,7 @@ export default {
data: function() {
return {
err: false,
isEditing: false,
loading: false,
}
},
Expand All @@ -81,6 +146,14 @@ export default {
mapStore.removeLayer(layer.name);
this.loading = false;
},
editor: function(layer) {
if (["data", "profile"].includes(layer.mode) && layer.type === "vector") {
this.isEditing = {
layer: layer,
single: false
}
}
},
getSource: function(layer) {
return mapStore.map.getSource(layer.source)
},
Expand All @@ -107,6 +180,7 @@ export default {
IconMaximize,
IconCircleArrowLeft,
IconEye,
IconPaintFilled,
IconEyeOff,
IconPlus,
IconVector,
Expand Down

0 comments on commit f5a2243

Please sign in to comment.