Add total boxes to new inventory view + fix/clean

- Add total boxes in cellar and bar to new inventory view.
- On this view, table is "minified".
- Revert background color for some templates.
- Clean some margin (responsively).
- Clean tab pills on account read.

kfet/static/kfet/css/index.css

@@ -114,22 +114,6 @@ textarea {
     padding: 0 !important;
 }
 
-.panel-md-margin{
-    background-color: white;
-    overflow:hidden;
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-bottom: 15px;
-    padding-top: 1px;
-}
-
-@media (min-width: 992px) {
-    .panel-md-margin{
-        margin:8px;
-        background-color: white;
-    }
-}
-
 .col-content-left, .col-content-right {
     padding:0;
 }
@@ -194,20 +178,18 @@ textarea {
     text-align:center;
 }
 
-
 @media (min-width: 768px) {
     .content-right {
-        margin: 0 15px;
+        margin: 15px;
     }
 }
 
 .content-right-block {
-    padding-bottom:5px;
     position:relative;
 }
 
-.content-right-block:last-child {
-    padding-bottom:15px;
+.content-right-block > div:not(.buttons-title) {
+    background: #fff;
 }
 
 .content-right-block .buttons-title {
@@ -229,9 +211,8 @@ textarea {
 
 .content-right-block h3 {
     border-bottom: 1px solid #c8102e;
-    margin: 20px 15px 15px;
-    padding-bottom: 10px;
-    padding-left: 20px;
+    margin: 0px 15px 15px;
+    padding: 20px 20px 10px;
     font-size:25px;
 }
 
@@ -239,12 +220,18 @@ textarea {
  * Pages tableaux seuls
  */
 
-.content-center > div {
+.content-center {
     background:#fff;
 }
 
+@media (min-width: 992px) {
+    .content-center {
+        margin: 15px;
+    }
+}
+
 .content-center tbody tr:not(.section) td {
-    padding:0px 5px !important;
+    padding:0px 5px;
 }
 
 .content-center .table .form-control {
@@ -252,7 +239,15 @@ textarea {
     height:28px;
     margin:3px 0px;
 }
- .content-center .auth-form {
+
+.content-center .table-condensed input.form-control {
+    margin: 0 !important;
+    border-top: 0;
+    border-bottom: 0;
+    border-radius: 0;
+}
+
+.content-center .auth-form {
     margin:15px;
 }
 
@@ -577,6 +572,10 @@ thead .tooltip {
 
 /* Inventaires */
 
+#inventoryform input[type=number] {
+    text-align: center;
+}
+
 .inventory_modified {
     background:rgba(236,100,0,0.15);
 }
@@ -587,5 +586,7 @@ thead .tooltip {
 }
 
 .inventory_update {
-    display:none;    
+    display: none;
+    width: 50px;
+    margin: 0 auto;
 }

kfet/templates/kfet/account_read.html

@@ -23,7 +23,7 @@ $(document).ready(function() {
         "{% url 'kfet.account.stat.balance.list' trigramme=account.trigramme %}",
         $("#stat_balance")
     );
- });
+});
 </script>
 {% endif %}
 {% endblock %}
@@ -55,39 +55,33 @@ $(document).ready(function() {
   <div class="col-sm-8 col-md-9 col-content-right">
     {% include "kfet/base_messages.html" %}
     <div class="content-right">
-      <div class="content-right-block">
-        <div class="col-sm-12 nopadding">
-          {% if account.user == request.user %}
-          <div class='tab-content'>
-            <div class="tab-pane fade in active" id="tab_stats">
-              <h2>Statistiques</h2>
-              <div class="panel-md-margin">
-                <h3>Ma balance</h3>
-                  <div id="stat_balance"></div>
-                <h3>Ma consommation</h3>
-                  <div id="stat_last"></div>
-              </div>
-            </div>
-            <div class="tab-pane fade" id="tab_history">
-          {% endif %}
-            {% if addcosts %}
-              <h2>Gagné des majorations</h2>
-              <div>
-                <ul>
-                  {% for addcost in addcosts %}
-                    <li>{{ addcost.date|date:'l j F' }}: +{{ addcost.sum_addcosts }}€</li>
-                  {% endfor %}
-                </ul>
-              </div>
-            {% endif %}
-              <h2>Historique</h2>
-              <div id="history"></div>
-            {% if account.user == request.user %}
-            </div>
-          </div><!-- tab-content -->
+      <div class="tab-content">
+        {% if account.user == request.user %}
+        <div class="content-right-block tab-pane fade in active" id="tab_stats">
+          <h2>Statistiques</h2>
+          <div>
+            <h3>Ma balance</h3>
+              <div id="stat_balance"></div>
+            <h3>Ma consommation</h3>
+              <div id="stat_last"></div>
+          </div>
+        </div><!-- content-right-block -->
         {% endif %}
-        </div><!-- col-sm-12 -->
-      </div><!-- content-right-block -->
+        <div class="content-right-block tab-pane fade {% if account.user != request.user %}in active{% endif %}" id="tab_history">
+          {% if addcosts %}
+          <h2>Gagné des majorations</h2>
+          <div>
+            <ul>
+              {% for addcost in addcosts %}
+              <li>{{ addcost.date|date:'l j F' }}: +{{ addcost.sum_addcosts }}€</li>
+              {% endfor %}
+              </ul>
+          </div>
+          {% endif %}
+          <h2>Historique</h2>
+            <div id="history"></div>
+        </div><!-- content-right-block -->
+      </div><!-- tab-content -->
     </div><!-- content-right-->
   </div>
 </div>

kfet/templates/kfet/inventory_create.html

@@ -13,24 +13,25 @@
 {% block content %}
 
 {% include 'kfet/base_messages.html' %}
-<div class="content-center">
-  <div>
-    <form id='inventoryform' action="" method="post">
-      <table class="table text-center">
-        <thead>
-          <tr>
-            <td>Article</td>
-            <td>Quantité par caisse</td>
-            <td>Stock Théorique</td>
-            <td>Caisses en réserve</td>
-            <td>Caisses en arrière</td>
-            <td>Vrac</td>
-            <td>Stock total</td>
-            <td>Compte terminé</td>
-          </tr>
-        </thead>
-        <tbody>
-          {% for form in formset %}
+<div class="row">
+  <div class="col-sm-12 col-md-8 col-md-offset-2 nopadding">
+    <div class="content-center">
+      <form id='inventoryform' action="" method="post">
+        <table class="table table-condensed text-center">
+          <thead>
+            <tr>
+              <td>Article</td>
+              <td>Quantité par caisse</td>
+              <td>Stock théorique</td>
+              <td>Caisses en réserve</td>
+              <td>Caisses en arrière</td>
+              <td>Vrac</td>
+              <td>Stock total</td>
+              <td>Compte terminé</td>
+            </tr>
+          </thead>
+          <tbody>
+            {% for form in formset %}
             {% ifchanged form.category %}
               <tr class='section'>
                 <td>{{ form.category_name }}</td>
@@ -41,42 +42,68 @@
               {{ form.article }}
               <td class='name'>{{ form.name }}</td>
               <td class='box_capacity'>{{ form.box_capacity }}</td>
-              <td><span class='current_stock'>{{ form.stock_old }}</span><span class='stock_diff'></span></td>
-              <td class='box_cellar'>
-                <div class='col-md-2'></div>
-                <div class='col-md-8'>
-                    <input type='number' class='form-control' step='1'>
+              <td>
+                <span class='current_stock'>{{ form.stock_old }}</span><span class='stock_diff'></span>
+              </td>
+              <td class='box_cellar nopadding'>
+                <input type='number' class='form-control' step='1'>
+              </td>
+              <td class='box_bar nopadding'>
+                <input type='number' class='form-control' step='1'>
+              </td>
+              <td class='misc nopadding'>
+                <input type='number' class='form-control' step='1'>
+              </td>
+              <td class='stock_new nopadding'>
+                {{ form.stock_new | attr:"readonly"| add_class:"form-control" }}
+              </td>
+              <td class='finished'>
+                <div class="inventory_update">
+                  <button type='button' class='btn-sm btn-primary'>MàJ</button>
+                </div>
+                <div class="inventory_done">
+                  <input type='checkbox' class='form_control'>
                 </div>
               </td>
-              <td class='box_bar'>
-                <div class='col-md-offset-2 col-md-8'><input type='number' class='form-control' step='1'></div>
-              </td>
-              <td class='misc'>
-                <div class='col-md-offset-2 col-md-8'><input type='number' class='form-control' step='1'></div>
-              </td>
-              <td class='stock_new'>
-                <div class='col-md-offset-2 col-md-8'>{{ form.stock_new | attr:"readonly"| add_class:"form-control" }}</div>
-                <div class='col-md-2 inventory_update'><button type='button' class='btn-sm btn-primary'>MàJ</button></div>
-              </td>
-              <td class='finished'><input type='checkbox' class='form_control'></td>
             </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-      {{ formset.management_form }}
-      {% if not perms.kfet.add_inventory %}
-      <div class='auth-form form-horizontal'>
-        {% include "kfet/form_authentication_snippet.html" %}
-      </div>
-      {% endif %}
-      <input type="submit" value="Enregistrer" class="btn btn-primary btn-lg btn-block">
-      {% csrf_token %}
-    </form>
+            {% endfor %}
+            <tr class="section">
+              <td>Totaux</td>
+              <td colspan="2"></td>
+              <td class="total_box_cellar"></td>
+              <td class="total_box_bar"></td>
+              <td colspan="3"></td>
+            </tr>
+          </tbody>
+        </table>
+        {{ formset.management_form }}
+        {% if not perms.kfet.add_inventory %}
+        <div class='auth-form form-horizontal'>
+          {% include "kfet/form_authentication_snippet.html" %}
+        </div>
+        {% endif %}
+        <input type="submit" value="Enregistrer" class="btn btn-primary btn-lg btn-block">
+        {% csrf_token %}
+      </form>
+    </div>
   </div>
 </div>
 
 
 <script type="text/javascript">
+function init_total(type) {
+    update_total(type);
+    $('.'+type+' input').on('input', () => update_total(type));
+}
+
+function update_total(type) {
+    var total = 0;
+    $('.'+type+' input').each(function() {
+        total += +$(this).val();
+    });
+    $('.total_'+type).text(total);
+}
+
 $(document).ready(function() {
     'use strict';
 
@@ -106,6 +133,7 @@ $(document).ready(function() {
     function update_stock($line, update_count) {
         $line.removeClass('inventory_modified');
         $line.find('.inventory_update').hide();
+        $line.find('.inventory_done').show();
 
         var old_stock = +$line.find('.current_stock').text()
         var stock_diff = +$line.find('.stock_diff').text();
@@ -132,6 +160,12 @@ $(document).ready(function() {
         update_stock($line, true);
     });
 
+    /**
+     * Total row
+     */
+
+    init_total('box_cellar');
+    init_total('box_bar');
 
     /**
      * Websocket
@@ -147,6 +181,7 @@ $(document).ready(function() {
 
                 //Realigning input and displaying update button
                 $line.find('.inventory_update').show();
+                $line.find('.inventory_done').hide();
 
                 //Displaying stock changes
                 var stock = $line.find('.current_stock').text();