398 lines
15 KiB
HTML
398 lines
15 KiB
HTML
<!DOCTYPE HTML>
|
|
<!--
|
|
Dimension by HTML5 UP
|
|
html5up.net | @ajlkn
|
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Scan TiBillet</title>
|
|
<meta charset="utf-8"/>
|
|
{% load static %}
|
|
{% load humanize %}
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
|
|
<link rel="stylesheet" href="{% static 'html5up-dimension/assets/css/main.css' %}"/>
|
|
<noscript>
|
|
<link rel="stylesheet" href="{% static 'html5up-dimension/assets/css/noscript.css' %}"/>
|
|
</noscript>
|
|
</head>
|
|
< class="is-preload">
|
|
|
|
<!-- Wrapper -->
|
|
<div id="wrapper">
|
|
|
|
<!-- Header -->
|
|
<header id="header">
|
|
{# <div class="logo">#}
|
|
{# <span class="icon fa-gem"></span>#}
|
|
{# </div>#}
|
|
<div class="content">
|
|
<div class="inner">
|
|
<h1>Carte Cashless</h1>
|
|
<h1>{{ numero_carte }}</h1>
|
|
<h1>{{ client_name }}</h1>
|
|
{# <p>A fully responsive site template designed by <a href="https://html5up.net">HTML5 UP</a> and released<br />#}
|
|
{# for free under the <a href="https://html5up.net/license">Creative Commons</a> license.</p>#}
|
|
</div>
|
|
</div>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#recharger">Recharger</a></li>
|
|
{% if history %}
|
|
<li><a href="#historique">Historique</a></li>
|
|
{% endif %}
|
|
{% if carte_resto %}
|
|
<li><a href="/media/{{ carte_resto }}">Restaurant</a></li>
|
|
{% endif %}
|
|
{% if billetterie_bool %}
|
|
<li><a href="/">Billetterie</a></li>
|
|
{% endif %}
|
|
|
|
{% if site_web %}
|
|
<li><a href="{{ site_web }}">Site web</a></li>
|
|
{% endif %}
|
|
|
|
{% if not email %}
|
|
<li><a href="#adherer">Adhérer</a></li>
|
|
{% endif %}
|
|
|
|
{# <li><a href="#elements">Elements</a></li>#}
|
|
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main -->
|
|
<div id="main">
|
|
|
|
<!-- Intro -->
|
|
<article id="recharger">
|
|
<h2 class="major">carte {{ numero_carte }}</h2>
|
|
<span class="image main"><img src="/media/{{ image_carte.med }}" alt=""/></span>
|
|
<form method="post" action="#">
|
|
{% csrf_token %}
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label for="email">Email</label>
|
|
{% if email %}
|
|
<input type="email" name="email" id="Email" required="True" value="{{ email }}"/>
|
|
{% else %}
|
|
<input type="email" name="email" id="email" required="True"/>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="montant_recharge">Somme à recharger (€)</label>
|
|
<input id="montant_recharge" type="number" step="any" name="montant_recharge" required="True"/>
|
|
</div>
|
|
</div>
|
|
<ul class="actions">
|
|
<li><input type="submit" value="Payer" class="primary"/></li>
|
|
</ul>
|
|
</form>
|
|
|
|
</article>
|
|
|
|
<!-- Historique -->
|
|
<article id="historique">
|
|
<div class="table-wrapper">
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<h3>{{ message }}</h3>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<h2 class="major">Solde</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Carte {{ numero_carte }}</th>
|
|
<th>Quantité</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for asset in assets %}
|
|
<tr>
|
|
<td>{{ asset.nom }}</td>
|
|
<td>{{ asset.qty | floatformat:2 | intcomma }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="1"></td>
|
|
<td>{{ total_monnaie | floatformat:2 | intcomma }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<h2 class="major">Historique</h2>
|
|
|
|
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Qty</th>
|
|
<th>Article</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for ligne in history %}
|
|
<tr>
|
|
<td>{{ ligne.date | naturaltime }}</td>
|
|
<td>{{ ligne.qty | floatformat:0 | intcomma }}</td>
|
|
<td>{{ ligne.article }}</td>
|
|
<td>{{ ligne.total }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
<article id="success">
|
|
<h2 class="major">Rechargement OK</h2>
|
|
<h4>Vous avez bien rechargé la carte {{ numero_carte }}.</h4>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Portefeuille</th>
|
|
<th>Quantité</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for asset in assets %}
|
|
<tr>
|
|
<td>{{ asset.nom }}</td>
|
|
<td>{{ asset.qty | floatformat:2 | intcomma }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td colspan="1"></td>
|
|
<td>{{ total_monnaie | floatformat:2 | intcomma }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<ul class="actions">
|
|
<li><a href="#historique" class="button primary">Voir l'historique</a></li>
|
|
</ul>
|
|
</article>
|
|
|
|
|
|
<!-- adhesion -->
|
|
<article id="adherer">
|
|
<h2 class="major">Adhésion {{ client_name }}</h2>
|
|
<form method="post" action="#">
|
|
{% csrf_token %}
|
|
<div class="fields">
|
|
<div class="field">
|
|
<label for="email">Entrez votre Email</label>
|
|
<input id="email" name="email" required="True" type="email"/>
|
|
</div>
|
|
</div>
|
|
<ul class="actions">
|
|
<li><input type="submit" value="continuer" class="primary"/></li>
|
|
</ul>
|
|
</form>
|
|
</article>
|
|
|
|
<!-- adhesion -->
|
|
<article id="demande_nom_prenom_tel">
|
|
<h2 class="major">Adhésion {{ client_name }}</h2>
|
|
<h4 id="knew_text">Nous avons déja : </h4>
|
|
<h4>Il nous manque ces informations pour votre adhésion :</h4>
|
|
<form method="post" action="#">
|
|
{% csrf_token %}
|
|
<div class="fields">
|
|
<input id="adhesion_email" name="email" required="True" type="email" style="display: none"/>
|
|
|
|
<div id="adhesion_name" class="field half">
|
|
<label for="name">Nom</label>
|
|
<input id="name" name="name" required="True" type="text"/>
|
|
</div>
|
|
<div id="adhesion_prenom" class="field half">
|
|
<label for="prenom">Prénom</label>
|
|
<input id="prenom" name="prenom" required="True" type="text"/>
|
|
</div>
|
|
<div id="adhesion_tel" class="field half">
|
|
<label for="tel">Téléphone</label>
|
|
<input id="tel" name="tel" required="True" type="tel"/>
|
|
</div>
|
|
</div>
|
|
<ul class="actions">
|
|
<li><input type="submit" value="Adhérer" class="primary"/></li>
|
|
</ul>
|
|
</form>
|
|
</article>
|
|
|
|
<article id="adhesionsuccess">
|
|
<h2 class="major">Adhésion</h2>
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<h3>{{ message }}</h3>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if adhesion_obligatoire %}
|
|
{% if tarifs_adhesion %}
|
|
<h4>Payer en ligne avec un vrai robot :</h4>
|
|
{% for tarif in tarifs_adhesion %}
|
|
<ul class="actions">
|
|
<li><a id="{{ tarif.name | slugify }}" href="#paiementadhesionenligne"
|
|
class="button primary field">{{ tarif.name }} {{ tarif.tarif }}€</a></li>
|
|
</ul>
|
|
{% endfor %}
|
|
<h4>Payer à l'acceuil de l'association avec un vrai humain :</h4>
|
|
<ul class="actions">
|
|
<li><a href="#" class="button primary field">CONTINUER</a></li>
|
|
</ul>
|
|
{% endif %}
|
|
{% endif %}
|
|
</article>
|
|
|
|
<article id="paiementadhesionenligne">
|
|
<h2 class="major">Paiement en ligne</h2>
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<h3>{{ message }}</h3>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<h3>Adhésion : <span id="text_name_adhesion"></span> <span id="text_tarif_adhesion"></span></h3>
|
|
<form method="post" action="#">
|
|
{% csrf_token %}
|
|
<div class="fields">
|
|
<div class="field" style="display: none">
|
|
{% if email %}
|
|
<input type="email" name="email" id="email_paiement_adhesion" required="True"
|
|
value="{{ email }}"/>
|
|
{% else %}
|
|
<input type="email" name="email" id="email" required="True"/>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="field" style="display: none">
|
|
<input id="montant_adhesion" type="number" step="any" name="montant_adhesion"
|
|
required="True"/>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<h4>Voulez vous recharger votre carte en même temps ? Laissez vide si non.</h4>
|
|
<label for="montant_recharge">Recharge cashless (€) :</label>
|
|
<input id="montant_recharge" type="number" step="any" name="montant_recharge" />
|
|
</div>
|
|
</div>
|
|
<ul class="actions">
|
|
<li><input type="submit" value="Payer" class="primary"/></li>
|
|
</ul>
|
|
</form>
|
|
|
|
</article>
|
|
|
|
<article id="erreurpaiement">
|
|
<h2 class="major">ERREUR</h2>
|
|
<h3>Le paiement n'a pas fonctionné.</h3>
|
|
<h4>Vérifiez votre moyen de paiement ou contacter un administrateur</h4>
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<h3>{{ message }}</h3>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<ul class="actions">
|
|
<li><a href="#historique" class="button primary">Voir l'historique</a></li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article id="erreur">
|
|
<h2 class="major">ERREUR</h2>
|
|
<h3>Oups, Quelque chose s'est mal passé.</h3>
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<h3>{{ message }}</h3>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</article>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer id="footer">
|
|
<p class="copyright"><a href="https://www.tibillet.re">TiBillet.re</a> Design: <a href="https://html5up.net">HTML5
|
|
UP</a>.</p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- BG -->
|
|
<div id="bg"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="{% static 'html5up-dimension/assets/js/jquery.min.js' %}"></script>
|
|
<script src="{% static 'html5up-dimension/assets/js/browser.min.js' %}"></script>
|
|
<script src="{% static 'html5up-dimension/assets/js/breakpoints.min.js' %}"></script>
|
|
<script src="{% static 'html5up-dimension/assets/js/util.js' %}"></script>
|
|
<script src="{% static 'html5up-dimension/assets/js/main.js' %}"></script>
|
|
|
|
|
|
{# Script qui n'affiche que les champs dont nous avons besoin lors de l'adhésion #}
|
|
<script type="text/javascript">
|
|
document.getElementById("knew_text").hidden = true;
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
{% if message.extra_tags == 'email' %}
|
|
document.getElementById("adhesion_email").value = "{{ message }}";
|
|
{% endif %}
|
|
{% if message.extra_tags == 'name' %}
|
|
document.getElementById("adhesion_name").hidden = true;
|
|
document.getElementById("name").readOnly = true;
|
|
document.getElementById("name").value = "connu";
|
|
document.getElementById("knew_text").textContent += "votre nom,";
|
|
document.getElementById("knew_text").hidden = false;
|
|
|
|
{% endif %}
|
|
{% if message.extra_tags == 'prenom' %}
|
|
document.getElementById("adhesion_prenom").hidden = true;
|
|
document.getElementById("prenom").readOnly = true;
|
|
document.getElementById("prenom").value = "connu";
|
|
document.getElementById("knew_text").textContent += "votre prénom,";
|
|
document.getElementById("knew_text").hidden = false;
|
|
|
|
{% endif %}
|
|
{% if message.extra_tags == 'tel' %}
|
|
document.getElementById("adhesion_tel").hidden = true;
|
|
document.getElementById("tel").readOnly = true;
|
|
document.getElementById("tel").value = "connu";
|
|
document.getElementById("knew_text").textContent += "votre numéro de téléphone,";
|
|
document.getElementById("knew_text").hidden = false;
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
</script>
|
|
|
|
{#Script pour remplir la page d'adhésion de paiement#}
|
|
<script>
|
|
{% for tarif in tarifs_adhesion %}
|
|
document.getElementById('{{ tarif.name | slugify }}').onclick = function () {
|
|
console.log('{{ tarif.name | slugify }}')
|
|
document.getElementById("montant_adhesion").value = "{{ tarif.tarif }}";
|
|
document.getElementById("text_name_adhesion").textContent = "{{ tarif.name }}";
|
|
document.getElementById("text_tarif_adhesion").textContent = "{{ tarif.tarif }}€";
|
|
}
|
|
|
|
{% endfor %}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|