aboutsummaryrefslogtreecommitdiff
path: root/static/ts/components/date-jump.ts
diff options
context:
space:
mode:
Diffstat (limited to 'static/ts/components/date-jump.ts')
-rw-r--r--static/ts/components/date-jump.ts51
1 files changed, 51 insertions, 0 deletions
diff --git a/static/ts/components/date-jump.ts b/static/ts/components/date-jump.ts
new file mode 100644
index 00000000..f1cfe7e6
--- /dev/null
+++ b/static/ts/components/date-jump.ts
@@ -0,0 +1,51 @@
+/**
+ `<date-jump />`
+
+ @category Web Components
+ @mergeTarget components
+ @module
+*/
+
+export { DateJump }
+
+/** Replace backend-driven [today] link with frontend, with one that
+ gets correctly set in the frontend. Similarly, update the go to
+ specific date button into a link which updates wheneven the date
+ form updates.
+
+ TODO is this comment correct? We somehow contain an input element also.
+*/
+class DateJump extends HTMLElement {
+
+ readonly #golink: HTMLAnchorElement;
+ readonly #input: HTMLInputElement;
+
+ constructor() {
+ super();
+
+ this.#golink = document.createElement('a')
+ this.#golink.classList.add('btn');
+ this.#golink.textContent = "➔"
+ this.#input = document.createElement('input')
+ this.#input.type = 'date';
+ }
+
+ /** Sets the link to NOW upon mounting */
+ connectedCallback() {
+
+ /* Form is just here so the css works out */
+ let form = document.createElement('form');
+ form.replaceChildren(this.#input, this.#golink);
+ this.replaceChildren(form);
+
+ this.#input.onchange = () => {
+ let date = this.#input.valueAsDate!.format('~Y-~m-~d');
+ this.#golink.href = `${date}.html`
+ }
+
+ let now = (new Date).format("~Y-~m-~d")
+ this.#input.value = now;
+ /* onchange isn't triggered by manually setting the value */
+ this.#golink.href = `${now}.html`
+ }
+}