= T extends new (...angs: any) => {
2 | $props: infer P
3 | }
4 | ? NonNullable
5 | : T extends (props: infer P, ...args: any) => any
6 | ? P
7 | : {}
8 |
9 | export type DeepRequired = Required<{
10 | [K in keyof T]: T[K] extends Required ? T[K] : DeepRequired
11 | }>
12 |
13 | export const arrayOfAll =
14 | () =>
15 | (
16 | array: U & ([T] extends [U[number]] ? unknown : 'Invalid') & { 0: T },
17 | ) =>
18 | array
19 |
--------------------------------------------------------------------------------
/src/components/analysis/AnalysisUnsupportedChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Unsupported chart type: {{ chart.type }}
5 |
6 |
7 |
8 |
9 |
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | .env
26 | /test-results/
27 | /playwright-report/
28 | /blob-report/
29 | /playwright/.cache/
30 | /test-results/
31 | /playwright-report/
32 | /blob-report/
33 | /playwright/.cache/
34 |
--------------------------------------------------------------------------------
/src/components/general/HighlightMatch.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ match.before }}
3 | {{ match.match }}
4 | {{ match.after }}
5 |
6 |
7 |
20 |
--------------------------------------------------------------------------------
/src/components/wms/panel/OverlayInformationPanel.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | mdi-layers-outline
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
17 |
--------------------------------------------------------------------------------
/.github/release.yml:
--------------------------------------------------------------------------------
1 | # .github/release.yml
2 |
3 | changelog:
4 | exclude:
5 | labels:
6 | - 'rel: ignore'
7 | categories:
8 | - title: New Features
9 | labels:
10 | - 'rel: new feature'
11 |
12 | - title: Improvements
13 | labels:
14 | - 'rel: improvement'
15 |
16 | - title: Fixes
17 | labels:
18 | - 'rel: fix'
19 |
20 | - title: Beta Features
21 | labels:
22 | - 'rel: beta'
23 |
24 | - title: Other Changes
25 | labels:
26 | - '*'
27 |
--------------------------------------------------------------------------------
/src/lib/products/utils.ts:
--------------------------------------------------------------------------------
1 | export function getFileExtension(url: string): string {
2 | const urlParts = url.toLowerCase().split('.')
3 | return urlParts[urlParts.length - 1]
4 | }
5 |
6 | export type ViewMode = 'html' | 'iframe' | 'img' | 'pdf'
7 | export function getViewMode(extension: string): ViewMode {
8 | switch (extension) {
9 | case 'html':
10 | return 'html'
11 | case 'png':
12 | case 'jpg':
13 | case 'jpeg':
14 | return 'img'
15 | case 'pdf':
16 | return 'pdf'
17 | default:
18 | return 'iframe'
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/views/DataDownloadDisplayView.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
21 |
--------------------------------------------------------------------------------
/src/lib/workflows/form.ts:
--------------------------------------------------------------------------------
1 | import { ScenarioData } from '@/lib/whatif'
2 |
3 | export function isBoundingBoxInFormData(data: ScenarioData): boolean {
4 | const properties = Object.keys(data)
5 | return (
6 | properties.includes('xMin') &&
7 | properties.includes('yMin') &&
8 | properties.includes('xMax') &&
9 | properties.includes('yMax')
10 | )
11 | }
12 |
13 | export function isCoordinateInFormData(data: ScenarioData): boolean {
14 | const properties = Object.keys(data)
15 | return properties.includes('latitude') && properties.includes('longitude')
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/webdisplay/WebDisplay.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
24 |
--------------------------------------------------------------------------------
/src/components/analysis/AnalysisAddButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
27 |
--------------------------------------------------------------------------------
/src/stores/globalSearch.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 |
3 | export interface GlobalSearchItem {
4 | id: string
5 | title: string
6 | children?: GlobalSearchItem[]
7 | }
8 |
9 | interface GlobalSearchState {
10 | active: boolean
11 | type: 'locations' | 'parameters' | 'nodes'
12 | items: GlobalSearchItem[]
13 | selectedItems: string[]
14 | }
15 |
16 | const useGlobalSearchState = defineStore('globalSearchState', {
17 | state: (): GlobalSearchState => ({
18 | active: false,
19 | type: 'locations',
20 | items: [],
21 | selectedItems: [],
22 | }),
23 | })
24 |
25 | export { useGlobalSearchState }
26 |
--------------------------------------------------------------------------------
/src/views/auth/Logout.vue:
--------------------------------------------------------------------------------
1 | Redirecting after logout
2 |
3 |
19 |
--------------------------------------------------------------------------------
/docs/public/deployments/delftfews-sa/Modules/weboc/WEB-INF/web.xml:
--------------------------------------------------------------------------------
1 |
2 |
7 | Delft-FEWS Web OC
8 |
9 |
10 | 404
11 | /index.html
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/assets/DefaultBaseMaps.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": "automatic",
4 | "name": "Automatic",
5 | "icon": "mdi-theme-light-dark",
6 | "style": "automatic"
7 | },
8 | {
9 | "id": "light",
10 | "name": "CartoDB (light)",
11 | "icon": "mdi-weather-sunny",
12 | "style": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
13 | "beforeId": "boundary_country_outline"
14 | },
15 | {
16 | "id": "dark",
17 | "name": "CartoDB (dark)",
18 | "icon": "mdi-weather-night",
19 | "style": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
20 | "beforeId": "boundary_country_outline"
21 | }
22 | ]
23 |
--------------------------------------------------------------------------------
/src/components/reports/tiptap/data.css:
--------------------------------------------------------------------------------
1 | .ProseMirror data {
2 | background-position: right;
3 | padding-right: 1.5em;
4 | outline: 2px solid #68cef8;
5 | outline-offset: 2px;
6 | border-radius: 2px;
7 | background-image: url('data:image/svg+xml,');
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/wms/ColourLegendTable.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | |
5 |
6 | |
7 | {{ item.label }} |
8 |
9 |
10 |
11 |
12 |
21 |
22 |
33 |
--------------------------------------------------------------------------------
/src/services/application-config/ApplicationConfig.ts:
--------------------------------------------------------------------------------
1 | import { VBtn } from 'vuetify/components'
2 |
3 | export enum RequestHeaderAuthorization {
4 | BEARER = 'Bearer',
5 | OFF = 'Off',
6 | }
7 |
8 | export type ApplicationConfig = {
9 | VITE_APP_NAME: string
10 | VITE_AUTH_AUTHORITY: string
11 | VITE_AUTH_ID: string
12 | VITE_AUTH_METADATA_URL: string
13 | VITE_AUTH_SCOPE: string
14 | VITE_FEWS_ARCHIVE_WEBSERVICES_URL: string
15 | VITE_FEWS_WEBSERVICES_URL: string
16 | VITE_LOGIN_BUTTON_PROPS: string | VBtn['$props']
17 | VITE_LOGIN_STYLESHEET_URL: string
18 | VITE_REQUEST_HEADER_AUTHORIZATION: RequestHeaderAuthorization
19 | VITE_I18N_LOCALE: string
20 | }
21 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # The Delft-FEWS Web OC Developers Documentation
2 |
3 | ## Definition Of Done
4 |
5 | Before merging a feature into the main branch, the following requirements have to be met:
6 |
7 | - All feature branches have to be reviewed and merged by another developer than the feature developer.
8 | - All unit tests and e2e tests have to succeed: npm run test:unit and test:e2e.
9 | - No lint errors are allowed: npm run lint
10 | - Sonarqube (https://sonarqube.deltares.nl/projects/) reports all A's.
11 | - Code coverage of libraries at least 80%.
12 | - Typescript types have to be used from the libraries.
13 | - Reusable vue components to web components.
14 | - Documentation up to date
15 |
--------------------------------------------------------------------------------
/src/components/reports/tiptap/CustomImage.ts:
--------------------------------------------------------------------------------
1 | import Image from '@tiptap/extension-image'
2 |
3 | export const CustomImage = Image.extend({
4 | addAttributes() {
5 | return {
6 | ...this.parent?.(),
7 |
8 | alt: {
9 | parseHTML: (element) => element.getAttribute('alt'),
10 | },
11 |
12 | src: {
13 | parseHTML: (element) => element.getAttribute('src'),
14 | },
15 |
16 | width: {
17 | parseHTML: (element) => element.getAttribute('width'),
18 | },
19 |
20 | height: {
21 | parseHTML: (element) => element.getAttribute('height'),
22 | },
23 | }
24 | },
25 | })
26 |
27 | export default CustomImage
28 |
--------------------------------------------------------------------------------
/src/lib/topology/componentSettings/mapSettings.ts:
--------------------------------------------------------------------------------
1 | import type { DeepRequired } from '@/lib/utils/types'
2 | import type { MapSettings as PiMapSettings } from '@deltares/fews-pi-requests'
3 |
4 | export type MapSettings = DeepRequired
5 |
6 | export const defaultMapSettings: MapSettings = {
7 | wmsLayer: {
8 | show: true, // TODO: Implement
9 | autoPlay: false, // TODO: Implement
10 | animateVectors: true, // TODO: Implement
11 | doubleClickAction: true,
12 | },
13 | locationsLayer: {
14 | show: true,
15 | locationNames: true, // TODO: Implement
16 | singleClickAction: true,
17 | locationSearchEnabled: true,
18 | },
19 | overlays: [],
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/timeseries/types/SeriesData.ts:
--------------------------------------------------------------------------------
1 | import type { TimeSeriesEvent } from '@deltares/fews-pi-requests'
2 |
3 | export interface SeriesData
4 | extends Pick {
5 | x: Date | number | null
6 | y: number | null
7 | }
8 |
9 | export interface SeriesArrayData
10 | extends Pick {
11 | x: Date | number | null
12 | y: (number | null)[]
13 | }
14 |
15 | export interface TimeSeriesData extends SeriesData {
16 | x: Date
17 | }
18 |
19 | export function isSeriesArrayData(
20 | data: SeriesData | SeriesArrayData,
21 | ): data is SeriesArrayData {
22 | return Array.isArray(data.y)
23 | }
24 |
--------------------------------------------------------------------------------
/src/lib/display/DisplayConfig.ts:
--------------------------------------------------------------------------------
1 | import { ChartConfig } from '../charts/types/ChartConfig.js'
2 | import { ActionPeriod, ActionRequest } from '@deltares/fews-pi-requests'
3 |
4 | export enum DisplayType {
5 | TimeSeriesChart = 'TimeSeriesChart',
6 | TimeSeriesTable = 'TimeSeriesTable',
7 | ElevationChart = 'ElevationChart',
8 | Information = 'Information',
9 | }
10 |
11 | export interface DisplayConfig {
12 | id: string
13 | nodeId: string | undefined
14 | plotId: string | undefined
15 | index: number | undefined
16 | title: string
17 | forecastLegend: string | undefined
18 | class: string
19 | requests: ActionRequest[]
20 | period: ActionPeriod | undefined
21 | subplots: ChartConfig[]
22 | }
23 |
--------------------------------------------------------------------------------
/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 | // Vuetify
2 | import { toHumanReadableDate } from '@/lib/date'
3 | import '@/styles/main.scss'
4 | import '@mdi/font/css/materialdesignicons.css'
5 | import { createVuetify } from 'vuetify'
6 | import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
7 | import { i18n } from './i18n'
8 | import { useI18n } from 'vue-i18n'
9 |
10 | const vuetify = createVuetify({
11 | locale: {
12 | adapter: createVueI18nAdapter({ i18n, useI18n }),
13 | },
14 | defaults: {
15 | VBtn: {
16 | variant: 'text',
17 | },
18 | VDateInput: {
19 | displayFormat: toHumanReadableDate,
20 | placeholder: 'dd/mm/yyyy',
21 | },
22 | },
23 | })
24 |
25 | export default vuetify
26 |
--------------------------------------------------------------------------------
/src/lib/requests/transformRequest.ts:
--------------------------------------------------------------------------------
1 | import { authenticationManager } from '@/services/authentication/AuthenticationManager.ts'
2 |
3 | export function createTransformRequestFn(controller?: AbortController) {
4 | return async (request: Request): Promise => {
5 | return Promise.resolve(
6 | authenticationManager.transformRequestAuth(request, controller?.signal),
7 | )
8 | }
9 | }
10 |
11 | export function mergeHeaders(headers1: Headers, headers2: Headers): Headers {
12 | const mergedHeaders = new Headers()
13 | headers1.forEach((value, key) => {
14 | mergedHeaders.set(key, value)
15 | })
16 | headers2.forEach((value, key) => {
17 | mergedHeaders.set(key, value)
18 | })
19 | return mergedHeaders
20 | }
21 |
--------------------------------------------------------------------------------
/src/views/InformationDisplayView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | No information document configured
5 |
6 |
7 |
8 |
26 |
--------------------------------------------------------------------------------
/src/assets/JsonFormsConfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "vuetify": {
3 | "v-text-field": {
4 | "density": "compact",
5 | "variant": "outlined",
6 | "hide-details": "auto",
7 | "persistent-hint": true
8 | },
9 | "v-number-input": {
10 | "precision": 2,
11 | "density": "compact",
12 | "variant": "outlined",
13 | "hide-details": "auto",
14 | "persistent-hint": true
15 | },
16 | "v-container": {
17 | "class": "pa-0",
18 | "density": "compact"
19 | },
20 | "v-select": {
21 | "density": "compact",
22 | "variant": "outlined",
23 | "hide-details": "auto"
24 | },
25 | "v-col": {
26 | "class": "pa-2"
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/lib/taskruns/utils.ts:
--------------------------------------------------------------------------------
1 | import { TaskRun } from './types'
2 |
3 | export function sortTasks(a: TaskRun, b: TaskRun): number {
4 | const hasDispatchTimeA = a.dispatchTimestamp !== null
5 | const hasDispatchTimeB = b.dispatchTimestamp !== null
6 | if (!hasDispatchTimeA && !hasDispatchTimeB) {
7 | // If both tasks are pending, sort by workflowId.
8 | return a.workflowId.localeCompare(b.workflowId)
9 | } else if (!hasDispatchTimeA) {
10 | // If A is pending and B is not, return A.
11 | return -1
12 | } else if (!hasDispatchTimeB) {
13 | // If B is pending and A is not, return B.
14 | return 1
15 | } else {
16 | // Otherwise, sort by timestamp.
17 | return b.dispatchTimestamp! - a.dispatchTimestamp!
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/wms/locations/LocationsCircleLayer.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
28 |
--------------------------------------------------------------------------------
/src/lib/charts/getUniqueSeriesIds.ts:
--------------------------------------------------------------------------------
1 | import { uniq, uniqBy } from 'lodash-es'
2 | import type { ChartSeries } from './types/ChartSeries.js'
3 |
4 | export function getUniqueSeriesIds(series: ChartSeries[] | undefined) {
5 | // Some ChartSeries appear twice in the ChartConfig; once for a line and once for a marker.
6 | // Only one of these has to be included in the table.
7 | if (series === undefined) return []
8 | return uniq(
9 | series.filter((series) => series.visibleInTable).map((series) => series.id),
10 | )
11 | }
12 |
13 | export function getUniqueSeries(series: ChartSeries[] | undefined) {
14 | if (series === undefined) return []
15 | return uniqBy(
16 | series.filter((series) => series.visibleInTable),
17 | 'id',
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/lib/date/convertFewsPiDateTimeToJsDate.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from 'vitest'
2 |
3 | import { convertFewsPiDateTimeToJsDate } from '.'
4 |
5 | test('parses a FEWS PI date/time object to a Date object without timezone offset', () => {
6 | const fewsDatetime = { date: '2021-07-01', time: '12:00:00' }
7 | const result = convertFewsPiDateTimeToJsDate(fewsDatetime, 'Z')
8 | expect(result).toEqual(new Date('2021-07-01T12:00:00Z'))
9 | })
10 |
11 | test('parses a FEWS PI date/time object to a Date object with a timezone offset', () => {
12 | const fewsDatetime = { date: '2021-07-01', time: '12:00:00' }
13 | const result = convertFewsPiDateTimeToJsDate(fewsDatetime, '+02:00')
14 | expect(result).toEqual(new Date('2021-07-01T12:00:00+02:00'))
15 | })
16 |
--------------------------------------------------------------------------------
/src/stores/alerts.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 |
3 | export type AlertType = 'success' | 'error' | 'warning' | 'info'
4 |
5 | export interface Alert {
6 | id: string
7 | type: AlertType
8 | message: string
9 | }
10 |
11 | interface AlertState {
12 | alerts: Alert[]
13 | }
14 |
15 | const useAlertsStore = defineStore('alerts', {
16 | state: (): AlertState => ({
17 | alerts: [],
18 | }),
19 |
20 | actions: {
21 | addAlert(alert: Alert) {
22 | this.alerts.push(alert)
23 | },
24 | removeAlert(id: string) {
25 | this.alerts = this.alerts.filter((alert) => alert.id !== id)
26 | },
27 | },
28 |
29 | getters: {
30 | hasAlerts: (state) => state.alerts.length > 0,
31 | },
32 | })
33 |
34 | export { useAlertsStore }
35 |
--------------------------------------------------------------------------------
/src/components/thresholds/ThresholdSummaryChip.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 | {{ count }}
12 |
13 |
14 |
15 |
28 |
29 |
35 |
--------------------------------------------------------------------------------
/src/stores/locationNames.ts:
--------------------------------------------------------------------------------
1 | import { shallowRef } from 'vue'
2 | import { defineStore } from 'pinia'
3 | import { Location } from '@deltares/fews-pi-requests'
4 |
5 | export const useLocationNamesStore = defineStore('locationNames', () => {
6 | const locationNames = shallowRef>(new Map())
7 |
8 | function byId(locationId: string) {
9 | return locationNames.value.get(locationId)
10 | }
11 |
12 | function addLocationNames(locations: Location[]) {
13 | locations.forEach((location) => {
14 | locationNames.value.set(
15 | location.locationId,
16 | location.locationName ?? location.shortName ?? location.locationId,
17 | )
18 | })
19 | }
20 |
21 | return {
22 | byId,
23 | addLocationNames,
24 | }
25 | })
26 |
--------------------------------------------------------------------------------
/src/services/authentication/oidcSettings.ts:
--------------------------------------------------------------------------------
1 | import { UserManagerSettings } from 'oidc-client-ts'
2 |
3 | export function getOidcSettings() {
4 | const baseUrl = window.location.origin + import.meta.env.BASE_URL
5 | const oidcSettings: UserManagerSettings = {
6 | authority: `${import.meta.env.VITE_AUTH_AUTHORITY}`,
7 | metadataUrl: `${import.meta.env.VITE_AUTH_METADATA_URL}`,
8 | client_id: `${import.meta.env.VITE_AUTH_ID}`,
9 | redirect_uri: `${baseUrl}auth/callback`,
10 | silent_redirect_uri: `${baseUrl}auth/silent`,
11 | response_type: `code`,
12 | scope: `${import.meta.env.VITE_AUTH_SCOPE}`,
13 | post_logout_redirect_uri: `${baseUrl}auth/logout`,
14 | monitorSession: false,
15 | automaticSilentRenew: true,
16 | }
17 | return oidcSettings
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/wms/ColourLegend.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
19 |
20 |
31 |
--------------------------------------------------------------------------------
/src/lib/analysis/resampling.ts:
--------------------------------------------------------------------------------
1 | import type { TimeSeriesFilter } from '@deltares/fews-pi-requests'
2 | import { arrayOfAll } from '@/lib/utils/types'
3 |
4 | export type ResamplingMethod = {
5 | label: string
6 | // FIXME: Percentile currently does not work in the backend
7 | value: Exclude['resamplingMethod'], 'percentile'>
8 | }
9 |
10 | const arrayOfAllResamplingMethods = arrayOfAll()
11 | export const resamplingMethods = arrayOfAllResamplingMethods([
12 | { label: 'Minimum', value: 'minimum' },
13 | { label: 'Maximum', value: 'maximum' },
14 | { label: 'Mean', value: 'mean' },
15 | { label: 'Mean (time weighted)', value: 'mean_over_time' },
16 | { label: 'Sum', value: 'sum' },
17 | { label: 'Instantaneous', value: 'instantaneous' },
18 | ])
19 |
--------------------------------------------------------------------------------
/src/views/HtmlDisplayView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
24 |
--------------------------------------------------------------------------------
/src/components/analysis/AnalysisMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
32 |
--------------------------------------------------------------------------------
/src/components/reports/tiptap/Data.ts:
--------------------------------------------------------------------------------
1 | import { Mark, mergeAttributes } from '@tiptap/core'
2 |
3 | export interface DataOptions {
4 | /**
5 | * A list of HTML attributes to be rendered.
6 | */
7 | HTMLAttributes: Record
8 | }
9 |
10 | const Data = Mark.create({
11 | name: 'data',
12 | priority: 1000,
13 | keepOnSplit: false,
14 |
15 | addAttributes() {
16 | return {
17 | value: {
18 | parseHTML: (element) => element.getAttribute('value'),
19 | },
20 | }
21 | },
22 |
23 | parseHTML() {
24 | return [{ tag: 'data' }]
25 | },
26 |
27 | renderHTML({ HTMLAttributes }) {
28 | return [
29 | 'data',
30 | mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
31 | 0,
32 | ]
33 | },
34 | })
35 |
36 | export default Data
37 |
--------------------------------------------------------------------------------
/.github/workflows/playwright.yml:
--------------------------------------------------------------------------------
1 | name: Playwright Tests
2 | on:
3 | push:
4 | branches: [main, master]
5 | pull_request:
6 | branches: [main, master]
7 | jobs:
8 | test:
9 | timeout-minutes: 60
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v4
13 | - uses: actions/setup-node@v4
14 | with:
15 | node-version: lts/*
16 | - name: Install dependencies
17 | run: npm ci
18 | - name: Install Playwright Browsers
19 | run: npx playwright install --with-deps
20 | - name: Run Playwright componemnt tests
21 | run: npm run test:component
22 | - uses: actions/upload-artifact@v4
23 | if: always()
24 | with:
25 | name: playwright-report
26 | path: playwright-report/
27 | retention-days: 30
28 |
--------------------------------------------------------------------------------
/public/css/login.css:
--------------------------------------------------------------------------------
1 | .weboc-login__main {
2 | background-image: url('../images/D111-103_getijdenland_small.jpg');
3 | background-position-x: center;
4 | background-size: cover;
5 | width: 100vw;
6 | height: 100vh;
7 | overflow-y: auto;
8 | display: flex;
9 | }
10 |
11 | @media only screen and (min-width: 2561px),
12 | only screen and (min-width: 1281px) and (min-device-pixel-ratio: 2) {
13 | .weboc-login__main {
14 | background-image: url('../images/D111-103_103_getijdenland.jpg');
15 | }
16 | }
17 |
18 | .weboc-login__container {
19 | display: block;
20 | width: 600px;
21 | height: 400px;
22 | margin: auto;
23 | text-align: center;
24 | }
25 |
26 | .weboc-login__title {
27 | color: white;
28 | text-shadow: 2px 2px 4px #000000;
29 | background-clip: text;
30 | padding-bottom: 20px;
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/general/LoadingSpinner.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
34 |
35 |
43 |
--------------------------------------------------------------------------------
/.github/workflows/npm-test.yml:
--------------------------------------------------------------------------------
1 | name: Run npm test & npm lint on Pull Requests
2 |
3 | on:
4 | - pull_request
5 |
6 | jobs:
7 | build:
8 | runs-on: ubuntu-latest
9 | steps:
10 | - uses: actions/checkout@v2
11 | - uses: actions/setup-node@v1
12 | with:
13 | node-version: 22
14 | - run: npm ci
15 |
16 | - name: Run unit tests
17 | run: npm run test:unit
18 |
19 | # - name: Test Report
20 | # uses: dorny/test-reporter@v1
21 | # if: success() || failure() # run this step even if previous step failed
22 | # with:
23 | # name: JEST Tests # Name of the check run which will be created
24 | # path: reports/junit.xml # Path to test results
25 | # reporter: jest-junit # Format of test results
26 |
27 | - name: Run linter
28 | run: npm run lint
29 |
--------------------------------------------------------------------------------
/src/lib/analysis/serializer.ts:
--------------------------------------------------------------------------------
1 | export interface Serializer {
2 | read: (raw: string) => T
3 | write: (value: T) => string
4 | }
5 |
6 | export function getJsonSerializer(): Serializer {
7 | return {
8 | read: (value) => JSON.parse(value),
9 | write: (value) => JSON.stringify(value),
10 | }
11 | }
12 |
13 | export function getDateTimeSerializer(): Serializer {
14 | return {
15 | read: (value) => JSON.parse(value, dateTimeReviver),
16 | write: (value) => JSON.stringify(value),
17 | }
18 | }
19 |
20 | function isIsoDate(str: string) {
21 | return /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)
22 | }
23 |
24 | const dateTimeReviver = (_: unknown, value: unknown) => {
25 | if (typeof value === 'string') {
26 | if (isIsoDate(value)) {
27 | return new Date(value)
28 | }
29 | }
30 | return value
31 | }
32 |
--------------------------------------------------------------------------------
/src/lib/charts/horizontalColorCode.ts:
--------------------------------------------------------------------------------
1 | import { SeriesArrayData, SeriesData } from '../timeseries/types/SeriesData'
2 | import type { ChartSeries } from './types/ChartSeries'
3 |
4 | export function getColorMap(classBreaks: ChartSeries['classBreaks']) {
5 | return (value: number): string => {
6 | const breakpoint = classBreaks?.findLast(
7 | (breakpoint) => value >= breakpoint.lowerValue,
8 | )
9 | return breakpoint?.color ?? 'black'
10 | }
11 | }
12 |
13 | export function horizontalColorCodeDataFromData(
14 | series: ChartSeries,
15 | data: (SeriesData | SeriesArrayData)[],
16 | ) {
17 | return data
18 | .filter(
19 | (event, index, arr) =>
20 | index === 0 || index === arr.length - 1 || arr[index + 1].y !== event.y,
21 | )
22 | .map(({ x, y }) => ({
23 | x,
24 | y: series.name,
25 | color: y,
26 | }))
27 | }
28 |
--------------------------------------------------------------------------------
/tests/e2e/chart/threshold.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test'
2 |
3 | const base = '/topology/early_warning/node'
4 |
5 | test.describe('Thresholds displayed in graph', () => {
6 | test('should display the thresholds correctly', async ({ page }) => {
7 | await page.goto(
8 | `${base}/viewer_rivers_level_stations/viewer_rivers_level_stations_forecast/map/waterdepth_sfincs_inland/location/Umgeni_Mouth_level`,
9 | )
10 | // Verify three thresholds are displayed in the graph
11 | const alertGroup = page.locator('g').filter({ hasText: /^Alert$/ })
12 | await expect(alertGroup).toBeVisible()
13 | const watch = page.locator('g').filter({ hasText: /^Watch$/ })
14 | await expect(watch).toBeVisible()
15 | const warning = page.locator('g').filter({ hasText: /^Warning$/ })
16 | await expect(warning).toBeVisible()
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 |
2 | ## Pull Request Template
3 |
4 | ### Description
5 |
6 | Please provide a brief description of the changes made in this pull request.
7 |
8 | ### Screenshots (if applicable)
9 |
10 | If there are any visual changes, please attach screenshots here.
11 |
12 | ### Link to documentation (if applicable)
13 |
14 | Add link to public Github pages (only documentation about configuration)
15 |
16 | ### Checklist
17 | - [ ] Make the title short and concise
18 | - [ ] Select the correct label to include it in the release notes:
19 | - `rel: new feature`
20 | - `rel: improvement`
21 | - `rel: fixes`
22 | - `rel: ignore`
23 | Select to `rel: ignore` if this pull request fixes a New Feature or Improvement in the coming release. Update related Pull Request.
24 | - [ ] Update documentation.
25 | - [ ] Update tests.
26 |
--------------------------------------------------------------------------------
/src/components/reports/tiptap/time.css:
--------------------------------------------------------------------------------
1 | .ProseMirror time {
2 | background-position: right;
3 | padding-right: 1.5em;
4 | outline: 2px solid #68cef8;
5 | outline-offset: 2px;
6 | border-radius: 2px;
7 | background-image: url('data:image/svg+xml;utf8,');
8 | }
9 |
10 | img {
11 | &.ProseMirror-selectednode {
12 | outline: 3px solid #68cef8;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/views/DashboardView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | No dashboard available
4 |
5 |
6 |
24 |
--------------------------------------------------------------------------------
/src/components/wms/OverlayLayer.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
33 |
--------------------------------------------------------------------------------
/src/layouts/EmptyLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
29 |
30 |
43 |
--------------------------------------------------------------------------------
/src/lib/utils/absoluteUrl.test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @vitest-environment jsdom
3 | */
4 |
5 | import { expect, test } from 'vitest'
6 | import { absoluteUrl } from './absoluteUrl'
7 |
8 | test("absolute url from '/'", () => {
9 | expect(absoluteUrl('/')).toEqual(new URL('http://localhost:3000/'))
10 | })
11 |
12 | test('absolute url from relative url string', () => {
13 | expect(absoluteUrl('url')).toEqual(new URL('http://localhost:3000/url'))
14 | })
15 |
16 | test('absolute url from relative /url string', () => {
17 | expect(absoluteUrl('/url')).toEqual(new URL('http://localhost:3000/url'))
18 | })
19 |
20 | test('absolute url from relative /url/ string', () => {
21 | expect(absoluteUrl('/url/')).toEqual(new URL('http://localhost:3000/url/'))
22 | })
23 |
24 | test('absolute url from absolute url string', () => {
25 | expect(absoluteUrl('http://localhost:3000/url')).toEqual(
26 | new URL('http://localhost:3000/url'),
27 | )
28 | })
29 |
--------------------------------------------------------------------------------
/src/services/useBaseMap/index.ts:
--------------------------------------------------------------------------------
1 | import { getResourcesStaticUrl } from '@/lib/fews-config'
2 | import { useBaseMapsStore } from '@/stores/baseMaps'
3 | import { useUserSettingsStore } from '@/stores/userSettings'
4 | import { useDark } from '@vueuse/core'
5 | import { computed } from 'vue'
6 |
7 | export function useBaseMap() {
8 | const baseMapsStore = useBaseMapsStore()
9 | const userSettingsStore = useUserSettingsStore()
10 |
11 | const isDark = useDark()
12 |
13 | const baseMap = computed(() => {
14 | const baseMapId = userSettingsStore.get('ui.map.theme')?.value as
15 | | string
16 | | undefined
17 | return baseMapsStore.getBaseMapById(baseMapId ?? 'automatic', isDark.value)
18 | })
19 |
20 | const mapStyle = computed(() => {
21 | const style = baseMap.value.style
22 | return style.startsWith('http') ? style : getResourcesStaticUrl(style)
23 | })
24 |
25 | return {
26 | baseMap,
27 | mapStyle,
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/logdisplay/LogDisplay.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
33 |
--------------------------------------------------------------------------------
/src/lib/charts/thresholds.ts:
--------------------------------------------------------------------------------
1 | import { TimeSeriesDisplaySubplotItem } from '@deltares/fews-pi-requests'
2 | import { ThresholdLine } from './types/ThresholdLine'
3 |
4 | export function isUniqueThreshold(
5 | threshold: ThresholdLine,
6 | index: number,
7 | thresholds: ThresholdLine[],
8 | ): boolean {
9 | return (
10 | thresholds.findIndex(
11 | (t) =>
12 | t.value === threshold.value && t.description === threshold.description,
13 | ) === index
14 | )
15 | }
16 |
17 | export function getThresholdValues(
18 | thresholds: ThresholdLine[],
19 | thresholdAxisScaling: TimeSeriesDisplaySubplotItem['thresholdAxisScaling'],
20 | ): number[] {
21 | const values = thresholds.map((t) => t.value) ?? []
22 | switch (thresholdAxisScaling) {
23 | case 'two thresholds':
24 | return values.slice(0, 2)
25 | case 'no thresholds':
26 | return []
27 | case 'all thresholds':
28 | default:
29 | return values
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/lib/topology/getTopologyNodes.ts:
--------------------------------------------------------------------------------
1 | import { configManager } from '@/services/application-config/index.ts'
2 | import {
3 | PiWebserviceProvider,
4 | type TopologyNode,
5 | } from '@deltares/fews-pi-requests'
6 | import { createTransformRequestFn } from '@/lib/requests/transformRequest'
7 |
8 | /**
9 | * Fetch the topology nodes from the FEWS web services.
10 | *
11 | * @returns {Promise} - An array of TopologyNode objects.
12 | */
13 | export async function getTopologyNodes(): Promise {
14 | const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
15 | const piProvider = new PiWebserviceProvider(baseUrl, {
16 | transformRequestFn: createTransformRequestFn(),
17 | })
18 |
19 | let nodes: TopologyNode[] = []
20 | try {
21 | const response = await piProvider.getTopologyNodes()
22 | nodes = response.topologyNodes
23 | } catch (error) {
24 | error = 'error-loading'
25 | }
26 |
27 | return nodes
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/table/TableTooltip.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | mdi-flag-variant
4 | {{ props.flagName }}
5 |
6 |
7 | mdi-access-point
8 | {{ props.flagSource }}
9 |
10 |
11 | mdi-comment {{ props.comment }}
12 |
13 | mdi-account {{ props.user }}
14 |
15 |
16 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/src/components/tasksdisplay/AvailableWorkflowServers.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Number of available servers: {{ formattedNumAvailableServers }}
4 |
5 |
6 |
27 |
--------------------------------------------------------------------------------
/src/services/useFocusAwareInterval/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | useIntervalFn,
3 | useDocumentVisibility,
4 | type Fn,
5 | type UseIntervalFnOptions,
6 | } from '@vueuse/core'
7 | import { type MaybeRefOrGetter, ref, watch } from 'vue'
8 |
9 | export function useFocusAwareInterval(
10 | callback: Fn,
11 | interval?: MaybeRefOrGetter,
12 | options?: UseIntervalFnOptions,
13 | ) {
14 | const visibility = useDocumentVisibility()
15 |
16 | const pausable = useIntervalFn(callback, interval, options)
17 | const { pause, resume, isActive } = pausable
18 |
19 | const pausedByVisibility = ref(false)
20 | watch(visibility, (v) => {
21 | if (v === 'visible') {
22 | if (pausedByVisibility.value) {
23 | resume()
24 | pausedByVisibility.value = false
25 | }
26 | } else {
27 | if (isActive.value) {
28 | pause()
29 | pausedByVisibility.value = true
30 | }
31 | }
32 | })
33 |
34 | return pausable
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/tasks/WorkflowFilterControl.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
32 |
--------------------------------------------------------------------------------
/.github/workflows/npm-build.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
3 |
4 | name: Run npm build
5 |
6 | on:
7 | push:
8 | branches: ['main', 'next']
9 | pull_request:
10 | branches: ['main', 'next']
11 |
12 | jobs:
13 | build:
14 | runs-on: ubuntu-latest
15 |
16 | strategy:
17 | matrix:
18 | node-version: [20, 22, 24]
19 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
20 |
21 | steps:
22 | - uses: actions/checkout@v4
23 | - name: Use Node.js ${{ matrix.node-version }}
24 | uses: actions/setup-node@v4
25 | with:
26 | node-version: ${{ matrix.node-version }}
27 | cache: 'npm'
28 | - run: npm ci
29 | - run: npm run build --if-present
30 |
--------------------------------------------------------------------------------
/src/components/general/HtmlDisplay.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Resource not found
4 |
5 |
6 |
30 |
31 |
41 |
--------------------------------------------------------------------------------
/src/lib/icons/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Checks if the given character is a digit (0-9).
3 | *
4 | * @param char - The character to check.
5 | * @returns True if the character is a digit, false otherwise.
6 | */
7 | function isDigit(char: string) {
8 | return /^[0-9]$/.test(char)
9 | }
10 |
11 | /**
12 | * Converts the first character of the given title to a corresponding Material Design Icon class.
13 | * If the first character is a digit, it returns a numeric box outline icon.
14 | * If the first character is a letter, it returns an alpha circle outline icon.
15 | *
16 | * @param title - The title from which to extract the first character.
17 | * @returns The corresponding Material Design Icon class.
18 | */
19 | export function toCharacterIcon(title: string, postfix: string = '') {
20 | const firstCharacter = title.trim().toLowerCase().charAt(0)
21 | if (isDigit(firstCharacter)) {
22 | return `mdi-numeric-${firstCharacter}${postfix}`
23 | }
24 | return `mdi-alpha-${firstCharacter}${postfix}`
25 | }
26 |
--------------------------------------------------------------------------------
/src/services/useOverlays/index.ts:
--------------------------------------------------------------------------------
1 | import type { Overlay } from '@deltares/fews-pi-requests'
2 | import { computed, ref, toValue, watch, type MaybeRefOrGetter } from 'vue'
3 |
4 | export function useOverlays(overlays: MaybeRefOrGetter) {
5 | const selectedOverlayIds = ref([])
6 |
7 | watch(
8 | () => toValue(overlays),
9 | (newOverlays, oldOverlays) => {
10 | if (JSON.stringify(newOverlays) === JSON.stringify(oldOverlays)) return
11 |
12 | selectedOverlayIds.value = newOverlays
13 | .filter((overlay) => overlay.type === 'overLay' && overlay.visible)
14 | .map((overlay) => overlay.id)
15 | .filter((id) => id !== undefined)
16 | },
17 | { immediate: true },
18 | )
19 | const selectedOverlays = computed(() => {
20 | return toValue(overlays).filter(
21 | (overlay) => overlay.id && selectedOverlayIds.value.includes(overlay.id),
22 | )
23 | })
24 |
25 | return {
26 | selectedOverlayIds,
27 | selectedOverlays,
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/analysis/DataAnalysisDisplay.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
31 |
--------------------------------------------------------------------------------
/src/components/analysis/AnalysisLineStyleEdit.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
36 |
--------------------------------------------------------------------------------
/src/views/WhatIfDisplayView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
29 |
--------------------------------------------------------------------------------
/src/lib/legend/index.ts:
--------------------------------------------------------------------------------
1 | import type { Style } from '@deltares/fews-wms-requests'
2 | import type { ColourMap } from '@deltares/fews-web-oc-charts'
3 | import type { Range } from '@/stores/colourScales'
4 | import type { ChartSeries } from '@/lib/charts/types/ChartSeries'
5 |
6 | export function rangeToString(range: Range): string {
7 | return `${range.min},${range.max}`
8 | }
9 |
10 | export function styleToId(style: Style) {
11 | return style.name ?? style.title
12 | }
13 |
14 | export function legendToRange(legend: ColourMap): Range {
15 | return {
16 | min: legend[0].lowerValue,
17 | max: legend[legend.length - 1].lowerValue,
18 | }
19 | }
20 |
21 | export function getSeriesByLegend(series: ChartSeries[]) {
22 | const seriesByLegend: Record = {}
23 | series
24 | .filter((s) => s.visibleInLegend)
25 | .forEach((s) => {
26 | if (!seriesByLegend[s.name]) {
27 | seriesByLegend[s.name] = []
28 | }
29 | seriesByLegend[s.name].push(s)
30 | })
31 | return seriesByLegend
32 | }
33 |
--------------------------------------------------------------------------------
/src/lib/period/convert.ts:
--------------------------------------------------------------------------------
1 | import { ActionPeriod } from '@deltares/fews-pi-requests'
2 | import { AbsolutePeriod, RelativePeriod } from './types'
3 | import { convertFewsPiDateTimeToJsDate } from '@/lib/date'
4 |
5 | export function convertRelativeToAbsolutePeriod(
6 | relative: RelativePeriod,
7 | reference?: Date,
8 | ): AbsolutePeriod {
9 | const referenceTimestamp = reference?.getTime() ?? Date.now()
10 | return {
11 | startTimestamp: referenceTimestamp + relative.startOffsetSeconds * 1000,
12 | endTimestamp: referenceTimestamp + relative.endOffsetSeconds * 1000,
13 | }
14 | }
15 |
16 | export function convertActionPeriodToDomain(
17 | period: ActionPeriod | undefined,
18 | ): [Date, Date] | undefined {
19 | const startTime = period?.startDate
20 | ? convertFewsPiDateTimeToJsDate(period.startDate)
21 | : undefined
22 |
23 | const endTime = period?.endDate
24 | ? convertFewsPiDateTimeToJsDate(period.endDate)
25 | : undefined
26 |
27 | if (!startTime || !endTime) return
28 | return [startTime, endTime]
29 | }
30 |
--------------------------------------------------------------------------------
/src/lib/topology/componentSettings/settings.ts:
--------------------------------------------------------------------------------
1 | import {
2 | defaultChartSettings,
3 | defaultMapSettings,
4 | defaultSchematicStatusDisplaySettings,
5 | defaultReportSettings,
6 | } from '.'
7 | import { WebOCComponentSettingsClass } from '@deltares/fews-pi-requests'
8 | import { DeepRequired } from '@/lib/utils/types'
9 | import { merge } from 'lodash-es'
10 |
11 | export type ComponentSettings = DeepRequired
12 |
13 | export function getDefaultSettings(): ComponentSettings {
14 | return {
15 | id: '',
16 | map: defaultMapSettings,
17 | ssd: defaultSchematicStatusDisplaySettings,
18 | charts: defaultChartSettings,
19 | report: defaultReportSettings,
20 | }
21 | }
22 |
23 | export function getSettings(
24 | componentSettings: (WebOCComponentSettingsClass | undefined)[],
25 | ): WebOCComponentSettingsClass {
26 | const defaultSettings = getDefaultSettings()
27 | const settings = componentSettings.filter((s) => s !== undefined)
28 | return merge({}, defaultSettings, ...settings)
29 | }
30 |
--------------------------------------------------------------------------------
/src/stores/sidePanel.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 | import { ref } from 'vue'
3 |
4 | export type SidePanel =
5 | | 'tasks'
6 | | 'thresholds'
7 | | 'info'
8 | | 'workflows'
9 | | 'visualize'
10 | | 'import'
11 |
12 | export const useSidePanelStore = defineStore('sidePanel', () => {
13 | const activeSidePanel = ref()
14 |
15 | function isActive(sidePanel: SidePanel): boolean {
16 | return activeSidePanel.value === sidePanel
17 | }
18 |
19 | function toggleActive(sidePanel: SidePanel): void {
20 | if (activeSidePanel.value === sidePanel) {
21 | activeSidePanel.value = undefined
22 | } else {
23 | activeSidePanel.value = sidePanel
24 | }
25 | }
26 |
27 | function setActive(sidePanel: SidePanel): void {
28 | activeSidePanel.value = sidePanel
29 | }
30 |
31 | function close(): void {
32 | activeSidePanel.value = undefined
33 | }
34 |
35 | return {
36 | activeSidePanel,
37 | isActive,
38 | toggleActive,
39 | setActive,
40 | close,
41 | }
42 | })
43 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2023", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "preserve",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | /* Enable when vue-slider-component fixed its code*/
21 | "noUnusedParameters": false,
22 | "noFallthroughCasesInSwitch": true,
23 | "experimentalDecorators": true,
24 |
25 | /* Paths */
26 | "baseUrl": ".",
27 | "paths": {
28 | "@/*": ["src/*"]
29 | }
30 | },
31 | "include": [
32 | "src/**/*.ts",
33 | "src/**/*.d.ts",
34 | "src/**/*.tsx",
35 | "src/**/*.vue",
36 | "types/**/*.d.ts"
37 | ],
38 | "references": [{ "path": "./tsconfig.node.json" }]
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/general/ColumnItemIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 |
13 |
35 |
36 |
44 |
--------------------------------------------------------------------------------
/tests/docker/zap/docker-compose.yaml:
--------------------------------------------------------------------------------
1 | version: '3'
2 | # De weboc is expected to be in de weboc folder and will be mounted to the app folder of nginx.
3 | # The nginx.conf file adds security related headers.
4 | # On windows the volume mounts need to be absolute paths. PWD is not working.
5 | services:
6 | # https://cli.vuejs.org/guide/deployment.html#docker-nginx
7 | nginx-weboc:
8 | container_name: nginx-weboc
9 | image: nginx:latest
10 | volumes:
11 | - ./weboc:/app:rw
12 | - ./nginx.conf:/etc/nginx/nginx.conf
13 | restart: always
14 | ports:
15 | - '80:80'
16 |
17 | # The report ./folder is mounted to generate the zap report.
18 | # The web-zap.conf contains the exclusions that are marked as false positives.
19 | zap:
20 | container_name: zap
21 | image: ghcr.io/zaproxy/zaproxy
22 | command: 'zap-full-scan.py -t http://nginx-weboc -j -g gen.conf -j -c /weboc-zap.conf -r report.html -x report.xml -J report.json'
23 | volumes:
24 | - ./weboc-zap.conf:/weboc-zap.conf:ro
25 | - ./report:/zap/wrk/:rw
26 |
--------------------------------------------------------------------------------
/src/components/charts/LoadingOverlay.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
30 |
31 |
43 |
--------------------------------------------------------------------------------
/src/components/products/ProductDetails.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 | {{ product.attributes.author ?? 'Unknown' }}
12 |
13 |
14 | {{ product.attributes.name ?? product.key }}
15 |
16 |
17 | {{ product.timeZero }}
18 |
19 |
20 |
21 |
22 |
40 |
--------------------------------------------------------------------------------
/src/services/useChartHandlers/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ModifierKey,
3 | MouseButton,
4 | PanHandler,
5 | PanningDirection,
6 | ZoomHandler,
7 | ZoomMode,
8 | } from '@deltares/fews-web-oc-charts'
9 | import { inject, provide } from 'vue'
10 |
11 | const CHART_HANDLERS_KEY = Symbol('chartHandlers')
12 |
13 | function getDefaultChartHandlers() {
14 | const sharedZoomHandler = new ZoomHandler({
15 | sharedZoomMode: ZoomMode.X,
16 | })
17 | const sharedVerticalZoomHandler = new ZoomHandler({
18 | sharedZoomMode: ZoomMode.Y,
19 | })
20 | const sharedPanHandler = new PanHandler({
21 | mouseButton: MouseButton.Left,
22 | modifierKey: ModifierKey.Shift,
23 | direction: PanningDirection.X,
24 | })
25 |
26 | return {
27 | sharedZoomHandler,
28 | sharedVerticalZoomHandler,
29 | sharedPanHandler,
30 | }
31 | }
32 |
33 | export function provideChartHandlers() {
34 | provide(CHART_HANDLERS_KEY, getDefaultChartHandlers())
35 | }
36 |
37 | export function useChartHandlers() {
38 | return inject(CHART_HANDLERS_KEY, getDefaultChartHandlers())
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/general/HierarchicalMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
14 |
15 |
16 |
42 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Upload assets on new release
2 |
3 | on:
4 | release:
5 | types:
6 | - published
7 |
8 | jobs:
9 | build:
10 | runs-on: ubuntu-latest
11 | strategy:
12 | matrix:
13 | include:
14 | - base: /
15 | asset_name: dist
16 | - base: /weboc/
17 | asset_name: dist-weboc
18 | steps:
19 | - uses: actions/checkout@v4
20 | - name: Setup node v20
21 | uses: actions/setup-node@v4
22 | with:
23 | node-version: 22
24 | - run: npm ci
25 | - run: npm run build -- --base=${{ matrix.base }}
26 | - run: zip -r ${{ matrix.asset_name }} dist
27 |
28 | - name: Upload Release Asset
29 | uses: actions/upload-release-asset@v1
30 | env:
31 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
32 | with:
33 | upload_url: ${{ github.event.release.upload_url }}
34 | asset_path: ./${{ matrix.asset_name }}.zip
35 | asset_name: ${{ matrix.asset_name }}.zip
36 | asset_content_type: application/zip
37 |
--------------------------------------------------------------------------------
/src/lib/selection/index.ts:
--------------------------------------------------------------------------------
1 | import { toRaw } from 'vue'
2 | import type { SelectStrategy } from 'vuetify'
3 |
4 | /**
5 | * A selection strategy that cascades selection state to all children.
6 | * Selecting a parent selects all its children, and deselecting a parent
7 | * deselects all its children.
8 | */
9 | export const cascadeStrategy: SelectStrategy = {
10 | select: ({ id, value, selected, children }) => {
11 | const items = [id]
12 |
13 | while (items.length) {
14 | const item = items.shift()
15 |
16 | selected.set(toRaw(item), value ? 'on' : 'off')
17 |
18 | if (children.has(item)) {
19 | items.push(...children.get(item)!)
20 | }
21 | }
22 |
23 | return selected
24 | },
25 | in: (v) => {
26 | const map = new Map()
27 |
28 | for (const id of v ?? []) {
29 | map.set(toRaw(id), 'on')
30 | }
31 |
32 | return map
33 | },
34 | out: (v) => {
35 | const arr = []
36 |
37 | for (const [key, value] of v.entries()) {
38 | if (value === 'on') arr.push(key)
39 | }
40 |
41 | return arr
42 | },
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/analysis/AnalysisProductChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
16 |
17 |
27 |
28 |
41 |
--------------------------------------------------------------------------------
/src/services/useCurrentUser/index.ts:
--------------------------------------------------------------------------------
1 | import { ref, onMounted, computed } from 'vue'
2 | import { authenticationManager } from '@/services/authentication/AuthenticationManager.js'
3 | import type { User } from 'oidc-client-ts'
4 |
5 | export function useCurrentUser() {
6 | const user = ref(null)
7 |
8 | const userName = computed(() => user.value?.profile?.name ?? 'Current User')
9 | const preferredUsername = computed(
10 | () =>
11 | user.value?.profile?.preferred_username ??
12 | 'Current User Preferred Username',
13 | )
14 | const userEmail = computed(
15 | () => user.value?.profile?.email ?? 'Current User Email',
16 | )
17 |
18 | const fetchCurrentUser = async () => {
19 | try {
20 | user.value = await authenticationManager.getUser()
21 | } catch (error) {
22 | console.error('Error fetching current user:', error)
23 | }
24 | }
25 |
26 | onMounted(() => {
27 | fetchCurrentUser()
28 | })
29 |
30 | return {
31 | user,
32 | userName,
33 | preferredUsername,
34 | userEmail,
35 | fetchCurrentUser,
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/lib/charts/types/ChartSeries.ts:
--------------------------------------------------------------------------------
1 | import * as CSS from 'csstype'
2 | import { SymbolOptions } from '@deltares/fews-web-oc-charts'
3 | import { ChartSeriesOptions } from './ChartSeriesOptions'
4 | import { TimeSeriesDisplaySubplotItem } from '@deltares/fews-pi-requests'
5 | import { ThresholdLine } from './ThresholdLine'
6 |
7 | type ChartSeriesType =
8 | | TimeSeriesDisplaySubplotItem['type']
9 | | 'rule'
10 | | 'bar'
11 | | 'marker'
12 | | 'dummy'
13 |
14 | type SubplotItem = Pick<
15 | TimeSeriesDisplaySubplotItem,
16 | | 'classBreaks'
17 | | 'barMargin'
18 | | 'visibleInLegend'
19 | | 'visibleInPlot'
20 | | 'visibleInTable'
21 | >
22 |
23 | export interface ChartSeries extends SubplotItem {
24 | id: string
25 | dataResources: string[]
26 | name: string
27 | label?: string
28 | marker?: SymbolOptions
29 | type: ChartSeriesType
30 | options: ChartSeriesOptions
31 | unit: string
32 | style: CSS.SvgPropertiesHyphen
33 | editable?: boolean
34 | locationId?: string
35 | thresholds?: ThresholdLine[]
36 | thresholdAxisScaling?: TimeSeriesDisplaySubplotItem['thresholdAxisScaling']
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/wms/ControlChip.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
3 |
9 |
10 | {{ props.title }}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
40 |
41 |
63 |
--------------------------------------------------------------------------------
/src/components/analysis/workflows/AnalysisWorkflow.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
53 |
--------------------------------------------------------------------------------
/src/components/map/BoundingBoxControl.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | mdi-selection-drag
7 |
8 |
9 |
14 | {{ boundingBoxString }}
15 |
16 |
17 |
24 |
25 |
26 |
27 |
49 |
--------------------------------------------------------------------------------
/src/components/wms/ColourStrip.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
52 |
53 |
63 |
--------------------------------------------------------------------------------
/src/lib/utils/math.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Get decimal places of float
3 | * @param {number} a - float number
4 | * @returns {number} The number of decimal places of the float number.
5 | * @example
6 | * floatPrecision(54.6545) // 4
7 | */
8 | export function floatPrecision(a: number): number {
9 | if (!isFinite(a)) return 0
10 | var e = 1,
11 | p = 0
12 | while (Math.round(a * e) / e !== a) {
13 | e *= 10
14 | p++
15 | }
16 | return p
17 | }
18 |
19 | /**
20 | * Round a number to the nearest step precision
21 | * @param {number} value - The number to round.
22 | * @param {number} step - The step to round to.
23 | * @returns {number} The rounded number.
24 | * @example
25 | * roundToStepPrecision(54.6545, 0.1) // 54.7
26 | */
27 | export function roundToStepPrecision(value: number, step: number): number {
28 | const precision = floatPrecision(step)
29 | return roundToDecimalPlaces(value, precision)
30 | }
31 |
32 | /**
33 | * Round a number to a specified number of decimal places
34 | * @param {number} value - The number to round.
35 | * @param {number} decimalPlaces - The number of decimal places to round to.
36 | * @returns {number} The rounded number.
37 | * @example
38 | * roundToDecimalPlaces(54.6545, 2) // 54.65
39 | */
40 | export function roundToDecimalPlaces(
41 | value: number,
42 | decimalPlaces: number,
43 | ): number {
44 | const num = Number(`${value}e+${decimalPlaces}`)
45 | return Number(Math.round(num) + `e-${decimalPlaces}`)
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/general/DateTimeTextField.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
52 |
53 |
58 |
--------------------------------------------------------------------------------
/src/services/useCorrelation/index.ts:
--------------------------------------------------------------------------------
1 | import { createTransformRequestFn } from '@/lib/requests/transformRequest'
2 | import {
3 | PiWebserviceProvider,
4 | type CorrelationFilter,
5 | type CorrelationResponse,
6 | } from '@deltares/fews-pi-requests'
7 | import type { MaybeRefOrGetter } from 'vue'
8 | import { ref, shallowRef, toValue, watchEffect } from 'vue'
9 | import { configManager } from '@/services/application-config'
10 |
11 | const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
12 | const provider = new PiWebserviceProvider(baseUrl, {
13 | transformRequestFn: createTransformRequestFn(),
14 | })
15 |
16 | export function useCorrelation(
17 | filter: MaybeRefOrGetter,
18 | ) {
19 | const correlation = shallowRef()
20 | const isLoading = ref(false)
21 | const error = shallowRef()
22 |
23 | async function loadCorrelation() {
24 | const _filter = toValue(filter)
25 | if (_filter === undefined) {
26 | correlation.value = undefined
27 | return
28 | }
29 |
30 | isLoading.value = true
31 | try {
32 | correlation.value = await provider.getCorrelation(_filter)
33 | } catch {
34 | error.value = 'Error loading dashboards'
35 | correlation.value = undefined
36 | } finally {
37 | isLoading.value = false
38 | }
39 | }
40 |
41 | watchEffect(loadCorrelation)
42 |
43 | return {
44 | correlation,
45 | isLoading,
46 | error,
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/reports/tiptap/CustomHeader.ts:
--------------------------------------------------------------------------------
1 | import { mergeAttributes, Node } from '@tiptap/core'
2 |
3 | export interface HeaderOptions {
4 | HTMLAttributes: Record
5 | }
6 |
7 | declare module '@tiptap/core' {
8 | interface Commands {
9 | header: {
10 | /**
11 | * Toggle a header
12 | */
13 | setHeader: () => ReturnType
14 | }
15 | }
16 | }
17 |
18 | export const CustomHeader = Node.create({
19 | name: 'header',
20 |
21 | addOptions() {
22 | return {
23 | HTMLAttributes: {},
24 | }
25 | },
26 |
27 | group: 'block',
28 |
29 | content: 'block*',
30 |
31 | parseHTML() {
32 | return [{ tag: 'header' }]
33 | },
34 |
35 | renderHTML({ HTMLAttributes }) {
36 | return [
37 | 'header',
38 | mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
39 | contenteditable: 'false',
40 | // disable text selection and dragging, it works in Chrome and Edge, but not in completely Firefox
41 | style:
42 | 'user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-app-region: no-drag; -moz-user-select: none; pointer-events: none;',
43 | }),
44 | 0,
45 | ]
46 | },
47 |
48 | addCommands() {
49 | return {
50 | setParagraph:
51 | () =>
52 | ({ commands }) => {
53 | return commands.setNode(this.name)
54 | },
55 | }
56 | },
57 | })
58 |
59 | export default CustomHeader
60 |
--------------------------------------------------------------------------------
/src/lib/requests/fetchBlob.ts:
--------------------------------------------------------------------------------
1 | import { authenticationManager } from '@/services/authentication/AuthenticationManager'
2 |
3 | /**
4 | * Fetches a blob from the given URL and returns a promise that resolves to a blob URL.
5 | *
6 | * Uses XMLHttpRequest to fetch the blob directly without needing to convert it first.
7 | *
8 | * @param {string} url - The URL to fetch the blob from.
9 | * @return {Promise} A promise that resolves to the fetched blob.
10 | * @throws {Error} If the request fails or the response is not a blob.
11 | */
12 | export async function fetchBlob(url: string): Promise {
13 | const accessToken = authenticationManager.getAccessToken()
14 |
15 | return new Promise((resolve, reject) => {
16 | const req = new XMLHttpRequest()
17 | req.responseType = 'blob'
18 | req.open('GET', url)
19 |
20 | if (accessToken) {
21 | req.setRequestHeader('Authorization', `Bearer ${accessToken}`)
22 | }
23 |
24 | req.onload = () => {
25 | if (req.status === 200) {
26 | const blob = req.response
27 | resolve(blob)
28 | } else {
29 | reject(
30 | new Error(`Failed to fetch blob: ${req.status} - ${req.statusText}`),
31 | )
32 | }
33 | }
34 |
35 | req.onerror = () => {
36 | reject(new Error('Network error while fetching blob'))
37 | }
38 |
39 | req.ontimeout = () => {
40 | reject(new Error('Request timed out while fetching blob'))
41 | }
42 |
43 | req.send()
44 | })
45 | }
46 |
--------------------------------------------------------------------------------
/src/lib/fews-properties/fewsProperties.ts:
--------------------------------------------------------------------------------
1 | import { configManager } from '@/services/application-config/'
2 | import { PiWebserviceProvider } from '@deltares/fews-pi-requests'
3 | import type {
4 | TimeSeriesFlag,
5 | TimeSeriesFlagSource,
6 | } from '@deltares/fews-pi-requests'
7 | import { authenticationManager } from '@/services/authentication/AuthenticationManager'
8 |
9 | export async function loadTimeSeriesFlags(): Promise {
10 | const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
11 | const transformRequestFn = (request: Request) =>
12 | Promise.resolve(authenticationManager.transformRequestAuth(request))
13 | const webServiceProvider = new PiWebserviceProvider(baseUrl, {
14 | transformRequestFn,
15 | })
16 | const flagResponse = await webServiceProvider.getFlags()
17 | if (flagResponse.flags === undefined) return []
18 | return flagResponse.flags
19 | }
20 |
21 | export async function loadTimeSeriesFlagSources(): Promise<
22 | TimeSeriesFlagSource[]
23 | > {
24 | const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
25 | const transformRequestFn = (request: Request) =>
26 | Promise.resolve(authenticationManager.transformRequestAuth(request))
27 | const webServiceProvider = new PiWebserviceProvider(baseUrl, {
28 | transformRequestFn,
29 | })
30 | const flagSourcesResponse = await webServiceProvider.getFlagSources()
31 | if (flagSourcesResponse.flagSources === undefined) return []
32 | return flagSourcesResponse.flagSources
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/general/ShadowFrame.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
54 |
55 |
63 |
--------------------------------------------------------------------------------
/src/lib/topology/createTopologyHashMaps.ts:
--------------------------------------------------------------------------------
1 | import type { TopologyNode } from '@deltares/fews-pi-requests'
2 |
3 | /**
4 | * Creates hash maps for topology nodes.
5 | *
6 | * This function generates two hash maps:
7 | * 1. idToNodeMap: Maps node IDs to their corresponding TopologyNode objects.
8 | * 2. childIdToParentNodeMap: Maps child node IDs to their parent node.
9 | *
10 | * @param {TopologyNode[] | undefined} nodes - An array of TopologyNode objects or undefined.
11 | * @returns {{ idToNodeMap: Map, childIdToParentNodeMap: Map }} - An object containing the two hash maps.
12 | */
13 | export function createTopologyHashMaps(nodes: TopologyNode[] | undefined): {
14 | idToNodeMap: Map
15 | childIdToParentNodeMap: Map
16 | } {
17 | const idToNodeMap = new Map()
18 | const childIdToParentNodeMap = new Map()
19 |
20 | function recursivelyFillMaps(nodes: TopologyNode[]) {
21 | for (const node of nodes) {
22 | idToNodeMap.set(node.id, node)
23 |
24 | if (node.topologyNodes) {
25 | node.topologyNodes.forEach((childNode) => {
26 | childIdToParentNodeMap.set(childNode.id, node)
27 | })
28 | recursivelyFillMaps(node.topologyNodes)
29 | }
30 | }
31 | }
32 |
33 | if (nodes) {
34 | recursivelyFillMaps(nodes)
35 | }
36 |
37 | return {
38 | idToNodeMap,
39 | childIdToParentNodeMap,
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/dialog/StartupDialog.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
12 |
13 |
14 |
49 |
--------------------------------------------------------------------------------
/src/locales/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "common": {
3 | "all": "All",
4 | "cancel": "Cancel",
5 | "clearAll": "Clear all",
6 | "custom": "Custom",
7 | "default": "Default",
8 | "end": "End",
9 | "selected": "Selected",
10 | "selectAll": "Select all",
11 | "start": "Start"
12 | },
13 | "layout": {
14 | "about": "About",
15 | "switchTo": "Switch to"
16 | },
17 | "auth": {
18 | "signOut": "Sign out"
19 | },
20 | "timeControl": {
21 | "browserTime": "Browser time",
22 | "periodPresets": "period presets",
23 | "startDateBeforeEndDate": "Start date must be before end date",
24 | "endDateAfterStartDate": "End date must be after start date"
25 | },
26 | "thresholds": {
27 | "thresholds": "Thresholds",
28 | "noThresholdCrossing": "No active threshold crossings"
29 | },
30 | "download": {
31 | "downloadTimeSeries": "Download time series",
32 | "fileName": "File Name"
33 | },
34 | "search": {
35 | "searchForLocations": "Search for locations",
36 | "searchLocation": "Search locations"
37 | },
38 | "userSettings": {
39 | "allSettings": "All settings",
40 | "settings": "Settings"
41 | },
42 | "wms": {
43 | "overlays": "Overlays",
44 | "timeRange": "Time range"
45 | },
46 | "sidePanel": {
47 | "thresholdOverview": "Thresholds overview",
48 | "taskOverview": "Task overview",
49 | "importStatus": "Import status",
50 | "noncurrentData": "Non-current data",
51 | "runTasks": "Run tasks",
52 | "moreInfo": "More info"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/wms/locations/LocationsTextLayer.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
51 |
--------------------------------------------------------------------------------
/src/components/map/CoordinateSelectorControl.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | mdi-map-marker
7 |
8 |
11 | {{ coordinateStringParts[0] }}
12 |
13 |
14 | {{ coordinateStringParts[1] }}
15 |
16 |
17 |
24 |
25 |
26 |
27 |
46 |
47 |
52 |
--------------------------------------------------------------------------------
/tests/e2e/ssd/schematicStatusDisplay.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test'
2 |
3 | test.describe('Schematic Status Display Tests', () => {
4 | const base = 'topology/early_warning/node/'
5 | const url =
6 | base +
7 | 'viewer_coastal_flooding_warning/viewer_coastal_flooding_warning_warning1/ssd/coastal_flooding1'
8 |
9 | test('SSD should load with filled in values', async ({ page }) => {
10 | await page.goto(url)
11 | const value1 = page.getByText('0.82')
12 | await expect(value1).toBeVisible()
13 | const value2 = page.getByText('0.67')
14 | await expect(value2).toBeVisible()
15 | const value3 = page.getByText('0.72')
16 | await expect(value3).toBeVisible()
17 | const value4 = page.getByText('0.85')
18 | await expect(value4).toBeVisible()
19 | })
20 |
21 | test('SSD should be responsive and switch to other display', async ({
22 | page,
23 | }) => {
24 | await page.goto(url)
25 | await page
26 | .getByRole('button', { name: 'Switch to Flood Warning #2' })
27 | .click()
28 | await expect(page.getByText('COASTAL FLOOD WARNING #2')).toBeVisible()
29 | })
30 |
31 | test('SSD should be responsive and switch to TimeSeriesDisplay', async ({
32 | page,
33 | }) => {
34 | await page.goto(url)
35 | await page
36 | .getByRole('button', { name: 'Switch to TimeSeriesDisplay' })
37 | .click()
38 |
39 | await expect(page.getByText('Water Level (m + MSL)')).toBeVisible()
40 | await expect(page.getByText('Wave Height (m)')).toBeVisible()
41 | })
42 | })
43 |
--------------------------------------------------------------------------------
/src/stores/availableWhatIfTemplates.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 | import { defineStore } from 'pinia'
3 | import {
4 | PiWebserviceProvider,
5 | type WhatIfTemplate,
6 | } from '@deltares/fews-pi-requests'
7 | import { configManager } from '@/services/application-config'
8 | import { createTransformRequestFn } from '@/lib/requests/transformRequest'
9 |
10 | export const useAvailableWhatIfTemplatesStore = defineStore(
11 | 'availableWhatIfTemplates',
12 | () => {
13 | const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
14 | const piProvider = new PiWebserviceProvider(baseUrl, {
15 | transformRequestFn: createTransformRequestFn(),
16 | })
17 |
18 | const whatIfTemplates = ref([])
19 | const isLoading = ref(false)
20 |
21 | function byId(
22 | whatIfTemplateId: string | undefined,
23 | ): WhatIfTemplate | undefined {
24 | return whatIfTemplates.value.find(
25 | (template) => template.id === whatIfTemplateId,
26 | )
27 | }
28 |
29 | async function fetch() {
30 | isLoading.value = true
31 | try {
32 | const response = await piProvider.getWhatIfTemplates({})
33 | whatIfTemplates.value = response.whatIfTemplates
34 | } catch (error) {
35 | console.error('Failed to fetch available whatIfTemplates.', error)
36 | } finally {
37 | isLoading.value = false
38 | }
39 | }
40 |
41 | fetch()
42 |
43 | return {
44 | whatIfTemplates,
45 | isLoading,
46 | byId,
47 | fetch,
48 | }
49 | },
50 | )
51 |
--------------------------------------------------------------------------------
/src/services/useHorizontalScroll/index.ts:
--------------------------------------------------------------------------------
1 | export function useHorizontalScroll() {
2 | let lastPos = { x: 0, y: 0 }
3 | let moveHandler: (event: MouseEvent) => void
4 | let upHandler: (event: MouseEvent) => void
5 |
6 | function mouseWheelHandler(event: WheelEvent): void {
7 | if (!event.currentTarget) return
8 | const element = event.currentTarget as HTMLElement
9 |
10 | element.scrollLeft += event.deltaY
11 | }
12 |
13 | function mouseDownHandler(event: MouseEvent): void {
14 | if (!event.currentTarget) return
15 | const element = event.currentTarget as HTMLElement
16 |
17 | lastPos = {
18 | x: event.clientX,
19 | y: event.clientY,
20 | }
21 |
22 | moveHandler = (event) => mouseMoveHandler(event, element)
23 | upHandler = () => mouseUpHandler(element)
24 |
25 | document.addEventListener('pointermove', moveHandler)
26 | document.addEventListener('pointerup', upHandler)
27 | }
28 |
29 | function mouseMoveHandler(event: MouseEvent, element: HTMLElement): void {
30 | const dx = event.clientX - lastPos.x
31 |
32 | lastPos = {
33 | x: event.clientX,
34 | y: event.clientY,
35 | }
36 |
37 | element.scrollLeft -= dx
38 |
39 | element.style.cursor = 'grabbing'
40 | }
41 |
42 | function mouseUpHandler(element: HTMLElement): void {
43 | element.style.cursor = 'inherit'
44 |
45 | document.removeEventListener('pointermove', moveHandler)
46 | document.removeEventListener('pointerup', upHandler)
47 | }
48 |
49 | return {
50 | mouseWheelHandler,
51 | mouseDownHandler,
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/stores/nodes.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it, beforeEach } from 'vitest'
2 | import { setActivePinia, createPinia } from 'pinia'
3 | import { useNodesStore } from './nodes'
4 |
5 | const nodeButtons = [
6 | {
7 | id: '1',
8 | name: 'node1',
9 | to: 'node1',
10 | },
11 | {
12 | id: '2',
13 | name: 'node2',
14 | to: 'node2',
15 | },
16 | ]
17 |
18 | describe('Nodes store', () => {
19 | beforeEach(() => {
20 | setActivePinia(createPinia())
21 | })
22 |
23 | it('should set node buttons', () => {
24 | const nodesStore = useNodesStore()
25 | nodesStore.setNodeButtons(nodeButtons)
26 | expect(nodesStore.nodeButtons).toEqual(nodeButtons)
27 | })
28 |
29 | it('should get first route target without set parentId', () => {
30 | const nodesStore = useNodesStore()
31 | nodesStore.setNodeButtons(nodeButtons)
32 | expect(nodesStore.getRouteTarget(nodeButtons)).toBe(nodeButtons[0].to)
33 | })
34 |
35 | it('should get route target with set parentId', () => {
36 | const nodesStore = useNodesStore()
37 | nodesStore.setNodeButtons(nodeButtons)
38 | nodesStore.activeNodeId = nodeButtons[1].id
39 | expect(nodesStore.getRouteTarget(nodeButtons)).toBe(nodeButtons[1].to)
40 | })
41 |
42 | it('should set activeParentNode and Id on getting route target', () => {
43 | const nodesStore = useNodesStore()
44 | nodesStore.setNodeButtons(nodeButtons)
45 | nodesStore.activeNodeId = nodeButtons[1].id
46 | nodesStore.getRouteTarget(nodeButtons)
47 |
48 | expect(nodesStore.activeNodeId).toBe(nodeButtons[1].id)
49 | })
50 | })
51 |
--------------------------------------------------------------------------------
/src/components/logdisplay/DateSeparator.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
{{ formattedDate }}
5 |
6 |
20 |
21 |
22 | {{ title }}
23 |
24 |
25 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
54 |
55 |
64 |
--------------------------------------------------------------------------------
/src/locales/de.json:
--------------------------------------------------------------------------------
1 | {
2 | "common": {
3 | "all": "Alle",
4 | "cancel": "Abbrechen",
5 | "clearAll": "Entfernen",
6 | "custom": "Benutzerdefiniert",
7 | "default": "Standard",
8 | "end": "Ende",
9 | "selected": "Ausgewählt",
10 | "selectAll": "Alle auswählen",
11 | "start": "Start"
12 | },
13 | "layout": {
14 | "about": "Über",
15 | "switchTo": "Wechseln zu"
16 | },
17 | "auth": {
18 | "signOut": "Abmelden"
19 | },
20 | "timeControl": {
21 | "browserTime": "Browser Zeit",
22 | "periodPresets": "Zeitraum-Voreinstellungen",
23 | "startDateBeforeEndDate": "Startdatum muss vor Enddatum liegen",
24 | "endDateAfterStartDate": "Enddatum muss nach Startdtaum liegen"
25 | },
26 | "thresholds": {
27 | "thresholds": "Schwellenwerte",
28 | "noThresholdCrossing": "Zurzeit keine Schwellenwertüberschreitungen"
29 | },
30 | "download": {
31 | "downloadTimeSeries": "Zeitreihe herunterladen",
32 | "fileName": "Dateiname"
33 | },
34 | "search": {
35 | "searchForLocations": "Messstelle",
36 | "searchLocation": "Messstelle"
37 | },
38 | "userSettings": {
39 | "allSettings": "Alle Einstellungen",
40 | "settings": "Einstellungen"
41 | },
42 | "wms": {
43 | "overlays": "Layerauswahl",
44 | "timeRange": "Zeitbereich"
45 | },
46 | "sidePanel": {
47 | "thresholdOverview": "Übersicht Schwellenwerte",
48 | "taskOverview": "Aufgaben Übersicht",
49 | "importStatus": "Import Status",
50 | "noncurrentData": "Nicht-Aktuelle Daten",
51 | "runTasks": "Aufgabe ausführen",
52 | "moreInfo": "Informationen"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/wms/CoordinateSelectorLayer.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 | mdi-map-marker
14 |
15 |
16 |
17 |
18 |
19 |
60 |
61 |
66 |
--------------------------------------------------------------------------------
/tests/docker/zap/README.md:
--------------------------------------------------------------------------------
1 | # ZAP
2 | The ZAP tool is used to detect any security vulnerabilities in the Web OC.
3 | It is important to configure the http servers with the correct security headers to comply with the OWASP rules.
4 | In this directory the configuration files for NGINX and the ZAP tool are stored.
5 |
6 | # nginx.conf
7 |
8 | The zap scanner run using NGINX. Specific security headers are added to the config to make the Web OC mostly compliant.
9 | In some cases the ZAP tool will report a warning that cannot be prevented.
10 |
11 | # weboc-zap.conf
12 | In the weboc-zap.conf file warnings are excluded with an explanation why.
13 |
14 | Among them are:
15 |
16 | - CSP: style-src unsafe-inline: The web framework used by the Web OC (Vue JS) is using inline css.
17 | - Sub Resource Integrity Attribute Missing: Not supported by the googles fonts css: > .env
26 |
27 | rm public/app-config.json
28 | cat > public/app-config.json <
8 | reports: ShallowRef
9 | isReady: Ref
10 | isLoading: Ref
11 | }
12 |
13 | export function useReports(
14 | baseUrl: string,
15 | moduleInstanceIds: MaybeRefOrGetter,
16 | ): UseReportsReturn {
17 | const reports = shallowRef()
18 | const isReady = ref(false)
19 | const isLoading = ref(false)
20 | const error = shallowRef()
21 |
22 | async function loadReports() {
23 | const _moduleInstanceIds = toValue(moduleInstanceIds)
24 | if (_moduleInstanceIds.length === 0) return
25 |
26 | isLoading.value = true
27 | isReady.value = false
28 | try {
29 | const provider = new PiWebserviceProvider(baseUrl, {
30 | transformRequestFn: createTransformRequestFn(),
31 | })
32 | const response = await provider.getReports({
33 | moduleInstanceIds: _moduleInstanceIds,
34 | })
35 | reports.value = response.reports
36 | } catch {
37 | error.value = 'Error loading reports'
38 | reports.value = undefined
39 | } finally {
40 | isLoading.value = false
41 | isReady.value = true
42 | }
43 | }
44 |
45 | watchEffect(loadReports)
46 |
47 | return {
48 | reports,
49 | isReady,
50 | isLoading,
51 | error,
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/lib/taskruns/convert.ts:
--------------------------------------------------------------------------------
1 | import { TaskRun as FewsPiTaskRun } from '@deltares/fews-pi-requests'
2 |
3 | import { TaskRun, TaskStatus } from './types'
4 |
5 | export function convertFewsPiTaskRunToTaskRun(taskRun: FewsPiTaskRun): TaskRun {
6 | const timeZeroTimestamp = new Date(taskRun.time0).getTime()
7 | const dispatchTimestamp = taskRun.dispatchTime
8 | ? new Date(taskRun.dispatchTime).getTime()
9 | : null
10 | const completionTimestamp = taskRun.completionTime
11 | ? new Date(taskRun.completionTime).getTime()
12 | : null
13 | const outputStartTimestamp = taskRun.outputStartTime
14 | ? new Date(taskRun.outputStartTime).getTime()
15 | : null
16 | const outputEndTimestamp = taskRun.outputEndTime
17 | ? new Date(taskRun.outputEndTime).getTime()
18 | : null
19 | // Set null for undefined and empty descriptions.
20 | const description = taskRun.description ? taskRun.description : null
21 | return {
22 | taskId: taskRun.id,
23 | workflowId: taskRun.workflowId,
24 | userId: taskRun.user,
25 | status: convertToTaskStatus(taskRun.status),
26 | description,
27 | timeZeroTimestamp,
28 | dispatchTimestamp,
29 | completionTimestamp,
30 | isCurrent: taskRun.current,
31 | outputStartTimestamp,
32 | outputEndTimestamp,
33 | }
34 | }
35 |
36 | export function convertToTaskStatus(status: string): TaskStatus {
37 | if (Object.values(TaskStatus).includes(status as TaskStatus)) {
38 | return status as TaskStatus
39 | }
40 | throw new Error(`Invalid task status: "${status}".`)
41 | }
42 |
43 | export function convertTaskStatusToString(status: TaskStatus): string {
44 | return status.charAt(0).toUpperCase() + status.slice(1)
45 | }
46 |
--------------------------------------------------------------------------------
/src/services/useDataAnalysisDisplay/index.ts:
--------------------------------------------------------------------------------
1 | import { createTransformRequestFn } from '@/lib/requests/transformRequest'
2 | import {
3 | DataAnalysisDisplayElement,
4 | PiWebserviceProvider,
5 | } from '@deltares/fews-pi-requests'
6 | import { MaybeRefOrGetter, ref, shallowRef, toValue, watchEffect } from 'vue'
7 |
8 | export function useDataAnalysisDisplay(
9 | baseUrl: string,
10 | dataAnalysisDisplayId: MaybeRefOrGetter,
11 | ) {
12 | const dataAnalysisDisplay = ref()
13 | const isReady = ref(false)
14 | const isLoading = ref(false)
15 | const error = shallowRef()
16 |
17 | async function loadDataAnalyisDisplay() {
18 | isLoading.value = true
19 | isReady.value = false
20 |
21 | const _dataAnalysisDisplayId = toValue(dataAnalysisDisplayId)
22 | if (_dataAnalysisDisplayId === undefined) {
23 | dataAnalysisDisplay.value = undefined
24 | return
25 | }
26 |
27 | try {
28 | const provider = new PiWebserviceProvider(baseUrl, {
29 | transformRequestFn: createTransformRequestFn(),
30 | })
31 | const response = await provider.getDataAnalysisDisplays({
32 | dataAnalysisDisplayId: _dataAnalysisDisplayId,
33 | })
34 | dataAnalysisDisplay.value = response.dataAnalysisDisplays?.[0]
35 | } catch {
36 | error.value = 'Error loading DataAnalysisDisplay'
37 | dataAnalysisDisplay.value = undefined
38 | } finally {
39 | isLoading.value = false
40 | isReady.value = true
41 | }
42 | }
43 |
44 | watchEffect(loadDataAnalyisDisplay)
45 |
46 | return {
47 | dataAnalysisDisplay,
48 | isReady,
49 | isLoading,
50 | error,
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/dialog/SplashScreenDialog.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
15 |
16 |
17 |
18 |
19 |
51 |
52 |
66 |
--------------------------------------------------------------------------------
/src/components/thresholds/ThresholdsButton.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
24 |
25 |
26 |
27 |
28 |
51 |
--------------------------------------------------------------------------------
/src/services/useSeriesUpdateChartData/index.ts:
--------------------------------------------------------------------------------
1 | import { redraw, updateChartData } from '@/lib/charts/timeSeriesChart'
2 | import { ChartConfig } from '@/lib/charts/types/ChartConfig'
3 | import { Series } from '@/lib/timeseries/timeSeries'
4 | import { CartesianAxes } from '@deltares/fews-web-oc-charts'
5 | import { difference } from 'lodash-es'
6 | import { MaybeRefOrGetter, ref, toValue, watch } from 'vue'
7 |
8 | export function useSeriesUpdateChartData(
9 | series: MaybeRefOrGetter>,
10 | config: MaybeRefOrGetter,
11 | axis: MaybeRefOrGetter,
12 | ) {
13 | const hasResetAxes = ref(false)
14 | const hasRenderedOnce = ref(false)
15 |
16 | watch(
17 | () =>
18 | Object.entries(toValue(series)).map(
19 | ([k, s]) => `${k}-${s.lastUpdated?.getTime()}`,
20 | ),
21 | (newValue, oldValue) => {
22 | const _config = toValue(config)
23 | const _series = toValue(series)
24 | const _axis = toValue(axis)
25 |
26 | const newSeriesIds = difference(newValue, oldValue).map((id) =>
27 | id.substring(0, id.lastIndexOf('-')),
28 | )
29 | const requiredSeries = _config.series.filter((s) =>
30 | s.dataResources.some((resourceId) => newSeriesIds.includes(resourceId)),
31 | )
32 | if (requiredSeries.length > 0) {
33 | hasResetAxes.value = updateChartData(
34 | _axis,
35 | requiredSeries,
36 | _series,
37 | hasResetAxes.value,
38 | )
39 |
40 | if (!hasRenderedOnce.value) {
41 | redraw(_axis, _config)
42 | hasRenderedOnce.value = true
43 | }
44 | }
45 | },
46 | )
47 |
48 | return { hasResetAxes }
49 | }
50 |
--------------------------------------------------------------------------------