Geometry Layers

dfpc-coe · Oct 10, 2024 · 7625f85 · 7625f85
1 parent b5a6b09
commit 7625f85
Showing 1 changed file with 69 additions and 1 deletion.
diff --git a/api/web/src/components/ConnectionSinkEdit.vue b/api/web/src/components/ConnectionSinkEdit.vue
@@ -114,11 +114,70 @@
                                                 </div>
                                             </template>
                                             <template v-else>
+                                                <div class='d-flex justify-content-center pb-4'>
+                                                    <div class='btn-list'>
+                                                        <div
+                                                            class='btn-group'
+                                                            role='group'
+                                                        >
+                                                            <input
+                                                                v-model='mode'
+                                                                type='radio'
+                                                                class='btn-check'
+                                                                name='geom-toolbar'
+                                                                value='points'
+                                                            >
+                                                            <label
+                                                                class='btn btn-icon px-3'
+                                                                @click='mode="points"'
+                                                            >
+                                                                <IconPoint
+                                                                    :size='32'
+                                                                    :stroke='1'
+                                                                /> Points
+                                                            </label>
+                                                            <input
+                                                                v-model='mode'
+                                                                type='radio'
+                                                                class='btn-check'
+                                                                name='geom-toolbar'
+                                                                value='lines'
+                                                            >
+                                                            <label
+                                                                class='btn btn-icon px-3'
+                                                                @click='mode="lines"'
+                                                            >
+                                                                <IconLine
+                                                                    :size='32'
+                                                                    :stroke='1'
+                                                                /> Lines
+                                                            </label>
+                                                            <input
+                                                                v-model='mode'
+                                                                type='radio'
+                                                                class='btn-check'
+                                                                name='geom-toolbar'
+                                                                value='polys'
+                                                            >
+                                                            <label
+                                                                class='btn btn-icon px-3'
+                                                                @click='mode="polys"'
+                                                            >
+                                                                <IconPolygon
+                                                                    :size='32'
+                                                                    :stroke='1'
+                                                                /> Polygons
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                                 <EsriPortal
+                                                    :key='mode'
                                                     :url='sink.body.url'
                                                     :username='sink.body.username'
                                                     :password='sink.body.password'
-                                                    @layer='sink.body.points = $event'
+                                                    :layer='sink.body[mode]'
+                                                    @layer='sink.body[mode] = $event'
                                                     @close='esriView.view = false'
                                                 />
                                             </template>
@@ -172,6 +231,11 @@
 import { std } from '/src/std.ts';
 import PageFooter from './PageFooter.vue';
 import EsriPortal from './util/EsriPortal.vue';
+import {
+    IconPoint,
+    IconLine,
+    IconPolygon,
+} from '@tabler/icons-vue';
 import {
     TablerBreadCrumb,
     TablerEnum,
@@ -188,9 +252,13 @@ export default {
         TablerInput,
         PageFooter,
         EsriPortal,
+        IconPoint,
+        IconLine,
+        IconPolygon,
     },
     data: function() {
         return {
+            mode: 'points',
             errors: {
                 name: '',
             },