ednl-liftstatus-web-components
Version:
The EDNL LiftStatus web components
160 lines (159 loc) • 6.75 kB
JavaScript
import { Host, h } from "@stencil/core";
import dayjs from "dayjs";
import { Datepicker } from "vanillajs-datepicker";
import nl from "vanillajs-datepicker/js/i18n/locales/nl";
import { getStore } from "../../store";
Object.assign(Datepicker.locales, nl);
export class DatePicker {
constructor() {
/**
* Time options used to populate the select element
*/
this.timeOptions = [];
this.handleSelect = (event) => {
const selectElement = event.target;
const selectedStart = dayjs(selectElement.value.split(",")[0]);
const selectedEnd = dayjs(selectElement.value.split(",")[1]);
const currentStart = dayjs(this.store.state.datePicker.start);
this.store.state.datePicker = Object.assign(Object.assign({}, this.store.state.datePicker), {
// Only overwrite the date, keep the time
start: currentStart
.hour(selectedStart.hour())
.minute(selectedStart.minute())
.second(selectedStart.second())
.millisecond(selectedStart.millisecond())
.toISOString(),
// Only overwrite the date, keep the time
end: currentStart
.hour(selectedEnd.hour())
.minute(selectedEnd.minute())
.second(selectedEnd.second())
.millisecond(selectedEnd.millisecond())
.toISOString()
});
};
this.decrementHour = () => {
const currentStart = dayjs(this.store.state.datePicker.start);
const currentEnd = dayjs(this.store.state.datePicker.end);
this.store.state.datePicker = Object.assign(Object.assign({}, this.store.state.datePicker), { start: currentStart.subtract(1, "hour").toISOString(), end: currentEnd.subtract(1, "hour").toISOString() });
};
this.incrementHour = () => {
const currentStart = dayjs(this.store.state.datePicker.start);
const currentEnd = dayjs(this.store.state.datePicker.end);
this.store.state.datePicker = Object.assign(Object.assign({}, this.store.state.datePicker), { start: currentStart.add(1, "hour").toISOString(), end: currentEnd.add(1, "hour").toISOString() });
};
this.incrementDay = () => {
const currentStart = dayjs(this.store.state.datePicker.start);
const currentEnd = dayjs(this.store.state.datePicker.end);
this.store.state.datePicker = Object.assign(Object.assign({}, this.store.state.datePicker), { start: currentStart.add(1, "day").toISOString(), end: currentEnd.add(1, "day").toISOString() });
};
this.decrementDay = () => {
const currentStart = dayjs(this.store.state.datePicker.start);
const currentEnd = dayjs(this.store.state.datePicker.end);
this.store.state.datePicker = Object.assign(Object.assign({}, this.store.state.datePicker), { start: currentStart.subtract(1, "day").toISOString(), end: currentEnd.subtract(1, "day").toISOString() });
};
/**
* Use to initialize select dropdown options
* @returns
*/
this.getTimeOptions = () => {
const timeFrameData = [];
for (let i = 0; i < 24; i++) {
const startLabel = i < 10 ? `0${i}` : i;
const endLabel = i + 1 < 10 ? `0${i + 1}` : i + 1;
timeFrameData.push({
value: [
dayjs(this.store.state.datePicker.start).hour(i).toISOString(),
dayjs(this.store.state.datePicker.end)
.hour(i + 1)
.toISOString(),
],
label: `${startLabel}:00 - ${endLabel}:00`,
});
}
return timeFrameData;
};
this.idKey = undefined;
}
async componentWillLoad() {
this.store = await getStore(this.idKey);
this.timeOptions = this.getTimeOptions();
}
componentDidLoad() {
// Select the date picker element
const datePickerElement = this.element.shadowRoot.querySelector("#date-picker");
// Initialize the date picker
const datePicker = new Datepicker(datePickerElement, {
language: "nl",
});
// Set today as the selected date
datePicker.setDate(dayjs(this.store.state.datePicker.start).valueOf());
// Subscribe to date picker element changes
datePickerElement.addEventListener("changeDate", (_event) => {
const selectedDate = dayjs(new Date(datePicker.getDate().toString())); // Only way to get the selected date consistently
const currentStart = dayjs(this.store.state.datePicker.start);
const currentEnd = dayjs(this.store.state.datePicker.end);
this.store.state.datePicker = Object.assign(Object.assign({}, this.store.state.datePicker), {
// Only overwrite the date, keep the time
start: selectedDate
.hour(currentStart.hour())
.minute(currentStart.minute())
.second(currentStart.second())
.millisecond(currentStart.millisecond())
.toISOString(),
// Only overwrite the date, keep the time
end: selectedDate
.hour(currentEnd.hour())
.minute(currentEnd.minute())
.second(currentEnd.second())
.millisecond(currentEnd.millisecond())
.toISOString()
});
});
// Subscribe to store changes
this.store.onChange("datePicker", ({ start }) => {
datePicker.setDate(dayjs(start).valueOf());
// Update the time options (needed for the timestamp values)
this.timeOptions = this.getTimeOptions();
});
}
render() {
return (h(Host, null, h("input", { type: "text", id: "date-picker" }), h("select", { onInput: this.handleSelect }, this.timeOptions.map(({ value, label }) => (h("option", { value: value, selected: value[0] === this.store.state.datePicker.start &&
value[1] === this.store.state.datePicker.end }, label)))), h("button", { onClick: this.decrementHour }, "\u2039"), h("button", { onClick: this.incrementHour }, "\u203A"), h("button", { onClick: this.decrementDay }, "\u00AB"), h("button", { onClick: this.incrementDay }, "\u00BB")));
}
static get is() { return "ls-date-picker"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["ls-date-picker.css"]
};
}
static get styleUrls() {
return {
"$": ["ls-date-picker.css"]
};
}
static get properties() {
return {
"idKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The unique key that is used to identify store data."
},
"attribute": "id-key",
"reflect": false
}
};
}
static get elementRef() { return "element"; }
}
//# sourceMappingURL=ls-date-picker.js.map