diff --git a/static/index.html b/static/index.html index 03a05b22..72c62f14 100644 --- a/static/index.html +++ b/static/index.html @@ -11,6 +11,7 @@

Storage

+
diff --git a/static/main.js b/static/main.js index 6806f13d..7cb7fdad 100644 --- a/static/main.js +++ b/static/main.js @@ -78,7 +78,7 @@ function getImageFromName(name){ return "https://wiki.factorio.com/images/" + capitalizeFirstLetter(replaceAll(factorioLocale["fluid-name"][name], ' ', '_').toLowerCase()) + ".png"; } else if(factorioLocale["equipment-name"] && factorioLocale["equipment-name"][name]){ return "https://wiki.factorio.com/images/" + capitalizeFirstLetter(replaceAll(factorioLocale["equipment-name"][name], ' ', '_').toLowerCase()) + ".png"; - } else return ""; + } else return "/pictures/unknown-item.png"; } window.factorioLocale = {}; $.getJSON("/api/getFactorioLocale", (locale) => { diff --git a/static/pictures/unknown-item.png b/static/pictures/unknown-item.png new file mode 100644 index 00000000..59a23725 Binary files /dev/null and b/static/pictures/unknown-item.png differ diff --git a/static/storage.js b/static/storage.js index c68cd982..7506dc0d 100644 --- a/static/storage.js +++ b/static/storage.js @@ -1,16 +1,33 @@ // function to draw data we recieve from ajax requests function drawcontents(data) { - data = sortByKey(data, "count"); - let result = ""; - for(i = 0;i < data.length; i++) { - var img = getImageFromName(data[i].name); - var searchField = document.querySelector("#search"); - if(!searchField.value || data[i].name.includes(searchField.value)) { - result = result + ""; + const table = document.querySelector("#contents tbody"); //tables have tbody inserted automatically + const rows = table.children; + + sortByKey(data, "count"); + data.forEach(function(item, i) { + let row = rows[i]; + if(!row) { + row = document.createElement('tr'); + row.innerHTML = ""; + table.appendChild(row); } - } - result = result + "
" + data[i].name + "" + data[i].count + "
" - document.getElementById("contents").innerHTML = result; + + const img = row.querySelector('img'); + const imgName = getImageFromName(item.name); + if(img.getAttribute('src') !== imgName) { + img.setAttribute('src',imgName); + } + + const name = row.querySelector('.name'); + if(name.textContent !== item.name) { + name.textContent = item.name; + } + + const count = row.querySelector('.count'); + if(count.textContent !== ''+item.count) { + count.textContent = item.count; + } + }) } // get cluster inventory from master @@ -33,8 +50,7 @@ if(JSON.parse(localStorage.settings)["Periodically update storage screen"]) { // function to sort arrays of objects after a keys value function sortByKey(array, key) { - return array.sort(function(a, b) { - var x = Number(a[key]); var y = Number(b[key]); - return ((x < y) ? 1 : ((x > y) ? -1 : 0)); + array.sort(function(a, b) { + return b[key] - a[key]; }); } \ No newline at end of file