mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-10 11:59:23 +00:00
introduce djhtml as jinja+scss formater
This commit is contained in:
thomas girod
committed by
Bartuccio Antoine
Bartuccio Antoine
parent
13d0d2a300
commit
b25805e0a1
@ -1,7 +1,7 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}Eboutic{% endtrans %}
|
||||
{% trans %}Eboutic{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block jquery_css %}
|
||||
@ -11,120 +11,120 @@
|
||||
{% 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>
|
||||
<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') }}">
|
||||
<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>
|
||||
<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>
|
||||
<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 %}
|
||||
{% 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>
|
||||
{% 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>
|
||||
<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 %}
|
||||
{% else %}
|
||||
<p>{% trans %}There are no items available for sale{% endtrans %}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p>{% trans %}There are no items available for sale{% endtrans %}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}Basket state{% endtrans %}
|
||||
{% trans %}Basket state{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block jquery_css %}
|
||||
@ -9,133 +9,133 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block additional_js %}
|
||||
<script src="{{ static('eboutic/js/makecommand.js') }}" defer></script>
|
||||
<script src="{{ static('core/js/alpinejs.min.js') }}" defer></script>
|
||||
<script src="{{ static('eboutic/js/makecommand.js') }}" defer></script>
|
||||
<script src="{{ static('core/js/alpinejs.min.js') }}" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h3>{% trans %}Eboutic{% endtrans %}</h3>
|
||||
<h3>{% trans %}Eboutic{% endtrans %}</h3>
|
||||
|
||||
<div>
|
||||
<p>{% trans %}Basket: {% endtrans %}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Article</td>
|
||||
<td>Quantity</td>
|
||||
<td>Unit price</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in basket.items.all() %}
|
||||
<tr>
|
||||
<td>{{ item.product_name }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>{{ item.product_unit_price }} €</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
<div>
|
||||
<p>{% trans %}Basket: {% endtrans %}</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Article</td>
|
||||
<td>Quantity</td>
|
||||
<td>Unit price</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in basket.items.all() %}
|
||||
<tr>
|
||||
<td>{{ item.product_name }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>{{ item.product_unit_price }} €</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
<strong>{% trans %}Basket amount: {% endtrans %}{{ "%0.2f"|format(basket.get_total()) }} €</strong>
|
||||
<strong>{% trans %}Basket amount: {% endtrans %}{{ "%0.2f"|format(basket.get_total()) }} €</strong>
|
||||
|
||||
{% if customer_amount != None %}
|
||||
<br>
|
||||
{% trans %}Current account amount: {% endtrans %}
|
||||
<strong>{{ "%0.2f"|format(customer_amount) }} €</strong>
|
||||
{% if customer_amount != None %}
|
||||
<br>
|
||||
{% trans %}Current account amount: {% endtrans %}
|
||||
<strong>{{ "%0.2f"|format(customer_amount) }} €</strong>
|
||||
|
||||
{% if not basket.contains_refilling_item %}
|
||||
<br>
|
||||
{% trans %}Remaining account amount: {% endtrans %}
|
||||
<strong>{{ "%0.2f"|format(customer_amount|float - basket.get_total()) }} €</strong>
|
||||
{% endif %}
|
||||
{% if not basket.contains_refilling_item %}
|
||||
<br>
|
||||
{% trans %}Remaining account amount: {% endtrans %}
|
||||
<strong>{{ "%0.2f"|format(customer_amount|float - basket.get_total()) }} €</strong>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</p>
|
||||
<br>
|
||||
{% if settings.SITH_EBOUTIC_CB_ENABLED %}
|
||||
<div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
|
||||
<div class="collapse-header clickable" @click="collapsed = !collapsed">
|
||||
<span class="collapse-header-text">
|
||||
{% trans %}Edit billing information{% endtrans %}
|
||||
</span>
|
||||
<span class="collapse-header-icon" :class="{'reverse': collapsed}">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
<form class="collapse-body" id="billing_info_form" method="post"
|
||||
x-show="collapsed" x-data="billing_infos"
|
||||
x-transition.scale.origin.top
|
||||
@submit.prevent="send_form()">
|
||||
{% csrf_token %}
|
||||
{{ billing_form }}
|
||||
<br>
|
||||
<br>
|
||||
<div x-show="errors.length > 0" class="alert alert-red" x-transition>
|
||||
<div class="alert-main">
|
||||
<template x-for="error in errors">
|
||||
<div x-text="error.field + ' : ' + error.messages.join(', ')"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="clickable" @click="errors = []">
|
||||
<i class="fa fa-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="successful" class="alert alert-green" x-transition>
|
||||
<div class="alert-main">
|
||||
Informations de facturation enregistrées
|
||||
</div>
|
||||
<div class="clickable" @click="successful = false">
|
||||
<i class="fa fa-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" class="btn btn-blue clickable"
|
||||
value="{% trans %}Validate{% endtrans %}">
|
||||
</form>
|
||||
<div class="collapse" :class="{'shadow': collapsed}" x-data="{collapsed: false}" x-cloak>
|
||||
<div class="collapse-header clickable" @click="collapsed = !collapsed">
|
||||
<span class="collapse-header-text">
|
||||
{% trans %}Edit billing information{% endtrans %}
|
||||
</span>
|
||||
<span class="collapse-header-icon" :class="{'reverse': collapsed}">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
<br>
|
||||
{% if must_fill_billing_infos %}
|
||||
<p>
|
||||
<i>
|
||||
{% trans %}You must fill your billing infos if you want to pay with your credit
|
||||
card{% endtrans %}
|
||||
</i>
|
||||
</p>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ settings.SITH_EBOUTIC_ET_URL }}" name="bank-pay-form">
|
||||
<template x-data x-for="input in $store.billing_inputs.data">
|
||||
<input type="hidden" :name="input['key']" :value="input['value']">
|
||||
</template>
|
||||
<input type="submit" id="bank-submit-button"
|
||||
{% if must_fill_billing_infos %}disabled="disabled"{% endif %}
|
||||
value="{% trans %}Pay with credit card{% endtrans %}"/>
|
||||
<form class="collapse-body" id="billing_info_form" method="post"
|
||||
x-show="collapsed" x-data="billing_infos"
|
||||
x-transition.scale.origin.top
|
||||
@submit.prevent="send_form()">
|
||||
{% csrf_token %}
|
||||
{{ billing_form }}
|
||||
<br>
|
||||
<br>
|
||||
<div x-show="errors.length > 0" class="alert alert-red" x-transition>
|
||||
<div class="alert-main">
|
||||
<template x-for="error in errors">
|
||||
<div x-text="error.field + ' : ' + error.messages.join(', ')"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="clickable" @click="errors = []">
|
||||
<i class="fa fa-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="successful" class="alert alert-green" x-transition>
|
||||
<div class="alert-main">
|
||||
Informations de facturation enregistrées
|
||||
</div>
|
||||
<div class="clickable" @click="successful = false">
|
||||
<i class="fa fa-close"></i>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" class="btn btn-blue clickable"
|
||||
value="{% trans %}Validate{% endtrans %}">
|
||||
</form>
|
||||
</div>
|
||||
<br>
|
||||
{% if must_fill_billing_infos %}
|
||||
<p>
|
||||
<i>
|
||||
{% trans %}You must fill your billing infos if you want to pay with your credit
|
||||
card{% endtrans %}
|
||||
</i>
|
||||
</p>
|
||||
{% endif %}
|
||||
<form method="post" action="{{ settings.SITH_EBOUTIC_ET_URL }}" name="bank-pay-form">
|
||||
<template x-data x-for="input in $store.billing_inputs.data">
|
||||
<input type="hidden" :name="input['key']" :value="input['value']">
|
||||
</template>
|
||||
<input type="submit" id="bank-submit-button"
|
||||
{% if must_fill_billing_infos %}disabled="disabled"{% endif %}
|
||||
value="{% trans %}Pay with credit card{% endtrans %}"/>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if basket.contains_refilling_item %}
|
||||
<p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p>
|
||||
<p>{% trans %}AE account payment disabled because your basket contains refilling items.{% endtrans %}</p>
|
||||
{% else %}
|
||||
<form method="post" action="{{ url('eboutic:pay_with_sith') }}" name="sith-pay-form">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="action" value="pay_with_sith_account">
|
||||
<input type="submit" value="{% trans %}Pay with Sith account{% endtrans %}"/>
|
||||
</form>
|
||||
<form method="post" action="{{ url('eboutic:pay_with_sith') }}" name="sith-pay-form">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="action" value="pay_with_sith_account">
|
||||
<input type="submit" value="{% trans %}Pay with Sith account{% endtrans %}"/>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
const create_billing_info_url = '{{ url("counter:create_billing_info", user_id=request.user.id) }}'
|
||||
const edit_billing_info_url = '{{ url("counter:edit_billing_info", user_id=request.user.id) }}';
|
||||
const et_data_url = '{{ url("eboutic:et_data") }}'
|
||||
let billing_info_exist = {{ "true" if billing_infos else "false" }}
|
||||
<script>
|
||||
const create_billing_info_url = '{{ url("counter:create_billing_info", user_id=request.user.id) }}'
|
||||
const edit_billing_info_url = '{{ url("counter:edit_billing_info", user_id=request.user.id) }}';
|
||||
const et_data_url = '{{ url("eboutic:et_data") }}'
|
||||
let billing_info_exist = {{ "true" if billing_infos else "false" }}
|
||||
|
||||
{% if billing_infos %}
|
||||
const et_data = {{ billing_infos|tojson }}
|
||||
{% else %}
|
||||
const et_data = '{"data": []}'
|
||||
{% endif %}
|
||||
</script>
|
||||
{{ super() }}
|
||||
{% if billing_infos %}
|
||||
const et_data = {{ billing_infos|tojson }}
|
||||
{% else %}
|
||||
const et_data = '{"data": []}'
|
||||
{% endif %}
|
||||
</script>
|
||||
{{ super() }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
{% extends "core/base.jinja" %}
|
||||
|
||||
{% block content %}
|
||||
<h3>{% trans %}Eboutic{% endtrans %}</h3>
|
||||
<h3>{% trans %}Eboutic{% endtrans %}</h3>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
{% if success %}
|
||||
{% trans %}Payment successful{% endtrans %}
|
||||
{% trans %}Payment successful{% endtrans %}
|
||||
{% else %}
|
||||
{% trans %}Payment failed{% endtrans %}
|
||||
{% trans %}Payment failed{% endtrans %}
|
||||
{% endif %}
|
||||
<p><a href="{{ url('eboutic:main') }}">{% trans %}Return to eboutic{% endtrans %}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user