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

package/src/mixins/utils.js

@@ -1,5 +1,3 @@
-import 'url-search-params-polyfill'
-
 import { DOMParser } from '@xmldom/xmldom'
 import he from 'he'
 import xpath from 'xpath'
@@ -43,7 +41,7 @@ export default {
       extreme: 4,
     }),
     strokeColor() {
-      return this.colors[this.theme].stroke
+      return this.colors?.[this.theme]?.stroke || 'DarkSlateGray'
     },
     bluePaths() {
       return this.paths({
@@ -76,10 +74,10 @@ export default {
     },
     overlayPaths() {
       return this.regionIds.reduce((regions, regionId) => {
+        const region = this.geometries?.[this.geometryId]?.[regionId]
         if (
-          this.geometries[this.geometryId][regionId].pathLarge &&
-          (this.geometries[this.geometryId][regionId].type === 'land' ||
-            this.geometries[this.geometryId][regionId].subType === 'lake')
+          region?.pathLarge &&
+          (region.type === 'land' || region.subType === 'lake')
         ) {
           const visualization = this.regionVisualization(regionId)
           regions.push({
@@ -140,7 +138,10 @@ export default {
       return [
         {
           key: `border.${area}`,
-          d: this.geometries[this.geometryId]['borders'][area][`path${this.size}`],
+          d:
+            this.geometries?.[this.geometryId]?.borders?.[area]?.[
+              `path${this.size}`
+            ] || '',
           opacity: '1',
           strokeWidth: this.strokeWidth,
         },
@@ -195,7 +196,9 @@ export default {
     },
     msSinceStartOfDay(timestamp) {
       const moment = this.toTimeZone(timestamp)
-      const ms = ((moment.hour * 60 + moment.minute) * 60 + moment.second) * 1000 + moment.millisecond
+      const ms =
+        ((moment.hour * 60 + moment.minute) * 60 + moment.second) * 1000 +
+        moment.millisecond
       // Daylight saving time
       const ref = this.toTimeZone(timestamp - ms)
       if (ref.day !== moment.day) {
@@ -547,8 +550,10 @@ export default {
             ;[...this.warnings[key].covRegions.keys()].forEach((covRegion) => {
               if (
                 (this.coverageRegions[covRegion] == null ||
-                this.coverageRegions[covRegion] < this.warnings[key].severity) &&
-                this.warnings[key].covRegions.get(covRegion) >= this.coverageCriterion
+                  this.coverageRegions[covRegion] <
+                    this.warnings[key].severity) &&
+                this.warnings[key].covRegions.get(covRegion) >=
+                  this.coverageCriterion
               ) {
                 this.coverageRegions[covRegion] = this.warnings[key].severity
               }
@@ -762,8 +767,10 @@ export default {
       return typeof document !== 'undefined' && document
     },
     regionData(regionId) {
-      const regionType = this.geometries[this.geometryId][regionId].type
-      return this.input[regionType].find(
+      const region = this.geometries?.[this.geometryId]?.[regionId]
+      if (!region) return null
+      const regionType = region.type
+      return this.input?.[regionType]?.find(
         (regionData) => regionData.key === regionId
       )
     },
@@ -796,10 +803,11 @@ export default {
       const severity = this.regionSeverity(regionId)
       const isLand =
         this.geometries[this.geometryId][regionId].type === this.REGION_LAND
+      const themeColors = this.colors?.[this.theme]
       const color =
         severity || isLand
-          ? this.colors[this.theme].levels[severity]
-          : this.colors[this.theme].sea
+          ? themeColors?.levels?.[severity] || '#cccccc'
+          : themeColors?.sea || '#add8e6'
       const visible = severity > 0 || geom.subType !== this.REGION_LAKE
       return {
         geom,
@@ -810,18 +818,24 @@ export default {
     },
     // Include also lakes to prevent overlapping symbols in Saimaa
     optimizeCovRegions(warnings, regions) {
-      Object.keys(this.geometries[this.geometryId]).filter((regionId) =>
-        this.geometries[this.geometryId][regionId]?.type === 'sea' &&
-        this.geometries[this.geometryId][regionId]?.subType === 'lake'
-      ).filter((regionId) => regions.some((day) =>
-        day['sea'].some((region) => region['key'] === regionId
-      ))).forEach((regionId) =>
-        Object.keys(warnings).filter((warningKey) =>
-          warnings[warningKey].covRegions.size > 0
-        ).forEach((warningKey) => {
-          warnings[warningKey].covRegions.set(regionId, 0)
-        }
-      ))
+      Object.keys(this.geometries[this.geometryId])
+        .filter(
+          (regionId) =>
+            this.geometries[this.geometryId][regionId]?.type === 'sea' &&
+            this.geometries[this.geometryId][regionId]?.subType === 'lake'
+        )
+        .filter((regionId) =>
+          regions.some((day) =>
+            day.sea.some((region) => region.key === regionId)
+          )
+        )
+        .forEach((regionId) =>
+          Object.keys(warnings)
+            .filter((warningKey) => warnings[warningKey].covRegions.size > 0)
+            .forEach((warningKey) => {
+              warnings[warningKey].covRegions.set(regionId, 0)
+            })
+        )
     },
     regionsDefault() {
       return [

package/src/plugins/index.js

@@ -1,3 +1,3 @@
 export const pluginsWrapper = {
-  install(GivenVue) {},
+  install() {},
 }

package/src/scss/_utilities.scss

@@ -0,0 +1,193 @@
+// Responsive display utilities
+.mobile-only {
+  display: block;
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+
+.desktop-only {
+  display: none;
+  @media (min-width: 768px) {
+    display: block;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+// Medium breakpoint and up (768px+)
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none !important;
+  }
+
+  .d-md-block {
+    display: block !important;
+  }
+
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+}
+
+// Display inline
+.d-inline {
+  display: inline !important;
+}
+
+// For screen readers
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// Accessibility utilities
+.visually-hidden-focusable {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+
+  &:focus,
+  &:focus-within {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    overflow: visible !important;
+    clip: auto !important;
+    white-space: normal !important;
+  }
+}
+
+.focus-ring {
+  outline: none;
+
+  &:focus {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+  }
+}
+
+// Small breakpoint specific (576px+)
+@media (min-width: 576px) {
+  .d-sm-block {
+    display: block !important;
+  }
+
+  .d-sm-none {
+    display: none !important;
+  }
+}
+
+// Spacing utilities
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.p-0 {
+  padding: 0;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+// Position utilities
+.sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+}
+
+// Grid/Layout utilities
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+// Tab navigation utilities
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-tabs {
+  border-bottom: none;
+}
+
+.nav-item {
+  margin-bottom: 0;
+}
+
+.nav-link {
+  display: block;
+  padding: 0;
+  text-decoration: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+
+    &.active,
+    &.show {
+      display: block;
+    }
+  }
+
+  .spinner-border {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    vertical-align: text-bottom;
+    border: 0.25em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border-animation 0.75s linear infinite;
+  }
+
+  @keyframes spinner-border-animation {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+}

package/src/scss/constants.scss

@@ -35,7 +35,8 @@ $popup-width: 250px;
   font-family: 'Noto Sans';
   font-weight: normal;
   font-style: normal;
-  src: url($font-base-path + 'Noto_Sans/Noto-Sans-regular.woff2') format('woff2');
+  src: url($font-base-path + 'Noto_Sans/Noto-Sans-regular.woff2')
+    format('woff2');
   font-display: swap;
 }
 $font-family: Roboto, Helvetica, Arial, 'Noto Sans', sans-serif;

package/src/scss/warningImages.scss

@@ -1,8 +1,9 @@
-@import "./constants.scss";
+@use 'sass:string';
+@import './constants.scss';
 
 @for $i from 0 through 72 {
   $angle: 5 * $i;
-  $rotationDegree: unquote($angle + 'deg');
+  $rotationDegree: string.unquote($angle + 'deg');
   .transform-rotate-#{$angle} {
     transform: rotate($rotationDegree);
   }
@@ -101,7 +102,11 @@ div.symbol-image {
 }
 
 @media (forced-colors: active) {
-  .level-0, .level-1, .level-2, .level-3, .level-4 {
+  .level-0,
+  .level-1,
+  .level-2,
+  .level-3,
+  .level-4 {
     forced-color-adjust: none;
   }
 }

package/src/vue.js

@@ -0,0 +1,41 @@
+/**
+ * Vue component exports for use in Vue/Nuxt applications.
+ *
+ * Usage:
+ *   import { SmartMetAlertClient } from '@fmidev/smartmet-alert-client/vue'
+ *   import '@fmidev/smartmet-alert-client/vue/style.css'
+ *
+ *   <SmartMetAlertClient
+ *     :refresh-interval="900000"
+ *     :selected-day="0"
+ *     :geometry-id="2021"
+ *     language="fi"
+ *   />
+ *
+ * Props:
+ *   language            String                   'fi'           Language code: 'fi', 'sv', 'en'
+ *   theme               String                   'light'        Theme: 'light', 'dark', 'light-gray', 'dark-gray'
+ *   geometry-id         String|Number            2021           Geometry version ID
+ *   selected-day        String|Number            0              Initially selected day (0-4)
+ *   refresh-interval    String|Number            900000         Data refresh interval in ms (0 to disable)
+ *   region-list-enabled String|Boolean           true           Show region list below the map
+ *   static-days         String|Boolean           true           Use static day labels
+ *   spinner-enabled     String|Boolean           true           Show loading spinner
+ *   gray-scale-selector String|Boolean           true           Show grayscale theme toggle
+ *   sleep               String|Boolean           true           Pause updates when tab is hidden
+ *   font-scale          String|Number            1              Font size multiplier
+ *   base-url            String                   (FMI GeoServer) Base URL for WFS queries
+ *   start-from          String                   ''             Start date override (ISO format)
+ *   current-date        String|Date              null           Override current date for testing
+ *   warnings            String|Object            null           Pre-loaded warnings data (skip fetch)
+ *   weather-warnings    String                   ''             Custom weather warnings query
+ *   flood-warnings      String                   ''             Custom flood warnings query
+ *   weather-updated     String                   ''             Custom weather update time query
+ *   flood-updated       String                   ''             Custom flood update time query
+ *   daily-warning-types String|Array             []             Filter specific warning types
+ *   debug-mode          String|Boolean           false          Enable debug logging
+ */
+import AlertClientVue from './AlertClientVue.vue'
+
+export { AlertClientVue as SmartMetAlertClient }
+export default AlertClientVue

package/svgo.config.js

@@ -0,0 +1,45 @@
+export default {
+  multipass: true,
+  js2svg: {
+    indent: 2,
+    pretty: true,
+  },
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          // Keep useful IDs in case they're referenced
+          cleanupIds: {
+            minify: false,
+          },
+        },
+      },
+    },
+    // Keep viewBox as it's needed for responsive scaling
+    {
+      name: 'removeViewBox',
+      active: false,
+    },
+    // Remove XML declaration (<?xml version="1.0"?>)
+    'removeXMLProcInst',
+    // Remove unnecessary xmlns:xlink
+    {
+      name: 'removeUnusedNS',
+    },
+    // Clean up numeric values (reduce decimal precision with rounding)
+    {
+      name: 'cleanupNumericValues',
+      params: {
+        floatPrecision: 3,
+      },
+    },
+    // Convert style attributes to attributes where possible
+    {
+      name: 'convertStyleToAttrs',
+      params: {
+        keepImportant: true,
+      },
+    },
+  ],
+}