Double consumptions switch (front only)

This commit is contained in:
Yohann D'ANELLO 2020-03-13 00:11:33 +01:00
parent 7b69ffdefe
commit e81450e092
1 changed files with 37 additions and 6 deletions

View File

@ -7,10 +7,10 @@
{% block content %} {% block content %}
<div class="row mt-4"> <div class="row mt-4">
<div class="col-sm-5 col-md-4"> <div class="col-sm-5 col-md-4" id="infos_div">
<div class="row"> <div class="row">
{# User details column #} {# User details column #}
<div class="col-xl-5"> <div class="col-xl-5" id="note_infos_div">
<div class="card border-success shadow mb-4"> <div class="card border-success shadow mb-4">
<img src="/media/pic/default.png" <img src="/media/pic/default.png"
id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block"> id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block">
@ -21,7 +21,7 @@
</div> </div>
{# User selection column #} {# User selection column #}
<div class="col-xl-7"> <div class="col-xl-7" id="user_select_div">
<div class="card border-success shadow mb-4"> <div class="card border-success shadow mb-4">
<div class="card-header"> <div class="card-header">
<p class="card-text font-weight-bold"> <p class="card-text font-weight-bold">
@ -37,11 +37,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xl-5" id="consos_list_div">
<div class="card border-info shadow mb-4">
<div class="card-header">
<p class="card-text font-weight-bold">
Sélection des consommations
</p>
</div>
<ul class="list-group list-group-flush" id="consos_list">
</ul>
<button id="consume" class="form-control btn btn-primary">Consommer !</button>
</div>
</div>
</div> </div>
</div> </div>
{# Buttons column #} {# Buttons column #}
<div class="col-sm-7 col-md-8"> <div class="col-sm-7 col-md-8" id="buttons_div">
{# Show last used buttons #} {# Show last used buttons #}
<div class="card shadow mb-4"> <div class="card shadow mb-4">
<div class="card-body text-nowrap" style="overflow:auto hidden"> <div class="card-body text-nowrap" style="overflow:auto hidden">
@ -95,11 +108,11 @@
</a> </a>
<div class="btn-group btn-group-toggle float-right" data-toggle="buttons"> <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
<label class="btn btn-sm btn-outline-primary active"> <label class="btn btn-sm btn-outline-primary active">
<input type="radio" name="options" id="option1" checked> <input type="radio" name="conso_type" id="single_conso" checked>
Consomations simples Consomations simples
</label> </label>
<label class="btn btn-sm btn-outline-primary"> <label class="btn btn-sm btn-outline-primary">
<input type="radio" name="options" id="option2"> <input type="radio" name="conso_type" id="double_conso">
Consomations doubles Consomations doubles
</label> </label>
</div> </div>
@ -132,6 +145,24 @@
<script type="text/javascript"> <script type="text/javascript">
var CSRF_TOKEN = "{{ csrf_token }}"; var CSRF_TOKEN = "{{ csrf_token }}";
$("#double_conso").click(function() {
$("#consos_list_div").show();
$("#infos_div").attr('class', 'col-sm-5 col-xl-6');
$("#note_infos_div").attr('class', 'col-xl-3');
$("#user_select_div").attr('class', 'col-xl-4');
$("#buttons_div").attr('class', 'col-sm-7 col-xl-6');
});
$("#single_conso").click(function() {
$("#consos_list_div").hide();
$("#infos_div").attr('class', 'col-sm-5 col-md-4');
$("#note_infos_div").attr('class', 'col-xl-5');
$("#user_select_div").attr('class', 'col-xl-7');
$("#buttons_div").attr('class', 'col-sm-7 col-md-8');
});
$("#consos_list_div").hide();
{% for button in transaction_templates %} {% for button in transaction_templates %}
{% if button.display %} {% if button.display %}
$("#button{{ button.id }}").click(function() { $("#button{{ button.id }}").click(function() {