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

package/src/components/Warnings.vue

@@ -18,12 +18,12 @@
     <div id="fmi-warnings-list">
       <Warning
         v-for="warning in warnings"
-        :key="warning.key"
+        :key="warning.type"
         :input="warning"
         :hideable="warnings.length > 1"
         :theme="theme"
         :language="language"
-        @warningToggled="onWarningToggled" />
+        @warning-toggled="onWarningToggled" />
     </div>
     <div class="row symbol-list-main-row">
       <hr
@@ -35,8 +35,7 @@
         <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
@@ -52,8 +51,7 @@
         <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
@@ -69,8 +67,7 @@
         <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
@@ -86,8 +83,7 @@
         <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
@@ -103,8 +99,7 @@
         <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
@@ -119,69 +114,138 @@
   </div>
 </template>
 
-<script>
-import i18n from '../mixins/i18n'
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useI18n } from '@/composables/useI18n'
 import Warning from './Warning.vue'
+import type { LegendItem, Theme, Language } from '@/types'
+
+// ============================================================================
+// Props
+// ============================================================================
+
+const props = withDefaults(
+  defineProps<{
+    input?: LegendItem[]
+    visibleWarnings?: string[]
+    language?: Language
+    theme?: Theme | string
+  }>(),
+  {
+    input: () => [],
+    visibleWarnings: () => [],
+    language: undefined,
+    theme: 'light-theme',
+  }
+)
 
-export default {
-  name: 'Warnings',
-  components: {
-    Warning,
-  },
-  mixins: [i18n],
-  props: ['input', 'visibleWarnings', 'language', 'theme'],
-  computed: {
-    warnings() {
-      return this.input
-    },
-    hiddenWarnings() {
-      return this.visibleWarnings.length !== this.input.length
-    },
-    noWarnings() {
-      return this.warnings.length === 0
-    },
-    warningSymbolsText() {
-      return this.noWarnings ? this.t('noWarnings') : this.t('warningSymbols')
-    },
-    warningSymbolDaysText() {
-      return this.noWarnings ? '' : this.t('warningSymbolDays')
-    },
-    showWarningsText() {
-      return this.t('showWarnings')
-    },
-    severalWarningsText() {
-      return this.t('severalWarnings')
-    },
-    warningLevel1Text() {
-      return this.t('warningLevel1')
-    },
-    warningLevel2Text() {
-      return this.t('warningLevel2')
-    },
-    warningLevel3Text() {
-      return this.t('warningLevel3')
-    },
-    warningLevel4Text() {
-      return this.t('warningLevel4')
-    },
-  },
-  methods: {
-    onWarningToggled({ warning, visible }) {
-      let newVisibleWarnings = this.visibleWarnings
-      if (visible && !this.visibleWarnings.includes(warning)) {
-        newVisibleWarnings.push(warning)
-      } else if (!visible) {
-        newVisibleWarnings = newVisibleWarnings.filter(
-          (visibleWarning) => visibleWarning !== warning
-        )
-      }
-      this.$emit('warningsToggled', newVisibleWarnings)
-    },
-    showAll() {
-      this.$emit('showAllWarnings')
-    },
-  },
+// ============================================================================
+// Emits
+// ============================================================================
+
+const emit = defineEmits<{
+  warningsToggled: [visibleWarnings: string[]]
+  showAllWarnings: []
+}>()
+
+// ============================================================================
+// Composables
+// ============================================================================
+
+const { t } = useI18n(toRef(() => props.language))
+
+// ============================================================================
+// Computed Properties
+// ============================================================================
+
+const warnings = computed<LegendItem[]>(() => {
+  return props.input
+})
+
+const hiddenWarnings = computed<boolean>(() => {
+  return props.visibleWarnings.length !== props.input.length
+})
+
+const noWarnings = computed<boolean>(() => {
+  return warnings.value.length === 0
+})
+
+const warningSymbolsText = computed<string>(() => {
+  return noWarnings.value ? t('noWarnings') : t('warningSymbols')
+})
+
+const warningSymbolDaysText = computed<string>(() => {
+  return noWarnings.value ? '' : t('warningSymbolDays')
+})
+
+const showWarningsText = computed<string>(() => {
+  return t('showWarnings')
+})
+
+const severalWarningsText = computed<string>(() => {
+  return t('severalWarnings')
+})
+
+const warningLevel1Text = computed<string>(() => {
+  return t('warningLevel1')
+})
+
+const warningLevel2Text = computed<string>(() => {
+  return t('warningLevel2')
+})
+
+const warningLevel3Text = computed<string>(() => {
+  return t('warningLevel3')
+})
+
+const warningLevel4Text = computed<string>(() => {
+  return t('warningLevel4')
+})
+
+// ============================================================================
+// Methods
+// ============================================================================
+
+interface WarningToggleEvent {
+  warning: string
+  visible: boolean
 }
+
+const onWarningToggled = ({ warning, visible }: WarningToggleEvent): void => {
+  let newVisibleWarnings = [...props.visibleWarnings]
+  if (visible && !props.visibleWarnings.includes(warning)) {
+    newVisibleWarnings.push(warning)
+  } else if (!visible) {
+    newVisibleWarnings = newVisibleWarnings.filter(
+      (visibleWarning) => visibleWarning !== warning
+    )
+  }
+  emit('warningsToggled', newVisibleWarnings)
+}
+
+const showAll = (): void => {
+  emit('showAllWarnings')
+}
+
+// ============================================================================
+// Expose for tests
+// ============================================================================
+
+defineExpose({
+  warnings,
+  hiddenWarnings,
+  noWarnings,
+  warningSymbolsText,
+  warningSymbolDaysText,
+  showWarningsText,
+  severalWarningsText,
+  warningLevel1Text,
+  warningLevel2Text,
+  warningLevel3Text,
+  warningLevel4Text,
+  onWarningToggled,
+  showAll,
+})
 </script>
 
 <style scoped lang="scss">

package/src/composables/useAlertClient.ts

@@ -0,0 +1,360 @@
+/**
+ * Core composable for AlertClient wrapper components.
+ * Contains shared logic for both web component (App.vue) and Vue component (AlertClientVue.vue).
+ *
+ * This composable provides:
+ * - Reactive state management (loading, warningsData, themeClass, etc.)
+ * - Computed properties for API queries
+ * - Methods for fetching warnings and handling events
+ *
+ * Components using this composable must provide:
+ * - Props with appropriate types
+ */
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import crossFetch from 'cross-fetch'
+import type { Language, WarningsData } from '@/types'
+
+// ============================================================================
+// Helper Functions (exported for use in components)
+// ============================================================================
+
+/**
+ * Normalize string|boolean to boolean
+ */
+export const toBool = (val: unknown, defaultVal = true): boolean => {
+  if (typeof val === 'boolean') return val
+  if (typeof val === 'string') return val.toLowerCase() !== 'false'
+  return defaultVal
+}
+
+/**
+ * Normalize string|number to number
+ */
+export const toNum = (val: unknown, defaultVal = 0): number => {
+  if (typeof val === 'number') return val
+  if (typeof val === 'string') return Number(val)
+  return defaultVal
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface UseAlertClientOptions {
+  /** Base URL for API requests */
+  baseUrl: Ref<string> | ComputedRef<string>
+  /** Language code */
+  language: Ref<Language> | ComputedRef<Language>
+  /** Theme name */
+  theme: Ref<string> | ComputedRef<string>
+  /** Pre-loaded warnings data (optional) */
+  warnings?:
+    | Ref<WarningsData | string | null>
+    | ComputedRef<WarningsData | string | null>
+  /** Current date for time calculations (optional) */
+  currentDate?: Ref<Date | string | null> | ComputedRef<Date | string | null>
+  /** Font scale factor (optional) */
+  fontScale?: Ref<number | string> | ComputedRef<number | string>
+  /** Debug mode (optional) */
+  debugMode?: Ref<boolean> | ComputedRef<boolean>
+  /** Custom weather updated query (optional) */
+  weatherUpdated?: Ref<string> | ComputedRef<string>
+  /** Custom flood updated query (optional) */
+  floodUpdated?: Ref<string> | ComputedRef<string>
+  /** Custom weather warnings query (optional) */
+  weatherWarnings?: Ref<string> | ComputedRef<string>
+  /** Custom flood warnings query (optional) */
+  floodWarnings?: Ref<string> | ComputedRef<string>
+}
+
+export interface UseAlertClientReturn {
+  // State
+  loading: Ref<number>
+  updatedAt: Ref<number | null>
+  refreshedAt: Ref<number | null>
+  themeClass: Ref<string>
+  warningsData: Ref<WarningsData | null>
+  visible: Ref<boolean>
+
+  // Computed
+  currentTime: ComputedRef<number>
+  weatherUpdatedQuery: ComputedRef<string>
+  floodUpdatedQuery: ComputedRef<string>
+  weatherWarningsQuery: ComputedRef<string>
+  floodWarningsQuery: ComputedRef<string>
+
+  // Methods
+  onLoaded: (loaded: number) => void
+  onThemeChanged: (newTheme: string | null) => void
+  fetchWarnings: () => Promise<void> | undefined
+  show: () => void
+  hide: () => void
+  initializeWarnings: () => void
+  applyFontScale: () => void
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const WEATHER_UPDATED_TYPE = 'weather_update_time'
+const FLOOD_UPDATED_TYPE = 'flood_update_time'
+const WEATHER_WARNINGS_TYPE = 'weather_finland_active_all'
+const FLOOD_WARNINGS_TYPE = 'flood_finland_active_all'
+const FLOOD_SUPPORTED_SEVERITIES = ['moderate', 'severe', 'extreme'] as const
+
+const QUERY_PREFIX =
+  '?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=1000&outputFormat=application%2Fjson&typeName='
+
+// ============================================================================
+// Composable
+// ============================================================================
+
+export function useAlertClient(
+  options: UseAlertClientOptions
+): UseAlertClientReturn {
+  const {
+    baseUrl,
+    language,
+    theme,
+    warnings,
+    currentDate,
+    fontScale,
+    debugMode,
+    weatherUpdated,
+    floodUpdated,
+    weatherWarnings,
+    floodWarnings,
+  } = options
+
+  // -------------------------------------------------------------------------
+  // Reactive State
+  // -------------------------------------------------------------------------
+
+  const loading = ref<number>(1)
+  const updatedAt = ref<number | null>(null)
+  const refreshedAt = ref<number | null>(null)
+  const themeClass = ref<string>(`${theme.value}-theme`)
+  const warningsData = ref<WarningsData | null>(null)
+  const visible = ref<boolean>(true)
+
+  // -------------------------------------------------------------------------
+  // Helper: CAP Language mapping
+  // -------------------------------------------------------------------------
+
+  const capLanguageMap: Record<Language, string> = {
+    fi: 'fi-FI',
+    sv: 'sv-SV',
+    en: 'en-US',
+  }
+
+  const getCapLanguage = (): string => capLanguageMap[language.value] || 'fi-FI'
+
+  // -------------------------------------------------------------------------
+  // Computed: Flood filter
+  // -------------------------------------------------------------------------
+
+  const floodFilter = computed<string>(() => {
+    const severityFilter = FLOOD_SUPPORTED_SEVERITIES.reduce(
+      (filter, severity, index) =>
+        `${filter}${index === 0 ? '' : ','}%27${severity.toUpperCase()}%27`,
+      '&cql_filter=severity%20IN%20('
+    )
+    return `${severityFilter})%20AND%20language=%27${getCapLanguage()}%27`
+  })
+
+  // -------------------------------------------------------------------------
+  // Computed: Query URLs
+  // -------------------------------------------------------------------------
+
+  const weatherUpdatedQuery = computed<string>(() => {
+    return weatherUpdated?.value || `${QUERY_PREFIX}${WEATHER_UPDATED_TYPE}`
+  })
+
+  const floodUpdatedQuery = computed<string>(() => {
+    return floodUpdated?.value || `${QUERY_PREFIX}${FLOOD_UPDATED_TYPE}`
+  })
+
+  const weatherWarningsQuery = computed<string>(() => {
+    return weatherWarnings?.value || `${QUERY_PREFIX}${WEATHER_WARNINGS_TYPE}`
+  })
+
+  const floodWarningsQuery = computed<string>(() => {
+    return (
+      floodWarnings?.value ||
+      `${QUERY_PREFIX}${FLOOD_WARNINGS_TYPE}${floodFilter.value}`
+    )
+  })
+
+  // -------------------------------------------------------------------------
+  // Computed: Current time
+  // -------------------------------------------------------------------------
+
+  const currentTime = computed<number>(() => {
+    if (refreshedAt.value) {
+      return refreshedAt.value
+    }
+    if (currentDate?.value) {
+      const date =
+        currentDate.value instanceof Date
+          ? currentDate.value
+          : new Date(currentDate.value)
+      return date.getTime()
+    }
+    return Date.now()
+  })
+
+  // -------------------------------------------------------------------------
+  // Methods
+  // -------------------------------------------------------------------------
+
+  /**
+   * Initialize warnings from pre-loaded data (call in created/setup)
+   */
+  const initializeWarnings = (): void => {
+    if (warnings?.value) {
+      warningsData.value =
+        typeof warnings.value === 'string'
+          ? JSON.parse(warnings.value)
+          : warnings.value
+    }
+  }
+
+  /**
+   * Apply font scale to document (call in onMounted)
+   */
+  const applyFontScale = (): void => {
+    const fontScaleNum = toNum(fontScale?.value, 1)
+    if (fontScaleNum !== 1) {
+      let originalFontSize: number | undefined
+
+      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`
+    }
+  }
+
+  /**
+   * Handle loaded event from child component
+   */
+  const onLoaded = (loaded: number): void => {
+    if (loaded !== 0) {
+      loading.value = loaded === -1 ? -1 : 0
+    }
+  }
+
+  /**
+   * Handle theme change
+   */
+  const onThemeChanged = (newTheme: string | null): void => {
+    themeClass.value = `${
+      newTheme != null && newTheme.length > 0 ? newTheme : theme.value
+    }-theme`
+  }
+
+  /**
+   * Fetch warnings from API
+   */
+  const fetchWarnings = (): Promise<void> | undefined => {
+    if (warnings?.value) {
+      return
+    }
+
+    loading.value = 1
+
+    if (debugMode?.value) {
+      console.log(`Updating warnings at ${new Date()}`)
+    }
+
+    const queries = new Map<string, string>([
+      [`${baseUrl.value}${weatherUpdatedQuery.value}`, WEATHER_UPDATED_TYPE],
+      [`${baseUrl.value}${floodUpdatedQuery.value}`, FLOOD_UPDATED_TYPE],
+      [`${baseUrl.value}${weatherWarningsQuery.value}`, WEATHER_WARNINGS_TYPE],
+      [`${baseUrl.value}${floodWarningsQuery.value}`, FLOOD_WARNINGS_TYPE],
+    ])
+
+    const responseData: Record<string, unknown> = {}
+
+    return Promise.allSettled(
+      [...queries.keys()].map(async (queryUrl) =>
+        crossFetch(queryUrl).then((response) =>
+          response
+            .json()
+            .then((json: unknown) => {
+              const currentTimeMs = Date.now()
+              if (updatedAt.value != null) {
+                refreshedAt.value = currentTimeMs
+              }
+              updatedAt.value = currentTimeMs
+              responseData[queries.get(queryUrl)!] = json
+            })
+            .catch((error: Error) => {
+              loading.value = -1
+              console.log(error)
+            })
+        )
+      )
+    ).then(() => {
+      warningsData.value = responseData as WarningsData
+    })
+  }
+
+  /**
+   * Show the component
+   */
+  const show = (): void => {
+    visible.value = true
+  }
+
+  /**
+   * Hide the component
+   */
+  const hide = (): void => {
+    visible.value = false
+  }
+
+  // -------------------------------------------------------------------------
+  // Return
+  // -------------------------------------------------------------------------
+
+  return {
+    // State
+    loading,
+    updatedAt,
+    refreshedAt,
+    themeClass,
+    warningsData,
+    visible,
+
+    // Computed
+    currentTime,
+    weatherUpdatedQuery,
+    floodUpdatedQuery,
+    weatherWarningsQuery,
+    floodWarningsQuery,
+
+    // Methods
+    onLoaded,
+    onThemeChanged,
+    fetchWarnings,
+    show,
+    hide,
+    initializeWarnings,
+    applyFontScale,
+  }
+}