Sith/eboutic/templates/eboutic/eboutic_main.jinja

129 lines
6.1 KiB
Django/Jinja

{% extends "core/base.jinja" %}
{% block title %}
{% trans %}Eboutic{% endtrans %}
{% endblock %}
{% block jquery_css %}
{# Remove jquery css #}
{% endblock %}
{% block additional_js %}
{# This script contains the code to perform requests to manipulate the
user basket without having to reload the page #}
<script src="{{ static('eboutic/js/eboutic.js') }}"></script>
<script src="{{ static('core/js/alpinejs.min.js') }}" defer></script>
{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{ static('eboutic/css/eboutic.css') }}">
{% endblock %}
{% block content %}
<h1 id="eboutic-title">{% trans %}Eboutic{% endtrans %}</h1>
<div id="eboutic" x-data="basket">
<div id="basket">
<h3>Panier</h3>
{% if errors %}
<div class="alert alert-red">
<div class="alert-main">
{% for error in errors %}
<p style="margin: 0">{{ error }}</p>
{% endfor %}
{% trans %}Your basket has been cleaned accordingly to those errors.{% endtrans %}
</div>
</div>
{% endif %}
<ul class="item-list">
{# Starting money #}
<li>
<span class="item-name">
<strong>{% trans %}Current account amount: {% endtrans %}</strong>
</span>
<span class="item-price">
<strong>{{ "%0.2f"|format(customer_amount) }} €</strong>
</span>
</li>
<template x-for="item in items" :key="item.id">
<li class="item-row" x-show="item.quantity > 0">
<div class="item-quantity">
<i class="fa fa-minus fa-xs" @click="remove(item.id)"></i>
<span x-text="item.quantity"></span>
<i class="fa fa-plus" @click="add(item)"></i>
</div>
<span class="item-name" x-text="item.name"></span>
<span class="item-price" x-text="(item.unit_price * item.quantity).toFixed(2) + ' €'"></span>
</li>
</template>
{# Total price #}
<li style="margin-top: 20px">
<span class="item-name"><strong>{% trans %}Basket amount: {% endtrans %}</strong></span>
<span x-text="get_total().toFixed(2) + ' €'" class="item-price"></span>
</li>
</ul>
<div class="catalog-buttons">
<button @click="clear_basket()" class="clear">
<i class="fa fa-trash"></i>
{% trans %}Clear{% endtrans %}
</button>
<form method="get" action="{{ url('eboutic:command') }}">
{% csrf_token %}
<button class="validate">
<i class="fa fa-check"></i>
<input type="submit" value="{% trans %}Validate{% endtrans %}"/>
</button>
</form>
</div>
</div>
<div id="catalog">
{% if not request.user.date_of_birth %}
<div class="alert alert-red" x-data="{show_alert: true}" x-show="show_alert" x-transition>
<span class="alert-main">
{% trans %}You have not filled in your date of birth. As a result, you may not have access to all the products in the online shop. To fill in your date of birth, you can go to{% endtrans %}
<a href="{{ url("core:user_edit", user_id=request.user.id) }}">
{% trans %}this page{% endtrans %}
</a>
</span>
<span class="clickable" @click="show_alert = false">
<i class="fa fa-close"></i>
</span>
</div>
{% endif %}
{% for priority_groups in products|groupby('priority')|reverse %}
{% for category, items in priority_groups.list|groupby('category') %}
{% if items|count > 0 %}
<section>
{# I would have wholeheartedly directly used the header element instead
but it has already been made messy in core/style.scss #}
<div class="category-header">
<h3>{{ category }}</h3>
{% if items[0].category_comment %}
<p><i>{{ items[0].category_comment }}</i></p>
{% endif %}
</div>
<div class="product-group">
{% for p in items %}
<button id="{{ p.id }}" class="product-button" @click='add_from_catalog({{ p.id }}, {{ p.name|tojson }}, {{ p.selling_price }})'>
{% if p.icon %}
<img class="product-image" src="{{ p.icon.url }}" alt="image de {{ p.name }}">
{% else %}
<i class="fa fa-2x fa-picture-o product-image" ></i>
{% endif %}
<div class="product-description">
<h4>{{ p.name }}</h4>
<p>{{ p.selling_price }} €</p>
</div>
</button>
{% endfor %}
</div>
</section>
{% endif %}
{% endfor %}
{% else %}
<p>{% trans %}There are no items available for sale{% endtrans %}</p>
{% endfor %}
</div>
</div>
{% endblock %}