setup basic UI for streetview component

src/components/info/info-panel.vue

@@ -24,11 +24,13 @@ const { locationInfo } = storeToRefs(useMapStore())
 
     <template v-slot:content>
       <template v-if="locationInfo">
-        <LocationInfo />
+        <div class="absolute">
+          <LocationInfo />
+        </div>
       </template>
 
       <template v-else>
-        <div class="text-white">
+        <div class="text-white absolute">
           <ul class="list-disc pl-10">
             <li>
               {{

src/components/info/location-info.vue

@@ -14,6 +14,8 @@ import {
 } from '@/services/info/location-info'
 import { transform } from 'ol/proj'
 
+import StreetView from '@/components/info/street-view.vue'
+
 const { t } = useTranslation()
 const { locationInfo } = storeToRefs(useMapStore())
 
@@ -44,6 +46,32 @@ watch(locationInfo, async () => {
  * */
 const qrUrl = computed(() => getQRUrl(shortUrl.value))
 
+const isRapportForageVirtuelAvailable = computed(() => {
+  const userRole = 'ACT'
+  return userRole === 'ACT'
+})
+const downloadingRepport = ref(false)
+const isInBoxOfLidar = computed(() => true)
+const isCyclomediaAvailable = computed(() => true)
+const isImagesObliquesAvailable = computed(() => true)
+
+const getLidarUrl = () => 'bla'
+const getCyclomediaUrl = () => 'bla'
+const getImagesObliquesUrl = () => 'bla'
+
+const addRoutePoint = () => 'bla'
+
+const open = ref(true)
+const isStreetviewActive = ref(false)
+const toggleStreetview = () => {
+  isStreetviewActive.value = !isStreetviewActive.value
+}
+
+function downloadRapportForageVirtuel() {
+  downloadingRepport.value = true
+  setTimeout(() => (downloadingRepport.value = false), 2000)
+}
+
 watch(clickCoordinateLuref, async () => {
   elevation.value = await getElevation(clickCoordinateLuref.value!)
 })
@@ -106,4 +134,71 @@ const formatted_coordinates = computed(() =>
       </tr>
     </table>
   </div>
+  <div>
+    <div v-if="isRapportForageVirtuelAvailable">
+      <button
+        v-if="!downloadingRepport"
+        class="lux-btn mt-1"
+        @click="downloadRapportForageVirtuel()"
+      >
+        {{ t('Rapport forage virtuel') }}
+      </button>
+    </div>
+    <div class="flex flex-wrap mt-1 gap-x-1">
+      <a
+        v-if="isInBoxOfLidar"
+        class="lux-btn whitespace-nowrap"
+        :href="getLidarUrl()"
+        target="_geoportal_ext_lidar"
+      >
+        {{ t('Lien vers la démo lidar') }}
+      </a>
+      <a
+        v-if="isCyclomediaAvailable"
+        class="lux-btn whitespace-nowrap"
+        :href="getCyclomediaUrl()"
+        target="_geoportal_ext_cyclomedia"
+      >
+        {{ t('Lien vers Cyclomédia') }}
+      </a>
+      <a
+        v-if="isImagesObliquesAvailable"
+        class="lux-btn whitespace-nowrap"
+        :href="getImagesObliquesUrl()"
+        target="_geoportal_ext_obliques"
+      >
+        {{ t('Images obliques') }}
+      </a>
+    </div>
+    <div>
+      <button class="lux-btn mt-1" @click="addRoutePoint()">
+        <span class="create-itinerary-text">
+          {{ t('Ajouter étape à mon itinéraire') }}
+        </span>
+      </button>
+    </div>
+    <div v-if="isStreetviewActive">
+      <button class="lux-btn mt-3" @click="toggleStreetview()">
+        <span class="create-itinerary-text">
+          {{ t('Désactiver Google Streetview') }}
+        </span>
+      </button>
+    </div>
+  </div>
+  <div>
+    <StreetView v-if="isStreetviewActive" />
+    <div
+      v-if="!isStreetviewActive"
+      class="grid before:content-streetview before:col-start-1 before:row-start-1"
+    >
+      <div
+        class="col-start-1 row-start-1 text-center"
+        v-if="!(open && isStreetviewActive)"
+      >
+        <button class="lux-btn mt-3 no-print" @click="toggleStreetview()">
+          {{ t('Activer Google Streetview') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </template>

src/components/info/street-view.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTranslation } from 'i18next-vue'
+
+const { t } = useTranslation()
+
+const isActive = ref(true)
+const noDataAtLocation = ref(true)
+</script>
+
+<template>
+  <div
+    id="streetview-div"
+    class="streetview"
+    v-if="isActive && !noDataAtLocation"
+  >
+    bla
+  </div>
+  <div
+    class="grid before:content-streetview before:col-start-1 before:row-start-1"
+    v-if="isActive && noDataAtLocation"
+  >
+    <span class="col-start-1 row-start-1 text-white py-[15px]">
+      {{ t("Il n'y a pas de panorama google disponible à cet endroit") }}
+    </span>
+  </div>
+</template>

tailwind.config.cjs

@@ -168,6 +168,7 @@ module.exports = {
         measure: '"\\e021"',
         print: '"\\e02f"',
         share: '"\\e02a"',
+        streetview: 'url("/src/assets/images/streetview_placeholder.png")',
         download: 'url("/src/assets/images/palette.svg")',
         upload:
           "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath style='fill:white;' d='M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z'/%3E%3C/svg%3E\")",