diff --git a/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx b/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx index 37f137d05f..33b76b3dd3 100644 --- a/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx +++ b/packages/app/src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx @@ -73,7 +73,11 @@ export const TimelineTooltipContent = ({ config, hasMultipleEvents, onNext, onPr {config.title} - {config.description} + + {replaceVariablesInText(config.description.split('**').join(''), { + label: config.title.toLowerCase(), + })} + {currentEstimationLabel && ( diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx index 8a7fc10aae..64b9d5bb21 100644 --- a/packages/app/src/pages/index.tsx +++ b/packages/app/src/pages/index.tsx @@ -98,7 +98,7 @@ const Home = (props: StaticProps) => { const currentSeverityLevel = thermometer.currentLevel as unknown as SeverityLevels; const currentSeverityLevelTexts = thermometer.thermometerLevels.find((thermometerLevel) => thermometerLevel.level === currentSeverityLevel); - const thermometerEvents = getThermometerEvents(thermometer.timeline.ThermometerTimelineEvents); + const thermometerEvents = getThermometerEvents(thermometer.timeline.ThermometerTimelineEvents, thermometer.thermometerLevels); const { startDate, endDate } = getTimelineRangeDates(thermometerEvents); diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts index 4667bd0d37..07b4971751 100644 --- a/packages/app/src/queries/get-topical-structure-query.ts +++ b/packages/app/src/queries/get-topical-structure-query.ts @@ -1,5 +1,6 @@ -import { ThermometerTimelineEvent } from './query-types'; +import { ThermometerLevel, ThermometerTimelineEvent } from './query-types'; import { SeverityIndicatorTimelineEventConfig } from '~/components/severity-indicator-tile/components/timeline/timeline'; +import { SeverityLevel } from '~/components/severity-indicator-tile/types'; export function getTopicalStructureQuery(locale: string) { const query = `// groq @@ -106,14 +107,15 @@ export function getTopicalStructureQuery(locale: string) { return query; } -export const getThermometerEvents = (thermometerEvents: ThermometerTimelineEvent[]) => { - return thermometerEvents.map((thermometerEvent) => { +export const getThermometerEvents = (thermometerEvents: ThermometerTimelineEvent[], thermometerLevels: ThermometerLevel[]) => + thermometerEvents.map((thermometerEvent) => { + const levelDetails = thermometerLevels.find((thermometerLevel) => thermometerLevel.level === (thermometerEvent.level as SeverityLevel)) as ThermometerLevel; + return { - title: thermometerEvent.title, - description: thermometerEvent.description, - level: thermometerEvent.level, + title: levelDetails.label, + description: levelDetails.description, + level: levelDetails.level, start: new Date(thermometerEvent.date).getTime() / 1000, end: new Date(thermometerEvent.dateEnd).getTime() / 1000, }; }); -}; diff --git a/packages/app/src/queries/query-types.ts b/packages/app/src/queries/query-types.ts index a9393badd1..0176531903 100644 --- a/packages/app/src/queries/query-types.ts +++ b/packages/app/src/queries/query-types.ts @@ -43,7 +43,7 @@ export interface ThermometerTimelineEvent { dateEnd: number; } -interface ThermometerLevel { +export interface ThermometerLevel { level: SeverityLevel; label: string; description: string; diff --git a/packages/cms/src/schemas/topical/thermometer-level.ts b/packages/cms/src/schemas/topical/thermometer-level.ts index ac16ba5ab6..85ea3744ee 100644 --- a/packages/cms/src/schemas/topical/thermometer-level.ts +++ b/packages/cms/src/schemas/topical/thermometer-level.ts @@ -1,7 +1,5 @@ -import { Rule } from '~/sanity'; -import { THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE } from './thermometer'; import { SEVERITY_LEVELS_LIST } from '@corona-dashboard/app/src/components/severity-indicator-tile/constants'; -import { REQUIRED, REQUIRED_MIN_MAX } from '../../validation'; +import { REQUIRED } from '../../validation'; import { BsFillFileBarGraphFill } from 'react-icons/bs'; export const thermometerLevel = { @@ -18,7 +16,7 @@ export const thermometerLevel = { list: SEVERITY_LEVELS_LIST, layout: 'dropdown', }, - validation: (rule: Rule) => REQUIRED_MIN_MAX(rule, THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE), + validation: REQUIRED, }, { title: 'Stand naam', diff --git a/packages/cms/src/schemas/topical/thermometer-timeline-event.ts b/packages/cms/src/schemas/topical/thermometer-timeline-event.ts index 6e0dcf2c7f..3b9c5b56fd 100644 --- a/packages/cms/src/schemas/topical/thermometer-timeline-event.ts +++ b/packages/cms/src/schemas/topical/thermometer-timeline-event.ts @@ -1,10 +1,6 @@ +import { SEVERITY_LEVELS_LIST } from '@corona-dashboard/app/src/components/severity-indicator-tile/constants'; import { isDefined } from 'ts-is-present'; -import { Rule } from '~/sanity'; -import { localeStringValidation } from '../../language/locale-validation'; - -import { REQUIRED, REQUIRED_MIN_MAX } from '../../validation'; - -import { THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE } from './thermometer'; +import { REQUIRED } from '../../validation'; const DATE_FORMAT = 'YYYY-MM-DD'; @@ -13,23 +9,15 @@ export const thermometerTimelineEvent = { type: 'document', title: 'Thermometer tijdlijn gebeurtenis', fields: [ - { - title: 'Titel', - name: 'title', - type: 'localeString', - validation: localeStringValidation((rule) => rule.required().max(60).error('Titels zijn gelimiteerd tot maximaal 60 tekens')), - }, - { - title: 'Omschrijving', - name: 'description', - type: 'localeText', - validation: REQUIRED, - }, { title: 'Level', name: 'level', type: 'number', - validation: (rule: Rule) => REQUIRED_MIN_MAX(rule, THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE), + options: { + list: SEVERITY_LEVELS_LIST, + layout: 'dropdown', + }, + validation: REQUIRED, }, { title: 'Datum', @@ -52,14 +40,18 @@ export const thermometerTimelineEvent = { ], preview: { select: { - title: 'title.nl', + title: 'level', date: 'date', dateEnd: 'dateEnd', }, - prepare(x: { title: string; date: string; dateEnd?: string }) { + prepare(selection: { title: number; date: string; dateEnd?: string }) { + // Construct a custom start date + const day = selection.date.slice(8); + const month = selection.date.slice(5, -3); + return { - title: x.title, - subtitle: [x.date, x.dateEnd].filter(isDefined).join(' tot '), + title: `${day}/${month}: level ${selection.title}`, + subtitle: [selection.date, selection.dateEnd].filter(isDefined).join(' tot '), }; }, }, diff --git a/packages/cms/src/schemas/topical/thermometer-timeline.ts b/packages/cms/src/schemas/topical/thermometer-timeline.ts index 07326185a3..d6cef15368 100644 --- a/packages/cms/src/schemas/topical/thermometer-timeline.ts +++ b/packages/cms/src/schemas/topical/thermometer-timeline.ts @@ -27,6 +27,7 @@ export const thermometerTimeline = { }, { title: 'Tooltip label', + description: 'Extra beschrijving voor in de laatste gebeurtenis in de tijdlijn', name: 'tooltipCurrentEstimationLabel', type: 'localeText', validation: REQUIRED, diff --git a/packages/cms/src/schemas/topical/thermometer.ts b/packages/cms/src/schemas/topical/thermometer.ts index 4869439a7e..556271f557 100644 --- a/packages/cms/src/schemas/topical/thermometer.ts +++ b/packages/cms/src/schemas/topical/thermometer.ts @@ -1,11 +1,7 @@ -import { Rule } from '~/sanity'; import { SEVERITY_LEVELS_LIST } from '@corona-dashboard/app/src/components/severity-indicator-tile/constants'; -import { REQUIRED, REQUIRED_MIN_MAX } from '../../validation'; +import { REQUIRED } from '../../validation'; import { KpiIconInput } from '../../components/portable-text/kpi-configuration/kpi-icon-input'; -export const THERMOMETER_MIN_VALUE = Math.min(...SEVERITY_LEVELS_LIST); -export const THERMOMETER_MAX_VALUE = Math.max(...SEVERITY_LEVELS_LIST); - export const thermometer = { type: 'object', title: 'Thermometer', @@ -72,7 +68,7 @@ export const thermometer = { list: SEVERITY_LEVELS_LIST, layout: 'dropdown', }, - validation: (rule: Rule) => REQUIRED_MIN_MAX(rule, THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE), + validation: REQUIRED, }, { title: 'Standen',