1 files changed, 71 insertions, 0 deletions
diff --git a/static/ts/components/changelog.ts b/static/ts/components/changelog.ts
new file mode 100644
index 00000000..8f8adc1c
--- /dev/null
+++ b/static/ts/components/changelog.ts
@@ -0,0 +1,71 @@
+/**
+   `<changelog />`
+
+   Display of a VEvents changelog. @ref{ChangeLogEntry}
+
+   TODO rename this file!
+
+
+   @privateRemarks @anchor{VEventChangelog}
+
+   @category Web Components
+   @mergeTarget components
+   @module
+*/
+import { makeElement } from '../lib'
+import { ComponentVEvent } from './vevent'
+import { VEvent } from '../vevent'
+
+export { VEventChangelog }
+
+/**
+   Component displaying veevents changelog.
+
+   This component is dumb, and (almost) doesn't keep any internal state. Instead
+   other parts of the program should call it with a `VEvent`, which contains the
+   actual changelog.
+*/
+class VEventChangelog extends ComponentVEvent {
+
+    /** The list holding the changelog */
+    readonly #ul: HTMLElement
+
+    constructor(uid?: string) {
+        super(uid);
+
+        this.#ul = makeElement('ul');
+    }
+
+    connectedCallback() {
+        this.replaceChildren(this.#ul);
+    }
+
+    redraw(data: VEvent) {
+        /* TODO only redraw what is needed */
+        let children = []
+        for (let [_, el] of data.changelog) {
+            let msg = '';
+            switch (el.type) {
+                case 'property':
+                    msg += `change ${el.name}: `
+                    msg += `from "${el.from}" to "${el.to}"`
+                    break;
+                case 'calendar':
+                    if (el.from === null && el.to === null) {
+                        msg += '???'
+                    } else if (el.from === null) {
+                        msg += `set calendar to "${atob(el.to!)}"`
+                    } else if (el.to === null) {
+                        msg += `Remove calendar "${atob(el.from)}"`
+                    } else {
+                        msg += `Change calendar from "${atob(el.from)}" to "${atob(el.to)}"`
+                    }
+                    break;
+            }
+
+            children.push(makeElement('li', { textContent: msg }));
+        }
+
+        this.#ul.replaceChildren(...children)
+    }
+}