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

package/src/components/Warnings.vue

@@ -1,18 +1,26 @@
 <template>
-  <div id="fmi-warnings-view" :class="theme">
+  <div
+    id="fmi-warnings-view"
+    :class="theme"
+  >
     <div
       v-if="input.length > 0"
-      :class="['row', 'symbol-list-main-row', 'show-text-row']">
+      :class="['row', 'symbol-list-main-row', 'show-text-row']"
+    >
       <button
         tabindex="0"
         type="button"
         class="bold-text show-text d-none focus-ring"
         :class="{ 'd-sm-block': hiddenWarnings }"
-        @click="showAll">
+        @click="showAll"
+      >
         {{ showWarningsText }}
       </button>
     </div>
-    <div v-if="input.length > 0" class="row symbol-list-main-row">
+    <div
+      v-if="input.length > 0"
+      class="row symbol-list-main-row"
+    >
       <hr class="symbol-block-separator" />
     </div>
     <div id="fmi-warnings-list">
@@ -23,21 +31,28 @@
         :hideable="warnings.length > 1"
         :theme="theme"
         :language="language"
-        @warningToggled="onWarningToggled" />
+        @warning-toggled="onWarningToggled"
+      />
     </div>
     <div class="row symbol-list-main-row">
       <hr
         class="symbol-block-separator legend-separator"
-        :class="noWarnings ? 'no-warnings' : ''" />
+        :class="noWarnings ? 'no-warnings' : ''"
+      />
     </div>
     <div class="row symbol-list-main-row">
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="gray several symbol-list-image-column symbol-list-image warning-image"></div>
+            class="gray several symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-several-warnings-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-several-warnings-text"
+            class="item-text symbol-list-text"
+          >
             {{ severalWarningsText }}
           </div>
         </div>
@@ -47,10 +62,15 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-1 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-1 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-1-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-1-text"
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel1Text }}
           </div>
         </div>
@@ -60,10 +80,15 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-2 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-2 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-2-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-2-text"
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel2Text }}
           </div>
         </div>
@@ -73,10 +98,15 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-3 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-3 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-3-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-3-text"
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel3Text }}
           </div>
         </div>
@@ -86,10 +116,15 @@
       <div class="symbol-list-table">
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
-            class="level-4 symbol-list-image-column symbol-list-image warning-image"></div>
+            class="level-4 symbol-list-image-column symbol-list-image warning-image"
+            aria-labelledby="symbol-list-warning-level-4-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
-          <div class="item-text symbol-list-text">
+          <div
+            id="symbol-list-warning-level-4-text"
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel4Text }}
           </div>
           <hr class="bottom-separator" />
@@ -197,6 +232,7 @@ div.show-text-row {
 }
 
 div#fmi-warnings-view > div.row > button.show-text {
+  height: 30px;
   line-height: 30px;
   float: right;
   cursor: pointer;
@@ -334,6 +370,8 @@ div#fmi-warnings-view {
 div.symbol-list-text {
   display: table-cell;
   height: $symbol-list-line-height;
+  word-break: break-word;
+  hyphens: auto;
 }
 
 hr {

package/src/locales/en.json

@@ -164,9 +164,24 @@
   "moveMap": "Use the arrow keys to move the map",
   "mapAriaLabel": "Magnifiable map",
   "toContent": "Go to text-formatted warnings",
-  "warningsInAreaStart": "Warnings in",
-  "warningsInAreaEnd": "areas.",
-  "toNextContent": "Go to next paragraph.",
+  "warningsInAreasStart": "Warnings",
+  "fromDirection": "from",
+  "in1Areas": "in one area",
+  "in2Areas": "in two areas",
+  "in3Areas": "in three areas",
+  "in4Areas": "in four areas",
+  "in5Areas": "in five areas",
+  "in6Areas": "in six areas",
+  "in7Areas": "in seven areas",
+  "in8Areas": "in eight areas",
+  "in9Areas": "in nine areas",
+  "in10Areas": "in ten areas",
+  "in11Areas": "in eleven areas",
+  "in12Areas": "in twelve areas",
+  "in13Areas": "in thirteen areas",
+  "in14Areas": "in fourteen areas",
+  "in15Areas": "in fifteen areas",
+  "toNextContent": "Go to next section.",
   "infoButtonAriaLabelShowRegion": "Show current warnings for",
   "infoButtonAriaLabelCloseRegion": "Close current warnings for",
   "infoButtonAriaLabelValidWarnings": ".",
@@ -176,5 +191,7 @@
   "warningsInEffect": "warnings in effect in",
   "landAreas": "land areas and",
   "seaAreas": "sea areas",
-  "grayScale": "Gray scale"
+  "grayScale": "Gray scale",
+  "toggleOn": "On",
+  "toggleOff": "Off"
 }

package/src/locales/fi.json

@@ -87,7 +87,7 @@
   "coldWeather": "Pakkasvaroitus",
   "floodLevel": "Tulvavaroitus",
   "forestFireWeather": "Maastopalo­varoitus",
-  "grassFireWeather": "Ruohikkopalovaara",
+  "grassFireWeather": "Ruohikko­palovaara",
   "hotWeather": "Hellevaroitus",
   "pedestrianSafety": "Jalankulkusää",
   "rain": "Sadevaroitus",
@@ -95,7 +95,7 @@
   "seaThunderStorm": "Ukkospuuskia merialueilla",
   "seaWaterHeightHighWater": "Varoitus korkeasta merivedestä",
   "seaWaterHeightShallowWater": "Varoitus matalasta merivedestä",
-  "seaWaveHeight": "Aallokkovaroitus",
+  "seaWaveHeight": "Aallokko­varoitus",
   "seaWind": "Tuulivaroitus merelle",
   "thunderStorm": "Raju ukonilma",
   "trafficWeather": "Liikennesää",
@@ -164,9 +164,24 @@
   "moveMap": "Siirrä karttaa nuolinäppäimillä",
   "mapAriaLabel": "Zoomattava kartta",
   "toContent": "Siirry tekstimuotoisiin varoituksiin",
-  "warningsInAreaStart": "Varoituksia",
-  "warningsInAreaEnd": "alueella.",
-  "toNextContent": "Siirry seuraavaan kappaleeseen.",
+  "warningsInAreasStart": "Varoituksia",
+  "fromDirection": "suunnasta",
+  "in1Areas": "yhdellä alueella",
+  "in2Areas": "kahdella alueella",
+  "in3Areas": "kolmella alueella",
+  "in4Areas": "neljällä alueella",
+  "in5Areas": "viidellä alueella",
+  "in6Areas": "kuudella alueella",
+  "in7Areas": "seitsemällä alueella",
+  "in8Areas": "kahdeksalla alueella",
+  "in9Areas": "yhdeksällä alueella",
+  "in10Areas": "kymmenellä alueella",
+  "in11Areas": "yhdellätoista alueella",
+  "in12Areas": "kahdellatoista alueella",
+  "in13Areas": "kolmellatoista alueella",
+  "in14Areas": "neljällätoista alueella",
+  "in15Areas": "viidellätoista alueella",
+  "toNextContent": "Siirry seuraavaan osioon.",
   "infoButtonAriaLabelShowRegion": "Näytä alueen",
   "infoButtonAriaLabelCloseRegion": "Sulje alueen",
   "infoButtonAriaLabelValidWarnings": "voimassaolevat varoitukset",
@@ -176,5 +191,7 @@
   "warningsInEffect": "Varoituksia voimassa",
   "landAreas": "maa-alueella ja",
   "seaAreas": "merialueella",
-  "grayScale": "Harmaasävyt"
+  "grayScale": "Harmaasävyt",
+  "toggleOn": "On",
+  "toggleOff": "Off"
 }

package/src/locales/sv.json

@@ -164,8 +164,23 @@
   "moveMap": "Använd piltangenterna för att flytta kartan",
   "mapAriaLabel": "Förstorande karta",
   "toContent": "Gå till varningar i text format",
-  "warningsInAreaStart": "Varningar i",
-  "warningsInAreaEnd": "områden.",
+  "warningsInAreasStart": "Varningar",
+  "fromDirection": "från",
+  "in1Areas": "i ett område",
+  "in2Areas": "i två områden",
+  "in3Areas": "i tre områden",
+  "in4Areas": "i fyra områden",
+  "in5Areas": "i fem områden",
+  "in6Areas": "i sex områden",
+  "in7Areas": "i sju områden",
+  "in8Areas": "i åtta områden",
+  "in9Areas": "i nio områden",
+  "in10Areas": "i tio områden",
+  "in11Areas": "i elva områden",
+  "in12Areas": "i tolv områden",
+  "in13Areas": "i tretton områden",
+  "in14Areas": "i fjorton områden",
+  "in15Areas": "i femton områden",
   "toNextContent": "Gå till nästa stycke.",
   "infoButtonAriaLabelShowRegion": "Visa giltiga varningar för",
   "infoButtonAriaLabelCloseRegion": "Stäng giltiga varningar för",
@@ -176,5 +191,7 @@
   "warningsInEffect": "varningar i kraft i",
   "landAreas": "landområden och",
   "seaAreas": "havsområden",
-  "grayScale": "Gråskala"
+  "grayScale": "Gråskala",
+  "toggleOn": "On",
+  "toggleOff": "Off"
 }

package/src/main.js

@@ -5,6 +5,7 @@ import {
   h,
 } from 'vue'
 import { createWebComponent } from 'vue-web-component-wrapper'
+
 import app from './App.vue'
 
 createWebComponent({

package/src/mixins/alertClientCore.js

@@ -0,0 +1,210 @@
+/**
+ * Core mixin for AlertClient wrapper components.
+ * Contains shared logic for both web component (App.vue) and Vue component (AlertClientVue.vue).
+ *
+ * This mixin provides:
+ * - Data state management (loading, warningsData, themeClass, etc.)
+ * - Computed properties for API queries
+ * - Lifecycle hooks (created, mounted, serverPrefetch)
+ * - Methods for fetching warnings and handling events
+ *
+ * Components using this mixin must provide:
+ * - Props with appropriate types (string-only for web components, mixed for Vue)
+ * - Normalized computed properties that convert props to correct types
+ */
+import fetch from 'cross-fetch'
+
+// Helper to normalize string|boolean to boolean
+export const toBool = (val, defaultVal = true) => {
+  if (typeof val === 'boolean') return val
+  if (typeof val === 'string') return val.toLowerCase() !== 'false'
+  return defaultVal
+}
+
+// Helper to normalize string|number to number
+export const toNum = (val, defaultVal = 0) => {
+  if (typeof val === 'number') return val
+  if (typeof val === 'string') return Number(val)
+  return defaultVal
+}
+
+export default {
+  data() {
+    return {
+      loading: 1,
+      updatedAt: null,
+      refreshedAt: null,
+      themeClass: `${this.theme}-theme`,
+      warningsData: null,
+      visible: true,
+    }
+  },
+  computed: {
+    // API query type names
+    weatherUpdatedType() {
+      return 'weather_update_time'
+    },
+    floodUpdatedType() {
+      return 'flood_update_time'
+    },
+    weatherWarningsType() {
+      return 'weather_finland_active_all'
+    },
+    floodWarningsType() {
+      return 'flood_finland_active_all'
+    },
+
+    // Query builders
+    weatherUpdatedQuery() {
+      return this.weatherUpdated || `${this.query}${this.weatherUpdatedType}`
+    },
+    floodUpdatedQuery() {
+      return this.floodUpdated || `${this.query}${this.floodUpdatedType}`
+    },
+    weatherWarningsQuery() {
+      return this.weatherWarnings || `${this.query}${this.weatherWarningsType}`
+    },
+    floodWarningsQuery() {
+      return (
+        this.floodWarnings ||
+        `${this.query}${this.floodWarningsType}${this.floodFilter}`
+      )
+    },
+    query() {
+      return '?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=1000&outputFormat=application%2Fjson&typeName='
+    },
+    floodSupportedSeverities() {
+      return ['moderate', 'severe', 'extreme']
+    },
+    floodFilter() {
+      return `${this.floodSupportedSeverities.reduce(
+        (filter, severity, index) =>
+          `${filter + (index === 0 ? '' : ',')}%27${severity.toUpperCase()}%27`,
+        '&cql_filter=severity%20IN%20('
+      )})%20AND%20language=%27${this.capLanguage()}%27`
+    },
+    capLanguage() {
+      return () =>
+        ({
+          fi: 'fi-FI',
+          sv: 'sv-SV',
+          en: 'en-US',
+        })[this.language]
+    },
+
+    // Current time calculation
+    currentTime() {
+      if (this.refreshedAt) {
+        return this.refreshedAt
+      }
+      if (this.currentDate) {
+        const date =
+          this.currentDate instanceof Date
+            ? this.currentDate
+            : new Date(this.currentDate)
+        return date.getTime()
+      }
+      return Date.now()
+    },
+  },
+  created() {
+    if (this.warnings) {
+      this.warningsData =
+        typeof this.warnings === 'string'
+          ? JSON.parse(this.warnings)
+          : this.warnings
+    }
+  },
+  mounted() {
+    const fontScaleNum = toNum(this.fontScale, 1)
+    if (fontScaleNum !== 1) {
+      let originalFontSize
+      if (
+        typeof window !== 'undefined' &&
+        typeof document !== 'undefined' &&
+        document.documentElement &&
+        window.getComputedStyle
+      ) {
+        const htmlElement = document.documentElement
+        const computedStyle = window.getComputedStyle(htmlElement)
+        originalFontSize = parseFloat(computedStyle.fontSize)
+      }
+      if (originalFontSize == null || Number.isNaN(originalFontSize)) {
+        originalFontSize = 16 // Fallback
+      }
+      const scaledFontSize = fontScaleNum * originalFontSize
+      const newFontSize = Math.round(scaledFontSize * 100) / 100
+      document.documentElement.style.fontSize = `${newFontSize}px`
+    }
+  },
+  serverPrefetch() {
+    if (!this.warnings) {
+      return this.fetchWarnings()
+    }
+  },
+  methods: {
+    onLoaded(loaded) {
+      if (loaded !== 0) {
+        this.loading = loaded === -1 ? -1 : 0
+      }
+    },
+    onThemeChanged(newTheme) {
+      this.themeClass = `${
+        newTheme != null && newTheme.length > 0 ? newTheme : this.theme
+      }-theme`
+    },
+    fetchWarnings() {
+      if (this.warnings) {
+        return
+      }
+      this.loading = 1
+      // debugModeNormalized is provided by the component using this mixin
+      if (this.debugModeNormalized) {
+        console.log(`Updating warnings at ${new Date()}`)
+      }
+      const queries = new Map()
+        .set(
+          `${this.baseUrl}${this.weatherUpdatedQuery}`,
+          this.weatherUpdatedType
+        )
+        .set(`${this.baseUrl}${this.floodUpdatedQuery}`, this.floodUpdatedType)
+        .set(
+          `${this.baseUrl}${this.weatherWarningsQuery}`,
+          this.weatherWarningsType
+        )
+        .set(
+          `${this.baseUrl}${this.floodWarningsQuery}`,
+          this.floodWarningsType
+        )
+      const responseData = {}
+      return Promise.allSettled(
+        [...queries.keys()].map(async (query) =>
+          fetch(query).then((response) =>
+            response
+              .json()
+              .then((json) => {
+                const currentTime = Date.now()
+                if (this.updatedAt != null) {
+                  this.refreshedAt = currentTime
+                }
+                this.updatedAt = currentTime
+                responseData[queries.get(query)] = json
+              })
+              .catch((error) => {
+                this.loading = -1
+                console.log(error)
+              })
+          )
+        )
+      ).then(() => {
+        this.warningsData = responseData
+      })
+    },
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false
+    },
+  },
+}