gestioCOF/kfet/templates/kfet/inventory_create.html

{% extends 'kfet/base.html' %}
{% load staticfiles %}
{% load widget_tweaks %}

{% block extra_head %}
<script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
<script type="text/javascript" src="{% static 'kfet/js/jquery-confirm.js' %}"></script>
{% endblock %}

{% block title %}Nouvel inventaire{% endblock %}
{% block content-header-title %}Nouvel inventaire{% endblock %}

{% 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 %}
            {% ifchanged form.category %}
              <tr class='section'>
                <td>{{ form.category_name }}</td>
                <td colspan="7"></td>
              </tr>
            {% endifchanged %}
            <tr>
              {{ 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'>
                </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>
  </div>
</div>


<script type="text/javascript">
$(document).ready(function() {
    'use strict';

    var conflicts = new Set();

    /**
     * Autofill new stock from other inputs
     */

    $('input[type="number"]').on('input', function() {
        var $line = $(this).closest('tr');
        var box_capacity = +$line.find('.box_capacity').text();
        var box_cellar = $line.find('.box_cellar input').val();
        var box_bar = $line.find('.box_bar input').val();
        var misc = $line.find('.misc input').val();
        if (box_cellar || box_bar || misc)
            $line.find('.stock_new input').val(
                box_capacity*((+box_cellar) +(+box_bar))+(+misc));
        else
            $line.find('.stock_new input').val('');
    });

    /*
     * Remove warning and update stock
     */

    function update_stock($line, update_count) {
        $line.removeClass('inventory_modified');
        $line.find('.inventory_update').hide();

        var old_stock = +$line.find('.current_stock').text()
        var stock_diff = +$line.find('.stock_diff').text();
        $line.find('.current_stock').text(old_stock + stock_diff);
        $line.find('.stock_diff').text('');

        if ($line.find('.stock_new input').val() && update_count) {
            var old_misc = +$line.find('.misc input').val();
            $line.find('.misc input').val(old_misc + stock_diff)
                                     .trigger('input');
        }
        
        var id = $line.find('input[type="hidden"]').val();
        conflicts.delete(parseInt(id)); 
    }

    $('.finished input').change(function() {
        var $line = $(this).closest('tr');
        update_stock($line, false);
    });

    $('.inventory_update button').click(function() {
        var $line = $(this).closest('tr');
        update_stock($line, true);
    });


    /**
     * Websocket
     */

    OperationWebSocket.add_handler(function(data) {
        for (let article of data['articles']) {
            var $line = $('input[value="'+article.id+'"]').parent();
            if ($line.find('.finished input').is(":checked")) {
                conflicts.add(article.id);
                //Display warning
                $line.addClass('inventory_modified');

                //Realigning input and displaying update button
                $line.find('.inventory_update').show();

                //Displaying stock changes
                var stock = $line.find('.current_stock').text();
                $line.find('.stock_diff').text(article.stock - stock);
            } else {
                // If we haven't counted the article yet, we simply update the expected stock
                $line.find('.current_stock').text(article.stock);
            }
        }
    });

    $('input[type="submit"]').on("click", function(e) {
        e.preventDefault(); 

        if (conflicts.size) {
            content = '';
            content += "Conflits possibles :"
            content += '<ul>';
            for (let id of conflicts) {
                var $line = $('input[value="'+id+'"]').closest('tr');
                var name = $line.find('.name').text();
                var stock_diff = $line.find('.stock_diff').text();
                content += '<li>'+name+' ('+stock_diff+')</li>';
            }
            content += '</ul>'
        } else {
            // Prevent erroneous enter key confirmations
            // Kinda complicated to filter if click or enter key...
            content="Voulez-vous confirmer l'inventaire ?";
        }

        $.confirm({
            title: "Confirmer l'inventaire",
            content: content,
            backgroundDismiss: true,
            animation: 'top',
            closeAnimation: 'bottom',
            keyboardEnabled: true,
            confirm: function() {
                $('#inventoryform').submit();
            },
            onOpen: function() {
                var that = this;
                this.$content.find('input').on('keydown', function(e) {
                    if (e.keyCode == 13)
                        that.$confirmButton.click();
                });
            },
        });

    });


});
</script>

{% endblock %}