Setup webpack and typescript

.devcontainer/devcontainer.json

@@ -9,7 +9,8 @@
   },
   "remoteUser": "root",
   "features": {
-    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+    "ghcr.io/devcontainers/features/node:1": {}
   },
   "forwardPorts": [
     8000,
@@ -29,7 +30,9 @@
         "markis.code-coverage",
         "qwtel.sqlite-viewer",
         "ms-vsliveshare.vsliveshare",
-        "wholroyd.jinja"
+        "wholroyd.jinja",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode"
       ],
       "settings": {
         "editor.formatOnPaste": false,

.devcontainer/postCreateCommand.sh

@@ -1,5 +1,8 @@
 #!/usr/bin/env bash
 
+. ${NVM_DIR}/nvm.sh && nvm install
+npm install
+
 pipx install poetry
 poetry install
 poetry run playwright install --with-deps

.editorconfig

@@ -18,5 +18,9 @@ trim_trailing_whitespace = false
 [*.{yml,yaml,json,js,html}]
 indent_size = 2
 
+[*.ts]
+indent_size = 2
+
+
 [LICENSE]
 insert_final_newline = false

.github/dependabot.yml

@@ -41,3 +41,17 @@ updates:
       alldevcontainers:
         patterns:
         - "*"
+
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "08:00"
+      timezone: "Europe/Amsterdam"
+    labels:
+      - "dependencies"
+    groups:
+      allnpm:
+        patterns:
+        - "*"

.gitignore

@@ -41,3 +41,10 @@ output/
 
 # ignore playwright
 test-results/
+
+# ignore npm
+node_modules/
+
+
+# ignore tsc generated files
+amt/site/static/js/*

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+()v22.6.0

.pre-commit-config.yaml

@@ -10,6 +10,7 @@ repos:
       - id: check-yaml
         exclude: example/
       - id: check-json
+        exclude: 'tsconfig\.json'
       - id: check-added-large-files
       - id: check-merge-conflict
       - id: check-toml

.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+amt/site/static/js
+
+webpack.config.js
+webpack.config.prod.js
+tsconfig.json

.prettierrc

@@ -0,0 +1 @@
+{}

.vscode/extensions.json

@@ -11,6 +11,8 @@
     "markis.code-coverage",
     "qwtel.sqlite-viewer",
     "ms-vsliveshare.vsliveshare",
-    "wholroyd.jinja"
+    "wholroyd.jinja",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
   ]
 }

amt/site/static/ts/amt.ts

@@ -0,0 +1,65 @@
+import Sortable from "sortablejs";
+import "htmx.org";
+
+window.onload = function () {
+  // TODO (robbert): we need (better) event handling and displaying of server errors
+  document.body.addEventListener("htmx:sendError", function () {
+    document.getElementById("errorContainer")!.innerHTML =
+      "<h1>Placeholder: Error while connecting to server</h1";
+  });
+
+  const columns = document.getElementsByClassName(
+    "progress_cards_container",
+  ) as HTMLCollectionOf<HTMLDivElement>;
+  for (let i = 0; i < columns.length; i++) {
+    new Sortable(columns[i], {
+      //NOSONAR
+      group: "shared", // set both lists to same group
+      animation: 150,
+      onEnd: function (evt) {
+        if (evt.oldIndex !== evt.newIndex || evt.from !== evt.to) {
+          let previousSiblingId = evt.item.previousElementSibling
+            ? evt.item.previousElementSibling.getAttribute("data-id")
+            : "-1";
+          let nextSiblingId = evt.item.nextElementSibling
+            ? evt.item.nextElementSibling.getAttribute("data-id")
+            : "-1";
+          let targetId = "#" + evt.item.getAttribute("data-target-id");
+          let toStatusId = evt.to.getAttribute("data-id");
+          let form = document.getElementById("cardMovedForm");
+
+          (document.getElementsByName("taskId")[0] as HTMLInputElement).value =
+            evt.item.getAttribute("data-id") ?? "";
+          (
+            document.getElementsByName("statusId")[0] as HTMLInputElement
+          ).value = toStatusId ?? "";
+          (
+            document.getElementsByName(
+              "previousSiblingId",
+            )[0] as HTMLInputElement
+          ).value = previousSiblingId ?? "";
+          (
+            document.getElementsByName("nextSiblingId")[0] as HTMLInputElement
+          ).value = nextSiblingId ?? "";
+          form!.setAttribute("hx-target", targetId);
+
+          // @ts-expect-error"
+          htmx.trigger("#cardMovedForm", "cardmoved");
+        }
+      },
+    });
+  }
+};
+
+// @ts-expect-error"
+function setCookie(
+  cookieName: string,
+  cookieValue: string,
+  expirationDays: number,
+) {
+  const date = new Date();
+  date.setTime(date.getTime() + expirationDays * 24 * 60 * 60 * 1000); // Set expiration time
+  const expires = "expires=" + date.toUTCString();
+  document.cookie =
+    cookieName + "=" + cookieValue + ";" + expires + ";path=/;SameSite=Strict";
+}

eslint.config.mjs

@@ -0,0 +1,13 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default [
+    { files: ["**/*.ts"] },
+    { languageOptions: { globals: globals.browser } },
+    pluginJs.configs.recommended,
+    ...tseslint.configs.strict,
+    ...tseslint.configs.stylistic,
+    eslintConfigPrettier,
+];