Merge pull request #220 from RubenPX/lot-list-2

Change: Add reactive lots list

CHANGELOG.md

@@ -8,8 +8,9 @@ ml).
 ## master
 
 ## testing
-- [added] #219 add functionality to searchbar (Lots and devices)
+- [added] #219 Add functionality to searchbar (Lots and devices).
 - [changed] #211 Print DHID-QR label for selected devices.
+- [changed] #218 Add reactivity to device lots.
 - [fixed] #214 Login workflow
 
 ## [2.0.0] - 2022-03-15

ereuse_devicehub/inventory/forms.py

@@ -97,62 +97,6 @@ class FilterForm(FlaskForm):
         return ['Desktop', 'Laptop', 'Server']
 
 
-class LotDeviceForm(FlaskForm):
-    lot = StringField('Lot', [validators.UUID()])
-    devices = StringField('Devices', [validators.length(min=1)])
-
-    def validate(self, extra_validators=None):
-        is_valid = super().validate(extra_validators)
-
-        if not is_valid:
-            return False
-
-        self._lot = (
-            Lot.query.outerjoin(Trade)
-            .filter(Lot.id == self.lot.data)
-            .filter(
-                or_(
-                    Trade.user_from == g.user,
-                    Trade.user_to == g.user,
-                    Lot.owner_id == g.user.id,
-                )
-            )
-            .one()
-        )
-
-        devices = set(self.devices.data.split(","))
-        self._devices = (
-            Device.query.filter(Device.id.in_(devices))
-            .filter(Device.owner_id == g.user.id)
-            .distinct()
-            .all()
-        )
-
-        return bool(self._devices)
-
-    def save(self, commit=True):
-        trade = self._lot.trade
-        if trade:
-            for dev in self._devices:
-                if trade not in dev.actions:
-                    trade.devices.add(dev)
-
-        if self._devices:
-            self._lot.devices.update(self._devices)
-            db.session.add(self._lot)
-
-        if commit:
-            db.session.commit()
-
-    def remove(self, commit=True):
-        if self._devices:
-            self._lot.devices.difference_update(self._devices)
-            db.session.add(self._lot)
-
-        if commit:
-            db.session.commit()
-
-
 class LotForm(FlaskForm):
     name = StringField('Name', [validators.length(min=1)])
 

ereuse_devicehub/inventory/views.py

@@ -16,7 +16,6 @@ from ereuse_devicehub.inventory.forms import (
     AllocateForm,
     DataWipeForm,
     FilterForm,
-    LotDeviceForm,
     LotForm,
     NewActionForm,
     NewDeviceForm,
@@ -109,7 +108,6 @@ class DeviceListMix(GenericMixView):
         self.context = {
             'devices': devices,
             'lots': lots,
-            'form_lot_device': LotDeviceForm(),
             'form_tag_device': TagDeviceForm(),
             'form_new_action': form_new_action,
             'form_new_allocate': form_new_allocate,
@@ -153,46 +151,6 @@ class DeviceDetailView(GenericMixView):
         return flask.render_template(self.template_name, **context)
 
 
-class LotDeviceAddView(View):
-    methods = ['POST']
-    decorators = [login_required]
-    template_name = 'inventory/device_list.html'
-
-    def dispatch_request(self):
-        form = LotDeviceForm()
-        if form.validate_on_submit():
-            form.save(commit=False)
-            messages.success(
-                'Add devices to lot "{}" successfully!'.format(form._lot.name)
-            )
-            db.session.commit()
-        else:
-            messages.error('Error adding devices to lot!')
-
-        next_url = request.referrer or url_for('inventory.devicelist')
-        return flask.redirect(next_url)
-
-
-class LotDeviceDeleteView(View):
-    methods = ['POST']
-    decorators = [login_required]
-    template_name = 'inventory/device_list.html'
-
-    def dispatch_request(self):
-        form = LotDeviceForm()
-        if form.validate_on_submit():
-            form.remove(commit=False)
-            messages.success(
-                'Remove devices from lot "{}" successfully!'.format(form._lot.name)
-            )
-            db.session.commit()
-        else:
-            messages.error('Error removing devices from lot!')
-
-        next_url = request.referrer or url_for('inventory.devicelist')
-        return flask.redirect(next_url)
-
-
 class LotCreateView(GenericMixView):
     methods = ['GET', 'POST']
     decorators = [login_required]
@@ -607,12 +565,6 @@ devices.add_url_rule(
 devices.add_url_rule(
     '/lot/<string:lot_id>/device/', view_func=DeviceListView.as_view('lotdevicelist')
 )
-devices.add_url_rule(
-    '/lot/devices/add/', view_func=LotDeviceAddView.as_view('lot_devices_add')
-)
-devices.add_url_rule(
-    '/lot/devices/del/', view_func=LotDeviceDeleteView.as_view('lot_devices_del')
-)
 devices.add_url_rule('/lot/add/', view_func=LotCreateView.as_view('lot_add'))
 devices.add_url_rule(
     '/lot/<string:id>/del/', view_func=LotDeleteView.as_view('lot_del')

ereuse_devicehub/static/js/api.js

@@ -0,0 +1,76 @@
+const Api = {
+    /**
+     * get lots id
+     * @returns get lots
+     */
+    async get_lots() {
+        var request = await this.doRequest(API_URLS.lots, "GET", null);
+        if (request != undefined) return request.items;
+        throw request;
+    },
+
+    /**
+     * Get filtered devices info
+     * @param {number[]} ids devices ids
+     * @returns full detailed device list
+     */
+    async get_devices(ids) {
+        var request = await this.doRequest(API_URLS.devices + '?filter={"id": [' + ids.toString() + ']}', "GET", null);
+        if (request != undefined) return request.items;
+        throw request;
+    },
+
+    /**
+         * Get filtered devices info
+         * @param {number[]} ids devices ids
+         * @returns full detailed device list
+         */
+    async search_device(id) {
+        var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null)
+        if (request != undefined) return request.items
+        throw request
+    },
+
+    /**
+     * Add devices to lot
+     * @param {number} lotID lot id
+     * @param {number[]} listDevices list devices id
+     */
+    async devices_add(lotID, listDevices) {
+        var queryURL = API_URLS.devices_modify.replace("UUID", lotID) + "?" + listDevices.map(deviceID => "id=" + deviceID).join("&");
+        return await Api.doRequest(queryURL, "POST", null);
+    },
+
+    /**
+     * Remove devices from a lot
+     * @param {number} lotID lot id
+     * @param {number[]} listDevices list devices id
+     */
+    async devices_remove(lotID, listDevices) {
+        var queryURL = API_URLS.devices_modify.replace("UUID", lotID) + "?" + listDevices.map(deviceID => "id=" + deviceID).join("&");
+        return await Api.doRequest(queryURL, "DELETE", null);
+    },
+
+    /**
+     * 
+     * @param {string} url URL to be requested
+     * @param {String} type Action type
+     * @param {String | Object} body body content
+     * @returns 
+     */
+    async doRequest(url, type, body) {
+        var result;
+        try {
+            result = await $.ajax({
+                url: url,
+                type: type,
+                headers: { "Authorization": API_URLS.Auth_Token },
+                body: body
+            });
+            return result;
+        } catch (error) {
+            console.error(error);
+            throw error;
+        }
+    }
+}

ereuse_devicehub/static/js/main.js

@@ -4,7 +4,7 @@
 * Author: BootstrapMade.com
 * License: https://bootstrapmade.com/license/
 */
-(function() {
+(function () {
   "use strict";
 
   /**
@@ -41,7 +41,7 @@
    * Sidebar toggle
    */
   if (select('.toggle-sidebar-btn')) {
-    on('click', '.toggle-sidebar-btn', function(e) {
+    on('click', '.toggle-sidebar-btn', function (e) {
       select('body').classList.toggle('toggle-sidebar')
     })
   }
@@ -50,7 +50,7 @@
    * Search bar toggle
    */
   if (select('.search-bar-toggle')) {
-    on('click', '.search-bar-toggle', function(e) {
+    on('click', '.search-bar-toggle', function (e) {
       select('.search-bar').classList.toggle('search-bar-show')
     })
   }
@@ -111,7 +111,7 @@
    * Initiate tooltips
    */
   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-  var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
+  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new bootstrap.Tooltip(tooltipTriggerEl)
   })
 
@@ -141,31 +141,31 @@
           }],
           ["bold", "italic", "underline", "strike"],
           [{
-              color: []
+            color: []
-            },
+          },
-            {
+          {
-              background: []
+            background: []
-            }
+          }
           ],
           [{
-              script: "super"
+            script: "super"
-            },
+          },
-            {
+          {
-              script: "sub"
+            script: "sub"
-            }
+          }
           ],
           [{
-              list: "ordered"
+            list: "ordered"
-            },
+          },
-            {
+          {
-              list: "bullet"
+            list: "bullet"
-            },
+          },
-            {
+          {
-              indent: "-1"
+            indent: "-1"
-            },
+          },
-            {
+          {
-              indent: "+1"
+            indent: "+1"
-            }
+          }
           ],
           ["direction", {
             align: []
@@ -184,8 +184,8 @@
   var needsValidation = document.querySelectorAll('.needs-validation')
 
   Array.prototype.slice.call(needsValidation)
-    .forEach(function(form) {
+    .forEach(function (form) {
-      form.addEventListener('submit', function(event) {
+      form.addEventListener('submit', function (event) {
         if (!form.checkValidity()) {
           event.preventDefault()
           event.stopPropagation()
@@ -209,7 +209,7 @@
   const mainContainer = select('#main');
   if (mainContainer) {
     setTimeout(() => {
-      new ResizeObserver(function() {
+      new ResizeObserver(function () {
         select('.echart', true).forEach(getEchart => {
           echarts.getInstanceByDom(getEchart).resize();
         })
@@ -217,4 +217,167 @@
     }, 200);
   }
 
+  /**
+   * Select all functionality
+   */
+  var btnSelectAll = document.getElementById("SelectAllBTN");
+  var tableListCheckboxes = document.querySelectorAll(".deviceSelect");
+
+  function itemListCheckChanged(event) {
+    let isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked);
+    if (isAllChecked.every(bool => bool == true)) {
+      btnSelectAll.checked = true;
+      btnSelectAll.indeterminate = false;
+    } else if (isAllChecked.every(bool => bool == false)) {
+      btnSelectAll.checked = false;
+      btnSelectAll.indeterminate = false;
+    } else {
+      btnSelectAll.indeterminate = true;
+    }
+  }
+
+  tableListCheckboxes.forEach(item => {
+    item.addEventListener("click", itemListCheckChanged);
+  })
+
+  btnSelectAll.addEventListener("click", event => {
+    let checkedState = event.target.checked;
+    tableListCheckboxes.forEach(ckeckbox => ckeckbox.checked = checkedState);
+  })
+
+  /**
+   * Avoid hide dropdown when user clicked inside
+   */
+  document.getElementById("dropDownLotsSelector").addEventListener("click", event => {
+    event.stopPropagation();
+  })
+
+  /**
+   * Search form functionality
+   */
+  window.addEventListener("DOMContentLoaded", () => {
+    var searchForm = document.getElementById("SearchForm")
+    var inputSearch = document.querySelector("#SearchForm > input")
+    var doSearch = true
+
+    searchForm.addEventListener("submit", (event) => {
+      event.preventDefault();
+    })
+
+    let timeoutHandler = setTimeout(() => { }, 1)
+    let dropdownList = document.getElementById("dropdown-search-list")
+    let defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
+
+
+    inputSearch.addEventListener("input", (e) => {
+      clearTimeout(timeoutHandler)
+      let searchText = e.target.value
+      if (searchText == '') {
+        document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch;
+        return
+      }
+
+      let resultCount = 0;
+      function searchCompleted() {
+        resultCount++;
+        setTimeout(() => {
+          if (resultCount == 2 && document.getElementById("dropdown-search-list").children.length == 2) {
+            document.getElementById("dropdown-search-list").innerHTML = `
+            <li id="deviceSearchLoader" class="dropdown-item">
+            <i class="bi bi-x-lg"></i>
+                    <span style="margin-right: 10px">Nothing found</span>
+            </li>`
+          }
+        }, 100)
+      }
+
+      timeoutHandler = setTimeout(async () => {
+        dropdownList.innerHTML = `
+        <li id="deviceSearchLoader" class="dropdown-item">
+            <i class="bi bi-laptop"></i>
+            <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </li>
+        <li id="lotSearchLoader" class="dropdown-item">
+            <i class="bi bi-folder2"></i>
+            <div class="spinner-border spinner-border-sm" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </li>`;
+
+
+        try {
+          Api.search_device(searchText.toUpperCase()).then(devices => {
+            dropdownList.querySelector("#deviceSearchLoader").style = "display: none"
+
+            for (let i = 0; i < devices.length; i++) {
+              const device = devices[i];
+
+              // See: ereuse_devicehub/resources/device/models.py
+              var verboseName = `${device.type} ${device.manufacturer} ${device.model}`
+
+              const templateString = `
+              <li>
+                  <a class="dropdown-item" href="${API_URLS.devices_detail.replace("ReplaceTEXT", device.devicehubID)}" style="display: flex; align-items: center;" href="#">
+                      <i class="bi bi-laptop"></i>
+                      <span style="margin-right: 10px">${verboseName}</span>
+                      <span class="badge bg-secondary" style="margin-left: auto;">${device.devicehubID}</span>
+                  </a>
+              </li>`;
+              dropdownList.innerHTML += templateString
+              if (i == 4) { // Limit to 4 resullts
+                break;
+              }
+            }
+
+            searchCompleted();
+          })
+        } catch (error) {
+          dropdownList.innerHTML += `
+          <li id="deviceSearchLoader" class="dropdown-item">
+          <i class="bi bi-x"></i>
+              <div class="spinner-border spinner-border-sm" role="status">
+                  <span class="visually-hidden">Error searching devices</span>
+              </div>
+          </li>`;
+          console.log(error);
+        }
+
+        try {
+          Api.get_lots().then(lots => {
+            dropdownList.querySelector("#lotSearchLoader").style = "display: none"
+            for (let i = 0; i < lots.length; i++) {
+              const lot = lots[i];
+              if (lot.name.toUpperCase().includes(searchText.toUpperCase())) {
+                const templateString = `
+                <li>
+                    <a class="dropdown-item" href="${API_URLS.lots_detail.replace("ReplaceTEXT", lot.id)}" style="display: flex; align-items: center;" href="#">
+                        <i class="bi bi-folder2"></i>
+                        <span style="margin-right: 10px">${lot.name}</span>
+                    </a>
+                </li>`;
+                dropdownList.innerHTML += templateString
+                if (i == 4) { // Limit to 4 resullts
+                  break;
+                }
+              }
+            }
+            searchCompleted();
+          })
+
+        } catch (error) {
+          dropdownList.innerHTML += `
+          <li id="deviceSearchLoader" class="dropdown-item">
+          <i class="bi bi-x"></i>
+              <div class="spinner-border spinner-border-sm" role="status">
+                  <span class="visually-hidden">Error searching lots</span>
+              </div>
+          </li>`;
+          console.log(error);
+        }
+      }, 1000)
+    })
+  })
+
 })();

ereuse_devicehub/static/js/main_inventory.js

@@ -1,4 +1,4 @@
-$(document).ready(function () {
+$(document).ready(function() {
     var show_allocate_form = $("#allocateModal").data('show-action-form');
     var show_datawipe_form = $("#datawipeModal").data('show-action-form');
     var show_trade_form = $("#tradeLotModal").data('show-action-form');
@@ -71,9 +71,9 @@ function removeLot() {
 
 function removeTag() {
     var devices = $(".deviceSelect").filter(':checked');
-    var devices_id = $.map(devices, function (x) { return $(x).attr('data') });
+    var devices_id = $.map(devices, function(x) { return $(x).attr('data')});
     if (devices_id.length == 1) {
-        var url = "/inventory/tag/devices/" + devices_id[0] + "/del/";
+        var url = "/inventory/tag/devices/"+devices_id[0]+"/del/";
         window.location.href = url;
     } else {
         $("#unlinkTagAlertModal").click();
@@ -82,7 +82,7 @@ function removeTag() {
 
 function addTag() {
     var devices = $(".deviceSelect").filter(':checked');
-    var devices_id = $.map(devices, function (x) { return $(x).attr('data') });
+    var devices_id = $.map(devices, function(x) { return $(x).attr('data')});
     if (devices_id.length == 1) {
         $("#addingTagModal .pol").hide();
         $("#addingTagModal .btn-primary").show();
@@ -146,8 +146,8 @@ function get_device_list() {
     $("#actionModal .devices-count").html(devices_count);
 
     /* Insert the correct value in the input devicesList */
-    var devices_id = $.map(devices, function (x) { return $(x).attr('data') }).join(",");
+    var devices_id = $.map(devices, function(x) { return $(x).attr('data')}).join(",");
-    $.map($(".devicesList"), function (x) {
+    $.map($(".devicesList"), function(x) {
         $(x).val(devices_id);
     });
 
@@ -166,194 +166,219 @@ function get_device_list() {
         return typ + " " + manuf + " " + dhid;
     });
 
-    description = $.map(list_devices, function (x) { return x }).join(", ");
+    description = $.map(list_devices, function(x) { return x }).join(", ");
     $(".enumeration-devices").html(description);
 }
 
 function export_file(type_file) {
     var devices = $(".deviceSelect").filter(':checked');
-    var devices_id = $.map(devices, function (x) { return $(x).attr('data-device-dhid') }).join(",");
+    var devices_id = $.map(devices, function(x) { return $(x).attr('data-device-dhid')}).join(",");
-    if (devices_id) {
+    if (devices_id){
-        var url = "/inventory/export/" + type_file + "/?ids=" + devices_id;
+        var url = "/inventory/export/"+type_file+"/?ids="+devices_id;
         window.location.href = url;
     } else {
         $("#exportAlertModal").click();
     }
 }
 
-window.addEventListener("DOMContentLoaded", () => {
-    var searchForm = document.getElementById("SearchForm")
-    var inputSearch = document.querySelector("#SearchForm > input")
-    var doSearch = true
 
-    const Api = {
+/**
-        /**
+ * Reactive lots button
-         * get lots id
+ */
-         * @returns get lots
+async function processSelectedDevices() {
-         */
+    class Actions {
-        async get_lots() {
+
-            var request = await this.doRequest(API_URLS.lots, "GET", null)
+        constructor() {
-            if (request != undefined) return request.items
+            this.list = []; // list of petitions of requests @item --> {type: ["Remove" | "Add"], "LotID": string, "devices": number[]}
-            throw request
+        }
-        },
 
         /**
-         * Get filtered devices info
+         * Manage the actions that will be performed when applying the changes
-         * @param {number[]} ids devices ids
+         * @param {*} ev event (Should be a checkbox type)
-         * @returns full detailed device list
+         * @param {string} lotID lot id
+         * @param {number} deviceID device id
          */
-        async get_devices(id) {
+        manage(event, lotID, deviceListID) {
-            var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null)
+            event.preventDefault();
-            if (request != undefined) return request.items
+            const indeterminate = event.srcElement.indeterminate;
-            throw request
+            const checked = !event.srcElement.checked;
-        },
+
+            var found = this.list.filter(list => list.lotID == lotID)[0];
+            var foundIndex = found != undefined ? this.list.findLastIndex(x => x.lotID == found.lotID) : -1;
+
+            if (checked) {
+                if (found != undefined && found.type == "Remove") {
+                    if (found.isFromIndeterminate == true) {
+                        found.type = "Add";
+                        this.list[foundIndex] = found;
+                    } else {
+                        this.list = this.list.filter(list => list.lotID != lotID);
+                    }
+                } else {
+                    this.list.push({ type: "Add", lotID: lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
+                }
+            } else {
+                if (found != undefined && found.type == "Add") {
+                    if (found.isFromIndeterminate == true) {
+                        found.type = "Remove";
+                        this.list[foundIndex] = found;
+                    } else {
+                        this.list = this.list.filter(list => list.lotID != lotID);
+                    }
+                } else {
+                    this.list.push({ type: "Remove", lotID: lotID, devices: deviceListID, isFromIndeterminate: indeterminate });
+                }
+            }
+
+            if (this.list.length > 0) {
+                document.getElementById("ApplyDeviceLots").classList.remove("disabled");
+            } else {
+                document.getElementById("ApplyDeviceLots").classList.add("disabled");
+            }
+        }
 
         /**
-         * 
+         * Creates notification to give feedback to user
-         * @param {string} url URL to be requested
+         * @param {string} title notification title
-         * @param {String} type Action type
+         * @param {string | null} toastText notification text
-         * @param {String | Object} body body content
+         * @param {boolean} isError defines if a toast is a error
-         * @returns {Object[]}
          */
-        async doRequest(url, type, body) {
+        notifyUser(title, toastText, isError) {
-            var result;
+            let toast = document.createElement("div");
-            try {
+            toast.classList = "alert alert-dismissible fade show " + (isError ? "alert-danger" : "alert-success");
-                result = await $.ajax({
+            toast.attributes["data-autohide"] = !isError;
-                    url: url,
+            toast.attributes["role"] = "alert";
-                    type: type,
+            toast.style = "margin-left: auto; width: fit-content;";
-                    headers: {
+            toast.innerHTML = `<strong>${title}</strong><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
-                        "Authorization": API_URLS.Auth_Token
+            if (toastText && toastText.length > 0) {
-                    },
+                toast.innerHTML += `<br>${toastText}`;
-                    body: body
+            }
-                });
+
-                return result
+            document.getElementById("NotificationsContainer").appendChild(toast);
-            } catch (error) {
+            if (!isError) {
-                console.error(error)
+                setTimeout(() => toast.classList.remove("show"), 3000);
-                throw error
+            }
+            setTimeout(() => document.getElementById("NotificationsContainer").innerHTML == "", 3500);
+        }
+
+        /**
+         * Get actions and execute call request to add or remove devices from lots
+         */
+        doActions() {
+            var requestCount = 0; // This is for count all requested api count, to perform reRender of table device list
+            this.list.forEach(async action => {
+                if (action.type == "Add") {
+                    try {
+                        await Api.devices_add(action.lotID, action.devices);
+                        this.notifyUser("Devices sucefully aded to selected lot/s", "", false);
+                    } catch (error) {
+                        this.notifyUser("Failed to add devices to selected lot/s", error.responseJSON.message, true);
+                    }
+                } else if (action.type == "Remove") {
+                    try {
+                        await Api.devices_remove(action.lotID, action.devices);
+                        this.notifyUser("Devices sucefully removed from selected lot/s", "", false);
+                    } catch (error) {
+                        this.notifyUser("Fail to remove devices from selected lot/s", error.responseJSON.message, true);
+                    }
+                }
+                requestCount += 1
+                if (requestCount == this.list.length) {
+                    this.reRenderTable();
+                    this.list = [];
+                }
+            })
+            document.getElementById("dropDownLotsSelector").classList.remove("show");
+        }
+
+        /**
+         * Re-render list in table
+         */
+        async reRenderTable() {
+            var newRequest = await Api.doRequest(window.location)
+
+            var tmpDiv = document.createElement("div")
+            tmpDiv.innerHTML = newRequest
+
+            var oldTable = Array.from(document.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
+            var newTable = Array.from(tmpDiv.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value)
+
+            for (let i = 0; i < oldTable.length; i++) {
+                if (!newTable.includes(oldTable[i])) {
+                    // variable from device_list.html --> See: ereuse_devicehub\templates\inventory\device_list.html (Ln: 411)
+                    table.rows().remove(i)
+                }
             }
         }
     }
 
+    var eventClickActions;
 
+    /**
+     * Generates a list item with a correspondient checkbox state
+     * @param {String} lotID 
+     * @param {String} lotName 
+     * @param {Array<number>} selectedDevicesIDs
+     * @param {HTMLElement} target
+     */
+    function templateLot(lotID, lot, selectedDevicesIDs, elementTarget, actions) {
+        elementTarget.innerHTML = ""
 
-    searchForm.addEventListener("submit", (event) => {
+        var htmlTemplate = `<input class="form-check-input" type="checkbox" id="${lotID}" style="width: 20px; height: 20px; margin-right: 7px;">
-        event.preventDefault();
+            <label class="form-check-label" for="${lotID}">${lot.name}</label>`;
-    })
 
-    let timeoutHandler = setTimeout(() => { }, 1)
+        var existLotList = selectedDevicesIDs.map(selected => lot.devices.includes(selected));
-    let dropdownList = document.getElementById("dropdown-search-list")
-    let defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
 
+        var doc = document.createElement('li');
+        doc.innerHTML = htmlTemplate;
 
-    inputSearch.addEventListener("input", (e) => {
+        if (selectedDevicesIDs.length <= 0) {
-        clearTimeout(timeoutHandler)
+            doc.children[0].disabled = true;
-        let searchText = e.target.value
+        } else if (existLotList.every(value => value == true)) {
-        if (searchText == '') {
+            doc.children[0].checked = true;
-            document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch;
+        } else if (existLotList.every(value => value == false)) {
-            return
+            doc.children[0].checked = false;
+        } else {
+            doc.children[0].indeterminate = true;
         }
 
-        let resultCount = 0;
+        doc.children[0].addEventListener('mouseup', (ev) => actions.manage(ev, lotID, selectedDevicesIDs));
-        function searchCompleted() {
+        elementTarget.append(doc);
-            resultCount++;
+    }
-            if (resultCount < 2 && document.getElementById("dropdown-search-list").children.length > 0) {
-                setTimeout(() => {
-                    document.getElementById("dropdown-search-list").innerHTML = `
-                <li id="deviceSearchLoader" class="dropdown-item">
-                <i class="bi bi-x-lg"></i>
-                        <span style="margin-right: 10px">Nothing found</span>
-                </li>`
-                }, 100)
-            }
-        }
 
-        timeoutHandler = setTimeout(async () => {
+    var listHTML = $("#LotsSelector")
-            dropdownList.innerHTML = `
-                <li id="deviceSearchLoader" class="dropdown-item">
-                    <i class="bi bi-laptop"></i>
-                    <div class="spinner-border spinner-border-sm" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                </li>
-                <li id="lotSearchLoader" class="dropdown-item">
-                    <i class="bi bi-folder2"></i>
-                    <div class="spinner-border spinner-border-sm" role="status">
-                        <span class="visually-hidden">Loading...</span>
-                    </div>
-                </li>`;
 
+    // Get selected devices
+    var selectedDevicesIDs = $.map($(".deviceSelect").filter(':checked'), function (x) { return parseInt($(x).attr('data')) });
+    if (selectedDevicesIDs.length <= 0) {
+        listHTML.html('<li style="color: red; text-align: center">No devices selected</li>');
+        return;
+    }
 
-            try {
+    // Initialize Actions list, and set checkbox triggers
-                Api.get_devices(searchText.toUpperCase()).then(devices => {
+    var actions = new Actions();
-                    dropdownList.querySelector("#deviceSearchLoader").style = "display: none"
+    if (eventClickActions) {
+        document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions);
+    }
+    eventClickActions = document.getElementById("ApplyDeviceLots").addEventListener("click", () => actions.doActions());
+    document.getElementById("ApplyDeviceLots").classList.add("disabled");
 
-                    for (let i = 0; i < devices.length; i++) {
+    try {
-                        const device = devices[i];
+        listHTML.html('<li style="text-align: center"><div class="spinner-border text-info" style="margin: auto" role="status"></div></li>')
+        var devices = await Api.get_devices(selectedDevicesIDs);
+        var lots = await Api.get_lots();
 
-                        // See: ereuse_devicehub/resources/device/models.py
+        lots = lots.map(lot => {
-                        var verboseName = `${device.type} ${device.manufacturer} ${device.model}`
+            lot.devices = devices
+                .filter(device => device.lots.filter(devicelot => devicelot.id == lot.id).length > 0)
+                .map(device => parseInt(device.id));
+            return lot;
+        })
 
-                        const templateString = `
+        listHTML.html('');
-                        <li>
+        lots.forEach(lot => templateLot(lot.id, lot, selectedDevicesIDs, listHTML, actions));
-                            <a class="dropdown-item" href="${API_URLS.devices_detail.replace("ReplaceTEXT", device.devicehubID)}" style="display: flex; align-items: center;" href="#">
+    } catch (error) {
-                                <i class="bi bi-laptop"></i>
+        console.log(error);
-                                <span style="margin-right: 10px">${verboseName}</span>
+        listHTML.html('<li style="color: red; text-align: center">Error feching devices and lots<br>(see console for more details)</li>');
-                                <span class="badge bg-secondary" style="margin-left: auto;">${device.devicehubID}</span>
+    }
-                            </a>
+}
-                        </li>`;
-                        dropdownList.innerHTML += templateString
-                        if (i == 4) { // Limit to 4 resullts
-                            break;
-                        }
-                    }
-
-                    searchCompleted();
-                })
-            } catch (error) {
-                dropdownList.innerHTML += `
-                <li id="deviceSearchLoader" class="dropdown-item">
-                <i class="bi bi-x"></i>
-                    <div class="spinner-border spinner-border-sm" role="status">
-                        <span class="visually-hidden">Error searching devices</span>
-                    </div>
-                </li>`;
-                console.log(error);
-            }
-
-            try {
-                Api.get_lots().then(lots => {
-                    dropdownList.querySelector("#lotSearchLoader").style = "display: none"
-                    for (let i = 0; i < lots.length; i++) {
-                        const lot = lots[i];
-                        if (lot.name.toUpperCase().includes(searchText.toUpperCase())) {
-                            const templateString = `
-                            <li>
-                                <a class="dropdown-item" href="${API_URLS.lots_detail.replace("ReplaceTEXT", lot.id)}" style="display: flex; align-items: center;" href="#">
-                                    <i class="bi bi-folder2"></i>
-                                    <span style="margin-right: 10px">${lot.name}</span>
-                                </a>
-                            </li>`;
-                            dropdownList.innerHTML += templateString
-                            if (i == 4) { // Limit to 4 resullts
-                                break;
-                            }
-                        }
-                    }
-                    searchCompleted();
-                })
-
-            } catch (error) {
-                dropdownList.innerHTML += `
-                <li id="deviceSearchLoader" class="dropdown-item">
-                <i class="bi bi-x"></i>
-                    <div class="spinner-border spinner-border-sm" role="status">
-                        <span class="visually-hidden">Error searching lots</span>
-                    </div>
-                </li>`;
-                console.log(error);
-            }
-        }, 1000)
-    })
-
-
-})

ereuse_devicehub/templates/ereuse_devicehub/base.html

@@ -50,6 +50,20 @@
   <!-- Template Main JS File -->
   <script src="{{ url_for('static', filename='js/main.js') }}"></script>
 
+  <!-- Api backend -->
+  <script>
+    const API_URLS = {
+      Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, // 
+      currentUserID: "{{ current_user.id }}",
+      lots: "{{ url_for('Lot.main') }}",
+      lots_detail: "{{ url_for('inventory.lotdevicelist', lot_id='ReplaceTEXT') }}",
+      devices: "{{ url_for('Device.main') }}",
+      devices_modify: "{{ url_for('Lot.lot-device', id='UUID') }}",
+      devices_detail: "{{ url_for('inventory.device_details', id='ReplaceTEXT')}}"
+    }
+  </script>
+  <script src="{{ url_for('static', filename='js/api.js') }}"></script>
+
 </body>
 
 </html>

ereuse_devicehub/templates/ereuse_devicehub/base_site.html

@@ -12,14 +12,20 @@
   </div><!-- End Logo -->
 
   <div class="search-bar">
-    <form class="search-form d-flex align-items-center" method="POST" id="SearchForm" action="#">
+    <form class="search-form d-flex align-items-center" method="" id="SearchForm" action="#">
-      <input class="dropdown-toggle" type="text" name="query" placeholder="Search" title="Enter search keyword" autocomplete="off" id="dropdownSearch" data-bs-toggle="dropdown" aria-expanded="false">
+      <input class="dropdown-toggle" type="text" name="query" placeholder="Search" title="Enter search keyword"
+        autocomplete="off" id="dropdownSearch" data-bs-toggle="dropdown" aria-expanded="false">
       <button type="submit" title="Search"><i class="bi bi-search"></i></button>
 
-      <ul class="dropdown-menu" autoClose="outside" aria-labelledby="dropdownSearch" id="dropdown-search-list" style="min-width: 100px;">
+      <ul class="dropdown-menu" autoClose="outside" aria-labelledby="dropdownSearch" id="dropdown-search-list"
-        <li class="dropdown-header"><h6 class="dropdown-header">You can search:</h6></li>
+        style="min-width: 100px;">
-        <li class="dropdown-item"><i class="bi bi-laptop"></i> Devices <span class="badge bg-secondary" style="float: right;">DHID</span></li>
+        <li class="dropdown-header">
-        <li class="dropdown-item"><i class="bi bi-folder2"></i> lots <span class="badge bg-secondary" style="float: right;">Name</span></li>
+          <h6 class="dropdown-header">You can search:</h6>
+        </li>
+        <li class="dropdown-item"><i class="bi bi-laptop"></i> Devices <span class="badge bg-secondary"
+            style="float: right;">DHID</span></li>
+        <li class="dropdown-item"><i class="bi bi-folder2"></i> lots <span class="badge bg-secondary"
+            style="float: right;">Name</span></li>
       </ul>
     </form>
   </div><!-- End Search Bar -->
@@ -107,81 +113,82 @@
     <li class="nav-item">
       {% if lot and lot.is_incoming %}
       <a class="nav-link" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
+        {% else %}
-      <a class="nav-link collapsed" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
+        <a class="nav-link collapsed" data-bs-target="#incoming-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
+          {% endif %}
-        <i class="bi bi-arrow-down-right"></i><span>Incoming Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-arrow-down-right"></i><span>Incoming Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
+        </a>
-      {% if lot and lot.is_incoming %}
+        {% if lot and lot.is_incoming %}
-      <ul id="incoming-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+        <ul id="incoming-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
+          {% else %}
-      <ul id="incoming-lots-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
+          <ul id="incoming-lots-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
-      {% endif %}
+            {% endif %}
-        {% for lot in lots %}
+            {% for lot in lots %}
-        {% if lot.is_incoming %}
+            {% if lot.is_incoming %}
-        <li>
+            <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+                <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
+              </a>
-        </li>
+            </li>
-        {% endif %}
+            {% endif %}
-        {% endfor %}
+            {% endfor %}
-      </ul>
+          </ul>
     </li><!-- End Incoming Lots Nav -->
 
     <li class="nav-item">
       {% if lot and lot.is_outgoing %}
       <a class="nav-link" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
+        {% else %}
-      <a class="nav-link collapsed" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
+        <a class="nav-link collapsed" data-bs-target="#outgoing-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
+          {% endif %}
-        <i class="bi bi-arrow-up-right"></i><span>Outgoing Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-arrow-up-right"></i><span>Outgoing Lots</span><i class="bi bi-chevron-down ms-auto"></i>
-      </a>
+        </a>
-      {% if lot and lot.is_outgoing %}
+        {% if lot and lot.is_outgoing %}
-      <ul id="outgoing-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+        <ul id="outgoing-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      {% else %}
+          {% else %}
-      <ul id="outgoing-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+          <ul id="outgoing-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-      {% endif %}
+            {% endif %}
-        {% for lot in lots %}
+            {% for lot in lots %}
-        {% if lot.is_outgoing %}
+            {% if lot.is_outgoing %}
-        <li>
+            <li>
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+                <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-          </a>
+              </a>
-        </li>
+            </li>
-        {% endif %}
+            {% endif %}
-        {% endfor %}
+            {% endfor %}
-      </ul>
+          </ul>
     </li><!-- End Outgoing Lots Nav -->
 
     <li class="nav-item">
       {% if lot and lot.is_temporary %}
       <a class="nav-link" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
-      {% else %}
+        {% else %}
-      <a class="nav-link collapsed"  data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
+        <a class="nav-link collapsed" data-bs-target="#temporal-lots-nav" data-bs-toggle="collapse" href="#">
-      {% endif %}
+          {% endif %}
-        <i class="bi bi-layout-text-window-reverse"></i><span>Temporary Lots</span><i class="bi bi-chevron-down ms-auto"></i>
+          <i class="bi bi-layout-text-window-reverse"></i><span>Temporary Lots</span><i
-      </a>
+            class="bi bi-chevron-down ms-auto"></i>
-      {% if lot and lot.is_temporary %}
+        </a>
-      <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
+        {% if lot and lot.is_temporary %}
-      {% else %}
+        <ul id="temporal-lots-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
-      <ul id="temporal-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
+          {% else %}
-      {% endif %}
+          <ul id="temporal-lots-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
-        <li>
+            {% endif %}
-          <a href="{{ url_for('inventory.lot_add')}}">
+            <li>
-            <i class="bi bi-plus" style="font-size: larger;"></i><span>New temporary lot</span>
+              <a href="{{ url_for('inventory.lot_add')}}">
-          </a>
+                <i class="bi bi-plus" style="font-size: larger;"></i><span>New temporary lot</span>
-        </li>
+              </a>
-        {% for lot in lots %}
+            </li>
-        {% if lot.is_temporary %}
+            {% for lot in lots %}
-        <li>
+            {% if lot.is_temporary %}
-          <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
+            <li>
-            <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
+              <a href="{{ url_for('inventory.lotdevicelist', lot_id=lot.id) }}">
-          </a>
+                <i class="bi bi-circle"></i><span>{{ lot.name }}</span>
-        </li>
+              </a>
-        {% endif %}
+            </li>
-        {% endfor %}
+            {% endif %}
-      </ul>
+            {% endfor %}
+          </ul>
     </li><!-- End Temporal Lots Nav -->
 
     <li class="nav-heading">Utils</li>
@@ -199,17 +206,18 @@
 
 <main id="main" class="main">
   {% block messages %}
-    {% for level, message in get_flashed_messages(with_categories=true) %}
+  {% for level, message in get_flashed_messages(with_categories=true) %}
-      <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
+  <div class="alert alert-{{ level}} alert-dismissible fade show" role="alert">
-        {% if '_message_icon' in session %}
+    {% if '_message_icon' in session %}
-          <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
+    <i class="bi bi-{{ session['_message_icon'][level]}} me-1"></i>
-        {% else %}<!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
+    {% else %}
-          <i class="bi bi-info-circle me-1"></i>
+    <!-- fallback if 3rd party libraries (e.g. flask_login.login_required) -->
-        {% endif %}
+    <i class="bi bi-info-circle me-1"></i>
-        {{ message }}
+    {% endif %}
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    {{ message }}
-      </div>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-    {% endfor %}
+  </div>
+  {% endfor %}
   {% endblock %}
   {% block main %}
 
@@ -230,16 +238,4 @@
   </div>
 </footer><!-- End Footer -->
 
-<!-- API_CALLS -->
-<script>
-  const API_URLS = {
-    Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, // 
-    currentUserID: "{{ current_user.id }}",
-    lots: "{{ url_for('Lot.main') }}",
-    lots_detail: "{{ url_for('inventory.lotdevicelist', lot_id='ReplaceTEXT') }}",
-    devices: "{{ url_for('Device.main') }}",
-    devices_detail: "{{ url_for('inventory.device_details', id='ReplaceTEXT')}}"
-  }
-</script>
-
 {% endblock body %}

ereuse_devicehub/templates/inventory/addDeviceslot.html

@@ -1,33 +0,0 @@
-<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="{{ url_for('inventory.lot_devices_add') }}" method="post">
-      {{ form_lot_device.csrf_token }}
-        <div class="modal-body">
-          Please write a name of a lot
-          <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 pol">
-              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>
-          <input type="submit" class="btn btn-primary" style="display: none;" value="Save changes" />
-        </div>
-      </form>
-
-    </div>
-  </div>
-</div>

ereuse_devicehub/templates/inventory/device_list.html

@@ -71,25 +71,21 @@
           {% endif %}
           <div class="tab-content pt-5">
             <div id="devices-list" class="tab-pane fade devices-list active show">
-
+              <label class="btn btn-primary " for="SelectAllBTN"><input type="checkbox" id="SelectAllBTN" autocomplete="off"></label>
               <div class="btn-group dropdown ml-1">
-                <button id="btnLots" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                <button id="btnLots" type="button" onclick="processSelectedDevices()" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="bi bi-folder2"></i>
                   Lots
                   <span class="caret"></span>
                 </button>
-                <span class="d-none" id="activeTradeModal" data-bs-toggle="modal" data-bs-target="#tradeLotModal"></span>
+                <ul class="dropdown-menu" aria-labelledby="btnLots" style="width: 300px;" id="dropDownLotsSelector">
-                <ul class="dropdown-menu" aria-labelledby="btnLots">
+                  <h6 class="dropdown-header">Select some devices to manage lots</h6>
+                  <ul style="list-style-type: none; margin: 0; padding: 0;" class="mx-3" id="LotsSelector"></ul>
+                  <li><hr /></li>
                   <li>
-                    <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addingLotModal">
+                    <a href="#" class="dropdown-item" id="ApplyDeviceLots">
-                      <i class="bi bi-plus"></i>
+                      <i class="bi bi-check"></i>
-                      Add selected Devices to a lot
+                      Apply
-                    </a>
-                  </li>
-                  <li>
-                    <a href="javascript:void()" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#removeLotModal">
-                      <i class="bi bi-x"></i>
-                      Remove selected devices from a lot
                     </a>
                   </li>
                 </ul>
@@ -394,12 +390,12 @@
         </div>
       </div>
 
+      <div id="NotificationsContainer" style="position: absolute; bottom: 0; right: 0; margin: 10px; margin-top: 70px; width: calc(100% - 310px);"></div>
+
     </div>
   </div>
 </section>
-{% include "inventory/addDeviceslot.html" %}
 {% include "inventory/addDevicestag.html" %}
-{% include "inventory/removeDeviceslot.html" %}
 {% include "inventory/lot_delete_modal.html" %}
 {% include "inventory/actions.html" %}
 {% include "inventory/allocate.html" %}

ereuse_devicehub/templates/inventory/removeDeviceslot.html

@@ -1,32 +0,0 @@
-<div class="modal fade" id="removeLotModal" tabindex="-1" style="display: none;" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Remove from lot</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-
-      <form action="{{ url_for('inventory.lot_devices_del') }}" method="post">
-      {{ form_lot_device.csrf_token }}
-        <div class="modal-body">
-          Please write a name of a lot
-          <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 pol">
-              You need select first some device for remove this from a lot
-          </p>
-        </div>
-
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-          <input type="submit" class="btn btn-primary" style="display: none;" value="Save changes" />
-        </div>
-      </form>
-
-    </div>
-  </div>
-</div>