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

package/src/components/MapSmall.vue

@@ -21,8 +21,8 @@
           :opacity="path.opacity" />
         <path
           v-for="path in seaBorders"
-          class="border-path"
           :key="path.key"
+          class="border-path"
           :stroke="strokeColor"
           :stroke-width="path.strokeWidth"
           :d="path.d"
@@ -95,10 +95,10 @@
           fill-opacity="0" />
         <path
           v-for="path in landBorders"
-          class="border-path"
           :key="path.key"
+          class="border-path"
           :stroke="strokeColor"
-          :stroke-width="1.5*path.strokeWidth"
+          :stroke-width="1.5 * Number(path.strokeWidth)"
           :d="path.d"
           fill-opacity="0" />
         <path
@@ -115,126 +115,141 @@
   </div>
 </template>
 
-<script>
-import { onMounted, onUnmounted, ref } from 'vue'
-
-import config from '../mixins/config'
-import utils from '../mixins/utils'
-
-export default {
-  name: 'MapSmall',
-  mixins: [config, utils],
-  props: {
-    index: {
-      type: Number,
-    },
-    input: {
-      type: Object,
-      default: () => ({}),
-    },
-    visibleWarnings: {
-      type: Array,
-      default: () => [],
-    },
-    warnings: {
-      type: Object,
-      default: null,
-    },
-    geometryId: {
-      type: Number,
-    },
-    loading: {
-      type: Boolean,
-      default: true,
-    },
-    theme: {
-      type: String,
-      default: 'light-theme',
-    },
-  },
-  setup() {
-    const windowWidth = ref(window.innerWidth)
-    const updateWidth = () => {
-      windowWidth.value = window.innerWidth
-    }
-    onMounted(() => {
-      window.addEventListener('resize', updateWidth)
-    })
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateWidth)
-    })
-    return { windowWidth }
-  },
-  data() {
-    return {
-      coverageRegions: {},
-      coverageWarnings: [],
-      pathsNeeded: false,
-    }
-  },
-  computed: {
-    size() {
-      return 'Small'
-    },
-    strokeColor() {
-     return 'DarkSlateGray'
-    },
-    strokeWidth() {
-      return 0.6
-    },
-  },
-  watch: {
-    windowWidth() {
-      this.pathsNeeded = this.isFullMode()
-    },
-    input() {
-      this.coverageRegions = {}
-      this.coverageWarnings = []
-    },
-  },
-  mounted() {
-    this.pathsNeeded = this.isFullMode()
-  },
-  methods: {
-    paths(options) {
-      return this.pathsNeeded
-        ? this.regionIds.reduce((regions, regionId) => {
-            if (
-              this.geometries[this.geometryId][regionId].pathSmall &&
-              (this.geometries[this.geometryId][regionId].type ===
-                options.type) ===
-                (this.geometries[this.geometryId][regionId].subType == null)
-            ) {
-              const visualization = this.regionVisualization(regionId)
-              if (
-                options.severity == null ||
-                visualization.severity === options.severity
-              ) {
-                regions.push({
-                  key: `${regionId}${this.size}${this.index}Path`,
-                  fill: this.loading
-                    ? this.colors[this.theme].missing
-                    : visualization.color,
-                  d: visualization.geom.pathSmall,
-                  opacity: visualization.visible ? '1' : '0',
-                  strokeWidth:
-                    this.geometries[this.geometryId][regionId].type === 'sea' &&
-                    this.geometries[this.geometryId][regionId].subType !==
-                      'lake'
-                      ? this.strokeWidth
-                      : 0,
-                })
-              }
-            }
-            return regions
-          }, [])
-        : []
-    },
-    isFullMode() {
-      return true;
-    },
-  },
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, toRef } from 'vue'
+import type { DayRegions, WarningsMap, Theme } from '@/types'
+import { useMapPaths } from '@/composables/useMapPaths'
+
+// ============================================================================
+// Props
+// ============================================================================
+
+const props = withDefaults(
+  defineProps<{
+    index?: number
+    input?: DayRegions
+    visibleWarnings?: string[]
+    warnings?: WarningsMap | null
+    geometryId?: number
+    loading?: boolean
+    theme?: Theme | string
+  }>(),
+  {
+    index: 0,
+    input: () => ({}) as DayRegions,
+    visibleWarnings: () => [],
+    warnings: null,
+    geometryId: 2021,
+    loading: true,
+    theme: 'light-theme',
+  }
+)
+
+// ============================================================================
+// Local State
+// ============================================================================
+
+const windowWidth = ref<number>(
+  typeof window !== 'undefined' ? window.innerWidth : 0
+)
+const pathsNeeded = ref<boolean>(false)
+const strokeWidthValue = ref<number>(0.6)
+
+// ============================================================================
+// Computed refs for composable
+// ============================================================================
+
+const size = computed<'Large' | 'Small'>(() => 'Small')
+const indexRef = toRef(props, 'index')
+const inputRef = toRef(props, 'input')
+const warningsRef = toRef(props, 'warnings')
+const visibleWarningsRef = toRef(props, 'visibleWarnings')
+const geometryIdRef = toRef(props, 'geometryId')
+const themeRef = toRef(props, 'theme')
+const loadingRef = toRef(props, 'loading')
+
+// ============================================================================
+// Composables
+// ============================================================================
+
+const {
+  strokeColor,
+  bluePaths,
+  greenPaths,
+  yellowPaths,
+  orangePaths,
+  redPaths,
+  overlayPaths,
+  landBorders,
+  seaBorders,
+  yellowCoverages,
+  orangeCoverages,
+  redCoverages,
+  overlayCoverages,
+  coverageRegions,
+  coverageWarnings,
+} = useMapPaths({
+  size,
+  index: indexRef,
+  input: inputRef,
+  warnings: warningsRef,
+  visibleWarnings: visibleWarningsRef,
+  geometryId: geometryIdRef,
+  theme: themeRef,
+  loading: loadingRef,
+  strokeWidth: strokeWidthValue,
+})
+
+// ============================================================================
+// Methods
+// ============================================================================
+
+function updateWidth(): void {
+  windowWidth.value = window.innerWidth
 }
+
+function isFullMode(): boolean {
+  return true
+}
+
+// ============================================================================
+// Watchers
+// ============================================================================
+
+watch(windowWidth, () => {
+  pathsNeeded.value = isFullMode()
+})
+
+watch(
+  () => props.input,
+  () => {
+    coverageRegions.value = {}
+    coverageWarnings.value = []
+  }
+)
+
+// ============================================================================
+// Lifecycle
+// ============================================================================
+
+onMounted(() => {
+  window.addEventListener('resize', updateWidth)
+  pathsNeeded.value = isFullMode()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth)
+})
+
+// ============================================================================
+// Expose for testing
+// ============================================================================
+
+defineExpose({
+  size,
+  strokeWidth: strokeWidthValue,
+  pathsNeeded,
+})
 </script>
 
 <style scoped lang="scss">

package/src/components/PopupRow.vue

@@ -26,19 +26,31 @@
   </div>
 </template>
 
-<script>
-import fields from '../mixins/fields'
+<script setup lang="ts">
+import { toRef } from 'vue'
+import { useFields } from '@/composables/useFields'
+import type { PopupRowInput } from '@/types'
 
-export default {
-  name: 'PopupRow',
-  mixins: [fields],
-  props: {
-    input: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-}
+// Props
+const props = withDefaults(
+  defineProps<{
+    input?: PopupRowInput
+  }>(),
+  {
+    input: () => ({
+      type: '',
+      severity: 0,
+      direction: 0,
+      text: '',
+      interval: '',
+    }),
+  }
+)
+
+// Composables
+const { typeClass, rotation, invertedRotation, severity } = useFields(
+  toRef(props, 'input')
+)
 </script>
 
 <style scoped lang="scss">

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">
@@ -15,15 +15,13 @@
         <div>
           <RegionWarning
             v-for="warning in warningsSummary"
-            :key="warning.key"
+            :key="warning.id"
             :input="warning"
             :language="language">
           </RegionWarning>
         </div>
       </div>
-      <div
-        block
-        :class="['current-warning-toggle', open ? '' : 'collapsed']" />
+      <div block :class="['current-warning-toggle', open ? '' : 'collapsed']" />
     </button>
   </h3>
   <div
@@ -32,128 +30,161 @@
     :aria-labelledby="`accordion-${code}`"
     :aria-expanded="open"
     class="accordion-panel"
-    :hidden="open ? null : ''"
-  >
+    :hidden="open ? undefined : ''">
     <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.id"
+          :input="warning"
+          :theme="theme"
+          :language="language" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
-import config from '../mixins/config'
-import i18n from '../mixins/i18n'
+<script setup lang="ts">
+import { ref, computed, toRef } from 'vue'
+import { useI18n } from '@/composables/useI18n'
+import { useConfig } from '@/composables/useConfig'
 import DescriptionWarning from './DescriptionWarning.vue'
 import RegionWarning from './RegionWarning.vue'
-
-export default {
-  name: 'Region',
-  components: { RegionWarning, DescriptionWarning },
-  mixins: [i18n, config],
-  props: {
-    type: {
-      type: String,
-    },
-    code: {
-      type: String,
-    },
-    name: {
-      type: String,
-    },
-    input: {
-      type: Array,
-      default: () => [],
-    },
-    warnings: {
-      type: Object,
-      default: null,
-    },
-    theme: {
-      type: String,
-      default: 'light-theme',
-    },
-    language: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      open: false,
+import type {
+  Warning,
+  WarningsMap,
+  RegionWarningItem,
+  Theme,
+  Language,
+} from '@/types'
+
+// ============================================================================
+// Props
+// ============================================================================
+
+const props = withDefaults(
+  defineProps<{
+    type?: string
+    code?: string
+    name?: string
+    input?: RegionWarningItem[]
+    warnings?: WarningsMap | null
+    theme?: Theme | string
+    language?: Language
+  }>(),
+  {
+    type: undefined,
+    code: undefined,
+    name: undefined,
+    input: () => [],
+    warnings: null,
+    theme: 'light-theme',
+    language: undefined,
+  }
+)
+
+// ============================================================================
+// Composables
+// ============================================================================
+
+const { t } = useI18n(toRef(() => props.language))
+const { coverageCriterion } = useConfig()
+
+// ============================================================================
+// State
+// ============================================================================
+
+const open = ref<boolean>(false)
+
+// ============================================================================
+// Computed Properties
+// ============================================================================
+
+const identifier = computed<string>(() => {
+  return `accordion-item-${props.code}`
+})
+
+const regionName = computed<string>(() => {
+  return t(props.name)
+})
+
+const warningsSummary = computed<Warning[]>(() => {
+  return props.input.reduce((summaryWarnings: Warning[], warningInfo) => {
+    const firstIdentifier = warningInfo?.identifiers?.[0]
+    if (
+      warningInfo != null &&
+      firstIdentifier != null &&
+      warningInfo.coverage >= coverageCriterion
+    ) {
+      const warning = props.warnings?.[firstIdentifier]
+      if (warning != null) {
+        summaryWarnings.push(warning)
+      }
     }
-  },
-  computed: {
-    identifier() {
-      return `accordion-item-${this.code}`
-    },
-    regionName() {
-      return this.t(this.name)
-    },
-    warningsSummary() {
-      return this.input.reduce((summaryWarnings, warningInfo) => {
-        if (
-          warningInfo != null &&
-          warningInfo.identifiers != null &&
-          warningInfo.identifiers.length > 0 &&
-          warningInfo.coverage >= this.coverageCriterion
-        ) {
-          const warning = this.warnings[warningInfo.identifiers[0]]
-          if (warning != null) {
-            summaryWarnings.push(warning)
+    return summaryWarnings
+  }, [])
+})
+
+const reducedWarnings = computed<Warning[]>(() => {
+  return props.input.reduce(
+    (allWarnings: Warning[], warningInfo) =>
+      allWarnings.concat(
+        warningInfo.identifiers.reduce((identifiers: Warning[], identifier) => {
+          const warning = props.warnings?.[identifier]
+          if (
+            warning != null &&
+            warningsSummary.value.some(
+              (summaryWarning) => summaryWarning.type === warning.type
+            )
+          ) {
+            identifiers.push(warning)
           }
-        }
-        return summaryWarnings
-      }, [])
-    },
-    reducedWarnings() {
-      return this.input.reduce(
-        (allWarnings, warningInfo) =>
-          allWarnings.concat(
-            warningInfo.identifiers.reduce((identifiers, identifier) => {
-              const warning = this.warnings[identifier]
-              if (
-                warning != null &&
-                this.warningsSummary.some(
-                  (summaryWarning) => summaryWarning.type === warning.type
-                )
-              ) {
-                identifiers.push(warning)
-              }
-              return identifiers
-            }, [])
-          ),
-        []
-      )
-    },
-    ariaButton() {
-      return `${
-        this.open
-          ? this.t('infoButtonAriaLabelCloseRegion')
-          : this.t('infoButtonAriaLabelShowRegion')
-      } ${this.regionName} ${this.t('infoButtonAriaLabelValidWarnings')}`
-    },
-    ariaInfo() {
-      return this.reducedWarnings.map(
-        (warning, index) =>
-          `${index > 0 ? ' ' : ''}${this.t(warning.type)}: ${this.t(
-            `warningLevel${warning.severity}`
-          )}.`
-      )
-    },
-  },
-  methods: {
-    onRegionToggle() {
-      this.open = !this.open
-    },
-  },
-}
+          return identifiers
+        }, [])
+      ),
+    []
+  )
+})
+
+const ariaButton = computed<string>(() => {
+  return `${
+    open.value
+      ? t('infoButtonAriaLabelCloseRegion')
+      : t('infoButtonAriaLabelShowRegion')
+  } ${regionName.value} ${t('infoButtonAriaLabelValidWarnings')}`
+})
+
+const ariaInfo = computed<string[]>(() => {
+  return reducedWarnings.value.map(
+    (warning, index) =>
+      `${index > 0 ? ' ' : ''}${t(warning.type)}: ${t(
+        `warningLevel${warning.severity}`
+      )}.`
+  )
+})
+
+// ============================================================================
+// Methods
+// ============================================================================
+
+const onRegionToggle = (): void => {
+  open.value = !open.value
+}
+
+// ============================================================================
+// Expose for tests
+// ============================================================================
+
+defineExpose({
+  open,
+  identifier,
+  regionName,
+  warningsSummary,
+  reducedWarnings,
+  ariaButton,
+  ariaInfo,
+  onRegionToggle,
+})
 </script>
 
 <style scoped lang="scss">
@@ -192,6 +223,7 @@ export default {
 
 button {
   border: none;
+  cursor: pointer;
   &:focus:not(:focus-visible) {
     box-shadow: none;
   }
@@ -366,7 +398,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 +433,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;
 }