diff --git a/src/components/activity/ActivityDirectiveForm.svelte b/src/components/activity/ActivityDirectiveForm.svelte index 5169b2ac0a..7780b5ed06 100644 --- a/src/components/activity/ActivityDirectiveForm.svelte +++ b/src/components/activity/ActivityDirectiveForm.svelte @@ -376,7 +376,7 @@ } function onUpdateStartTime() { - if ($startTimeField.valid && startTime !== $startTimeField.value) { + if ($startTimeField.valid /* && startTime !== $startTimeField.value */) { console.log('startTimeField.value :>> ', $startTimeField.value); const { id } = activityDirective; const planStartTimeDoy = getDoyTime(new Date(planStartTimeYmd)); @@ -611,6 +611,20 @@ {/if} + + + Start Time (UTC) diff --git a/src/components/timeline/Timeline.svelte b/src/components/timeline/Timeline.svelte index eed91e41f9..8a46391e68 100644 --- a/src/components/timeline/Timeline.svelte +++ b/src/components/timeline/Timeline.svelte @@ -131,6 +131,7 @@ $: rows = timeline?.rows || []; $: drawWidth = clientWidth > 0 ? clientWidth - (timeline?.marginLeft ?? 0) - (timeline?.marginRight ?? 0) : 0; $: estimatedLabelWidthPx = $plugins.time?.ticks?.tickLabelWidth ?? 130; + $: xAxisDrawHeight = 48 + 16 * ($plugins.time?.additional ? Math.max($plugins.time.additional.length, 1) : 1); // Compute number of ticks based off draw width $: if (drawWidth) { @@ -179,11 +180,17 @@ } } - let formattedSecondaryDate = ''; - if ($plugins.time?.secondary?.format) { - formattedSecondaryDate = $plugins.time?.secondary?.format(date); + const additionalFormats: string[] = []; + let tick: XAxisTick = { additionalFormats: [], date, formattedPrimaryDate, hideLabel: false }; + + if ($plugins.time?.additional?.length) { + $plugins.time.additional.forEach(timeSystem => { + if (timeSystem.format) { + additionalFormats.push(timeSystem.format(date)); + } + }); } else { - formattedSecondaryDate = date.toLocaleString(); + let formattedSecondaryDate = date.toLocaleString(); if (xScaleViewDuration > durationYear * tickCount) { formattedSecondaryDate = date.getFullYear().toString(); labelWidth = $plugins.time?.ticks?.tickLabelWidth ?? 28; @@ -194,8 +201,12 @@ formattedSecondaryDate = date.toLocaleDateString(); labelWidth = $plugins.time?.ticks?.tickLabelWidth ?? 58; } + additionalFormats.push(formattedSecondaryDate); } - return { date, formattedPrimaryDate, formattedSecondaryDate, hideLabel: false }; + + tick.additionalFormats = additionalFormats; + + return { additionalFormats, date, formattedPrimaryDate, hideLabel: false }; }); // Determine whether or not to hide the last tick label diff --git a/src/components/timeline/XAxis.svelte b/src/components/timeline/XAxis.svelte index 40862fdb22..b1843a3ce2 100644 --- a/src/components/timeline/XAxis.svelte +++ b/src/components/timeline/XAxis.svelte @@ -33,7 +33,6 @@ let zoom: ZoomBehavior; $: primaryTimeLabel = $plugins.time?.primary?.label ?? 'UTC'; - $: secondaryTimeLabel = $plugins.time?.secondary?.label ?? getTimeZoneName(); $: svgSelection = select(svg) as Selection; /* TODO could this be a custom svelte use action? */ @@ -77,9 +76,17 @@ > {primaryTimeLabel} - - {secondaryTimeLabel} - + {#if $plugins.time?.additional && $plugins.time?.additional?.length > 0} + {#each $plugins.time?.additional as timeSystem} + + {timeSystem.label} + + {/each} + {:else} + + {getTimeZoneName()} + + {/if} @@ -94,12 +101,14 @@ {tick.formattedPrimaryDate} - - {tick.formattedSecondaryDate} - + {#each tick.additionalFormats as label, i} + + {label} + + {/each} {/if} {/each} {/if} diff --git a/src/types/plugin.ts b/src/types/plugin.ts index 21c4290325..0967a5124c 100644 --- a/src/types/plugin.ts +++ b/src/types/plugin.ts @@ -4,21 +4,19 @@ export type PluginCode = { getPlugin: () => Promise; }; +export type PluginTime = { + format?: (date: Date) => string; + formatString?: string; + label?: string; + parse?: (string: string) => Date; + validate?: (string: string) => Promise; +}; + export type Plugins = { sequencing?: null; time?: { - primary?: { - format?: (date: Date) => string; - formatString?: string; - label?: string; - parse?: (string: string) => Date; - validate?: (string: string) => Promise; - }; - secondary?: { - format?: (date: Date) => string; - label?: string; - parse?: (string: string) => Date; - }; + additional?: PluginTime[]; // TODO bikeshed + primary?: PluginTime; ticks?: { getTicks?: (start: Date, stop: Date, count: number) => Date[]; tickLabelWidth?: number; diff --git a/src/types/timeline.ts b/src/types/timeline.ts index 8c39f65aaa..d7d18a1cf9 100644 --- a/src/types/timeline.ts +++ b/src/types/timeline.ts @@ -220,9 +220,9 @@ export type VerticalGuideSelection = { }; export type XAxisTick = { + additionalFormats: string[]; date: Date; formattedPrimaryDate: string; - formattedSecondaryDate: string; hideLabel: boolean; };