feat(feature-info): migrate profile (WIP)

does not work well with multiple profiles yet

src/components/info/profile-feature-info.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FeatureElevationProfile from '@/components/feature-elevation-profile/feature-elevation-profile.vue'
+import { FeatureJSON } from './feature-info.model'
+import GeoJSON from 'ol/format/GeoJSON'
+import useMap from '@/composables/map/map.composable'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+
+const props = defineProps<{
+  feature: FeatureJSON
+}>()
+const map = useMap().getOlMap()
+const olFeature = computed(
+  () =>
+    new DrawnFeature(
+      new GeoJSON().readFeature(props.feature, {
+        dataProjection: 'EPSG:2169',
+        featureProjection: map.getView().getProjection(),
+      }) as DrawnFeature
+    )
+)
+
+/**
+ * This component is a wrapper to transform the feature info's FeatureJSON into a DrawnFeature to query profile data
+ */
+</script>
+
+<template>
+  <feature-elevation-profile :feature="olFeature" />
+</template>

src/components/info/templates/default-template.vue

@@ -12,6 +12,8 @@ import {
   getTrustedUrl,
 } from './template-utilities'
 import i18next from 'i18next'
+import ProfileFeatureInfo from '@/components/info/profile-feature-info.vue'
+
 defineProps({
   layers: {
     type: Object as () => FeatureInfoJSON,
@@ -108,17 +110,12 @@ const currentUrl = window.location.href
             </span>
           </div>
         </div>
-
-        <!-- <div
+        <div
           class="query-profile"
-          ng-show="feature.attributes.showProfile.active"
+          v-if="feature.attributes.showProfile?.active"
         >
-          <app-profile
-            app-profile-data="feature.attributes.profile"
-            app-profile-map="::ctrl.map"
-            app-profile-interaction="feature.attributes.showProfile"
-          />
-        </div> -->
+          <profile-feature-info :feature="feature" />
+        </div>
         <div v-if="feature.attributes.showProfile?.active">
           <a
             class="lux-btn"

src/services/draw/drawn-feature.ts

@@ -88,7 +88,10 @@ export class DrawnFeature extends Feature {
   async getProfile() {
     const geom = this.getGeometry()
 
-    if (geom?.getType() !== 'LineString') {
+    if (
+      geom?.getType() !== 'LineString' &&
+      geom?.getType() !== 'MultiLineString'
+    ) {
       return
     }