Merge pull request #197 from inbo/september-release

September release
inbo · Sep 15, 2024 · 7f327e7 · 7f327e7
2 parents c7e586e + 4d98daf
commit 7f327e7
Show file tree

Hide file tree

Showing 22 changed files with 673 additions and 243 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -62,7 +62,8 @@ services:
     ports:
       - "5050:80"
     depends_on:
-      - db
+      db:
+        condition: service_healthy
 
   redis:
     image: "redis:alpine"
@@ -79,8 +80,8 @@ services:
     environment:
       - TZ=UTC
     depends_on:
-      - db
-      - redis
+      db:
+        condition: service_healthy
 
   celery_beat:
     build:
@@ -92,8 +93,8 @@ services:
     environment:
       - TZ=UTC
     depends_on:
-      - db
-      - redis
+      db:
+        condition: service_healthy
 
 volumes:
   postgres_data:

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -73,7 +73,7 @@
 }
 
 .bg-reserved {
-    background-color: rgba(var(--v-theme-warning));
+    background-color: #ffc107;
 }
 
 .bg-eradicated {
@@ -138,4 +138,31 @@
     align-items: center;
     font-size: 1.5rem;
     z-index: 1000;
+}
+
+.search-bar {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.search-bar input {
+    border: none;
+    padding: 8px 12px;
+    font-size: 14px;
+    width: 250px;
+}
+
+.search-bar button {
+    background-color: rgba(var(--v-theme-success));
+    border: none;
+    color: white;
+    padding: 8px 12px;
+    cursor: pointer;
 }
diff --git a/src/components/FilterComponent.vue b/src/components/FilterComponent.vue
@@ -80,10 +80,10 @@ export default {
     const anbAreasActief = ref(null);
     const visibleActief = ref(true);
     const nestType = ref([
-      { name: 'actief embryonaal nest', value: 'actief_embryonaal_nest' },
-      { name: 'actief primair nest', value: 'actief_primair_nest' },
-      { name: 'actief secundair nest', value: 'actief_secundair_nest' },
-      { name: 'inactief/leeg nest', value: 'inactief_leeg_nest' },
+      { name: 'Actief embryonaal nest', value: 'actief_embryonaal_nest' },
+      { name: 'Actief primair nest', value: 'actief_primair_nest' },
+      { name: 'Actief secundair nest', value: 'actief_secundair_nest' },
+      { name: 'Inactief/leeg nest', value: 'inactief_leeg_nest' },
     ]);
     const nestStatus = ref([
       { name: 'Bestreden nest', value: 'eradicated' },

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
@@ -42,16 +42,18 @@ export default {
         const vespaStore = useVespaStore();
         const username = ref('');
         const password = ref('');
-        const error = computed(() => {
-            return Array.isArray(vespaStore.error) ? vespaStore.error.join(', ') : vespaStore.error;
+
+        const loginError = computed(() => {
+            return Array.isArray(vespaStore.loginError) ? vespaStore.loginError.join(', ') : vespaStore.loginError;
         });
 
         const formattedError = computed(() => {
-            if (!error.value) return null;
+            if (!loginError.value) return null;
             // Additional checks can be added here for other known errors
-            return error.value;
+            return loginError.value;
         });
 
+
         const login = async () => {
             await vespaStore.login({ username: username.value, password: password.value });
             if (vespaStore.isLoggedIn) {
@@ -68,3 +70,9 @@ export default {
     }
 };
 </script>
+<style scoped>
+.error-container {
+    max-width: 100%;
+    word-wrap: break-word;
+}
+</style>
diff --git a/src/components/MapPage.vue b/src/components/MapPage.vue
@@ -2,6 +2,12 @@
   <div class="d-flex flex-column vh-100">
     <NavbarComponent />
     <div class="flex-grow-1 position-relative">
+      <div class="search-bar">
+        <input v-model="searchQuery" @keyup.enter="searchAddress" placeholder="Zoek een adres..." />
+        <button @click="searchAddress">
+          <i class="fas fa-search"></i>
+        </button>
+      </div>
       <button class="btn-filter-toggle" @click="toggleFilterPanel">
         <i class="fas fa-sliders-h"></i> Filters
       </button>
@@ -54,6 +60,7 @@ export default {
   },
   setup() {
     const vespaStore = useVespaStore();
+    const searchQuery = ref('');
     const router = useRouter();
     const selectedObservation = computed(() => vespaStore.selectedObservation);
     const isEditing = computed(() => vespaStore.isEditing);
@@ -66,7 +73,21 @@ export default {
     const isMapLoading = ref(true);
     const filtersUpdated = ref(false);
     const isFetchingGeoJson = ref(false); // Flag to prevent multiple calls
-
+    const searchAddress = async () => {
+      if (searchQuery.value) {
+        try {
+          const result = await vespaStore.searchAddress(searchQuery.value);
+          if (result) {
+            map.value.setView([result.lat, result.lon], 16);
+          } else {
+            // Handle case when address is not found
+            console.log('Adres niet gevonden');
+          }
+        } catch (error) {
+          console.error('Error searching address:', error);
+        }
+      }
+    };
     const formattedError = computed(() => {
       if (!error.value) return null;
       if (error.value.includes("Failed to fetch observation details")) {
@@ -101,6 +122,10 @@ export default {
     const openObservationDetails = async (properties) => {
       try {
         await vespaStore.fetchObservationDetails(properties.id);
+        if (vespaStore.selectedObservation && !vespaStore.selectedObservation.visible) {
+          console.error("Observation is not visible");
+          return;
+        }
         vespaStore.isDetailsPaneOpen = true;
         router.push({ path: `/map/observation/${properties.id}` });
       } catch (error) {
@@ -161,6 +186,11 @@ export default {
     }, 300);
 
     watch(selectedObservation, (newObservation, oldObservation) => {
+      if (newObservation && !newObservation.visible) {
+        vespaStore.isDetailsPaneOpen = false;
+        router.push({ path: '/map' });
+        return;
+      }
       if (newObservation && oldObservation && newObservation.id !== oldObservation.id) {
         const oldMarker = vespaStore.markerClusterGroup.getLayers().find(marker => marker.feature.properties.id === oldObservation.id);
         if (oldMarker) {
@@ -292,7 +322,9 @@ export default {
       formattedError,
       loadingObservations,
       isMapLoading,
-      updateMarkerColor
+      updateMarkerColor,
+      searchQuery,
+      searchAddress,
     };
   },
 };