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

package/src/components/Region.vue

@@ -1,11 +1,11 @@
 <template>
   <h3>
     <button
+      :id="`accordion-${code}`"
       type="button"
       :aria-expanded="open"
       :class="['accordion-trigger', 'focus-ring', open ? '' : 'collapsed']"
       :aria-controls="`accordion-section-${code}`"
-      :id="`accordion-${code}`"
       :aria-label="ariaButton"
       @click="onRegionToggle">
       <div class="region-header">
@@ -21,9 +21,7 @@
           </RegionWarning>
         </div>
       </div>
-      <div
-        block
-        :class="['current-warning-toggle', open ? '' : 'collapsed']" />
+      <div block :class="['current-warning-toggle', open ? '' : 'collapsed']" />
     </button>
   </h3>
   <div
@@ -32,17 +30,15 @@
     :aria-labelledby="`accordion-${code}`"
     :aria-expanded="open"
     class="accordion-panel"
-    :hidden="open ? null : ''"
-  >
+    :hidden="open ? null : ''">
     <div class="current-description">
       <div class="current-description-table">
         <DescriptionWarning
           v-for="warning in reducedWarnings"
-            :key="warning.identification"
-            :input="warning"
-            :theme="theme"
-            :language="language"
-        />
+          :key="warning.identification"
+          :input="warning"
+          :theme="theme"
+          :language="language" />
       </div>
     </div>
   </div>
@@ -192,6 +188,7 @@ export default {
 
 button {
   border: none;
+  cursor: pointer;
   &:focus:not(:focus-visible) {
     box-shadow: none;
   }
@@ -366,7 +363,10 @@ h3 {
   border-radius: 0;
 }
 
-.accordion > div:first-child:last-child .accordion-trigger.collapsed > .region-header {
+.accordion
+  > div:first-child:last-child
+  .accordion-trigger.collapsed
+  > .region-header {
   border-radius: 0;
 }
 
@@ -398,15 +398,30 @@ h3 {
   border-radius: 0;
 }
 
-.accordion > div:last-child > div > h3 > button > div.current-warning-toggle.collapsed {
+.accordion
+  > div:last-child
+  > div
+  > h3
+  > button
+  > div.current-warning-toggle.collapsed {
   border-radius: 0;
 }
 
-.accordion > div:first-child:last-child > div > h3 > button > div.current-warning-toggle {
+.accordion
+  > div:first-child:last-child
+  > div
+  > h3
+  > button
+  > div.current-warning-toggle {
   border-radius: 0;
 }
 
-.accordion > div:first-child:last-child > div > h3 > button > div.current-warning-toggle.collapsed {
+.accordion
+  > div:first-child:last-child
+  > div
+  > h3
+  > button
+  > div.current-warning-toggle.collapsed {
   border-radius: 0;
 }
 

package/src/components/RegionWarning.vue

@@ -18,8 +18,7 @@
         'symbol-text',
         `transform-rotate-${invertedRotation}`,
       ]"
-      >{{ input.text }}</span
-    >
+    >{{ input.text }}</span>
   </div>
 </template>
 
@@ -45,14 +44,16 @@ export default {
       return this.t(`warningLevel${this.input.severity}`)
     },
     warningTypeText() {
-      return this.t(this.input.type).toLowerCase();
+      return this.t(this.input.type).toLowerCase()
     },
     warningDetails() {
       if (this.input.text == null || this.input.direction == null) {
         return ''
       }
-      return ` (${this.input.text} m/s ${this.t("fromDirection")} ${this.input.direction + 180}°)`
-    }
+      return ` (${this.input.text} m/s ${this.t('fromDirection')} ${
+        this.input.direction + 180
+      }°)`
+    },
   },
 }
 </script>

package/src/components/Regions.vue

@@ -1,17 +1,33 @@
 <template>
-  <div id="region-warnings" class="row">
-    <div v-if="anyLandWarnings" class="region-type-container">
-      <h3 id="header-land" class="header-region">{{ landText }}</h3>
+  <div
+    id="region-warnings"
+    class="row"
+  >
+    <div
+      v-if="anyLandWarnings"
+      class="region-type-container"
+    >
+      <h3
+        id="header-land"
+        class="header-region"
+      >
+        {{ landText }}
+      </h3>
       <a
         id="fmi-warnings-region-content"
         :href="fromLandToNextContentHref"
         tabindex="0"
         class="fmi-warnings-to-next-content visually-hidden-focusable focus-ring"
         @click="fromLandToNextContentClicked"
-        >{{ fromLandToNextContentText }}</a
+      >{{ fromLandToNextContentText }}</a>
+      <div
+        id="accordion-group-land"
+        class="accordion"
       >
-      <div id="accordion-group-land" class="accordion">
-        <div v-for="region in regions.land" :key="region.key">
+        <div
+          v-for="region in regions.land"
+          :key="region.key"
+        >
           <Region
             v-if="region.warnings.length"
             type="land"
@@ -20,23 +36,37 @@
             :input="region.warnings"
             :warnings="warnings"
             :theme="theme"
-            :language="language" />
+            :language="language"
+          />
         </div>
       </div>
     </div>
 
-    <div v-if="anySeaWarnings" class="region-type-container">
-      <h3 id="header-sea" class="header-region">{{ seaText }}</h3>
+    <div
+      v-if="anySeaWarnings"
+      class="region-type-container"
+    >
+      <h3
+        id="header-sea"
+        class="header-region"
+      >
+        {{ seaText }}
+      </h3>
       <a
         :id="fromSeaToNextContentId"
         href="#fmi-warnings-end-of-regions"
         tabindex="0"
         class="fmi-warnings-to-next-content visually-hidden-focusable focus-ring"
         @click="fromSeaToNextContentClicked"
-        >{{ fromSeaToNextContentText }}</a
+      >{{ fromSeaToNextContentText }}</a>
+      <div
+        id="accordion-group-sea"
+        class="accordion"
       >
-      <div id="accordion-group-sea" class="accordion">
-        <div v-for="region in regions.sea" :key="region.key">
+        <div
+          v-for="region in regions.sea"
+          :key="region.key"
+        >
           <Region
             v-if="region.warnings.length"
             type="sea"
@@ -45,7 +75,8 @@
             :input="region.warnings"
             :warnings="warnings"
             :theme="theme"
-            :language="language" />
+            :language="language"
+          />
         </div>
       </div>
     </div>
@@ -83,14 +114,14 @@ export default {
       return this.t('regionSea')
     },
     fromLandToNextContentText() {
-      return `${this.t('warningsInAreasStart')} ${
-        this.t(`in${this.regions.land.length}Areas`)
-      }. ${this.t('toNextContent')}`
+      return `${this.t('warningsInAreasStart')} ${this.t(
+        `in${this.regions.land.length}Areas`
+      )}. ${this.t('toNextContent')}`
     },
     fromSeaToNextContentText() {
-      return `${this.t('warningsInAreasStart')} ${
-        this.t(`in${this.regions.sea.length}Areas`)
-      }. ${this.t('toNextContent')}`
+      return `${this.t('warningsInAreasStart')} ${this.t(
+        `in${this.regions.sea.length}Areas`
+      )}. ${this.t('toNextContent')}`
     },
     fromLandToNextContentHref() {
       return this.anySeaWarnings

package/src/components/Warning.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="symbol-list-table" :class="theme">
+  <div
+    class="symbol-list-table"
+    :class="theme"
+  >
     <div class="symbol-list-cell symbol-list-cell-image">
       <div
         :class="`level-${severity} ${typeClass} symbol-list-image-column symbol-list-image warning-image`"
-        :aria-label="`${warningLevelText} ${title.toLowerCase()}`">
-      </div>
+        :aria-label="`${warningLevelText} ${title.toLowerCase()}`"
+      ></div>
     </div>
     <div class="symbol-list-cell symbol-list-cell-text">
       <div class="symbol-list-text-select">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="item-text symbol-list-text" v-html="title"></div>
+        <div
+          class="item-text symbol-list-text"
+          v-html="title"
+        ></div>
         <div class="symbol-list-select-container d-none d-md-table-cell">
           <div
             :id="id"
@@ -27,11 +33,12 @@
             @mousedown="preventEvents"
             @click="toggle"
             @keydown.enter="toggle"
-            @keydown.space="toggle">
-              <span>
-                {{ toggleText }}
-              </span>
-            </div>
+            @keydown.space="toggle"
+          >
+            <span>
+              {{ toggleText }}
+            </span>
+          </div>
         </div>
       </div>
       <hr />
@@ -204,6 +211,7 @@ div.symbol-list-text {
   justify-content: center;
   width: 100%;
   height: $symbol-list-select-height;
+  cursor: pointer;
   margin: 0;
   background-repeat: no-repeat;
   background-position: center;
@@ -222,7 +230,7 @@ div.symbol-list-text {
     }
   }
   span {
-    font-family: "Noto Sans", sans-serif;
+    font-family: 'Noto Sans', sans-serif;
     font-size: $font-size;
     forced-color-adjust: none;
   }

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,25 +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"
-            aria-labelledby="symbol-list-several-warnings-text">
-          </div>
+            aria-labelledby="symbol-list-several-warnings-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
           <div
             id="symbol-list-several-warnings-text"
-            class="item-text symbol-list-text">
+            class="item-text symbol-list-text"
+          >
             {{ severalWarningsText }}
           </div>
         </div>
@@ -52,13 +63,14 @@
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
             class="level-1 symbol-list-image-column symbol-list-image warning-image"
-            aria-labelledby="symbol-list-warning-level-1-text">
-          </div>
+            aria-labelledby="symbol-list-warning-level-1-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
           <div
             id="symbol-list-warning-level-1-text"
-            class="item-text symbol-list-text">
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel1Text }}
           </div>
         </div>
@@ -69,13 +81,14 @@
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
             class="level-2 symbol-list-image-column symbol-list-image warning-image"
-            aria-labelledby="symbol-list-warning-level-2-text">
-          </div>
+            aria-labelledby="symbol-list-warning-level-2-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
           <div
             id="symbol-list-warning-level-2-text"
-            class="item-text symbol-list-text">
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel2Text }}
           </div>
         </div>
@@ -86,13 +99,14 @@
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
             class="level-3 symbol-list-image-column symbol-list-image warning-image"
-            aria-labelledby="symbol-list-warning-level-3-text">
-          </div>
+            aria-labelledby="symbol-list-warning-level-3-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
           <div
             id="symbol-list-warning-level-3-text"
-            class="item-text symbol-list-text">
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel3Text }}
           </div>
         </div>
@@ -103,13 +117,14 @@
         <div class="symbol-list-cell symbol-list-cell-image">
           <div
             class="level-4 symbol-list-image-column symbol-list-image warning-image"
-            aria-labelledby="symbol-list-warning-level-4-text">
-          </div>
+            aria-labelledby="symbol-list-warning-level-4-text"
+          ></div>
         </div>
         <div class="symbol-list-cell symbol-list-cell-text">
           <div
             id="symbol-list-warning-level-4-text"
-            class="item-text symbol-list-text">
+            class="item-text symbol-list-text"
+          >
             {{ warningLevel4Text }}
           </div>
           <hr class="bottom-separator" />

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
+    },
+  },
+}