updated rimo type map

public/js/pages/PreorderRimoTypeMap/PreorderRimoTypeMap.css

@@ -26,6 +26,10 @@
     opacity: 0.9;
 }
 
+.map-filter-container .form-group {
+    margin: 0;
+}
+
 .map-filter-container .filter-separator {
     width: 1px;
     height: 20px;

public/js/pages/PreorderRimoTypeMap/PreorderRimoTypeMap.js

@@ -8,6 +8,7 @@ Vue.component('PreorderRimoTypeMap', {
         window,
         fetchUrl: window.TT_CONFIG.BASE_PATH + '/Preorder/RimoTypeMapData',
         selectedCampaign: null,
+        allCampaigns: [],
         mapConfig: {
             clusterOptions: {
                 spiderfyOnMaxZoom: false,
@@ -36,6 +37,13 @@ Vue.component('PreorderRimoTypeMap', {
         }
     }),
     computed: {
+        campaignOptions() {
+            if (!this.allCampaigns) return [];
+            return this.allCampaigns.map(campaign => ({
+                value: campaign.id,
+                text: campaign.name
+            }));
+        },
         filterOptions() {
             return Object.entries(this.rimoTypeDefs).map(([value, defs]) => ({ value, ...defs }));
         },
@@ -78,10 +86,25 @@ Vue.component('PreorderRimoTypeMap', {
                 });
         }
     },
-    async created() {
+    watch: {
+        selectedCampaign(newCampaignId) {
+            if (newCampaignId) {
+                this.fetchAllMapData();
+            } else {
+                this.mapMarkers = [];
+                this.fcpMarkers = [];
+                this.faults = {};
+                this.activeFilters = [];
+            }
+        }
+    },
+    created() {
+        this.allCampaigns = window.TT_CONFIG?.ALL_CAMPAIGNS || [];
         const urlParams = new URLSearchParams(window.location.search);
-        this.selectedCampaign = urlParams.get('preordercampaign_id');
-        if (this.selectedCampaign) await this.fetchAllMapData();
+        const campaignIdParam = urlParams.get('preordercampaign_id');
+
+        if (this.allCampaigns.length === 1) this.selectedCampaign = this.allCampaigns[0].id;
+        if (this.allCampaigns.length > 1 && campaignIdParam && this.allCampaigns.some(c => String(c.id) === campaignIdParam)) this.selectedCampaign = campaignIdParam;
     },
     mounted() {
         if (window.TT_CONFIG?.ALL_USERS) {
@@ -116,6 +139,9 @@ Vue.component('PreorderRimoTypeMap', {
             this.isLoading = true;
             this.mapMarkers = [];
             this.fcpMarkers = [];
+            this.faults = {};
+            this.activeFilters = [];
+
 
             try {
                 await this.fetchFaultData();
@@ -432,38 +458,46 @@ Vue.component('PreorderRimoTypeMap', {
     },
     template: `
       <div style="height: 80vh; width: 100%; display: flex; flex-direction: column;">
-        <div v-if="!selectedCampaign" class="alert alert-warning m-3">
-          Bitte eine Kampagne über den URL-Parameter 'preordercampaign_id' auswählen (z.B. ?preordercampaign_id=44).
-        </div>
-        <tt-map v-else ref="ttMap" :markers-data="filteredMapMarkers" :loading="isLoading" :config="mapConfig">
+        <tt-map ref="ttMap" :markers-data="filteredMapMarkers" :loading="isLoading" :config="mapConfig">
           <template v-slot:tools>
             <div class="map-filter-container">
-              <h6 class="mb-0 mr-2 font-weight-bold align-self-center">Filter:</h6>
-              <button v-for="filter in filterOptions"
-                      :key="filter.value"
-                      @click="toggleFilter(filter.value)"
-                      class="btn btn-sm"
-                      :style="getFilterButtonStyle(filter.value)"
-                      :title="filter.text">
-                <i :class="filter.icon"></i>
-              </button>
-              <div class="filter-separator"></div>
-              <button @click="showOnlyFaults = !showOnlyFaults"
-                      class="btn btn-sm"
-                      :class="showOnlyFaults ? 'btn-danger' : 'btn-outline-danger'"
-                      title="Nur Gebäude mit Fehlern anzeigen">
-                <i class="fas fa-exclamation-triangle"></i>
-              </button>
-              <button @click="toggleShowFcps"
-                      class="btn btn-sm"
-                      :class="showFcps ? 'btn-info' : 'btn-outline-info'"
-                      title="FCPs anzeigen/ausblenden">
-                <i class="fas fa-broadcast-tower"></i>
-              </button>
+              <tt-select
+                  v-model="selectedCampaign"
+                  :options="campaignOptions"
+                  label="Kampagne"
+                  :sm="true"
+                  :row="true"
+                  :searchable="true"
+                  style="min-width: 300px;"
+              ></tt-select>
+            </div>
+            <div class="map-filter-container" v-if="selectedCampaign">
+                <h6 class="mr-2 font-weight-bold align-self-center">Filter:</h6>
+                <button v-for="filter in filterOptions"
+                        :key="filter.value"
+                        @click="toggleFilter(filter.value)"
+                        class="btn btn-sm"
+                        :style="getFilterButtonStyle(filter.value)"
+                        :title="filter.text">
+                  <i :class="filter.icon"></i>
+                </button>
+                <div class="filter-separator"></div>
+                <button @click="showOnlyFaults = !showOnlyFaults"
+                        class="btn btn-sm"
+                        :class="showOnlyFaults ? 'btn-danger' : 'btn-outline-danger'"
+                        title="Nur Gebäude mit Fehlern anzeigen">
+                  <i class="fas fa-exclamation-triangle"></i>
+                </button>
+                <button @click="toggleShowFcps"
+                        class="btn btn-sm"
+                        :class="showFcps ? 'btn-info' : 'btn-outline-info'"
+                        title="FCPs anzeigen/ausblenden">
+                  <i class="fas fa-broadcast-tower"></i>
+                </button>
             </div>
           </template>
           <template v-slot:legend>
-            <div class="map-legend-container">
+            <div v-if="selectedCampaign" class="map-legend-container">
               <h6>Legende</h6>
               <div><strong>H:</strong> Homes (Wohneinheiten)</div>
               <div><strong>B:</strong> Bestellungen</div>