Merge pull request #2571 from IDEMSInternational/deployment_dev/confl…

…ict_forecast Feat(map): layer groups
IDEMSInternational · Dec 2, 2024 · d67f0fb · d67f0fb
2 parents 37821a8 + bedd48d
commit d67f0fb
Show file tree

Hide file tree

Showing 3 changed files with 197 additions and 113 deletions.
diff --git a/src/app/shared/components/template/components/map/map.component.html b/src/app/shared/components/template/components/map/map.component.html
@@ -2,86 +2,92 @@
   <div class="map-and-legend-container">
     <div id="mapElement" #mapElement class="map"></div>
     <div class="legend">
-      @for (mapLayer of mapLayers; track $index) {
-        @if (mapLayer.getVisible() && mapLayer.get("gradientFill")) {
-          <div class="legend-item">
-            <div class="title">
-              {{ mapLayer.get("scaleTitle") }}
-            </div>
-            <div class="scale-container">
-              @if (mapLayer.get("scaleSlider")) {
-                <ion-range
-                  [dualKnobs]="true"
-                  [value]="{ lower: 0, upper: 100 }"
-                  [ngStyle]="{ '--bar-background': mapLayer.get('gradientFill') }"
-                  (ionChange)="handleSliderChange($event, mapLayer)"
-                ></ion-range>
-              } @else {
-                <div
-                  class="colour-scale"
-                  [ngStyle]="{ 'background-image': mapLayer.get('gradientFill') }"
-                ></div>
-              }
-              <div class="scale-labels">
-                <div class="scale-label max">
-                  {{ mapLayer.get("scaleMax") }}
-                </div>
-                <div class="scale-label min">
-                  {{ mapLayer.get("scaleMin") }}
+      @for (layerGroup of mapLayerGroupsSorted; track $index) {
+        @for (mapLayer of layerGroup.layers; track $index) {
+          @if (mapLayer.getVisible() && mapLayer.get("gradientFill")) {
+            <div class="legend-item">
+              <div class="title">
+                {{ mapLayer.get("scaleTitle") }}
+              </div>
+              <div class="scale-container">
+                @if (mapLayer.get("scaleSlider")) {
+                  <ion-range
+                    [dualKnobs]="true"
+                    [value]="{ lower: 0, upper: 100 }"
+                    [ngStyle]="{ '--bar-background': mapLayer.get('gradientFill') }"
+                    (ionChange)="handleSliderChange($event, mapLayer)"
+                  ></ion-range>
+                } @else {
+                  <div
+                    class="colour-scale"
+                    [ngStyle]="{ 'background-image': mapLayer.get('gradientFill') }"
+                  ></div>
+                }
+                <div class="scale-labels">
+                  <div class="scale-label max">
+                    {{ mapLayer.get("scaleMax") }}
+                  </div>
+                  <div class="scale-label min">
+                    {{ mapLayer.get("scaleMin") }}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          }
         }
       }
     </div>
   </div>
   <div class="map-controls">
-    @if (params.controlsStyle === "dropdown") {
-      @if (mapLayers.length > 0) {
-        <ion-select
-          label="Visible Layers:"
-          interface="modal"
-          fill="outline"
-          placeholder="Select map layers to view"
-          [multiple]="true"
-          (ionChange)="handleDropdownChange($event)"
-          [value]="visibleLayerNames"
-        >
-          @for (mapLayer of mapLayersReversed; track $index) {
-            <ion-select-option [value]="mapLayer.get('name')">
-              <ion-item>
-                <ion-label>
-                  {{
-                    mapLayer.get("name") +
-                      (mapLayer.get("description") ? " – " + mapLayer.get("description") : "")
-                  }}
-                </ion-label>
-              </ion-item>
-            </ion-select-option>
-          }
-        </ion-select>
-      }
-    } @else if (params.controlsStyle === "list") {
-      <ion-list>
-        @for (mapLayer of mapLayersReversed; track $index) {
-          <ion-item>
-            <ion-label>
-              <ion-toggle
-                [checked]="mapLayer.getVisible()"
-                (ionChange)="handleToggleChange($event, mapLayer)"
-              >
-                {{ mapLayer.get("name") }}
-              </ion-toggle>
-              @if (mapLayer.get("description")) {
-                <p>
-                  {{ mapLayer.get("description") }}
-                </p>
+    @for (layerGroup of mapLayerGroupsSorted; track $index) {
+      @if (!layerGroup.controls_style || layerGroup.controls_style === "dropdown") {
+        @if (layerGroup.layers.length > 0) {
+          <div class="map-control-container">
+            <p>{{ (layerGroup.name || "Visible layers") + ":" }}</p>
+            <ion-select
+              interface="modal"
+              fill="outline"
+              placeholder="Select map layers to view"
+              [multiple]="!layerGroup.single_selection"
+              (ionChange)="handleDropdownChange($event, layerGroup.id)"
+              [value]="getVisibleLayerNames(layerGroup.id)"
+            >
+              @for (mapLayer of layerGroup.layers; track $index) {
+                <ion-select-option [value]="mapLayer.get('name')">
+                  <ion-item>
+                    <ion-label>
+                      {{
+                        mapLayer.get("name") +
+                          (mapLayer.get("description") ? " – " + mapLayer.get("description") : "")
+                      }}
+                    </ion-label>
+                  </ion-item>
+                </ion-select-option>
               }
-            </ion-label>
-          </ion-item>
+            </ion-select>
+          </div>
         }
-      </ion-list>
+      } @else if (params.controlsStyle === "list") {
+        <ion-list>
+          @for (mapLayer of layerGroup.layers; track $index) {
+            <ion-item>
+              <ion-label>
+                <ion-toggle
+                  [checked]="mapLayer.getVisible()"
+                  (ionChange)="handleToggleChange($event, mapLayer)"
+                >
+                  {{ mapLayer.get("name") }}
+                </ion-toggle>
+                @if (mapLayer.get("description")) {
+                  <p>
+                    {{ mapLayer.get("description") }}
+                  </p>
+                }
+              </ion-label>
+            </ion-item>
+          }
+        </ion-list>
+      }
     }
   </div>
 </div>
diff --git a/src/app/shared/components/template/components/map/map.component.scss b/src/app/shared/components/template/components/map/map.component.scss
@@ -64,7 +64,6 @@ $map-height: 70vh;
 
     ion-range {
       width: 100%;
-      // position: absolute;
       bottom: 0px;
       --bar-background: none;
       --bar-background-active: none;
@@ -77,7 +76,14 @@ $map-height: 70vh;
 }
 
 .map-controls {
-  margin-top: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  .map-control-container {
+    flex: 1;
+    min-width: 0;
+  }
 
   .layer-control {
     display: flex;