updated testmodule to show off more features. Added custom css and js to it

modules/testmodule/README.md

@@ -12,3 +12,4 @@ This module is a minimal module implementation to be used as a template to work
 - Embeddable HTML fragment at `/static/_page.html`
 - Loading a custom stylesheet and script from within the HTML fragment
 - Using layout CSS classes from `/base/static/style.css` to create a minimal grid of cards
+- Using fontawesome icons

modules/testmodule/static/_page.html

@@ -4,16 +4,15 @@
   <header>
     <div>
       <div class="logo">Testmodule</div>
-      <div class="tagline">lets test this layoutout</div>
+      <div class="tagline fancy">with custom css</div>
     </div>
   </header>
 
   <main class="grid">
     <div class="col">
       <div class="card grow">
-        <h2>title</h2>
-        <div class="scroll">
-          <div>...</div>
+        <h2>Scrollable list</h2>
+        <div class="scroll" id="js-list">
         </div>
       </div>
       <div class="card grow">
@@ -25,14 +24,14 @@
     <div class="col">
       <div class="card grow">
         <h2>title</h2>
-        contents
+        <p id="js-text">loading..</p>
       </div>
     </div>
 
     <div class="col">
       <div class="card grow">
-        <h2>title</h2>
-        contents
+        <h2>Api contents</h2>
+        <p id="js-api">loading...</p>
       </div>
     </div>
   </main>

modules/testmodule/static/_script.js

@@ -0,0 +1,40 @@
+AW.define(() => {
+    var api_data = {};
+
+    loadAPIdata().then(renderAPI);
+
+    renderText();
+    renderList();
+
+    async function loadAPIdata() {
+        var fresh_data = await fetch("/modules/testmodule/api/status");
+        if (!fresh_data.ok) {
+            console.error("Request failed: ", fresh_data.status);
+            return;           
+        }
+        
+        api_data = await fresh_data.json(); 
+    }
+
+    function renderAPI() {
+        document.getElementById("js-api").textContent = "GET '/modules/testmodule/api/status'  returned  " + JSON.stringify(api_data, null, 2);
+    }
+
+
+    function renderText() {
+        document.getElementById("js-text").textContent = "This was written by javascript";
+    }
+
+    function renderList() {
+        const list = document.getElementById("js-list");
+
+        for (let i = 0; i < 20; i++) {
+            const child = document.createElement("div");
+            child.innerHTML = `<i class="fa-solid fa-caret-right"></i><span class="clickable">  item number ${i}</span>`;
+
+            list.appendChild(child);
+        }
+    }
+});
+
+

modules/testmodule/static/_source.js

@@ -1,48 +0,0 @@
-AW.define(() => {
-  const canvas = document.getElementById("tm-canvas");
-  const ctx = canvas.getContext("2d");
-
-  let lastValue = 0;
-
-  function draw() {
-    const w = canvas.width;
-    const h = canvas.height;
-    ctx.clearRect(0, 0, w, h);
-
-    // simple bar representing lastValue out of 100
-    const pct = Math.max(0, Math.min(1, lastValue / 100));
-    ctx.fillStyle = "#333";
-    ctx.fillRect(0, 0, w, h);
-
-    ctx.fillStyle = "#4a90e2";
-    const barHeight = h * pct;
-    ctx.fillRect(0, h - barHeight, w, barHeight);
-
-    ctx.fillStyle = "#fff";
-    ctx.font = "16px sans-serif";
-    ctx.fillText(`${lastValue}`, 12, 24);
-  }
-
-  async function refresh() {
-    const res = await fetch("/modules/testmodule/api/data");
-    const data = await res.json();
-
-    document.getElementById("stat-status").textContent = data.status;
-    document.getElementById("stat-value").textContent = data.value;
-    document.getElementById("testmodule-synced").textContent =
-      "synced " + new Date().toLocaleTimeString();
-
-    lastValue = data.value;
-    draw();
-  }
-
-  document.getElementById("testmodule-refresh").addEventListener("click", refresh);
-
-  new ResizeObserver(() => {
-    canvas.width = canvas.clientWidth;
-    canvas.height = canvas.clientHeight;
-    draw();
-  }).observe(canvas);
-
-  refresh();
-});

modules/testmodule/static/_style.css

@@ -0,0 +1,6 @@
+.fancy {
+  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}