Merge pull request #110 from Geoportail-Luxembourg/GSLUX-695-draw-too…

…lbar GSLUX-695: Draw toolbar
Geoportail-Luxembourg · Jun 13, 2024 · b29b395 · b29b395
2 parents 5bd8755 + 3f93e39
commit b29b395
Show file tree

Hide file tree

Showing 10 changed files with 8,727 additions and 8,563 deletions.
diff --git a/bundle/lux.dist.js b/bundle/lux.dist.js
diff --git a/bundle/lux.dist.mjs b/bundle/lux.dist.mjs
diff --git a/bundle/lux.dist.umd.js b/bundle/lux.dist.umd.js
diff --git a/bundle/style.css b/bundle/style.css
diff --git a/cypress/e2e/footer-bar.cy.ts b/cypress/e2e/footer-bar.cy.ts
@@ -0,0 +1,20 @@
+describe('Footer bar', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+  it('toggles the ToolbarDraw', () => {
+    cy.get('[data-cy="toolbarDraw"]').should('not.exist')
+    cy.get('button[data-cy="drawButton"]').click()
+    cy.get('[data-cy="toolbarDraw"]').should('exist')
+    cy.get('button[data-cy="drawButton"]').click()
+    cy.get('[data-cy="toolbarDraw"]').should('not.exist')
+  })
+  it('toggles the followRoads input depending on the drawLineButton', () => {
+    cy.get('[data-cy="followRoads"]').should('not.exist')
+    cy.get('button[data-cy="drawButton"]').click()
+    cy.get('button[data-cy="drawLineButton"]').click()
+    cy.get('[data-cy="followRoads"]').should('exist')
+    cy.get('button[data-cy="drawLineButton"]').click()
+    cy.get('[data-cy="followRoads"]').should('not.exist')
+  })
+})
diff --git a/src/bundle/lib.ts b/src/bundle/lib.ts
@@ -16,6 +16,7 @@ import RemoteLayers from '@/components/remote-layers/remote-layers.vue'
 import LayerMetadata from '@/components/layer-metadata/layer-metadata.vue'
 import HeaderBar from '@/components/header/header-bar.vue'
 import FooterBar from '@/components/footer/footer-bar.vue'
+import ToolbarDraw from '@/components/footer/toolbar-draw.vue'
 import LayerPanel from '@/components/layer-panel/layer-panel.vue'
 import SliderComparator from '@/components/slider/slider-comparator.vue'
 import useBackgroundLayer from '@/composables/background-layer/background-layer.composable'
@@ -101,6 +102,7 @@ export {
   LayerMetadata,
   HeaderBar,
   FooterBar,
+  ToolbarDraw,
   LayerPanel,
   SliderComparator,
   proxyUrlHelper,

diff --git a/src/components/footer/button-text.vue b/src/components/footer/button-text.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  active?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    class="h-16 w-16 text-white bg-tertiary hover:bg-primary"
+    :class="props.active ? 'bg-primary' : 'bg-tertiary'"
+  >
+    <span class="block">{{ props.label }}</span>
+  </button>
+</template>
diff --git a/src/components/footer/footer-bar.vue b/src/components/footer/footer-bar.vue
@@ -3,12 +3,13 @@ import { storeToRefs } from 'pinia'
 
 import ButtonIcon from './button-icon.vue'
 import ButtonLink from './button-link.vue'
+import ToolbarDraw from './toolbar-draw.vue'
 import { useTranslation } from 'i18next-vue'
 import { useAppStore } from '@/stores/app.store'
 
 const { t, i18next } = useTranslation()
-const { setLayersOpen } = useAppStore()
-const { layersOpen } = storeToRefs(useAppStore())
+const { setLayersOpen, setDrawToolbarOpen } = useAppStore()
+const { layersOpen, drawToolbarOpen } = storeToRefs(useAppStore())
 </script>
 <template>
   <footer
@@ -19,81 +20,83 @@ const { layersOpen } = storeToRefs(useAppStore())
       class="flex flex-col w-full sm:w-80 sm:flex-row justify-start text-primary divide-y sm:divide-y-0 sm:divide-x divide-gray-400 divide-solid box-content border-y sm:border-y-0 border-x border-gray-400"
     >
       <li>
-        <ButtonIcon
+        <button-icon
           :label="t('Layers', { ns: 'client' })"
           icon="layers"
           :active="layersOpen"
           @click="() => setLayersOpen(!layersOpen)"
         >
-        </ButtonIcon>
+        </button-icon>
       </li>
 
       <!--TODOs in each button when implemented
         - remove class="text-gray-300"
         - add click handler that calls setLayersOpen(true) and opens tool (also via app store)
       -->
       <li>
-        <ButtonIcon
+        <button-icon
           class="text-gray-300"
           :label="t('My Maps', { ns: 'client' })"
           icon="mymaps"
         >
-        </ButtonIcon>
+        </button-icon>
       </li>
       <li>
-        <ButtonIcon
+        <button-icon
           class="text-gray-300"
           :label="t('Infos', { ns: 'client' })"
           icon="infos"
         >
-        </ButtonIcon>
+        </button-icon>
       </li>
       <li>
-        <ButtonIcon
+        <button-icon
           class="text-gray-300"
           :label="t('Legends', { ns: 'client' })"
           icon="legends"
         >
-        </ButtonIcon>
+        </button-icon>
       </li>
       <li>
-        <ButtonIcon
+        <button-icon
           class="text-gray-300"
           :label="t('Routing', { ns: 'client' })"
           icon="routing"
         >
-        </ButtonIcon>
+        </button-icon>
       </li>
     </ul>
 
     <!-- center buttons -->
     <div
-      class="flex flex-col w-12 sm:w-64 sm:flex-row justify-start text-primary divide-y sm:divide-y-0 sm:divide-x divide-gray-400 divide-solid box-content border-y sm:border-y-0 border-x border-gray-400"
+      class="relative flex flex-col w-12 sm:w-64 sm:flex-row justify-start text-primary divide-y sm:divide-y-0 sm:divide-x divide-gray-400 divide-solid box-content border-y sm:border-y-0 border-x border-gray-400"
     >
-      <ButtonIcon
-        class="text-gray-300"
+      <toolbar-draw v-if="drawToolbarOpen" />
+      <button-icon
         :label="t('Dessin', { ns: 'client' })"
         icon="draw"
+        @click="() => setDrawToolbarOpen(!drawToolbarOpen)"
+        data-cy="drawButton"
       >
-      </ButtonIcon>
-      <ButtonIcon
+      </button-icon>
+      <button-icon
         class="text-gray-300 hidden sm:block"
         :label="t('Mesurer', { ns: 'client' })"
         icon="measure"
       >
-      </ButtonIcon>
-      <ButtonIcon
+      </button-icon>
+      <button-icon
         class="text-gray-300 hidden sm:block"
         :label="t('Imprimer', { ns: 'client' })"
         icon="print"
       >
-      </ButtonIcon>
-      <ButtonIcon
+      </button-icon>
+      <button-icon
         class="text-gray-300"
         :label="t('Partager', { ns: 'client' })"
         icon="share"
       >
-      </ButtonIcon>
+      </button-icon>
     </div>
 
     <!-- right buttons -->

diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ButtonText from './button-text.vue'
+import { useTranslation } from 'i18next-vue'
+
+const { t } = useTranslation()
+const drawLineActive = ref(false)
+</script>
+<template>
+  <div data-cy="toolbarDraw">
+    <ul
+      class="absolute bottom-full top-auto z-20 flex flex-row justify-start divide-y-0 divide-x divide-gray-400 divide-solid box-content border-y-0 border-x border-gray-400"
+    >
+      <li>
+        <button-text :label="t('Draw Point', { ns: 'client' })"> </button-text>
+      </li>
+      <li>
+        <button-text :label="t('Label', { ns: 'client' })"> </button-text>
+      </li>
+      <li>
+        <button-text
+          :label="t('Line', { ns: 'client' })"
+          @click="() => (drawLineActive = !drawLineActive)"
+          data-cy="drawLineButton"
+        >
+        </button-text>
+      </li>
+      <li>
+        <button-text :label="t('Polygon', { ns: 'client' })"> </button-text>
+      </li>
+      <li>
+        <button-text :label="t('Circle', { ns: 'client' })"> </button-text>
+      </li>
+    </ul>
+    <ul
+      class="absolute bottom-full top-auto z-10 pl-[130px] pb-16 w-[326px]"
+      v-if="drawLineActive"
+      data-cy="followRoads"
+    >
+      <li
+        class="flex flex-row justify-center text-white bg-tertiary hover:bg-primary py-2 box-content border-y border-x border-gray-400"
+      >
+        <label>
+          <input type="checkbox" />
+          {{ t('Suivre la route', { ns: 'client' }) }}
+        </label>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/src/stores/app.store.ts b/src/stores/app.store.ts
@@ -16,6 +16,7 @@ export const useAppStore = defineStore(
     const mapId: Ref<string | undefined> = ref()
     const remoteLayersOpen = ref()
     const styleEditorOpen = ref(false)
+    const drawToolbarOpen = ref(false)
 
     function setLang(language: string) {
       lang.value = language
@@ -58,6 +59,10 @@ export const useAppStore = defineStore(
       styleEditorOpen.value = false
     }
 
+    function setDrawToolbarOpen(open: boolean) {
+      drawToolbarOpen.value = open
+    }
+
     return {
       lang,
       layersOpen,
@@ -66,6 +71,7 @@ export const useAppStore = defineStore(
       mapId,
       styleEditorOpen,
       remoteLayersOpen,
+      drawToolbarOpen,
       setLang,
       setLayersOpen,
       setMyLayersTabOpen,
@@ -74,6 +80,7 @@ export const useAppStore = defineStore(
       setMapId,
       openStyleEditorPanel,
       closeStyleEditorPanel,
+      setDrawToolbarOpen,
     }
   },
   {}