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 + " | " + data[i].name + " | " + data[i].count + " |
";
+ 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 + "
"
- 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