From bdf4225dec164644e0ab98b8dc65d73554504d45 Mon Sep 17 00:00:00 2001
From: David Roberts <robertsdavidddr@gmail.com>
Date: Tue, 29 Aug 2017 13:24:53 -0700
Subject: [PATCH] Clean up web interface storage tab.

- Use diffing algorithm so you can select text and images.
	- This uses textcontent, plugs a vulnerability where you could inject arbitrary javascript if you could upload a modded item with html in the name, eg, "iron-plate<img src=\"\" onerror=\"console.log('hi')\">".
- Fall back to transparent png if item image not found.
	- This stops the flashing box when the image does not exist.
- (internal) Simplify `sortByKey(array, key)`.
---
 static/index.html                |   1 +
 static/main.js                   |   2 +-
 static/pictures/unknown-item.png | Bin 0 -> 126 bytes
 static/storage.js                |  42 +++++++++++++++++++++----------
 4 files changed, 31 insertions(+), 14 deletions(-)
 create mode 100644 static/pictures/unknown-item.png

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 @@
 			<h2>Storage</h2>
 			<input type="text" placeholder="search" id="search"></input>
 			<div id="contents">
+				<table><tbody><!-- populated by js --></tbody></table>
 			</div>
 			<canvas id="contentGraph" width="200" height="200"></canvas>
 		</div>
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 0000000000000000000000000000000000000000..59a2372571c606336ad52ed2fb2c7529edfb5921
GIT binary patch
literal 126
zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blwj^(N7l!{JxM1({$v_d#0*}aI
z1_r)EAj~ML;ne^XWH0gbb!C6ZAuDXI=y;IZ9Vo=@>Eal|aXmSKfr){Em4We*8tZJJ
OFoUP7pUXO@geCw*EE@>`

literal 0
HcmV?d00001

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 = "<table>";
-	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 + "<tr><td><image src='" + img + "' onerror='hideThis(this);'></td><td>" + data[i].name + "</td><td>" + data[i].count + "</td></tr>";
+	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 = "<td><img width=32 height=32></td><td class=name></td><td class=count></td>";
+			table.appendChild(row);
 		}
-	}
-	result = result + "</table>"
-	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