Added a bit of style to edit.html

Added buy capability to view with dialog

Added additional properties to Item (url and imageurl); NEEDS TESTING

Made delete items work properly

app/templates/view.html

@@ -4,7 +4,53 @@
 <a href="{{url_for('edit', id=wishlist.editId)}}">edit</a>
 
 <ul>
-    {% for item in wishlist.items %}
-        <li><input type=checkbox {{ "checked" if item.bought }} {{ item.title }}: {{ item.description }}</li>        
-    {% endfor %}
-</ul>
+  {% if wishlist.items|length == 0 %}
+    <p>No items yet</p>
+  {% endif %}
+  {% for item in wishlist.items %}
+    <li>
+      <form method="POST" href="{{ url_for("view", id=wishlist.editId) }}">
+        {{ form.csrf_token }}
+        {{ form.num(value = loop.index) }}
+
+        <input type=checkbox {{ "checked disabled" if item.bought}}>
+        {{ item.title }}: {{ item.description }}
+      </form>
+    </li>        
+  {% endfor %}
+</ul>
+
+<dialog>
+  <p>Are you sure you bought this product. You won't be able to undo this.</p>
+  <form method="dialog">
+    <button id="dialog-confirm-ok">OK</button>
+    <button id="dialog-confirm-no">Close</button>
+  </form>
+</dialog>
+
+<script>
+  const $ = (...f) => document.querySelector(...f);
+  const $all = (...f) => document.querySelectorAll(...f);
+
+  const items = Array.from($all("input[type=checkbox]"));
+  const dialog = $("dialog")
+  const dialogOk = $("#dialog-confirm-ok")
+  const dialogNo = $("#dialog-confirm-no")
+
+  for (let checkbox of items) {
+      checkbox.addEventListener("click", e => { 
+        e.preventDefault();
+        const onclick = () => checkbox.form.submit();
+
+        dialogOk.addEventListener("click", onclick);
+        dialogNo.addEventListener(
+          "click", 
+          () => dialogOk.removeEventListener("click", onclick)
+        ); 
+
+        console.log(dialog)
+        dialog.show();
+      });
+  }
+
+</script>