Websocket to manage possible kpsul conflicts

kfet/static/kfet/css/index.css

@@ -549,3 +549,9 @@ thead .tooltip {
 .help-block {
     padding-top: 15px;
 }
+
+/* Inventaires */
+
+.inventory_modified {
+    background:rgba(236,100,0,0.15);
+}

kfet/templates/kfet/inventory_create.html

@@ -1,4 +1,10 @@
 {% extends 'kfet/base.html' %}
+{% load staticfiles %}
+
+{% 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 %}
@@ -8,7 +14,7 @@
 {% include 'kfet/base_messages.html' %}
 <div class="content-center">
   <div>
-    <form action="" method="post">
+    <form id='inventoryform' action="" method="post">
       <table class="table text-center">
         <thead>
           <tr>
@@ -71,6 +77,11 @@
 
 <script type="text/javascript">
 $(document).ready(function() {
+    'use strict';
+
+    /**
+     * Autofill new stock from other inputs
+     */
 
     $('input[type="number"]').on('input', function() {
         var prefix = $(this).attr('prefix');
@@ -82,6 +93,67 @@ $(document).ready(function() {
         $line.find('#id_'+prefix+'-stock_new').val(box_capacity*(box_cellar +box_bar)+misc);
     });
 
+    /**
+     * Websocket
+     */
+
+    var modified = [];
+    var websocket_msg_default = {'articles':[]}
+
+    var websocket_protocol = window.location.protocol == 'https:' ? 'wss' : 'ws';
+    var location_host = window.location.host;
+    var location_url = window.location.pathname.startsWith('/gestion/') ? location_host + '/gestion' : location_host;
+    var socket = new ReconnectingWebSocket(websocket_protocol+"://" + location_url + "/ws/k-fet/k-psul/");
+    socket.onmessage = function(e) {
+        var data = $.extend({}, websocket_msg_default, JSON.parse(e.data));
+        for (let article of data['articles']) {
+            modified.push(article.id);
+            $('input[value="'+article.id+'"]').parent().addClass('inventory_modified');
+        }
+    }
+
+    $('input[type="submit"]').on("click", function(e) {
+        e.preventDefault(); 
+        var conflicts = [];
+        for (let id of modified) {
+            var $input = $('input[value="'+id+'"]');
+            if ($input.siblings(":last").find('input').val() !== "") {
+                conflicts.push($input.next().text());
+            }
+        }
+
+        if (conflicts.length) {
+            content = '';
+            content += "Conflits possibles :"
+            content += '<ul>';
+            for (let article of conflicts) {
+                content += '<li>'+article+'</li>';
+            }
+            content += '</ul>'
+            return $.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();
+                    });
+                },
+            });
+        } else {
+            $('#inventoryform').submit();
+        }
+    });
+
+
 });
 </script>