Add components, configurations and utils

src/components/Button/VButton.global.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="px-2 py-2 rounded-md hover:bg-opacity-80"
+    class="px-3 py-1 hover:bg-opacity-80"
     :class="{
       'bg-primary-color': primary,
       'bg-secondary-color': secondary,

src/components/Layout/LayoutHeader.vue

@@ -1,23 +1,10 @@
 <template>
-  <div 
-    class="
-      relative
-      bg-header
-      border-base-muted
-      px-2
-      sm:px-4
-      py-2.5
-      border-b
-      pl-4
-      pr-4
-      h-9
-      align-middle
-      flex
-      items-center
-      bg-primary-color
-    "
+  <div
+    class="relative bg-header border-base-muted px-2 sm:px-4 py-2.5 border-b pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
   >
-    <div class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content">
+    <div
+      class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
+    >
       <router-link
         to="/"
         class="flex items-center text-primary-content"
@@ -27,7 +14,7 @@
           class="mr-3 h-10"
           :src="header_logo_url"
           :alt="header_logo_text"
-        >
+        />
         <span>
           {{ header_logo_text }}
         </span>
@@ -36,7 +23,7 @@
       <NavbarMobile />
 
       <div class="relative hidden lg:flex items-center ml-auto">
-        <nav class="text-sm leading-6 font-medium">
+        <nav class="text-sm leading-6 font-normal">
           <ul class="flex space-x-8">
             <li
               v-for="(item, index) in header_links"
@@ -64,10 +51,5 @@
 import SwitchTheme from '../SwitchTheme.vue'
 import NavbarMobile from '../Navbar/NavbarMobile.vue'
 
-const {
-  header_links,
-  header_logo_text,
-  header_logo_url
-} = __APP_ENV__
-
-</script>
+const { header_links, header_logo_text, header_logo_url } = __APP_ENV__
+</script>

src/components/Map/VMap.global.vue

@@ -73,11 +73,13 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['geojson:ready'])
+const emit = defineEmits(['geojson:ready', 'geojson'])
 
 let mapObject
 let observeMap
-let geoJSONGroup = new L.FeatureGroup()
+let drawnItems
+let geoJSONGroup
+
 const leafletMap = ref(null)
 const tiles = {
   osm: L.tileLayer(map_server_tils, {
@@ -103,11 +105,24 @@ watch(
 )
 
 onMounted(() => {
+  drawnItems = new L.FeatureGroup()
+  geoJSONGroup = new L.FeatureGroup()
+
   mapObject = L.map(leafletMap.value, {
     center: props.center,
-    zoom: props.zoom
+    zoom: props.zoom,
+    worldCopyJump: true
+  })
+
+  mapObject.pm.setGlobalOptions({
+    layerGroup: drawnItems
   })
 
+  geoJSONGroup.addTo(mapObject)
+
+  mapObject.addLayer(drawnItems)
+  mapObject.addLayer(geoJSONGroup)
+
   if (props.controls) {
     mapObject.pm.addControls({
       position: 'topleft',
@@ -117,10 +132,22 @@ onMounted(() => {
       drawMarker: false,
       cutPolygon: false
     })
-  }
 
-  geoJSONGroup = new L.FeatureGroup()
-  geoJSONGroup.addTo(mapObject)
+    mapObject.on('pm:create', () => {
+      const fg = L.featureGroup()
+
+      drawnItems.eachLayer((layer) => {
+        if (
+          (layer instanceof L.Path || layer instanceof L.Marker) &&
+          layer.pm
+        ) {
+          fg.addLayer(layer)
+        }
+      })
+
+      emit('geojson', fg.toGeoJSON())
+    })
+  }
 
   tiles.osm.addTo(mapObject)
   initEvents()

src/modules/search/otus/OtuSearch.vue

@@ -3,21 +3,27 @@
     ref="root"
     class="w-screen h-screen fixed top-0 left-0 z-[5000]"
   >
-    <div class="absolute right-0 top-0 w-96 h-screen z-[1100] p-4">
-      <!--       <h2 class="text-xl text-base-content mb-4">Search by geographic area</h2> -->
-      <FilterView />
+    <SearchBar @search="loadOTUs" />
+    <div class="relative">
+      <VMap
+        class="w-screen h-screen"
+        controls
+        @geojson="
+          ($event) =>
+            (parameters.geo_json = JSON.stringify(
+              $event.features.map((feature) => feature.geometry)[0]
+            ))
+        "
+        :zoom="4"
+      />
     </div>
-    <VMap
-      class="w-screen h-screen"
-      controls
-      :zoom="4"
-    />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import FilterView from './Filter/FilterView.vue'
+import { makeAPIRequest } from '@/utils/request'
+import SearchBar from './SearchBar.vue'
 
 const root = ref()
 const emit = defineEmits(['close'])
@@ -40,4 +46,8 @@ const handleKeyboard = ({ key }) => {
       break
   }
 }
+
+function loadOTUs() {
+  makeAPIRequest.get('/otus.json', { params: parameters.value })
+}
 </script>

src/modules/search/otus/SearchBar.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="bottom-0 w-screen bg-base-foreground z-[1000] left-0 p-4 text-sm flex flex-row justify-between align-middle box-border"
+  >
+    <div>
+      <VButton
+        primary
+        @click="() => emit('search')"
+      >
+        Search
+      </VButton>
+    </div>
+    <IconClose
+      class="cursor-pointer"
+      @click="() => emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['search', 'close'])
+</script>