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 | 92x 95x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 168x 56x 56x 56x 168x 168x 168x 168x 168x 92x 92x 92x 92x 92x 92x 156x 156x 156x 156x 156x 92x 159x 159x 159x 159x 92x 92x 92x 92x 92x 92x 90x 90x 90x 90x 90x 89x 90x 90x 90x 89x 89x 90x 90x 90x 90x 90x 90x 90x 90x 89x 89x 89x 89x 90x 90x 92x 92x 91x 91x 91x 91x 90x 90x 90x 91x 91x 92x 92x 90x 90x 90x 92x 92x 92x 92x 92x 92x | import { css, html, 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 {
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 === Display.day) {
formatted = this.datetime.toLocaleString(Display.day);
} else {
formatted = this.datetime.toLocaleString(Display[this.display]);
}
return html`<span
class="date"
title="${this.datetime.toLocaleString(Display.datetime)}"
>${formatted}</span
>`;
}
}
}
|