Merge commit '89647f6ed5a971d52e809ca37bfee1edb3439b48' into testing

CHANGELOG.md

@@ -8,6 +8,7 @@ ml).
 ## master
 
 ## testing
+- [changed] #218 add reactivit to device lots
 - [changed] #211 Print DHID-QR label for selected devices.
 - [fixed] #214 Login workflow
 

development-setup.md

@@ -30,11 +30,6 @@ Create a demo table
 export dhi=dbtest; dh dummy
 ```
 
-copy `examples/app.py` to project directory:
-```bash
-copy examples/app.py .
-```
-
 ## Run project
 
 Run the app

ereuse_devicehub/static/js/main.js

@@ -217,4 +217,39 @@
     }, 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();
+  })
+
 })();

ereuse_devicehub/static/js/main_inventory.js

@@ -180,3 +180,272 @@ function export_file(type_file) {
         $("#exportAlertModal").click();
     }
 }
+
+
+
+/**
+ * Reactive lots button
+ */
+async function processSelectedDevices() {
+    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;
+        },
+
+        /**
+         * 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;
+            }
+        }
+    }
+
+    class Actions {
+
+        constructor() {
+            this.list = []; // list of petitions of requests @item --> {type: ["Remove" | "Add"], "LotID": string, "devices": number[]}
+        }
+
+        /**
+         * Manage the actions that will be performed when applying the changes
+         * @param {*} ev event (Should be a checkbox type)
+         * @param {string} lotID lot id
+         * @param {number} deviceID device id
+         */
+        manage(event, lotID, deviceListID) {
+            event.preventDefault();
+            const indeterminate = event.srcElement.indeterminate;
+            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} title notification title
+         * @param {string | null} toastText notification text
+         * @param {boolean} isError defines if a toast is a error
+         */
+        notifyUser(title, toastText, isError) {
+            let toast = document.createElement("div");
+            toast.classList = "alert alert-dismissible fade show " + (isError ? "alert-danger" : "alert-success");
+            toast.attributes["data-autohide"] = !isError;
+            toast.attributes["role"] = "alert";
+            toast.style = "margin-left: auto; width: fit-content;";
+            toast.innerHTML = `<strong>${title}</strong><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
+            if (toastText && toastText.length > 0) {
+                toast.innerHTML += `<br>${toastText}`;
+            }
+
+            document.getElementById("NotificationsContainer").appendChild(toast);
+            if (!isError) {
+                setTimeout(() => toast.classList.remove("show"), 3000);
+            }
+            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 = []
+                }
+            })
+        }
+
+        /**
+         * 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 = ""
+
+        var htmlTemplate = `<input class="form-check-input" type="checkbox" id="${lotID}" style="width: 20px; height: 20px; margin-right: 7px;">
+            <label class="form-check-label" for="${lotID}">${lot.name}</label>`;
+
+        var existLotList = selectedDevicesIDs.map(selected => lot.devices.includes(selected));
+
+        var doc = document.createElement('li');
+        doc.innerHTML = htmlTemplate;
+
+        if (selectedDevicesIDs.length <= 0) {
+            doc.children[0].disabled = true;
+        } else if (existLotList.every(value => value == true)) {
+            doc.children[0].checked = true;
+        } else if (existLotList.every(value => value == false)) {
+            doc.children[0].checked = false;
+        } else {
+            doc.children[0].indeterminate = true;
+        }
+
+        doc.children[0].addEventListener('mouseup', (ev) => actions.manage(ev, lotID, selectedDevicesIDs));
+        elementTarget.append(doc);
+    }
+
+    var listHTML = $("#LotsSelector")
+
+    // 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;
+    }
+
+    // Initialize Actions list, and set checkbox triggers
+    var actions = new Actions();
+    if (eventClickActions) {
+        document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions);
+    }
+    eventClickActions = document.getElementById("ApplyDeviceLots").addEventListener("click", () => actions.doActions());
+    document.getElementById("ApplyDeviceLots").classList.add("disabled");
+
+    try {
+        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();
+
+        lots = lots.map(lot => {
+            lot.devices = devices
+                .filter(device => device.lots.filter(devicelot => devicelot.id == lot.id).length > 0)
+                .map(device => parseInt(device.id));
+            return lot;
+        })
+
+        listHTML.html('');
+        lots.forEach(lot => templateLot(lot.id, lot, selectedDevicesIDs, listHTML, actions));
+    } catch (error) {
+        console.log(error);
+        listHTML.html('<li style="color: red; text-align: center">Error feching devices and lots<br>(see console for more details)</li>');
+    }
+}

ereuse_devicehub/templates/ereuse_devicehub/base_site.html

@@ -224,4 +224,14 @@
   </div>
 </footer><!-- End Footer -->
 
+<script>
+  const API_URLS = {
+    Auth_Token: `Basic ${btoa("{{ current_user.token }}:")}`, // 
+    currentUserID: "{{ current_user.id }}",
+    lots: "{{ url_for('Lot.main') }}",
+    devices: "{{ url_for('Device.main') }}",
+    devices_modify: "{{ url_for('Lot.lot-device', id='UUID') }}",
+  }
+</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>