diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..416c47b1 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +ereuse_devicehub/static/vendor +ereuse_devicehub/static/js/print.pdf.js +ereuse_devicehub/static/js/qrcode.js +*.min.js \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..0d9213bb --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,36 @@ +{ + "env": { + "browser": true, + "es2021": true, + "jquery": true + }, + "extends": [ + "airbnb", + "prettier" + ], + "plugins": [ + "prettier" + ], + "parserOptions": { + "ecmaVersion": "latest" + }, + "rules": { + "quotes": ["error","double"], + "no-use-before-define": "off", + "no-unused-vars": "warn", + "no-undef": "warn", + "camelcase": "off", + "no-console": "off", + "no-plusplus": "off", + "no-param-reassign": "off", + "no-new": "warn", + "strict": "off", + "class-methods-use-this": "off", + "eqeqeq": "warn", + "radix": "warn" + }, + "globals": { + "API_URLS": true, + "Api": true + } +} \ No newline at end of file diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml new file mode 100644 index 00000000..7e42feaf --- /dev/null +++ b/.github/workflows/eslint.yml @@ -0,0 +1,55 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. +# ESLint is a tool for identifying and reporting on patterns +# found in ECMAScript/JavaScript code. +# More details at https://github.com/eslint/eslint +# and https://eslint.org + +name: ESLint + +on: + push: + branches: [master, testing] + pull_request_target: + branches: [master, testing] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: '16' + - name: Install dependencies + run: npm install + - name: Run linters + uses: wearerequired/lint-action@v1 + with: + eslint: true + prettier: false + commit_message: "Fix code style issues with ${linter}" + auto_fix: true + commit: true + github_token: "${{ secrets.GITHUB_TOKEN }}" + git_name: "Lint Action" + - name: Save Code Linting Report JSON + # npm script for ESLint + # eslint --output-file eslint_report.json --format json src + # See https://eslint.org/docs/user-guide/command-line-interface#options + run: npm run lint:report + # Continue to the next step even if this fails + continue-on-error: true + - name: Annotate Code Linting Results + uses: ataylorme/eslint-annotate-action@1.2.0 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + report-json: "eslint_report.json" + only-pr-files: true + - name: Upload ESLint report + uses: actions/upload-artifact@v2 + with: + name: eslint_report.json + path: eslint_report.json diff --git a/.gitignore b/.gitignore index 6a130a6e..0d6f75c3 100644 --- a/.gitignore +++ b/.gitignore @@ -119,3 +119,11 @@ ENV/ # Temporal dir tmp/ + +# NPM modules +node_modules/ +yarn.lock + +# ESLint Report +eslint_report.json + diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..f92e93ef --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,3 @@ +{ + "printWidth": 250 +} \ No newline at end of file diff --git a/ereuse_devicehub/static/css/devicehub.css b/ereuse_devicehub/static/css/devicehub.css new file mode 100644 index 00000000..e6ae1893 --- /dev/null +++ b/ereuse_devicehub/static/css/devicehub.css @@ -0,0 +1,25 @@ +/** +* eReuse CSS +*/ + +/*-------------------------------------------------------------- +# LotsSelector +--------------------------------------------------------------*/ + +#dropDownLotsSelector { + max-height: 500px; +} + +#dropDownLotsSelector>ul#LotsSelector { + list-style-type: none; + margin: 0; + padding: 0; + min-width: max-content; + max-height: 380px; + overflow-y: auto; +} + +#dropDownLotsSelector #ApplyDeviceLots { + padding-top: 0px; + padding-bottom: 5px; +} diff --git a/ereuse_devicehub/static/css/style.css b/ereuse_devicehub/static/css/style.css index 8e263853..1fd44f19 100644 --- a/ereuse_devicehub/static/css/style.css +++ b/ereuse_devicehub/static/css/style.css @@ -1,10 +1,10 @@ -/** -* Template Name: NiceAdmin - v2.2.0 -* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ -* Author: BootstrapMade.com -* License: https://bootstrapmade.com/license/ -*/ - +/** +* Template Name: NiceAdmin - v2.2.0 +* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ +* Author: BootstrapMade.com +* License: https://bootstrapmade.com/license/ +*/ + /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ @@ -1081,4 +1081,4 @@ h1, h2, h3, h4, h5, h6 { text-align: center; font-size: 13px; color: #012970; -} \ No newline at end of file +} diff --git a/ereuse_devicehub/static/js/api.js b/ereuse_devicehub/static/js/api.js index ee98a08f..190e5d42 100644 --- a/ereuse_devicehub/static/js/api.js +++ b/ereuse_devicehub/static/js/api.js @@ -4,7 +4,7 @@ const Api = { * @returns get lots */ async get_lots() { - var request = await this.doRequest(API_URLS.lots, "GET", null); + const request = await this.doRequest(API_URLS.lots, "GET", null); if (request != undefined) return request.items; throw request; }, @@ -15,7 +15,7 @@ const Api = { * @returns full detailed device list */ async get_devices(ids) { - var request = await this.doRequest(API_URLS.devices + '?filter={"id": [' + ids.toString() + ']}', "GET", null); + const request = await this.doRequest(`${API_URLS.devices }?filter={"id": [${ ids.toString() }]}`, "GET", null); if (request != undefined) return request.items; throw request; }, @@ -26,7 +26,7 @@ const Api = { * @returns full detailed device list */ async search_device(id) { - var request = await this.doRequest(API_URLS.devices + '?filter={"devicehub_id": ["' + id + '"]}', "GET", null) + const request = await this.doRequest(`${API_URLS.devices }?filter={"devicehub_id": ["${ id }"]}`, "GET", null) if (request != undefined) return request.items throw request }, @@ -37,8 +37,8 @@ const Api = { * @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); + const queryURL = `${API_URLS.devices_modify.replace("UUID", lotID) }?${ listDevices.map(deviceID => `id=${ deviceID}`).join("&")}`; + return Api.doRequest(queryURL, "POST", null); }, /** @@ -47,8 +47,8 @@ const Api = { * @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); + const queryURL = `${API_URLS.devices_modify.replace("UUID", lotID) }?${ listDevices.map(deviceID => `id=${ deviceID}`).join("&")}`; + return Api.doRequest(queryURL, "DELETE", null); }, /** @@ -59,13 +59,13 @@ const Api = { * @returns */ async doRequest(url, type, body) { - var result; + let result; try { result = await $.ajax({ - url: url, - type: type, + url, + type, headers: { "Authorization": API_URLS.Auth_Token }, - body: body + body }); return result; } catch (error) { diff --git a/ereuse_devicehub/static/js/create_device.js b/ereuse_devicehub/static/js/create_device.js index 1c9e0655..a1b609b0 100644 --- a/ereuse_devicehub/static/js/create_device.js +++ b/ereuse_devicehub/static/js/create_device.js @@ -1,15 +1,15 @@ -$(document).ready(function() { +$(document).ready(() => { $("#type").on("change", deviceInputs); deviceInputs(); }) function deviceInputs() { - if ($("#type").val() == 'Monitor') { + if ($("#type").val() == "Monitor") { $("#screen").show(); $("#resolution").show(); $("#imei").hide(); $("#meid").hide(); - } else if (['Smartphone', 'Cellphone', 'Tablet'].includes($("#type").val())) { + } else if (["Smartphone", "Cellphone", "Tablet"].includes($("#type").val())) { $("#screen").hide(); $("#resolution").hide(); $("#imei").show(); diff --git a/ereuse_devicehub/static/js/main.js b/ereuse_devicehub/static/js/main.js index 5eaec3ea..55a4951c 100644 --- a/ereuse_devicehub/static/js/main.js +++ b/ereuse_devicehub/static/js/main.js @@ -14,9 +14,9 @@ el = el.trim() if (all) { return [...document.querySelectorAll(el)] - } else { + } return document.querySelector(el) - } + } /** @@ -34,103 +34,101 @@ * Easy on scroll event listener */ const onscroll = (el, listener) => { - el.addEventListener('scroll', listener) + el.addEventListener("scroll", listener) } /** * Sidebar toggle */ - if (select('.toggle-sidebar-btn')) { - on('click', '.toggle-sidebar-btn', function (e) { - select('body').classList.toggle('toggle-sidebar') + if (select(".toggle-sidebar-btn")) { + on("click", ".toggle-sidebar-btn", (e) => { + select("body").classList.toggle("toggle-sidebar") }) } /** * Search bar toggle */ - if (select('.search-bar-toggle')) { - on('click', '.search-bar-toggle', function (e) { - select('.search-bar').classList.toggle('search-bar-show') + if (select(".search-bar-toggle")) { + on("click", ".search-bar-toggle", (e) => { + select(".search-bar").classList.toggle("search-bar-show") }) } /** * Navbar links active state on scroll */ - let navbarlinks = select('#navbar .scrollto', true) + const navbarlinks = select("#navbar .scrollto", true) const navbarlinksActive = () => { - let position = window.scrollY + 200 + const position = window.scrollY + 200 navbarlinks.forEach(navbarlink => { if (!navbarlink.hash) return - let section = select(navbarlink.hash) + const section = select(navbarlink.hash) if (!section) return if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) { - navbarlink.classList.add('active') + navbarlink.classList.add("active") } else { - navbarlink.classList.remove('active') + navbarlink.classList.remove("active") } }) } - window.addEventListener('load', navbarlinksActive) + window.addEventListener("load", navbarlinksActive) onscroll(document, navbarlinksActive) /** * Toggle .header-scrolled class to #header when page is scrolled */ - let selectHeader = select('#header') + const selectHeader = select("#header") if (selectHeader) { const headerScrolled = () => { if (window.scrollY > 100) { - selectHeader.classList.add('header-scrolled') + selectHeader.classList.add("header-scrolled") } else { - selectHeader.classList.remove('header-scrolled') + selectHeader.classList.remove("header-scrolled") } } - window.addEventListener('load', headerScrolled) + window.addEventListener("load", headerScrolled) onscroll(document, headerScrolled) } /** * Back to top button */ - let backtotop = select('.back-to-top') + const backtotop = select(".back-to-top") if (backtotop) { const toggleBacktotop = () => { if (window.scrollY > 100) { - backtotop.classList.add('active') + backtotop.classList.add("active") } else { - backtotop.classList.remove('active') + backtotop.classList.remove("active") } } - window.addEventListener('load', toggleBacktotop) + window.addEventListener("load", toggleBacktotop) onscroll(document, toggleBacktotop) } /** * Initiate tooltips */ - var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) - var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { - return new bootstrap.Tooltip(tooltipTriggerEl) - }) + const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]")) + const tooltipList = tooltipTriggerList.map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)) /** * Initiate quill editors */ - if (select('.quill-editor-default')) { - new Quill('.quill-editor-default', { - theme: 'snow' + if (select(".quill-editor-default")) { + new Quill(".quill-editor-default", { + theme: "snow" }); } - if (select('.quill-editor-bubble')) { - new Quill('.quill-editor-bubble', { - theme: 'bubble' + if (select(".quill-editor-bubble")) { + new Quill(".quill-editor-bubble", { + theme: "bubble" }); } - if (select('.quill-editor-full')) { + if (select(".quill-editor-full")) { new Quill(".quill-editor-full", { modules: { toolbar: [ @@ -181,24 +179,24 @@ /** * Initiate Bootstrap validation check */ - var needsValidation = document.querySelectorAll('.needs-validation') + const needsValidation = document.querySelectorAll(".needs-validation") Array.prototype.slice.call(needsValidation) - .forEach(function (form) { - form.addEventListener('submit', function (event) { + .forEach((form) => { + form.addEventListener("submit", (event) => { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } - form.classList.add('was-validated') + form.classList.add("was-validated") }, false) }) /** * Initiate Datatables */ - const datatables = select('.datatable', true) + const datatables = select(".datatable", true) datatables.forEach(datatable => { new simpleDatatables.DataTable(datatable); }) @@ -206,11 +204,11 @@ /** * Autoresize echart charts */ - const mainContainer = select('#main'); + const mainContainer = select("#main"); if (mainContainer) { setTimeout(() => { - new ResizeObserver(function () { - select('.echart', true).forEach(getEchart => { + new ResizeObserver(() => { + select(".echart", true).forEach(getEchart => { echarts.getInstanceByDom(getEchart).resize(); }) }).observe(mainContainer); @@ -220,11 +218,11 @@ /** * Select all functionality */ - var btnSelectAll = document.getElementById("SelectAllBTN"); - var tableListCheckboxes = document.querySelectorAll(".deviceSelect"); + const btnSelectAll = document.getElementById("SelectAllBTN"); + const tableListCheckboxes = document.querySelectorAll(".deviceSelect"); function itemListCheckChanged(event) { - let isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked); + const isAllChecked = Array.from(tableListCheckboxes).map(itm => itm.checked); if (isAllChecked.every(bool => bool == true)) { btnSelectAll.checked = true; btnSelectAll.indeterminate = false; @@ -241,8 +239,8 @@ }) btnSelectAll.addEventListener("click", event => { - let checkedState = event.target.checked; - tableListCheckboxes.forEach(ckeckbox => ckeckbox.checked = checkedState); + const checkedState = event.target.checked; + tableListCheckboxes.forEach(ckeckbox => {ckeckbox.checked = checkedState}); }) /** @@ -256,23 +254,23 @@ * Search form functionality */ window.addEventListener("DOMContentLoaded", () => { - var searchForm = document.getElementById("SearchForm") - var inputSearch = document.querySelector("#SearchForm > input") - var doSearch = true + const searchForm = document.getElementById("SearchForm") + const inputSearch = document.querySelector("#SearchForm > input") + const 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 + const dropdownList = document.getElementById("dropdown-search-list") + const defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML inputSearch.addEventListener("input", (e) => { clearTimeout(timeoutHandler) - let searchText = e.target.value - if (searchText == '') { + const searchText = e.target.value + if (searchText == "") { document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch; return } @@ -315,7 +313,7 @@ const device = devices[i]; // See: ereuse_devicehub/resources/device/models.py - var verboseName = `${device.type} ${device.manufacturer} ${device.model}` + const verboseName = `${device.type} ${device.manufacturer} ${device.model}` const templateString = `
  • diff --git a/ereuse_devicehub/static/js/main_inventory.js b/ereuse_devicehub/static/js/main_inventory.js index bf2fdf43..c230363d 100644 --- a/ereuse_devicehub/static/js/main_inventory.js +++ b/ereuse_devicehub/static/js/main_inventory.js @@ -1,7 +1,7 @@ -$(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'); +$(document).ready(() => { + const show_allocate_form = $("#allocateModal").data("show-action-form"); + const show_datawipe_form = $("#datawipeModal").data("show-action-form"); + const show_trade_form = $("#tradeLotModal").data("show-action-form"); if (show_allocate_form != "None") { $("#allocateModal .btn-primary").show(); newAllocate(show_allocate_form); @@ -18,7 +18,7 @@ $(document).ready(function() { }) function deviceSelect() { - var devices_count = $(".deviceSelect").filter(':checked').length; + const devices_count = $(".deviceSelect").filter(":checked").length; get_device_list(); if (devices_count == 0) { $("#addingLotModal .pol").show(); @@ -60,7 +60,7 @@ function deviceSelect() { } function removeLot() { - var devices = $(".deviceSelect"); + const devices = $(".deviceSelect"); if (devices.length > 0) { $("#btnRemoveLots .text-danger").show(); } else { @@ -70,10 +70,10 @@ function removeLot() { } function removeTag() { - var devices = $(".deviceSelect").filter(':checked'); - var devices_id = $.map(devices, function(x) { return $(x).attr('data')}); + const devices = $(".deviceSelect").filter(":checked"); + const devices_id = $.map(devices, (x) => $(x).attr("data")); if (devices_id.length == 1) { - var url = "/inventory/tag/devices/"+devices_id[0]+"/del/"; + const url = `/inventory/tag/devices/${devices_id[0]}/del/`; window.location.href = url; } else { $("#unlinkTagAlertModal").click(); @@ -81,8 +81,8 @@ function removeTag() { } function addTag() { - var devices = $(".deviceSelect").filter(':checked'); - var devices_id = $.map(devices, function(x) { return $(x).attr('data')}); + const devices = $(".deviceSelect").filter(":checked"); + const devices_id = $.map(devices, (x) => $(x).attr("data")); if (devices_id.length == 1) { $("#addingTagModal .pol").hide(); $("#addingTagModal .btn-primary").show(); @@ -95,20 +95,20 @@ function addTag() { } 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(''); + let title = "Trade " + const user_to = $("#user_to").data("email"); + const 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(''); + } 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); @@ -137,44 +137,44 @@ function newDataWipe(action) { } function get_device_list() { - var devices = $(".deviceSelect").filter(':checked'); + const devices = $(".deviceSelect").filter(":checked"); /* Insert the correct count of devices in actions form */ - var devices_count = devices.length; + const 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) { + const devices_id = $.map(devices, (x) => $(x).attr("data")).join(","); + $.map($(".devicesList"), (x) => { $(x).val(devices_id); }); /* Create a list of devices for human representation */ - var computer = { + const 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"); + list_devices = devices.map((x) => { + let typ = $(devices[x]).data("device-type"); + const manuf = $(devices[x]).data("device-manufacturer"); + const dhid = $(devices[x]).data("device-dhid"); if (computer[typ]) { typ = computer[typ]; }; - return typ + " " + manuf + " " + dhid; + return `${typ } ${ manuf } ${ dhid}`; }); - description = $.map(list_devices, function(x) { return x }).join(", "); + description = $.map(list_devices, (x) => 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(","); + const devices = $(".deviceSelect").filter(":checked"); + const devices_id = $.map(devices, (x) => $(x).attr("data-device-dhid")).join(","); if (devices_id){ - var url = "/inventory/export/"+type_file+"/?ids="+devices_id; + const url = `/inventory/export/${type_file}/?ids=${devices_id}`; window.location.href = url; } else { $("#exportAlertModal").click(); @@ -200,11 +200,12 @@ async function processSelectedDevices() { */ manage(event, lotID, deviceListID) { event.preventDefault(); - const indeterminate = event.srcElement.indeterminate; - const checked = !event.srcElement.checked; + const srcElement = event.srcElement.parentElement.children[0] + const {indeterminate} = srcElement; + const checked = !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; + const found = this.list.filter(list => list.lotID == lotID)[0]; + const foundIndex = found != undefined ? this.list.findLastIndex(x => x.lotID == found.lotID) : -1; if (checked) { if (found != undefined && found.type == "Remove") { @@ -215,10 +216,9 @@ async function processSelectedDevices() { this.list = this.list.filter(list => list.lotID != lotID); } } else { - this.list.push({ type: "Add", lotID: lotID, devices: deviceListID, isFromIndeterminate: indeterminate }); + this.list.push({ type: "Add", lotID, devices: deviceListID, isFromIndeterminate: indeterminate }); } - } else { - if (found != undefined && found.type == "Add") { + } else if (found != undefined && found.type == "Add") { if (found.isFromIndeterminate == true) { found.type = "Remove"; this.list[foundIndex] = found; @@ -226,9 +226,8 @@ async function processSelectedDevices() { this.list = this.list.filter(list => list.lotID != lotID); } } else { - this.list.push({ type: "Remove", lotID: lotID, devices: deviceListID, isFromIndeterminate: indeterminate }); + this.list.push({ type: "Remove", lotID, devices: deviceListID, isFromIndeterminate: indeterminate }); } - } if (this.list.length > 0) { document.getElementById("ApplyDeviceLots").classList.remove("disabled"); @@ -244,10 +243,10 @@ async function processSelectedDevices() { * @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"); + const 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.attributes.role = "alert"; toast.style = "margin-left: auto; width: fit-content;"; toast.innerHTML = `${title}`; if (toastText && toastText.length > 0) { @@ -265,7 +264,7 @@ async function processSelectedDevices() { * 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 + let 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 { @@ -295,13 +294,13 @@ async function processSelectedDevices() { * Re-render list in table */ async reRenderTable() { - var newRequest = await Api.doRequest(window.location) + const newRequest = await Api.doRequest(window.location) - var tmpDiv = document.createElement("div") + const 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) + const oldTable = Array.from(document.querySelectorAll("table.table > tbody > tr .deviceSelect")).map(x => x.attributes["data-device-dhid"].value) + const 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])) { @@ -312,7 +311,7 @@ async function processSelectedDevices() { } } - var eventClickActions; + let eventClickActions; /** * Generates a list item with a correspondient checkbox state @@ -321,42 +320,47 @@ async function processSelectedDevices() { * @param {Array} selectedDevicesIDs * @param {HTMLElement} target */ - function templateLot(lotID, lot, selectedDevicesIDs, elementTarget, actions) { + function templateLot(lot, elementTarget, actions) { elementTarget.innerHTML = "" + const {id, name, state} = lot; - var htmlTemplate = ` - `; + const htmlTemplate = ` + `; - var existLotList = selectedDevicesIDs.map(selected => lot.devices.includes(selected)); - - var doc = document.createElement('li'); + const 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; + switch (state) { + case "true": + doc.children[0].checked = true; + break; + case "false": + doc.children[0].checked = false; + break; + case "indetermined": + doc.children[0].indeterminate = true; + break; + default: + console.warn("This shouldn't be happend: Lot without state: ", lot); + break; } - doc.children[0].addEventListener('mouseup', (ev) => actions.manage(ev, lotID, selectedDevicesIDs)); + doc.children[0].addEventListener("mouseup", (ev) => actions.manage(ev, id, selectedDevicesIDs)); + doc.children[1].addEventListener("mouseup", (ev) => actions.manage(ev, id, selectedDevicesIDs)); elementTarget.append(doc); } - var listHTML = $("#LotsSelector") + const listHTML = $("#LotsSelector") // Get selected devices - var selectedDevicesIDs = $.map($(".deviceSelect").filter(':checked'), function (x) { return parseInt($(x).attr('data')) }); + const selectedDevicesIDs = $.map($(".deviceSelect").filter(":checked"), (x) => parseInt($(x).attr("data"))); if (selectedDevicesIDs.length <= 0) { - listHTML.html('
  • No devices selected
    • '); + listHTML.html("
  • No devices selected
    • "); return; } // Initialize Actions list, and set checkbox triggers - var actions = new Actions(); + const actions = new Actions(); if (eventClickActions) { document.getElementById("ApplyDeviceLots").removeEventListener(eventClickActions); } @@ -364,21 +368,41 @@ async function processSelectedDevices() { document.getElementById("ApplyDeviceLots").classList.add("disabled"); try { - listHTML.html('
    • ') - var devices = await Api.get_devices(selectedDevicesIDs); - var lots = await Api.get_lots(); + listHTML.html("
    • ") + const devices = await Api.get_devices(selectedDevicesIDs); + let 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)); + + switch (lot.devices.length) { + case 0: + lot.state = "false"; + break; + case selectedDevicesIDs.length: + lot.state = "true"; + break; + default: + lot.state = "indetermined"; + break; + } + return lot; }) - listHTML.html(''); - lots.forEach(lot => templateLot(lot.id, lot, selectedDevicesIDs, listHTML, actions)); + + let lotsList = []; + lotsList.push(lots.filter(lot => lot.state == "true").sort((a,b) => a.name.localeCompare(b.name))); + lotsList.push(lots.filter(lot => lot.state == "indetermined").sort((a,b) => a.name.localeCompare(b.name))); + lotsList.push(lots.filter(lot => lot.state == "false").sort((a,b) => a.name.localeCompare(b.name))); + lotsList = lotsList.flat(); // flat array + + listHTML.html(""); + lotsList.forEach(lot => templateLot(lot, listHTML, actions)); } catch (error) { console.log(error); - listHTML.html('
  • Error feching devices and lots
    (see console for more details)
    • '); + listHTML.html("
  • Error feching devices and lots
    (see console for more details)
    • "); } } diff --git a/ereuse_devicehub/templates/ereuse_devicehub/base.html b/ereuse_devicehub/templates/ereuse_devicehub/base.html index 8e147828..3b7c94bd 100644 --- a/ereuse_devicehub/templates/ereuse_devicehub/base.html +++ b/ereuse_devicehub/templates/ereuse_devicehub/base.html @@ -29,6 +29,7 @@ + {% endblock main %} diff --git a/ereuse_devicehub/templates/labels/label_list.html b/ereuse_devicehub/templates/labels/label_list.html index 810db5cf..3237d71d 100644 --- a/ereuse_devicehub/templates/labels/label_list.html +++ b/ereuse_devicehub/templates/labels/label_list.html @@ -19,7 +19,7 @@
    -
    +
    Create Named Tag @@ -27,7 +27,7 @@
    -
    +
    Create UnNamed Tag @@ -57,7 +57,7 @@ {{ tag.get_provider }} {% if tag.device %} - + {{ tag.device.verbose_name }} {% endif %} diff --git a/package.json b/package.json new file mode 100644 index 00000000..219a75f4 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "workspace", + "version": "1.0.0", + "description": "Devicehub is a distributed IT Asset Management System focused in reusing devices, created under the project [eReuse.org](https://www.ereuse.org)", + "main": "index.js", + "directories": { + "doc": "docs", + "example": "examples", + "test": "tests" + }, + "devDependencies": { + "eslint": "^8.13.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-prettier": "^4.0.0" + }, + "scripts": { + "lint:report": "eslint ereuse_devicehub --ext .js --output-file eslint_report.json --format json", + "lint:fix": "eslint ereuse_devicehub --ext .js --fix" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-react": "^7.29.4", + "eslint-plugin-react-hooks": "^4.4.0" + } +}