New DateTime Component

[hudson-newey]

We should add a DateTime component to display date/times in a standardised ISO 8601 format.

Relates to https://github.com/QutEcoacoustics/workbench-client/issues/346, https://github.com/QutEcoacoustics/workbench-client/issues/345

Charles tried a previous implementation in #1736, however, it has diverged significantly from master and therefore should be rejected and started from scratch.

We should use a component over a template pipe as it allows styling to indicate dateTime's that are not relative to the users timezone.

The component should have a dotted underline styling for localTime dateTime's

---

In short: all datesTimes should be relative to the user group that created them

• Recordings and events should always use the timezone that the location the recording/event was captured. (note: the creation date/time of the event should be in the users local time zone)
• User generated events such as harvest uploads and edits should use user local time

e.g. If a recording was captured at 11:11 am (UTC+ 10), the client should show 11:11 am with a tooltip on however showing the timezone (AEST UTC + 10).

If an event is created, the createdAt dateTime should be relative to the user. e.g. if a user in UTC + 8 creates an event at T00:00Z+08:00, a user viewing the event at UTC+10 should see the createdAt value as 2:00 am with a tooltip on hover showing T00:00Z+08:00.
However, the events dateTime should always be relative to the recording and not be effected by user locals.

---

Prefered spec

<baw-date [options]="{ showTime: true, localTime: true }"></baw-date>

where DateTimeOptions is an interface that looks like

interface {
    showTime: boolean;
    localTime: boolean;
}

Alternative spec

<baw-date [showTime]="true" [localTime]="true"></baw-date>

[atruskie]

The component should have a dotted underline styling for localTime dateTime's

I'd like to see differing and subtle styling for either variant of the component.

e.g. If a recording was captured at 11:11 am (UTC+ 10), the client should show 11:11 am with a tooltip on however showing the timezone (AEST UTC + 10).

e.g. If a recording was captured at 11:11 (UTC+10:00), the client should show 11:11 with a tooltip on however showing the timezone (\<full date>+10:00 AEST).

If an event is created, the createdAt dateTime should be relative to the user. e.g. if a user in UTC + 8 creates an event at T00:00Z+08:00, a user viewing the event at UTC+10 should see the createdAt value as 2:00 am with a tooltip on hover showing T00:00Z+08:00.

This bit is a little redundant since dates like these are only stored as Instants (UTC+00:00 with no TZ information)

Prefered spec

This not ergonomic and definitely not a preferred outcome.

---

Neither of your specs show value or timezone inputs?

---

I'd like to see the following cases covered:

• an Instant formatted to show a full date stamp
• an Instant formatted to show a date only
• an Instant formatted to show a time only
• an Instant formatted to show the relative time that has passed since that instant
• an Event formatted to show a full date stamp
• an Event formatted to show a date only
• an Event formatted to show a time only
• an Event shown with in a time zone formatted to show a full date stamp
• an Event shown with in a time zone formatted to show a date only
• an Event shown with in a time zone formatted to show a time only

Produce a spec that shows usages of the above cases.

[hudson-newey]

Revised spec for baw-date component

<baw-date
    [value]="DateTime"
    [timezone]="TimezoneInformation"
    [showDate]="false | true"
    [showTime]="false | true"
    [localTime]="false | true"
    [elapsedTime]="false | true"
></baw-date>

On hover tooltips should show fulldate + timezone

Defaults

value: Required<DateTime>;
showDate: boolean = true; // by default, this is set to "true" because semantics outline the component is a "date component"
timezone: TimezoneInformation = "GMT (UTC + 0)";
showTime: boolean = false;
localTime: boolean = false; // defines if the element's inner-text should be localised
elapsedTime: boolean = false; // for x (seconds, minutes, etc...) since dateTime (uses largest whole multiple)

Note: { elapsedTime } is mutually exclusive with { showTime, showDate } (elapsed time cannot be defined if showTime OR showDate have been defined, and the same in reverse).

---

Minimum props input for component

<baw-date [value]="dateObject"></baw-date>

Produces:

---

Styling

• Underline indicates that there is an action on hover (tooltip)
• Dotted underline represents that date/times are user-localized
• Italics + Dashed Underline represents that the time value is an elapsed time (e.g. 3 months ago)
• Unstyled / Standard CSS resets (provided by Bootstrap) represent a non user-localized date/time (UTC + 0)

Tooltips

Should be visible for all obfuscated dates/times (where we are localising a non-localised value, or the opposite).

Use Cases

an Instant formatted to show a full date stamp

<baw-date
    [value]="dateObject"
    [showDate]="true"
    [showTime]="true"
></baw-date>

an Instant formatted to show a date only

<baw-date
    [value]="dateObject"
    [showDate]="true"
></baw-date>

OR

<baw-date [value]="dateObject"></baw-date>

an Instant formatted to show a time only

<baw-date
    [value]="dateObject"
    [showTime]="true"
></baw-date>

an Instant formatted to show the relative time that has passed since that instant

<baw-date
    [value]="dateObject"
    [elapsedTime]="true"
></baw-date>

an Event formatted to show a full date stamp

<baw-date
    [value]="dateObject"
    [localTime]="true"
    [showDate]="true"
    [showTime]="true"
></baw-date>

an Event formatted to show a date only

<baw-date
    [value]="dateObject"
    [localTime]="true"
    [showDate]="true"
></baw-date>

an Event formatted to show a time only

<baw-date
    [value]="dateObject"
    [localTime]="true"
    [showTime]="true"
></baw-date>

an Event shown with in a time zone formatted to show a full date stamp

<baw-date
    [value]="dateObject"
    [timezone]="AEST (UTC + 10)"
    [localTime]="true"
    [showDate]="true"
    [showTime]="true"
></baw-date>

an Event shown with in a time zone formatted to show a date only

<baw-date
    [value]="dateObject"
    [timezone]="AEST (UTC + 10)"
    [localTime]="true"
    [showDate]="true"
></baw-date>

an Event shown with in a time zone formatted to show a time only

<baw-date
    [value]="dateObject"
    [timezone]="AEST (UTC + 10)"
    [localTime]="true"
    [showTime]="true"
></baw-date>

[hudson-newey]

Proposal to be implemented:

instants (Date or luxon DateTime accepted)

• <baw-datetime [value]="model.date" />
• <baw-datetime [value]="model.date" dateOnly />
• <baw-datetime [value]="model.date" timeOnly />

events without timezone (must be luxon DateTime)

• <baw-zoned-datetime [value]="model.date" />
• <baw-zoned-datetime [value]="model.date" dateOnly />
• <baw-zoned-datetime [value]="model.date" timeOnly />

events with timezone (Date or luxon DateTime accepted)

• <baw-zoned-datetime [value]="model.date" [timezone]="model.timezone" />
• <baw-zoned-datetime [value]="model.date" [timezone]="model.timezone" dateOnly />
• <baw-zoned-datetime [value]="model.date" [timezone]="model.timezone" timeOnly />

given their presence, dateOnly and timeOnly should be modifiers

If <baw-zoned-datetime [value]="model.date" /> model.date is a Luxon DateTime with timezone (Zone) information, we should use that timezone, unless explicitly overridden by the [timezone] prop.

time since an event:

• <baw-time-since [value]="model.date" />

the duration of an event

• <baw-duration [value]="model.time" />
• <baw-duration [value]="model.time" iso8601 />
• <baw-duration [value]="model.time" sexagesimal />

[atruskie]

After doing a partial implementation in #2096 I've changed my mind about attribute naming. The Only suffix is non-sensical when combined with other attributes.

Possible alternatives include:

<baw-datetime [value]="model.date" dateOnly timeOnly secondsOnly zoneOnly />
<baw-datetime [value]="model.date" date time seconds zone />
<baw-datetime [value]="model.date" showDate showTime showSeconds showZone />
<baw-datetime [value]="model.date" format="DTSZ" />
<baw-datetime [value]="model.date" format="{date: true, time: true, seconds: true, zone: true}" />

<baw-datetime [value]="model.date">
    <format>
        <date />
        <time />
        <seconds />
        <zone />
    </format>
</baw-datetime>

Of which, we lie the second and third the most. The second is the most ergonomic but is ambiguous without docmentation. The third is effectively the opposite.