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/edit.html

@@ -7,19 +7,22 @@
     {{ form_wl_editinfo.title.label }}
     {{ form_wl_editinfo.title() }}
 
+    <!-- <br> -->
     {{ form_wl_editinfo.description.label }}
     {{ form_wl_editinfo.description() }}
 
+    <!-- <br> -->
     {{ form_wl_editinfo.wl_edit_submit() }}
 </form>
 
+<br>
 <h1>Reset urls</h1>
 <ul>
     <li>
-        View: {{ wishlist.viewId }}
+    View: <a href={{ url_for("view", id=wishlist.viewId) }}>{{ wishlist.viewId }}</a>
     </li>
     <li>
-        Edit: {{ wishlist.editId }}
+    Edit: <a href={{ url_for("edit", id=wishlist.editId) }}>{{ wishlist.editId }}</a>
     </li>
 </ul>
 
@@ -29,41 +32,67 @@
     {{ form_wl_reseturls.wl_reset_submit() }}
 </form>
  
-<br>
-<h1>Delete wishlist</h1>
-<form action="{{ cpath }}" method="POST">
-    {{ form_wl_delete.hidden_tag() }}
-    {{ form_wl_delete.wl_del_submit() }}
-</form>
- 
 <br>
 <h1>New item</h1>
 <form action="{{ cpath }}" method="POST">
     {{ form_it_new.hidden_tag() }}
 
+    <!-- <br> -->
     {{ form_it_new.title.label }}
     {{ form_it_new.title() }}
 
+    <!-- <br> -->
     {{ form_it_new.description.label }}
     {{ form_it_new.description() }}
 
+    <!-- <br> -->
     {{ form_it_new.price.label }}
     {{ form_it_new.price() }}
 
+    <!-- <br> -->
+    {{ form_it_new.url.label }}
+    {{ form_it_new.url() }}
+
+    <!-- <br> -->
+    {{ form_it_new.image.label }}
+    {{ form_it_new.image() }}
+
+    <!-- <br> -->
     {{ form_it_new.it_new_submit() }}
 </form>
 
 <br>
 <h1>Delete items</h1>
+
+{% if wishlist.items|length == 0 %}
+  <p>No items yet</p>
+{% endif %}
 <ul>
     {% for value in wishlist.items %}
         <li>
             <form action="{{ cpath }}" method="POST">
-                {{ form_it_delete.hidden_tag() }}
+                {{ form_it_delete.csrf_token }}
                 {{ form_it_delete.index(value=loop.index) }}
                 {{ form_it_delete.it_del_submit() }}
             </form>
             {{ value.title }}
         </li>
     {% endfor %}
-</ul>
+</ul>
+
+<br>
+<h1>Delete wishlist</h1>
+<form action="{{ cpath }}" method="POST">
+    {{ form_wl_delete.hidden_tag() }}
+    {{ form_wl_delete.wl_del_submit() }}
+</form>
+
+<style>
+  form {
+      display:grid;
+      grid-template-columns: max-content max-content;
+      grid-gap:5px;
+  }
+  form label       { text-align:right; }
+  form label:after { content: ":"; }
+</style>

app/templates/new.html

@@ -1,4 +1,4 @@
-<form action="/new" method="POST">
+<form action="{{ url_for("new") }}" method="POST">
     {{ form.hidden_tag() }}
 
     {{ form.title.label }}
@@ -8,4 +8,4 @@
     {{ form.description() }}
 
     {{ form.submit() }}
-</form>
+</form>

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>