Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 125x 132x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 1669x 1669x 1669x 1669x 1669x 1669x 1669x 1669x 1647x 1647x 1669x 207x 207x 207x 1669x 1669x 1669x 1669x 1669x 125x 125x 125x 125x 125x 125x 1633x 1633x 1633x 1633x 1633x 1633x 1633x 1633x 125x 1668x 1668x 1668x 1668x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 121x 121x 121x 408x 121x 325x 121x 209x 584x 493x 493x 121x 120x 120x 120x 120x 120x 120x 120x 120x 120x 120x 120x 120x 120x 125x 125x 123x 123x 123x 123x 120x 120x 120x 120x 120x 120x 120x 120x 120x 120x 123x 123x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x | import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import { RapidElement } from '../RapidElement';
import { Store } from '../store/Store';
import { DateTime } from 'luxon';
export const Display = {
date: DateTime.DATE_SHORT,
datetime: DateTime.DATETIME_SHORT,
time: DateTime.TIME_SIMPLE,
timedate: 'timedate',
duration: 'duration',
relative: 'relative',
countdown: 'countdown',
day: 'LLL d'
};
export class TembaDate extends RapidElement {
static get styles() {
return css`
.date {
display: inline;
}
`;
}
@property({ type: String })
value: string;
@property({ type: String })
display = 'date';
@property({ type: Object, attribute: false })
datetime: DateTime;
store: Store;
public connectedCallback(): void {
super.connectedCallback();
this.store = document.querySelector('temba-store');
}
public willUpdate(changed: PropertyValues): void {
super.willUpdate(changed);
if (changed.has('value')) {
this.datetime = DateTime.fromISO(this.value);
}
}
public render(): TemplateResult | typeof nothing {
// unparseable values and zero-value times (e.g. go's zero time,
// 0001-01-01T00:00:00Z, for a contact that has never been seen) aren't
// real dates - render nothing rather than something like "2025 years ago"
if (this.datetime && !(this.datetime.isValid && this.datetime.year > 1)) {
return nothing;
}
if (this.datetime && this.store) {
this.datetime.setLocale(this.store.getLocale());
let formatted = '';
if (this.display === Display.timedate) {
const hours = Math.abs(
this.datetime.diffNow().milliseconds / 1000 / 60 / 60
);
const day = this.datetime.get('day');
if (hours < 24 && day == DateTime.now().get('day')) {
formatted = this.datetime.toLocaleString(Display.time);
} else if (hours < 24 * 365) {
formatted = this.datetime.toFormat(Display.day);
} else {
formatted = this.datetime.toLocaleString(Display.date);
}
} else if (this.display === Display.relative) {
const minutes = Math.abs(
this.datetime.diffNow().milliseconds / 1000 / 60
);
if (minutes < 1) {
return html`<span
class="date"
title="${this.datetime.toLocaleString(Display.datetime)}"
>just now</span
>`;
}
formatted = this.store.getShortDuration(this.datetime);
} else if (this.display === Display.duration) {
const minutes = Math.abs(
this.datetime.diffNow().milliseconds / 1000 / 60
);
if (minutes < 1) {
return html`<span
class="date"
title="${this.datetime.toLocaleString(Display.datetime)}"
>just now</span
>`;
}
formatted = this.store.getShortDuration(this.datetime);
} else if (this.display === Display.countdown) {
formatted = this.store.getCountdown(this.datetime);
} else if (this.display === 'day') {
// the display attribute carries the key ('day'), and Display.day
// is a luxon format string ('LLL d') rather than an Intl options
// object, so it must go through toFormat — matching how the
// timedate branch renders the same format above. The short
// month-day form is only unambiguous for dates in the current
// year; anything else falls back to the locale date with year.
formatted =
this.datetime.year === DateTime.now().year
? this.datetime.toFormat(Display.day)
: this.datetime.toLocaleString(Display.date);
} else {
formatted = this.datetime.toLocaleString(Display[this.display]);
}
return html`<span
class="date"
title="${this.datetime.toLocaleString(Display.datetime)}"
>${formatted}</span
>`;
}
}
}
|