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

package/src/components/RegionWarning.vue

@@ -9,8 +9,7 @@
       `level-${input.severity}`,
       `${typeClass}`,
     ]"
-    :aria-label="`${warningLevel} ${warningTypeText}${warningDetails}`"
-  >
+    :aria-label="`${warningLevel} ${warningTypeText}${warningDetails}`">
     <span
       aria-hidden="true"
       :class="[
@@ -23,38 +22,46 @@
   </div>
 </template>
 
-<script>
-import fields from '../mixins/fields'
-import i18n from '../mixins/i18n'
-import utils from '../mixins/utils'
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useFields } from '@/composables/useFields'
+import { useI18n } from '@/composables/useI18n'
+import type { WarningIconInput } from '@/types'
 
-export default {
-  name: 'RegionWarning',
-  mixins: [fields, i18n, utils],
-  props: {
-    input: {
-      type: Object,
-      default: null,
-    },
-    language: {
-      type: String,
-    },
-  },
-  computed: {
-    warningLevel() {
-      return this.t(`warningLevel${this.input.severity}`)
-    },
-    warningTypeText() {
-      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}°)`
-    }
-  },
-}
+// Props
+const props = defineProps<{
+  input: WarningIconInput
+  language?: string
+}>()
+
+// Composables
+const { typeClass, rotation, invertedRotation, severity } = useFields(
+  toRef(props, 'input')
+)
+const { t } = useI18n(toRef(props, 'language'))
+
+// Expose for testing
+defineExpose({
+  severity,
+})
+
+// Computed
+const warningLevel = computed((): string => {
+  return t(`warningLevel${props.input.severity}`)
+})
+
+const warningTypeText = computed((): string => {
+  return t(props.input.type).toLowerCase()
+})
+
+const warningDetails = computed((): string => {
+  if (props.input.text == null || props.input.direction == null) {
+    return ''
+  }
+  return ` (${props.input.text} m/s ${t('fromDirection')} ${
+    props.input.direction + 180
+  }°)`
+})
 </script>
 
 <style scoped lang="scss">

package/src/components/Regions.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="region-warnings" class="row">
     <div v-if="anyLandWarnings" class="region-type-container">
-      <h3 id="header-land" class="header-region">{{ landText }}</h3>
+      <h3 id="header-land" class="header-region">
+        {{ landText }}
+      </h3>
       <a
         id="fmi-warnings-region-content"
         :href="fromLandToNextContentHref"
@@ -26,7 +28,9 @@
     </div>
 
     <div v-if="anySeaWarnings" class="region-type-container">
-      <h3 id="header-sea" class="header-region">{{ seaText }}</h3>
+      <h3 id="header-sea" class="header-region">
+        {{ seaText }}
+      </h3>
       <a
         :id="fromSeaToNextContentId"
         href="#fmi-warnings-end-of-regions"
@@ -53,113 +57,193 @@
   </div>
 </template>
 
-<script>
-import config from '../mixins/config'
-import i18n from '../mixins/i18n'
-import utils from '../mixins/utils'
+<script setup lang="ts">
+import { computed, toRef, getCurrentInstance } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+import { useConfig } from '@/composables/useConfig'
+import { REGION_LAND, REGION_SEA } from '@/composables/useUtils'
 import Region from './Region.vue'
+import type {
+  RegionsData,
+  WarningsMap,
+  DayRegions,
+  RegionListItem,
+  Theme,
+  Language,
+} from '@/types'
 
-export default {
-  name: 'Regions',
-  components: { Region },
-  mixins: [config, i18n, utils],
-  props: {
-    input: Array,
-    selectedDay: Number,
-    warnings: {
-      type: Object,
-      default: null,
-    },
-    parents: Object,
-    geometryId: Number,
-    theme: String,
-    language: String,
-  },
-  computed: {
-    landText() {
-      return this.t('regionLand')
-    },
-    seaText() {
-      return this.t('regionSea')
-    },
-    fromLandToNextContentText() {
-      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')}`
-    },
-    fromLandToNextContentHref() {
-      return this.anySeaWarnings
-        ? '#fmi-warnings-from-sea-to-next-content'
-        : '#fmi-warnings-end-of-regions'
-    },
-    fromSeaToNextContentId() {
-      return this.anyLandWarnings
-        ? 'fmi-warnings-from-sea-to-next-content'
-        : 'fmi-warnings-region-content'
-    },
-    regions() {
-      const compareRegions = (region1, region2) =>
-        region1.regionIndex - region2.regionIndex
-      const overriddenRegions = this.parents
-      const overriddenIds = Object.keys(overriddenRegions).filter(
-        (regionId) => overriddenRegions[regionId][this.selectedDay]
-      )
-      return [this.REGION_LAND, this.REGION_SEA].reduce(
-        (regionData, regionType) => {
-          // eslint-disable-next-line no-param-reassign
-          regionData[regionType] = this.input[this.selectedDay][
-            regionType
-          ].reduce((regions, region) => {
-            const parentId = this.geometries[this.geometryId][region.key].parent
-            if (
-              !overriddenIds.includes(region.key) &&
-              (!parentId || overriddenIds.includes(parentId)) &&
-              region.warnings.some(
-                (warning) => warning.coverage >= this.coverageCriterion
-              )
-            ) {
-              regions.push(region)
-            }
-            return regions
-          }, [])
-          regionData[regionType].sort(compareRegions)
-          return regionData
-        },
-        {}
-      )
-    },
-    anyLandWarnings() {
-      return this.anyRegionWarnings('land')
-    },
-    anySeaWarnings() {
-      return this.anyRegionWarnings('sea')
-    },
-  },
-  methods: {
-    anyRegionWarnings(regionType) {
-      return (
-        this.regions != null &&
-        this.regions[regionType] != null &&
-        this.regions[regionType].length > 0
-      )
-    },
-    fromLandToNextContentClicked() {
-      const nextContent = this.$el.querySelector(this.fromLandToNextContentHref)
-      nextContent.scrollIntoView()
-      nextContent.focus()
-    },
-    fromSeaToNextContentClicked() {
-      const nextContent = this.$el.querySelector('#fmi-warnings-end-of-regions')
-      nextContent.scrollIntoView()
-      nextContent.focus()
+// ============================================================================
+// Props
+// ============================================================================
+
+const props = withDefaults(
+  defineProps<{
+    input?: RegionsData
+    selectedDay?: number
+    warnings?: WarningsMap | null
+    parents?: Record<string, boolean[]>
+    geometryId?: number
+    theme?: Theme | string
+    language?: Language
+  }>(),
+  {
+    input: () => [],
+    selectedDay: 0,
+    warnings: null,
+    parents: () => ({}),
+    geometryId: 2021,
+    theme: 'light-theme',
+    language: undefined,
+  }
+)
+
+// ============================================================================
+// Composables
+// ============================================================================
+
+const { t } = useI18n(toRef(() => props.language))
+const { geometries, coverageCriterion } = useConfig()
+
+const instance = getCurrentInstance()
+
+// ============================================================================
+// Computed Properties
+// ============================================================================
+
+const landText = computed<string>(() => {
+  return t('regionLand')
+})
+
+const seaText = computed<string>(() => {
+  return t('regionSea')
+})
+
+const fromLandToNextContentText = computed<string>(() => {
+  return `${t('warningsInAreasStart')} ${t(
+    `in${regions.value.land.length}Areas`
+  )}. ${t('toNextContent')}`
+})
+
+const fromSeaToNextContentText = computed<string>(() => {
+  return `${t('warningsInAreasStart')} ${t(
+    `in${regions.value.sea.length}Areas`
+  )}. ${t('toNextContent')}`
+})
+
+const fromLandToNextContentHref = computed<string>(() => {
+  return anySeaWarnings.value
+    ? '#fmi-warnings-from-sea-to-next-content'
+    : '#fmi-warnings-end-of-regions'
+})
+
+const fromSeaToNextContentId = computed<string>(() => {
+  return anyLandWarnings.value
+    ? 'fmi-warnings-from-sea-to-next-content'
+    : 'fmi-warnings-region-content'
+})
+
+const regions = computed<DayRegions>(() => {
+  const compareRegions = (region1: RegionListItem, region2: RegionListItem) =>
+    region1.regionIndex - region2.regionIndex
+
+  const overriddenRegions = props.parents
+  const overriddenIds = Object.keys(overriddenRegions).filter(
+    (regionId) => overriddenRegions[regionId]?.[props.selectedDay]
+  )
+
+  const geometryData = geometries[props.geometryId]
+
+  return [REGION_LAND, REGION_SEA].reduce(
+    (regionData, regionType) => {
+      const dayData = props.input[props.selectedDay]
+      if (!dayData) {
+        regionData[regionType as keyof DayRegions] = []
+        return regionData
+      }
+
+      regionData[regionType as keyof DayRegions] = dayData[
+        regionType as keyof DayRegions
+      ].reduce((filteredRegions: RegionListItem[], region) => {
+        const regionGeometry = geometryData?.[region.key]
+        const parentId =
+          regionGeometry && 'parent' in regionGeometry
+            ? regionGeometry.parent
+            : ''
+        if (
+          !overriddenIds.includes(region.key) &&
+          (!parentId || overriddenIds.includes(parentId)) &&
+          region.warnings.some(
+            (warning) => warning.coverage >= coverageCriterion
+          )
+        ) {
+          filteredRegions.push(region)
+        }
+        return filteredRegions
+      }, [])
+
+      regionData[regionType as keyof DayRegions].sort(compareRegions)
+      return regionData
     },
-  },
+    { land: [], sea: [] } as DayRegions
+  )
+})
+
+const anyLandWarnings = computed<boolean>(() => {
+  return anyRegionWarnings('land')
+})
+
+const anySeaWarnings = computed<boolean>(() => {
+  return anyRegionWarnings('sea')
+})
+
+// ============================================================================
+// Methods
+// ============================================================================
+
+const anyRegionWarnings = (regionType: 'land' | 'sea'): boolean => {
+  return (
+    regions.value != null &&
+    regions.value[regionType] != null &&
+    regions.value[regionType].length > 0
+  )
+}
+
+const fromLandToNextContentClicked = (): void => {
+  const el = instance?.proxy?.$el as HTMLElement | undefined
+  const nextContent = el?.querySelector<HTMLElement>(
+    fromLandToNextContentHref.value
+  )
+  nextContent?.scrollIntoView()
+  nextContent?.focus()
+}
+
+const fromSeaToNextContentClicked = (): void => {
+  const el = instance?.proxy?.$el as HTMLElement | undefined
+  const nextContent = el?.querySelector<HTMLElement>(
+    '#fmi-warnings-end-of-regions'
+  )
+  nextContent?.scrollIntoView()
+  nextContent?.focus()
 }
+
+// ============================================================================
+// Expose for tests
+// ============================================================================
+
+defineExpose({
+  landText,
+  seaText,
+  fromLandToNextContentText,
+  fromSeaToNextContentText,
+  fromLandToNextContentHref,
+  fromSeaToNextContentId,
+  regions,
+  anyLandWarnings,
+  anySeaWarnings,
+  anyRegionWarnings,
+  fromLandToNextContentClicked,
+  fromSeaToNextContentClicked,
+})
 </script>
 
 <style scoped lang="scss">

package/src/components/Warning.vue

@@ -3,8 +3,7 @@
     <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">
@@ -28,10 +27,10 @@
             @click="toggle"
             @keydown.enter="toggle"
             @keydown.space="toggle">
-              <span>
-                {{ toggleText }}
-              </span>
-            </div>
+            <span>
+              {{ toggleText }}
+            </span>
+          </div>
         </div>
       </div>
       <hr />
@@ -39,44 +38,69 @@
   </div>
 </template>
 
-<script>
-import fields from '../mixins/fields'
-import i18n from '../mixins/i18n'
-import utils from '../mixins/utils'
-
-export default {
-  name: 'Warning',
-  mixins: [fields, i18n, utils],
-  props: ['input', 'hideable', 'language', 'theme'],
-  computed: {
-    id() {
-      return `fmi-warnings-flag-${this.input.type}`
-    },
-    title() {
-      return this.t(this.input.type)
-    },
-    warningLevelText() {
-      return this.t(`warningLevel${this.severity}`)
-    },
-    toggleText() {
-      return this.input.visible ? this.t('toggleOn') : this.t('toggleOff')
-    },
-  },
-  methods: {
-    toggle(event) {
-      event.preventDefault()
-      this.setWarningVisibility(!this.input.visible)
-    },
-    setWarningVisibility(visible) {
-      this.$emit('warningToggled', {
-        warning: this.input.type,
-        visible,
-      })
-    },
-    preventEvents(event) {
-      event.preventDefault()
-    },
-  },
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useFields } from '@/composables/useFields'
+import { useI18n } from '@/composables/useI18n'
+import type { LegendItem } from '@/types'
+
+// Props
+const props = defineProps<{
+  input: LegendItem
+  hideable?: boolean
+  language?: string
+  theme?: string
+}>()
+
+// Emits
+const emit = defineEmits<{
+  warningToggled: [data: { warning: string; visible: boolean }]
+}>()
+
+// Composables
+const { typeClass, rotation, invertedRotation, severity } = useFields(
+  toRef(props, 'input')
+)
+const { t } = useI18n(toRef(props, 'language'))
+
+// Expose for testing
+defineExpose({
+  rotation,
+  invertedRotation,
+})
+
+// Computed
+const id = computed((): string => {
+  return `fmi-warnings-flag-${props.input.type}`
+})
+
+const title = computed((): string => {
+  return t(props.input.type)
+})
+
+const warningLevelText = computed((): string => {
+  return t(`warningLevel${severity.value}`)
+})
+
+const toggleText = computed((): string => {
+  return props.input.visible ? t('toggleOn') : t('toggleOff')
+})
+
+// Methods
+function toggle(event: Event): void {
+  event.preventDefault()
+  setWarningVisibility(!props.input.visible)
+}
+
+function setWarningVisibility(visible: boolean): void {
+  emit('warningToggled', {
+    warning: props.input.type,
+    visible,
+  })
+}
+
+function preventEvents(event: Event): void {
+  event.preventDefault()
 }
 </script>
 
@@ -204,6 +228,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 +247,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;
   }