added municipality search to fetch energy units

oklabflensburg · Dec 2, 2024 · c8eddef · c8eddef
1 parent d65e5be
commit c8eddef
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 21 deletions.
diff --git a/src/index.html b/src/index.html
@@ -67,19 +67,30 @@ <h3 class="font-bold text-lg lg:text-xl block mb-2">Energiequelle</h3>
         </button>
         </div>
 
-        <h3 class="font-bold text-lg lg:text-xl block mb-2">Bundesland</h3>
+        <div class="mb-4">
+          <h3 class="font-bold text-lg lg:text-xl block mb-2">Bundesgebiet</h3>
+
+          <button id="dropdownButton" class="w-full bg-white hover:bg-gray-100 text-gray-800 py-2 px-4 rounded-sm shadow focus:outline-none focus:ring-2 focus:ring-blue-500 flex justify-between items-center" onclick="toggleDropdown()">
+            <span id="dropdownSelected">Bundesgebiet auswählen</span>
+            <svg class="w-5 h-5 ml-2 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+
+          <div id="dropdownMenu" class="hidden absolute mt-1 mr-3 w-full bg-white border border-gray-300 rounded-xs shadow-lg z-10 transition transform duration-200 ease-out max-h-72 overflow-scroll">
+            <ul id="stateList" class="py-1 text-gray-700">
+            </ul>
+          </div>
+        </div>
 
-        <button id="dropdownButton" class="w-full bg-white hover:bg-gray-100 text-gray-800 py-2 px-4 rounded-sm shadow flex justify-between items-center" onclick="toggleDropdown()">
-          <span id="dropdownSelected">Region auswählen</span>
-          <svg class="w-5 h-5 ml-2 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
+        <div class="relative mb-4">
+          <h3 class="font-bold text-lg lg:text-xl block mb-2">Gemeinde</h3>
 
-        <div id="dropdownMenu" class="hidden absolute mt-1 mr-3 w-full bg-white border border-gray-300 rounded-xs shadow-lg z-10 transition transform duration-200 ease-out max-h-72 overflow-scroll">
-          <ul id="stateList" class="py-1 text-gray-700">
+          <input type="text" id="searchBox" class="w-full bg-white hover:bg-gray-100 text-gray-800 py-2 px-4 rounded-sm shadow focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Gemeinde suchen">
+          <ul id="suggestionsList" class="hidden absolute mt-1 mr-3 w-full bg-white border border-gray-300 rounded-xs shadow-lg z-10 transition transform duration-200 ease-out max-h-72 overflow-scroll">
           </ul>
         </div>
+
       </div>
 
       <div class="mt-3 md:mt-6 py-2 px-3" id="about">

diff --git a/src/main.js b/src/main.js
@@ -265,18 +265,6 @@ document.addEventListener('DOMContentLoaded', function () {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="dc:rights">OpenStreetMap</a> contributors'
   }).addTo(map)
 
-  L.tileLayer('https://tiles.oklabflensburg.de/bksh/{z}/{x}/{y}.png', {
-    opacity: 0.8,
-    maxZoom: 20,
-    maxNativeZoom: 20,
-    attribution: '&copy; <a href="https://www.schleswig-holstein.de/DE/landesregierung/ministerien-behoerden/LFU" target="_blank" rel="dc:rights">LfU SH</a>/<a href="https://www.govdata.de/dl-de/by-2-0" target="_blank" rel="dc:rights">dl-de/by-2-0</a>'
-  }).addTo(map)
-
-  map.on('click', function (e) {
-    const lat = e.latlng.lat
-    const lng = e.latlng.lng
-  })
-
   document.querySelector('#sidebarCloseButton').addEventListener('click', function (e) {
     e.preventDefault()
     cleanEnergyMeta()
@@ -286,6 +274,107 @@ document.addEventListener('DOMContentLoaded', function () {
 })
 
 
+async function fetchEnergyUnits(municipalityKey) {
+  const url = `https://api.oklabflensburg.de/energy/v1/unit/wind/key?municipality_key=${municipalityKey}`
+
+  try {
+    const response = await fetch(url)
+
+    if (!response.ok) {
+      throw new Error(`Error fetching energy unit WIND got http status code: ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    console.log(data)
+
+    return data
+  }
+  catch (error) {
+    console.error('Failed to fetch bounding box:', error)
+
+    return null
+  }
+}
+
+
+async function renderEnergyUnits(mapReference, municipalityKey) {
+  const bbox = await fetchEnergyUnits(municipalityKey)
+
+  if (bbox) {
+    console.log(bbox)
+  }
+  else {
+    console.error('Bounding box could not be fetched.')
+  }
+}
+
+
+const searchBox = document.getElementById('searchBox')
+const suggestionsList = document.getElementById('suggestionsList')
+
+const updateSuggestions = (suggestions) => {
+  suggestionsList.innerHTML = ''
+
+  if (suggestions.length === 0) {
+    suggestionsList.classList.add('hidden')
+
+    return
+  }
+
+  suggestions.forEach((item) => {
+    const li = document.createElement('li')
+
+    li.id = item.municipality_key
+    li.textContent = `${item.geographical_name} (${item.region_name})`
+    li.className = 'px-4 py-2 cursor-pointer hover:bg-blue-500 hover:text-white'
+
+    li.addEventListener('click', () => {
+      searchBox.value = item.geographical_name
+      suggestionsList.classList.add('hidden')
+      renderEnergyUnits(map, item.municipality_key)
+    })
+
+    suggestionsList.appendChild(li)
+  })
+
+  suggestionsList.classList.remove('hidden')
+}
+
+
+const fetchSuggestions = async (query) => {
+  if (!query) {
+    suggestionsList.classList.add('hidden')
+    suggestionsList.innerHTML = ''
+
+    return
+  }
+
+  try {
+    const response = await fetch(`https://api.oklabflensburg.de/administrative/v1/municipality/search?query=${query}`)
+
+    if (!response.ok) {
+      throw new Error('Error fetching suggestions')
+    }
+
+    const data = await response.json()
+
+    updateSuggestions(data || [])
+  }
+  catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+searchBox.addEventListener('input', (e) => fetchSuggestions(e.target.value))
+
+// Hide suggestions when clicking outside
+document.addEventListener('click', (e) => {
+  if (!e.target.closest('#searchBox') && !e.target.closest('#suggestionsList')) {
+    suggestionsList.classList.add('hidden')
+  }
+})
+
+
 const dropdownButton = document.getElementById('dropdownButton')
 const dropdownMenu = document.getElementById('dropdownMenu')
 const dropdownSelected = document.getElementById('dropdownSelected')