management of the form of adding a device in a batch from the frontend

ereuse_devicehub/static/js/main_inventory.js

@@ -0,0 +1,19 @@
+$(document) .ready(function() {
+    $(".deviceSelect").on("change", deviceSelect);
+})
+
+function deviceSelect() {
+    var devices = $(".deviceSelect").filter(':checked');
+    var devices_id = $.map(devices, function(x) { return $(x).attr('data')}).join(",");
+    if (devices_id == "") {
+        $("#addingLotModal .text-danger").show();
+        $("#addingLotModal .btn-primary").hide();
+    } else {
+        $("#addingLotModal .text-danger").hide();
+        $("#addingLotModal .btn-primary").removeClass('d-none');
+        $("#addingLotModal .btn-primary").show();
+    }
+    $.map($(".devicesList"), function(x) {
+        $(x).val(devices_id);
+    });
+}

ereuse_devicehub/templates/inventory/addinglot.html

@@ -1,28 +1,39 @@
 <div class="modal fade" id="addingLotModal" tabindex="-1" style="display: none;" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
+
       <div class="modal-header">
         <h5 class="modal-title">Adding to a lot</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
+
+      <form action="/inventory/lot/devices/add" method="post">
+      {# form.csrf_token #}
         <div class="modal-body">
           Please write a name of a lot
-        <select class="form-control selectpicker" id="selectLot" data-live-search="true">
+          <select class="form-control selectpicker" id="selectLot" name="lot" data-live-search="true">
             {% for lot in lots %}
             <option value="{{ lot.id }}">{{ lot.name }}</option>
             {% endfor %}
           </select>
+          <input class="devicesList" type="hidden" name="devices" />
+          <p class="text-danger">
+              You need select first some device for adding this in a lot
+          </p>
         </div>
+
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
+          <input type="submit" class="btn btn-primary d-none" value="Save changes" />
         </div>
+      </form>
+
     </div>
   </div>
 </div>
 
 <script>
-$(function() {
+//$(function() {
-  $('#selectLot').selectpicker();
+//  $('#selectLot').selectpicker();
-});
+//});
 </script>

ereuse_devicehub/templates/inventory/device_list.html

@@ -126,7 +126,7 @@
                   <tbody>
                     {% for dev in devices %}
                     <tr>
-                      <td><input type="checkbox" /></td>
+                      <td><input type="checkbox" class="deviceSelect" data="{{ dev.id }}"/></td>
                       <td>{{ dev.type }} {{ dev.manufacturer }} {{ dev.model }}</td>
                       <td>{{ dev.devicehub_id }}</td>
                       <td>
@@ -158,4 +158,9 @@
 <script>
   const table = new simpleDatatables.DataTable("table")
 </script>
+<script>
+
+</script>
+<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
 {% endblock main %}