Add basic front-end :wip

src/main/resources/static/index.html

@@ -15,9 +15,17 @@
   </style>
 </head>
 
-<h1>Appointments</h1>
+<header>
+  <h1>Appointments</h1>
+  <p>Example task application</p>
 
-<h2>Open</h2>
+  <nav>
+    <a href="/" class="current">Appointments</a>
+    <a href="/">Users</a>
+  </nav>
+</header>
+
+<h3>Open</h3>
 <table>
   <thead>
     <tr>
@@ -26,16 +34,10 @@ <h2>Open</h2>
       <th>Order</th>
     </tr>
   </thead>
-  <tbody id="appointments">
-    <tr>
-      <td>a</td>
-      <td>b</td>
-      <td>0</td>
-    </tr>
-  </tbody>
+  <tbody id="appointments"></tbody>
 </table>
 
-<h2>New</h2>
+<h3>New</h3>
 <form>
   <label for="title">Title</label>
   <input id="title" type="text">
@@ -44,32 +46,12 @@ <h2>New</h2>
 </form>
 <button onclick="add()">Add</button>
 
-<script>
-  const http = new XMLHttpRequest();
-
-  function httpSend(method, url, body, callback) {
-    http.open(method, url);
-    http.setRequestHeader('Content-type', 'application/json');
-    http.send(JSON.stringify(body));
-    http.onreadystatechange = callback;
-  }
-
-  function httpGet(url, body, callback) {
-    httpSend('GET', url, body, callback);
-  }
-
-  function httpPost(url, body, callback) {
-    httpSend('POST', url, body, callback);
-  }
-
-  function add() {
-    let body = { title: 'a', order: 0 };
-    httpPost('/appointments', body, () => console.log(http.responseText));
-  }
-
-  function main() {
-    httpGet('/appointments', null, () => console.log(http.responseText));
-  }
+<template id="appointmentRow">
+  <tr>
+    <td>title</td>
+    <td>0</td>
+    <td><input type="checkbox" checked></td>
+  </tr>
+</template>
 
-  main();
-</script>
+<script src="main.js"></script>

src/main/resources/static/main.js

@@ -0,0 +1,62 @@
+
+const http = new XMLHttpRequest();
+
+const tbody = document.querySelector("tbody#appointments");
+const template = document.querySelector("#appointmentRow");
+const titleInput = document.querySelector("#title");
+const orderInput = document.querySelector("#order");
+
+function httpSend(method, url, body, callback) {
+    http.open(method, url);
+    http.setRequestHeader('Content-type', 'application/json');
+    http.send(JSON.stringify(body));
+    http.onload = callback;
+}
+
+function httpGet(url, body, callback) {
+    httpSend('GET', url, body, callback);
+}
+
+function httpPost(url, body, callback) {
+    httpSend('POST', url, body, callback);
+}
+
+function addTask(task) {
+    const clone = template.content.cloneNode(true);
+    const td = clone.querySelectorAll("td");
+    const input = clone.querySelectorAll("input");
+    td[0].textContent = task.title;
+    td[1].textContent = task.order;
+    input.checked = task.completed;
+    tbody.appendChild(clone);
+}
+
+function add() {
+    const body = {
+        title: titleInput.value,
+        order: orderInput.valueAsNumber
+    };
+
+    httpPost('/appointments', body, () => {
+        titleInput.value = "";
+        orderInput.value = 0;
+
+        addTask(JSON.parse(http.responseText));
+    });
+}
+
+function main() {
+
+    httpGet('/appointments', null, () => {
+        for (const tr of tbody.children)
+            tr.remove();
+
+        const response = JSON.parse(http.responseText);
+        for (const task of response)
+            addTask(task);
+
+        console.log(http.responseText);
+    });
+}
+
+document.body.onload = main;

src/main/resources/static/simple.css

@@ -9,8 +9,12 @@
   --body-font-size: 1.15rem;
   --footer-font-size: 0.9rem;
   --nav-font-size: 1rem;
+  --aside-font-size: 1rem;
+  --figcaption-font-size: 0.9rem;
+  --cite-font-size: 0.9rem;
 
   --body-line-height: 1.5;
+  --h3-line-height: 1.1;
 
   --standard-border-radius: 5px;
 
@@ -326,7 +330,7 @@ aside, details, pre, progress {
 }
 
 aside {
-  font-size: 1rem;
+  font-size: var(--aside-font-size);
   width: 30%;
   padding: 0 15px;
   margin-inline-start: 15px;