fix: mapping

OpenRail-Playground · Oct 2, 2024 · 787c204 · 787c204
1 parent 55a7b0f
commit 787c204
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git a/src/components/AddressList.vue b/src/components/AddressList.vue
@@ -33,7 +33,11 @@
               v-model="selectedIsophoneFilterIndex"
             >
               <option value="all">Alle</option>
-              <option v-for="(label, index) of isophoneLabel" :value="index" :key="index">
+              <option
+                v-for="(label, index) of isophoneLabels.keys()"
+                :value="isophoneLabels.get(label)"
+                :key="index"
+              >
                 {{ label }}
               </option>
             </select>
@@ -58,15 +62,15 @@
       <thead>
         <tr>
           <th
-            @click="sortBy('isophoneIndexDay')"
-            :class="getSortClass('isophoneIndexDay')"
+            @click="sortBy('isophoneLevelDay')"
+            :class="getSortClass('isophoneLevelDay')"
             class="center"
             data-icon-before="day"
             data-icon-variant-before="24-outline"
           ></th>
           <th
-            @click="sortBy('isophoneIndexNight')"
-            :class="getSortClass('isophoneIndexNight')"
+            @click="sortBy('isophoneLevelNight')"
+            :class="getSortClass('isophoneLevelNight')"
             class="center"
             data-icon-before="night"
             data-icon-variant-before="24-outline"
@@ -79,31 +83,31 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(address) in filteredAndSortedAddresses" :key="address.id">
+        <tr v-for="address in filteredAndSortedAddresses" :key="address.id">
           <td
             :style="{
               background:
-                address.isophoneIndexDay === undefined
+                address.isophoneLevelDay === undefined
                   ? 'transparent'
-                  : getIsophoneColor(address.isophoneIndexDay, 'day')
+                  : getIsophoneColor(address.isophoneLevelDay, 'day')
             }"
             class="isophone"
           >
-            <span v-if="address.isophoneIndexDay !== undefined"
-              >> {{ getImmissionThresholds().day[address.isophoneIndexDay] }}</span
+            <span v-if="address.isophoneLevelDay !== undefined"
+              >> {{ address.isophoneLevelDay }}</span
             >
           </td>
           <td
             :style="{
               background:
-                address.isophoneIndexNight === undefined
+                address.isophoneLevelNight === undefined
                   ? 'transparent'
-                  : getIsophoneColor(address.isophoneIndexNight, 'night')
+                  : getIsophoneColor(address.isophoneLevelNight, 'night')
             }"
             class="isophone"
           >
-            <span v-if="address.isophoneIndexNight !== undefined"
-              >> {{ getImmissionThresholds().day[address.isophoneIndexNight] }}</span
+            <span v-if="address.isophoneLevelNight !== undefined"
+              >> {{ address.isophoneLevelNight }}</span
             >
           </td>
           <td>{{ address.city }}</td>
@@ -140,9 +144,9 @@ import { useAddressStore } from '../stores/addressStore'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useConstructionSiteStore } from '../stores/constructionSiteStore'
 import { storeToRefs } from 'pinia'
-import { getImmissionThresholds, getIsophoneColor, isophoneLabel } from '../services/Isophones'
+import { getIsophoneColor, isophoneLabels } from '../services/Isophones'
 
-type SortKey = 'postcode' | 'street' | 'city' | 'isophoneIndexDay' | 'isophoneIndexNight'
+type SortKey = 'postcode' | 'street' | 'city' | 'isophoneLevelDay' | 'isophoneLevelNight'
 type SortDirection = 'asc' | 'desc'
 
 const addressStore = useAddressStore()
@@ -154,7 +158,7 @@ const { center, isophonesCalculated, isophonesDay, isophonesNight } =
 const lon = computed(() => center.value && center.value[0])
 const lat = computed(() => center.value && center.value[1])
 
-const selectedIsophoneFilterIndex = ref<number | 'all'>('all')
+const selectedIsophoneFilterIndex = ref<{ day: number; night: number } | 'all'>('all')
 
 // Fetch addresses when the component is mounted
 onMounted(() => {
@@ -208,8 +212,8 @@ const filteredAndSortedAddresses = computed(() => {
         }
 
         return (
-          address.isophoneIndexDay === selectedIsophoneFilterIndex.value ||
-          address.isophoneIndexNight === selectedIsophoneFilterIndex.value
+          address.isophoneLevelDay === selectedIsophoneFilterIndex.value.day ||
+          address.isophoneLevelNight === selectedIsophoneFilterIndex.value.night
         )
       })
       // filter by test input

diff --git a/src/services/Isophones.ts b/src/services/Isophones.ts
@@ -20,14 +20,14 @@ export const isophoneLevels: Record<TimeOfDay, Record<number, string>> = {
   }
 }
 
-export const isophoneLabel = [
-  'Sondergebiet/ Kurgebiet (SO)',
-  'Reines Wohngebiet (WR)',
-  'Allgemeines Wohngebiet (WA)',
-  'Mischgebiet (MI)',
-  'Gewerbegebiet (GE)',
-  'Industriegebiet (GI)'
-]
+export const isophoneLabels = new Map<string, { day: number; night: number }>([
+  ['Industriegebiet (GI)', { day: 70, night: 70 }],
+  ['Gewerbegebiet (GE)', { day: 65, night: 50 }],
+  ['Mischgebiet (MI)', { day: 60, night: 45 }],
+  ['Allgemeines Wohngebiet (WA)', { day: 55, night: 40 }],
+  ['Reines Wohngebiet (WR)', { day: 50, night: 35 }],
+  ['Sondergebiet/ Kurgebiet (SO)', { day: 45, night: 35 }]
+])
 
 export function getImmissionThresholds() {
   return {

diff --git a/src/services/OverpassApi.ts b/src/services/OverpassApi.ts
@@ -7,8 +7,8 @@ export interface Address {
   street: string
   housenumber: string
   levels: number
-  isophoneIndexDay?: number
-  isophoneIndexNight?: number
+  isophoneLevelDay?: number
+  isophoneLevelNight?: number
 }
 
 export async function fetchAddressInRadius(

diff --git a/src/stores/addressStore.ts b/src/stores/addressStore.ts
@@ -4,19 +4,23 @@ import { filterAddressesWithinCircle } from '../utils/map'
 
 function getIsophonesWithAddresses(
   addresses: Address[],
-  indexes: number[],
+  isophone: Record<number, number>,
   lon: number,
   lat: number,
-  key: 'isophoneIndexDay' | 'isophoneIndexNight'
+  key: 'isophoneLevelDay' | 'isophoneLevelNight'
 ) {
   const addressMap = new Map<number, Address[]>()
   let restData = [...addresses]
-  indexes.forEach((radius, index) => {
+  const levels = Object.keys(isophone)
+    .map(Number)
+    .sort((a, b) => b - a)
+  levels.forEach((level) => {
+    const radius = isophone[Number(level)]
     const { matches, rest } = filterAddressesWithinCircle(restData, [lon, lat], radius)
     matches.forEach((match) => {
-      match[key] = index
+      match[key] = Number(level)
     })
-    addressMap.set(index, matches)
+    addressMap.set(Number(level), matches)
     restData = rest
   })
   return Array.from(addressMap.values()).flat()
@@ -51,18 +55,18 @@ export const useAddressStore = defineStore('addressStore', {
 
         const dayMapArray = getIsophonesWithAddresses(
           addressesInMaxRadius,
-          dayRadii,
+          isophones.isophonesDay,
           lon,
           lat,
-          'isophoneIndexDay'
+          'isophoneLevelDay'
         )
 
         const nightMapArray = getIsophonesWithAddresses(
           addressesInMaxRadius,
-          nightRadii,
+          isophones.isophonesNight,
           lon,
           lat,
-          'isophoneIndexNight'
+          'isophoneLevelNight'
         )
         console.log({ dayMap: dayMapArray, nightMap: nightMapArray })