From 756c7bd1c48d4154a5f9b4d6db4599aa0e3a8c6a Mon Sep 17 00:00:00 2001 From: RubenPX Date: Mon, 11 Apr 2022 11:44:48 +0000 Subject: [PATCH 1/6] Search lots and devices --- ereuse_devicehub/static/js/main_inventory.js | 506 +++++++++++------- .../templates/ereuse_devicehub/base_site.html | 477 +++++++++-------- 2 files changed, 574 insertions(+), 409 deletions(-) diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index 86c25a82..775b0402 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -1,182 +1,324 @@ -$(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'); - if (show_allocate_form != "None") { - $("#allocateModal .btn-primary").show(); - newAllocate(show_allocate_form); - } else if (show_datawipe_form != "None") { - $("#datawipeModal .btn-primary").show(); - newDataWipe(show_datawipe_form); - } else if (show_trade_form != "None") { - $("#tradeLotModal .btn-primary").show(); - newTrade(show_trade_form); - } else { - $(".deviceSelect").on("change", deviceSelect); - } - // $('#selectLot').selectpicker(); -}) - -function deviceSelect() { - var devices_count = $(".deviceSelect").filter(':checked').length; - get_device_list(); - if (devices_count == 0) { - $("#addingLotModal .pol").show(); - $("#addingLotModal .btn-primary").hide(); - - $("#removeLotModal .pol").show(); - $("#removeLotModal .btn-primary").hide(); - - $("#addingTagModal .pol").show(); - $("#addingTagModal .btn-primary").hide(); - - $("#actionModal .pol").show(); - $("#actionModal .btn-primary").hide(); - - $("#allocateModal .pol").show(); - $("#allocateModal .btn-primary").hide(); - - $("#datawipeModal .pol").show(); - $("#datawipeModal .btn-primary").hide(); - } else { - $("#addingLotModal .pol").hide(); - $("#addingLotModal .btn-primary").show(); - - $("#removeLotModal .pol").hide(); - $("#removeLotModal .btn-primary").show(); - - $("#actionModal .pol").hide(); - $("#actionModal .btn-primary").show(); - - $("#allocateModal .pol").hide(); - $("#allocateModal .btn-primary").show(); - - $("#datawipeModal .pol").hide(); - $("#datawipeModal .btn-primary").show(); - - $("#addingTagModal .pol").hide(); - $("#addingTagModal .btn-primary").show(); - } -} - -function removeLot() { - var devices = $(".deviceSelect"); - if (devices.length > 0) { - $("#btnRemoveLots .text-danger").show(); - } else { - $("#btnRemoveLots .text-danger").hide(); - } - $("#activeRemoveLotModal").click(); -} - -function removeTag() { - var devices = $(".deviceSelect").filter(':checked'); - 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/"; - window.location.href = url; - } else { - $("#unlinkTagAlertModal").click(); - } -} - -function addTag() { - var devices = $(".deviceSelect").filter(':checked'); - var devices_id = $.map(devices, function(x) { return $(x).attr('data')}); - if (devices_id.length == 1) { - $("#addingTagModal .pol").hide(); - $("#addingTagModal .btn-primary").show(); - } else { - $("#addingTagModal .pol").show(); - $("#addingTagModal .btn-primary").hide(); - } - - $("#addTagAlertModal").click(); -} - -function newTrade(action) { - var title = "Trade " - var user_to = $("#user_to").data("email"); - var user_from = $("#user_from").data("email"); - if (action == 'user_from') { - title = 'Trade Incoming'; - $("#user_to").attr('readonly', 'readonly'); - $("#user_from").prop('readonly', false); - $("#user_from").val(''); - $("#user_to").val(user_to); - } else if (action == 'user_to') { - title = 'Trade Outgoing'; - $("#user_from").attr('readonly', 'readonly'); - $("#user_to").prop('readonly', false); - $("#user_to").val(''); - $("#user_from").val(user_from); - } - $("#tradeLotModal #title-action").html(title); - $("#activeTradeModal").click(); -} - -function newAction(action) { - $("#actionModal #type").val(action); - $("#actionModal #title-action").html(action); - deviceSelect(); - $("#activeActionModal").click(); -} - -function newAllocate(action) { - $("#allocateModal #type").val(action); - $("#allocateModal #title-action").html(action); - deviceSelect(); - $("#activeAllocateModal").click(); -} - -function newDataWipe(action) { - $("#datawipeModal #type").val(action); - $("#datawipeModal #title-action").html(action); - deviceSelect(); - $("#activeDatawipeModal").click(); -} - -function get_device_list() { - var devices = $(".deviceSelect").filter(':checked'); - - /* Insert the correct count of devices in actions form */ - var devices_count = devices.length; - $("#datawipeModal .devices-count").html(devices_count); - $("#allocateModal .devices-count").html(devices_count); - $("#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(","); - $.map($(".devicesList"), function(x) { - $(x).val(devices_id); - }); - - /* Create a list of devices for human representation */ - var computer = { - "Desktop": "", - "Laptop": "", - }; - list_devices = devices.map(function (x) { - var typ = $(devices[x]).data("device-type"); - var manuf = $(devices[x]).data("device-manufacturer"); - var dhid = $(devices[x]).data("device-dhid"); - if (computer[typ]) { - typ = computer[typ]; - }; - return typ + " " + manuf + " " + dhid; - }); - - 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(","); - if (devices_id){ - var url = "/inventory/export/"+type_file+"/?ids="+devices_id; - window.location.href = url; - } else { - $("#exportAlertModal").click(); - } -} +$(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'); + if (show_allocate_form != "None") { + $("#allocateModal .btn-primary").show(); + newAllocate(show_allocate_form); + } else if (show_datawipe_form != "None") { + $("#datawipeModal .btn-primary").show(); + newDataWipe(show_datawipe_form); + } else if (show_trade_form != "None") { + $("#tradeLotModal .btn-primary").show(); + newTrade(show_trade_form); + } else { + $(".deviceSelect").on("change", deviceSelect); + } + // $('#selectLot').selectpicker(); +}) + +function deviceSelect() { + var devices_count = $(".deviceSelect").filter(':checked').length; + get_device_list(); + if (devices_count == 0) { + $("#addingLotModal .pol").show(); + $("#addingLotModal .btn-primary").hide(); + + $("#removeLotModal .pol").show(); + $("#removeLotModal .btn-primary").hide(); + + $("#addingTagModal .pol").show(); + $("#addingTagModal .btn-primary").hide(); + + $("#actionModal .pol").show(); + $("#actionModal .btn-primary").hide(); + + $("#allocateModal .pol").show(); + $("#allocateModal .btn-primary").hide(); + + $("#datawipeModal .pol").show(); + $("#datawipeModal .btn-primary").hide(); + } else { + $("#addingLotModal .pol").hide(); + $("#addingLotModal .btn-primary").show(); + + $("#removeLotModal .pol").hide(); + $("#removeLotModal .btn-primary").show(); + + $("#actionModal .pol").hide(); + $("#actionModal .btn-primary").show(); + + $("#allocateModal .pol").hide(); + $("#allocateModal .btn-primary").show(); + + $("#datawipeModal .pol").hide(); + $("#datawipeModal .btn-primary").show(); + + $("#addingTagModal .pol").hide(); + $("#addingTagModal .btn-primary").show(); + } +} + +function removeLot() { + var devices = $(".deviceSelect"); + if (devices.length > 0) { + $("#btnRemoveLots .text-danger").show(); + } else { + $("#btnRemoveLots .text-danger").hide(); + } + $("#activeRemoveLotModal").click(); +} + +function removeTag() { + var devices = $(".deviceSelect").filter(':checked'); + 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/"; + window.location.href = url; + } else { + $("#unlinkTagAlertModal").click(); + } +} + +function addTag() { + var devices = $(".deviceSelect").filter(':checked'); + var devices_id = $.map(devices, function (x) { return $(x).attr('data') }); + if (devices_id.length == 1) { + $("#addingTagModal .pol").hide(); + $("#addingTagModal .btn-primary").show(); + } else { + $("#addingTagModal .pol").show(); + $("#addingTagModal .btn-primary").hide(); + } + + $("#addTagAlertModal").click(); +} + +function newTrade(action) { + var title = "Trade " + var user_to = $("#user_to").data("email"); + var user_from = $("#user_from").data("email"); + if (action == 'user_from') { + title = 'Trade Incoming'; + $("#user_to").attr('readonly', 'readonly'); + $("#user_from").prop('readonly', false); + $("#user_from").val(''); + $("#user_to").val(user_to); + } else if (action == 'user_to') { + title = 'Trade Outgoing'; + $("#user_from").attr('readonly', 'readonly'); + $("#user_to").prop('readonly', false); + $("#user_to").val(''); + $("#user_from").val(user_from); + } + $("#tradeLotModal #title-action").html(title); + $("#activeTradeModal").click(); +} + +function newAction(action) { + $("#actionModal #type").val(action); + $("#actionModal #title-action").html(action); + deviceSelect(); + $("#activeActionModal").click(); +} + +function newAllocate(action) { + $("#allocateModal #type").val(action); + $("#allocateModal #title-action").html(action); + deviceSelect(); + $("#activeAllocateModal").click(); +} + +function newDataWipe(action) { + $("#datawipeModal #type").val(action); + $("#datawipeModal #title-action").html(action); + deviceSelect(); + $("#activeDatawipeModal").click(); +} + +function get_device_list() { + var devices = $(".deviceSelect").filter(':checked'); + + /* Insert the correct count of devices in actions form */ + var devices_count = devices.length; + $("#datawipeModal .devices-count").html(devices_count); + $("#allocateModal .devices-count").html(devices_count); + $("#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(","); + $.map($(".devicesList"), function (x) { + $(x).val(devices_id); + }); + + /* Create a list of devices for human representation */ + var computer = { + "Desktop": "", + "Laptop": "", + }; + list_devices = devices.map(function (x) { + var typ = $(devices[x]).data("device-type"); + var manuf = $(devices[x]).data("device-manufacturer"); + var dhid = $(devices[x]).data("device-dhid"); + if (computer[typ]) { + typ = computer[typ]; + }; + return typ + " " + manuf + " " + dhid; + }); + + 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(","); + if (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 = { + /** + * 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(id) { + var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null) + if (request != undefined) return request.items + throw request + }, + + /** + * + * @param {string} url URL to be requested + * @param {String} type Action type + * @param {String | Object} body body content + * @returns {Object[]} + */ + 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 + } + } + } + + + + searchForm.addEventListener("submit", (event) => { + event.preventDefault(); + }) + + var timeoutHandler = setTimeout(() => { }, 1000) + var dropdownList = document.getElementById("dropdown-search-list") + + + inputSearch.addEventListener("input", (e) => { + console.log("Timeout restart") + clearTimeout(timeoutHandler) + timeoutHandler = setTimeout(async () => { + console.log("timeout start") + dropdownList.innerHTML = ` + + + ` + var searchText = e.target.value + + try { + Api.get_devices(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 = ` +
  • + + + ${verboseName} + ${device.devicehubID} + +
    • ` + dropdownList.innerHTML += templateString + if (i == 4) { // Limit to 4 resullts + break; + } + } + }) + } catch (error) { + 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 = ` +
  • + + + ${lot.name} + +
    • ` + dropdownList.innerHTML += templateString + if (i == 4) { + break; + } + } + } + }) + + } catch (error) { + console.log(error) + } + }, 1000) + }) + + +}) \ No newline at end of file diff --git a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html index 1ffddfa0..e809dcc9 100644 --- a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html +++ b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html @@ -1,227 +1,250 @@ -{% extends "ereuse_devicehub/base.html" %} -{% block page_title %}{{ page_title }}{% endblock %} -{% block body %} - - - - - - -
    - {% block messages %} - {% for level, message in get_flashed_messages(with_categories=true) %} - - {% endfor %} - {% endblock %} - {% block main %} - - {% endblock main %} -
    - - - - -{% endblock body %} +{% extends "ereuse_devicehub/base.html" %} +{% block page_title %}{{ page_title }}{% endblock %} +{% block body %} + + + + + + +
    + {% block messages %} + {% for level, message in get_flashed_messages(with_categories=true) %} + + {% endfor %} + {% endblock %} + {% block main %} + + {% endblock main %} +
    + + + + + + + +{% endblock body %} From b08a0139128782af481f7720e3fa997b206c4461 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Mon, 11 Apr 2022 13:51:27 +0200 Subject: [PATCH 2/6] Remove demo data --- .../templates/ereuse_devicehub/base_site.html | 8 -------- 1 file changed, 8 deletions(-) diff --git a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html index e809dcc9..60cab63b 100644 --- a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html +++ b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html @@ -17,14 +17,6 @@ From 34da3599f3d144ee44e0f423592ceac267f96c70 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Tue, 12 Apr 2022 09:40:45 +0200 Subject: [PATCH 3/6] Fix start search info --- ereuse_devicehub/templates/ereuse_devicehub/base_site.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html index 60cab63b..8e03f429 100644 --- a/ereuse_devicehub/templates/ereuse_devicehub/base_site.html +++ b/ereuse_devicehub/templates/ereuse_devicehub/base_site.html @@ -17,6 +17,9 @@ From 938ccedac7d4098085d89156472cdae73d02f760 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Tue, 12 Apr 2022 12:06:38 +0200 Subject: [PATCH 4/6] show message when search is empty --- ereuse_devicehub/static/js/main_inventory.js | 59 ++++++++++++++++---- 1 file changed, 47 insertions(+), 12 deletions(-) diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index 775b0402..8bf254a4 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -240,15 +240,34 @@ window.addEventListener("DOMContentLoaded", () => { event.preventDefault(); }) - var timeoutHandler = setTimeout(() => { }, 1000) - var dropdownList = document.getElementById("dropdown-search-list") + let timeoutHandler = setTimeout(() => { }, 1) + let dropdownList = document.getElementById("dropdown-search-list") + let defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML inputSearch.addEventListener("input", (e) => { - console.log("Timeout restart") clearTimeout(timeoutHandler) + let searchText = e.target.value + if (searchText == '') { + document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch; + return + } + + let resultCount = 0; + function searchCompleted() { + resultCount++; + if (resultCount < 2 && document.getElementById("dropdown-search-list").children.length > 0) { + setTimeout(() => { + document.getElementById("dropdown-search-list").innerHTML = ` + ` + }, 100) + } + } + timeoutHandler = setTimeout(async () => { - console.log("timeout start") dropdownList.innerHTML = ` - ` - var searchText = e.target.value + `; + try { Api.get_devices(searchText.toUpperCase()).then(devices => { @@ -282,15 +300,24 @@ window.addEventListener("DOMContentLoaded", () => { ${verboseName} ${device.devicehubID} - ` + `; dropdownList.innerHTML += templateString if (i == 4) { // Limit to 4 resullts break; } } + + searchCompleted(); }) } catch (error) { - console.log(error) + dropdownList.innerHTML += ` + `; + console.log(error); } try { @@ -305,17 +332,25 @@ window.addEventListener("DOMContentLoaded", () => { ${lot.name} - ` + `; dropdownList.innerHTML += templateString - if (i == 4) { + if (i == 4) { // Limit to 4 resullts break; } } } + searchCompleted(); }) } catch (error) { - console.log(error) + dropdownList.innerHTML += ` + `; + console.log(error); } }, 1000) }) From 5ce535f5d5fc61ed511b103b66014d4c1148930e Mon Sep 17 00:00:00 2001 From: RubenPX Date: Tue, 12 Apr 2022 12:32:20 +0200 Subject: [PATCH 5/6] Remove duplicated setup steps See: Line 13 --- development-setup.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/development-setup.md b/development-setup.md index c900574a..eb0fd221 100755 --- a/development-setup.md +++ b/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 From 3feb84cf02d1864753cdb1911a99f18655772e15 Mon Sep 17 00:00:00 2001 From: RubenPX Date: Tue, 12 Apr 2022 12:32:28 +0200 Subject: [PATCH 6/6] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 542b5491..57c76542 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ ml). ## master ## testing +- [added] #219 add functionality to searchbar (Lots and devices) - [changed] #211 Print DHID-QR label for selected devices. - [fixed] #214 Login workflow