@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-alpha.0

package/src/components/Legend.vue

@@ -1,60 +1,56 @@
 <template>
-  <div class="sticky-top" :class="theme">
+  <div
+    class="sticky-top"
+    :class="theme"
+  >
     <GrayScaleToggle
       class="narrow-screen"
       :language="language"
       :gray-scale-selector="grayScaleSelector"
       :theme="theme"
-      @themeChanged="onThemeChanged" />
+      @theme-changed="onThemeChanged"
+    />
     <div class="row symbol-list-header-row">
       <nav class="symbol-list-header bold-text">
         {{ warningSymbolsText }}
-        <br v-if="input.length > 0" class="symbol-list-header-line-break" />
+        <br
+          v-if="input.length > 0"
+          class="symbol-list-header-line-break"
+        />
       </nav>
     </div>
-    <b-card no-body class="mb-1 d-md-none legends-panel">
-      <b-card-header header-tag="header" class="legends-heading p-1">
-        <div class="legends-header">
-          <span class="legends-text">
-            {{ toggleLegendsText }}
-          </span>
-        </div>
-        <b-button
-          block
-          :class="['legends-toggle', visible ? '' : 'collapsed']"
-          :aria-label="toggleLegendsText"
-          @click="onLegendToggle" />
-      </b-card-header>
-      <b-collapse
-        id="legends-collapse"
-        v-model="visible"
-        class="legends-collapse-item focus-ring"
-        tabindex="0">
-        <b-card-body body-class="p-0">
-          <div class="legends-container">
-            <Warnings
-              :input="input"
-              :visible-warnings="visibleWarnings"
-              :theme="theme"
-              :language="language" />
-          </div>
-        </b-card-body>
-      </b-collapse>
-    </b-card>
-    <div ref="warningsContainer" class="d-md-block d-none">
+    <CollapsiblePanel
+      :visible="visible"
+      :title="toggleLegendsText"
+      :theme="theme"
+      @toggle="onLegendToggle"
+    >
       <Warnings
         :input="input"
         :visible-warnings="visibleWarnings"
         :theme="theme"
         :language="language"
-        @warningsToggled="onWarningsToggled"
-        @showAllWarnings="onShowAllWarnings" />
+      />
+    </CollapsiblePanel>
+    <div
+      ref="warningsContainer"
+      class="desktop-only"
+    >
+      <Warnings
+        :input="input"
+        :visible-warnings="visibleWarnings"
+        :theme="theme"
+        :language="language"
+        @warnings-toggled="onWarningsToggled"
+        @show-all-warnings="onShowAllWarnings"
+      />
     </div>
     <GrayScaleToggle
       :language="language"
       :gray-scale-selector="grayScaleSelector"
       :theme="theme"
-      @themeChanged="onThemeChanged" />
+      @theme-changed="onThemeChanged"
+    />
   </div>
 </template>
 
@@ -62,11 +58,15 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import i18n from '../mixins/i18n'
+import CollapsiblePanel from './CollapsiblePanel.vue'
+import GrayScaleToggle from './GrayScaleToggle.vue'
 import Warnings from './Warnings.vue'
 
 export default {
   name: 'Legend',
   components: {
+    CollapsiblePanel,
+    GrayScaleToggle,
     Warnings,
   },
   mixins: [i18n],
@@ -167,218 +167,6 @@ div.symbol-list-header-row {
   }
 }
 
-.legends-panel {
-  margin-left: 0;
-  margin-right: 0;
-  border-radius: 0;
-}
-
-.light-theme .legends-panel {
-  border: 0.5px solid $light-legend-background-color;
-}
-
-.dark-theme .legends-panel {
-  border: 0.5px solid $dark-legend-background-color;
-}
-
-.light-gray-theme .legends-panel {
-  border: 0.5px solid $light-gray-legend-background-color;
-}
-
-.dark-gray-theme .legends-panel {
-  border: 0.5px solid $dark-gray-legend-background-color;
-}
-
-.legends-heading {
-  height: $current-warning-height;
-  padding: 0 0 0 15px !important;
-  line-height: $current-warning-height;
-  border: none;
-  border-bottom: 0.5px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0 !important;
-}
-
-.light-theme .legends-heading {
-  background-color: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-heading {
-  background-color: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-heading {
-  background-color: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-heading {
-  background-color: $dark-gray-legend-heading-background-color;
-}
-
-.legends-header {
-  position: absolute;
-  left: 0;
-  right: 38px;
-  border-radius: 0;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  height: $current-warning-height;
-}
-
-.light-theme .legends-header {
-  background: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-header {
-  background: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-header {
-  background: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-header {
-  background: $dark-gray-legend-heading-background-color;
-}
-
-.legends-text {
-  display: block;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-left: 15px;
-}
-
-.light-theme .legends-text {
-  background-color: $light-legend-heading-background-color;
-}
-
-.dark-theme .legends-text {
-  background-color: $dark-legend-heading-background-color;
-}
-
-.light-gray-theme .legends-text {
-  background-color: $light-gray-legend-heading-background-color;
-}
-
-.dark-gray-theme .legends-text {
-  background-color: $dark-gray-legend-heading-background-color;
-}
-
-button.legends-toggle {
-  position: relative;
-  height: $current-warning-height;
-  width: $current-warning-height;
-  min-width: $current-warning-height;
-  background-image: url($ui-image-path + 'arrow-up.svg');
-  background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 0 !important;
-  border-style: none;
-  float: right;
-  padding: $image-padding;
-  margin-left: 5px;
-
-  &.collapsed {
-    background-image: url($ui-image-path + 'arrow-down.svg');
-    border-radius: 0 3px 3px 0;
-  }
-}
-
-.light-theme .legends-toggle {
-  background-color: $light-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $light-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $light-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $light-current-warning-toggle-active-color;
-  }
-}
-
-.dark-theme .legends-toggle {
-  background-color: $dark-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $dark-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $dark-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $dark-current-warning-toggle-active-color;
-  }
-}
-
-.light-gray-theme .legends-toggle {
-  background-color: $light-gray-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $light-gray-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $light-gray-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $light-gray-current-warning-toggle-active-color;
-  }
-}
-
-.dark-gray-theme .legends-toggle {
-  background-color: $dark-gray-legend-toggle-background-color;
-
-  &:hover {
-    background-color: $dark-gray-legend-toggle-background-color;
-  }
-
-  &:active {
-    background-color: $dark-gray-legend-toggle-background-color;
-  }
-
-  &:not(:disabled):not(.disabled):active {
-    background-color: $dark-gray-current-warning-toggle-active-color;
-  }
-}
-
-.legends-container {
-  padding: 15px;
-  border-radius: 0;
-}
-
-.light-theme .legends-container {
-  background-color: $light-legend-container-background-color;
-  border-top: 0.5px solid $light-legend-background-color;
-}
-
-.dark-theme .legends-container {
-  background-color: $dark-legend-container-background-color;
-  border-top: 0.5px solid $dark-legend-background-color;
-}
-
-.light-gray-theme .legends-container {
-  background-color: $light-gray-legend-container-background-color;
-  border-top: 0.5px solid $light-gray-legend-background-color;
-}
-
-.dark-gray-theme .legends-container {
-  background-color: $dark-gray-legend-container-background-color;
-  border-top: 0.5px solid $dark-gray-legend-background-color;
-}
-
-div#legends-collapse div.card-body {
-  padding: 0;
-}
-
 nav.symbol-list-header {
   padding-left: 0;
   text-align: left;

package/src/components/MapLarge.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="map-large focus-ring" :class="theme" tabindex="0">
     <div v-if="spinnerEnabled && loading" class="spinner-container text-center">
-      <BSpinner />
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"></span>
+      </div>
     </div>
     <div ref="dayMapLarge" class="day-map-large">
       <svg
@@ -35,8 +37,8 @@
           <path
             v-for="path in seaBorders"
             :id="path.key"
-            class="border-path"
             :key="path.key"
+            class="border-path"
             :stroke="strokeColor"
             :stroke-width="path.strokeWidth"
             :stroke-opacity="strokeOpacity"
@@ -134,17 +136,17 @@
             :d="path.d"
             fill-opacity="0"
             style="cursor: pointer; pointer-events: none" />
-        <path
-          v-for="path in landBorders"
-          :id="path.key"
-          class="border-path"
-          :key="path.key"
-          :stroke="strokeColor"
-          :stroke-width="2*path.strokeWidth"
-          :stroke-opacity="strokeOpacity"
-          :d="path.d"
-          fill-opacity="0"
-          style="cursor: pointer; pointer-events: none" />
+          <path
+            v-for="path in landBorders"
+            :id="path.key"
+            :key="path.key"
+            class="border-path"
+            :stroke="strokeColor"
+            :stroke-width="2 * path.strokeWidth"
+            :stroke-opacity="strokeOpacity"
+            :d="path.d"
+            fill-opacity="0"
+            style="cursor: pointer; pointer-events: none" />
         </g>
         <g v-if="!loading">
           <path
@@ -257,17 +259,17 @@
 
 <script>
 import { onMounted, onUnmounted, ref } from 'vue'
+import Panzoom from '@panzoom/panzoom'
 
 import config from '../mixins/config'
 import i18n from '../mixins/i18n'
-import Panzoom from '../mixins/panzoom'
 import utils from '../mixins/utils'
 import PopupRow from './PopupRow.vue'
 
 export default {
   name: 'MapLarge',
   components: { PopupRow },
-  mixins: [config, i18n, Panzoom, utils],
+  mixins: [config, i18n, utils],
   props: {
     index: {
       type: Number,
@@ -386,23 +388,33 @@ export default {
       const maxWarningIcons = this.maxWarningIcons
       this.regionIds.forEach((regionId) => {
         const region = this.regionData(regionId)
-        const geometry = this.geometries[this.geometryId][regionId]
+        const geometry = this.geometries?.[this.geometryId]?.[regionId]
         if (
+          geometry &&
           region != null &&
           geometry.children.length === 0 &&
           (!this.mergedRegions.has(regionId) ||
-          (geometry.weight > this.maxMergedWeight && region?.warnings?.filter((warning) =>
-          this.visibleWarnings.includes(warning.type)).length === 1) &&
-          !(geometry?.parent?.length && this.regionData(geometry.parent)?.warnings?.some((warning) =>
-          this.visibleWarnings.includes(warning.type))))
+            (geometry.weight > this.maxMergedWeight &&
+              region?.warnings?.filter((warning) =>
+                this.visibleWarnings.includes(warning.type)
+              ).length === 1 &&
+              !(
+                geometry?.parent?.length &&
+                this.regionData(geometry.parent)?.warnings?.some((warning) =>
+                  this.visibleWarnings.includes(warning.type)
+                )
+              )))
         ) {
           const iconSizes = []
           const aspectRatios = []
           const keys = []
           const geoms = []
           region.warnings
-            .filter((warning) => this.visibleWarnings.includes(warning.type) &&
-              warning.coverage === 100 )
+            .filter(
+              (warning) =>
+                this.visibleWarnings.includes(warning.type) &&
+                warning.coverage === 100
+            )
             .forEach((regionWarning, index, regionWarnings) => {
               const identifier = regionWarning.identifiers.find(
                 (id) => warnings[id] && warnings[id].covRegions.size === 0
@@ -920,12 +932,13 @@ export default {
         if (currentNode.parentNode === document) {
           return true
         }
-        currentNode = currentNode.parentNode instanceof ShadowRoot
-          ? currentNode.parentNode.host
-          : currentNode.parentNode
+        currentNode =
+          currentNode.parentNode instanceof ShadowRoot
+            ? currentNode.parentNode.host
+            : currentNode.parentNode
       }
       return false
-    }
+    },
   },
 }
 </script>
@@ -975,22 +988,8 @@ button.fmi-warnings-map-tool {
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-}
-
-.light-theme button.fmi-warnings-map-tool {
-  border-color: $light-button-border-color;
-}
-
-.dark-theme button.fmi-warnings-map-tool {
-  border-color: $dark-button-border-color;
-}
-
-.light-gray-theme button.fmi-warnings-map-tool {
-  border-color: $light-gray-button-border-color;
-}
-
-.dark-gray-theme button.fmi-warnings-map-tool {
-  border-color: $dark-gray-button-border-color;
+  border: none;
+  padding: 0;
 }
 
 div.map-large div.day-map-large button {

package/src/components/MapSmall.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :id="`day-map-small-${index}`" class="map-small">
+  <div
+    :id="`day-map-small-${index}`"
+    class="map-small"
+  >
     <svg
       class="finland-small"
       xmlns="http://www.w3.org/2000/svg"
@@ -9,8 +12,12 @@
       height="120"
       viewBox="0 0 75 120"
       stroke-linecap="round"
-      stroke-linejoin="round">
-      <g v-if="pathsNeeded" :id="`finland-small-${index}`">
+      stroke-linejoin="round"
+    >
+      <g
+        v-if="pathsNeeded"
+        :id="`finland-small-${index}`"
+      >
         <path
           v-for="path in bluePaths"
           :key="path.key"
@@ -18,15 +25,17 @@
           :stroke-width="path.strokeWidth"
           :fill="path.fill"
           :d="path.d"
-          :opacity="path.opacity" />
+          :opacity="path.opacity"
+        />
         <path
           v-for="path in seaBorders"
-          class="border-path"
           :key="path.key"
+          class="border-path"
           :stroke="strokeColor"
           :stroke-width="path.strokeWidth"
           :d="path.d"
-          fill-opacity="0" />
+          fill-opacity="0"
+        />
         <path
           v-for="path in greenPaths"
           :key="path.key"
@@ -34,7 +43,8 @@
           :stroke-width="path.strokeWidth"
           :fill="path.fill"
           :d="path.d"
-          :opacity="path.opacity" />
+          :opacity="path.opacity"
+        />
         <path
           v-for="path in yellowPaths"
           :key="path.key"
@@ -42,7 +52,8 @@
           :stroke-width="path.strokeWidth"
           :fill="path.fill"
           :d="path.d"
-          :opacity="path.opacity" />
+          :opacity="path.opacity"
+        />
         <path
           v-for="coverage in yellowCoverages"
           :key="coverage.key"
@@ -51,7 +62,8 @@
           :fill="coverage.fill"
           :d="coverage.d"
           :fill-opacity="coverage.fillOpacity"
-          pointer-events="fill" />
+          pointer-events="fill"
+        />
         <path
           v-for="path in orangePaths"
           :key="path.key"
@@ -59,7 +71,8 @@
           :stroke-width="path.strokeWidth"
           :fill="path.fill"
           :d="path.d"
-          :opacity="path.opacity" />
+          :opacity="path.opacity"
+        />
         <path
           v-for="coverage in orangeCoverages"
           :key="coverage.key"
@@ -68,7 +81,8 @@
           :fill="coverage.fill"
           :d="coverage.d"
           :fill-opacity="coverage.fillOpacity"
-          pointer-events="fill" />
+          pointer-events="fill"
+        />
         <path
           v-for="path in redPaths"
           :key="path.key"
@@ -76,7 +90,8 @@
           :stroke-width="path.strokeWidth"
           :fill="path.fill"
           :d="path.d"
-          :opacity="path.opacity" />
+          :opacity="path.opacity"
+        />
         <path
           v-for="coverage in redCoverages"
           :key="coverage.key"
@@ -85,22 +100,25 @@
           :fill="coverage.fill"
           :d="coverage.d"
           :fill-opacity="coverage.fillOpacity"
-          pointer-events="fill" />
+          pointer-events="fill"
+        />
         <path
           v-for="path in overlayPaths"
           :key="path.key"
           :stroke="strokeColor"
           :stroke-width="path.strokeWidth"
           :d="path.d"
-          fill-opacity="0" />
+          fill-opacity="0"
+        />
         <path
           v-for="path in landBorders"
-          class="border-path"
           :key="path.key"
+          class="border-path"
           :stroke="strokeColor"
-          :stroke-width="1.5*path.strokeWidth"
+          :stroke-width="1.5 * path.strokeWidth"
           :d="path.d"
-          fill-opacity="0" />
+          fill-opacity="0"
+        />
         <path
           v-for="coverage in overlayCoverages"
           :key="coverage.key"
@@ -109,7 +127,8 @@
           :fill="coverage.fill"
           :d="coverage.d"
           :fill-opacity="coverage.fillOpacity"
-          pointer-events="fill" />
+          pointer-events="fill"
+        />
       </g>
     </svg>
   </div>
@@ -177,7 +196,7 @@ export default {
       return 'Small'
     },
     strokeColor() {
-     return 'DarkSlateGray'
+      return 'DarkSlateGray'
     },
     strokeWidth() {
       return 0.6
@@ -199,11 +218,10 @@ export default {
     paths(options) {
       return this.pathsNeeded
         ? this.regionIds.reduce((regions, regionId) => {
+            const region = this.geometries?.[this.geometryId]?.[regionId]
             if (
-              this.geometries[this.geometryId][regionId].pathSmall &&
-              (this.geometries[this.geometryId][regionId].type ===
-                options.type) ===
-                (this.geometries[this.geometryId][regionId].subType == null)
+              region?.pathSmall &&
+              (region.type === options.type) === (region.subType == null)
             ) {
               const visualization = this.regionVisualization(regionId)
               if (
@@ -213,14 +231,12 @@ export default {
                 regions.push({
                   key: `${regionId}${this.size}${this.index}Path`,
                   fill: this.loading
-                    ? this.colors[this.theme].missing
+                    ? this.colors?.[this.theme]?.missing || '#cccccc'
                     : visualization.color,
                   d: visualization.geom.pathSmall,
                   opacity: visualization.visible ? '1' : '0',
                   strokeWidth:
-                    this.geometries[this.geometryId][regionId].type === 'sea' &&
-                    this.geometries[this.geometryId][regionId].subType !==
-                      'lake'
+                    region.type === 'sea' && region.subType !== 'lake'
                       ? this.strokeWidth
                       : 0,
                 })
@@ -231,7 +247,7 @@ export default {
         : []
     },
     isFullMode() {
-      return true;
+      return true
     },
   },
 }

package/src/components/PopupRow.vue

@@ -9,20 +9,23 @@
         `level-${severity}`,
         typeClass,
         'warning-image',
-      ]">
+      ]"
+    >
       <span
         :class="[
           'symbol-text',
           `transform-rotate-${invertedRotation}`,
           'warning-symbol-text',
-        ]">
+        ]"
+      >
         {{ input.text }}
       </span>
     </div>
     <div
       class="popup-table-cell popup-table-text-cell"
       :class="[`text-level-${severity}`]"
-      v-html="input.interval"></div>
+      v-html="input.interval"
+    ></div>
   </div>
 </template>