jsw/flask_eindproject
1
0
Fork 0
Code Issues 2 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Finished user interface. Added mobile-ish support. Added homepage. Added viewpage. Fixed some scrapers

Browse source
This commit is contained in:
Jurn Wubben 2025-06-25 11:35:13 +02:00
parent fe5f1e7ecd
commit 8cba035e93
8 changed files with 433 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

95
app/templates/view.html
View file

@ -1,50 +1,76 @@
{% extends "base.html" %}
{% block content %}
<main class="w-full h-full min-h-0 px-20 pt-5 overflow-y-scroll">
<!-- Wishlist Title Card -->
<div class="w-full bg-base-100 p-5 rounded-lg shadow-md mb-5">
<h1 class="text-2xl font-bold">{{wishlist.title}}</h1>
<p class="text-gray-600">{{wishlist.description}}</p>
</div>
<h1>{{wishlist.title}}</h1>
<sub>{{wishlist.description}}</sub>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 overflow-y-scroll mb-5">
{% for item in wishlist.items %}
<div class="card bg-base-100 image-full shadow-md h-full flex flex-col">
<figure class="flex-grow">
<img
src="{{item.image}}"
alt="{{ item.title }}"
class="object-cover h-full w-full rounded-t-lg" />
</figure>
<div class="card-body flex flex-col flex-grow">
<h2 class="card-title">{{ item.title }}</h2>
<p class="flex-grow">{{ item.description }}</p>
<div class="card-actions justify-end">
<div class="{{ "join" if not item.bought }}"><a class="btn btn-soft {{ "join-item" if not item.bought }}" href="{{ item.url }}" {{ "hidden" if item.bought }}>{{ "€" ~ item.price if not item.bought }}</a>
<form method="POST" action="{{ url_for('view', id=wishlist.viewId) }}" class="contents">
<button class="buy btn btn-soft btn-primary {{ "join-item" if not item.bought }}" {{ "disabled" if item.bought }}>{{ "Reserved" if item.bought else "Reserve" }}</button>
{{ form.csrf_token }}
{{ form.num(value=loop.index) }}
</form></div>
</div>
</div>
</div>
{% endfor %}
</div>
</main>
<a href="{{url_for('edit', id=wishlist.editId)}}">edit</a>
<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 }}
<dialog class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold">Important!</h3>
<p class="py-4">Are you sure you bought this product? You won't be able to undo this.</p>
<div class="modal-action">
<form method="dialog" class="join">
<button id="dialog-confirm-no" class="btn btn-soft join-item">Close</button>
<button id="dialog-confirm-ok" class="btn btn-soft btn-primary join-item">OK</button>
</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>
</div>
</div>
</dialog>
<dialog class="modal" {{ "open" if wishlist.items|length < 1 }}>
<div class="modal-box">
<h3 class="text-lg font-bold">Still empty!</h3>
<p class="py-4">Hi there. It seems like you are here a bit too early, the wishlist is still empty. Please come back later.</p>
<div class="modal-action">
<form method="dialog">
<a class="btn" href="/">Go back</a>
</form>
</div>
</div>
</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")
const items = Array.from($all(".buy"));
const dialog = $("dialog");
const dialogOk = $("#dialog-confirm-ok");
const dialogNo = $("#dialog-confirm-no");
for (let checkbox of items) {
checkbox.addEventListener("click", e => {
for (let button of items) {
button.addEventListener("click", e => {
e.preventDefault();
const onclick = () => checkbox.form.submit();
const onclick = () => button.form.submit();
dialogOk.addEventListener("click", onclick);
dialogNo.addEventListener(
@ -52,11 +78,8 @@
() => dialogOk.removeEventListener("click", onclick)
);
console.log(dialog)
dialog.show();
});
}
</script>
{% endblock content %}