product list

1 files changed, 55 insertions, 16 deletions

diff --git a/web/index.js b/web/index.js
index 085215f..d7c7d69 100644
--- a/web/index.js
+++ b/web/index.js
@@ -1,9 +1,11 @@
 // python3 -m http.server
 
 const data_dir = 'data';
-const index_file = "pmsl_t850.index.json";
+//const index_file = "pmsl_t850.index.json";
+const index_file = "index.json";
 
 var index = null;
+var product_index = null;
 var mapframe = null;
 
 function httpGetAsync(url, callback)
@@ -18,23 +20,23 @@ function httpGetAsync(url, callback)
 }
 
 function loadIndexFromJson(raw_text) {
-	index = JSON.parse(raw_text);
+	index_obj = JSON.parse(raw_text)
 	//TODO pass index here. that would be cleaner than public vars.
-	build_interface();
+	build_interface(index_obj);
 }
 
-function build_indexlist() {
-	if (index==null) {
-		return;
-	}
+function build_indexlist(index_obj) {
+	//if (index_obj==null) {
+	//	return;
+	//}
 
 	div = document.createElement('div');
 	div.classList.add('index');
 
 	list = document.createElement('ul');
 
-	for (const i in index) {
-		var map = index[i];
+	for (const i in index_obj) {
+		var map = index_obj[i];
 
 		a = document.createElement('a');
 		a.classList.add('link');
@@ -55,9 +57,14 @@ function build_indexlist() {
 }
 
 function indexlink_click(e) {
-	console.log(this.id);
+	mapframe.querySelector('#mapframe').src = data_dir + '/' + this.getAttribute('mapfile');
+	return false;
+}
 
-	mapframe.src = data_dir + '/' + this.getAttribute('mapfile');
+function productlink_click(e) {
+	clear_interface();
+
+	httpGetAsync(data_dir + '/' + this.getAttribute('indexfile'), loadIndexFromJson);
 	return false;
 }
 
@@ -65,6 +72,7 @@ function build_mapframe() {
 	div = document.createElement('div');
 	div.classList.add('mapframe');
 	frame = document.createElement('img');
+	frame.id = 'mapframe';
 	//frame.classList.add('mapframe');
 	mapframe = frame;
 	div.appendChild(frame);
@@ -72,8 +80,8 @@ function build_mapframe() {
 	return div;
 }
 
-function build_interface() {
-	index = build_indexlist();
+function build_interface(index_obj) {
+	index = build_indexlist(index_obj);
 	mapframe = build_mapframe();
 
 	document.body.appendChild(index);
@@ -81,10 +89,41 @@ function build_interface() {
 }
 
 function clear_interface() {
-	index.remove();
-	mapframe.remove();
+	if (index)
+		index.remove();
+	if(mapframe)
+		mapframe.remove();
+}
+
+function build_product_index(raw_text) {
+	product_index = JSON.parse(raw_text);
+
+	div = document.createElement('div');
+	div.classList.add('product_index');
+
+	list = document.createElement('ul');
+
+	for (const i in product_index) {
+		var product = product_index[i];
+		a = document.createElement('a');
+		a.classList.add('link');
+		a.setAttribute('href', '');// data_dir + '/' + map.file);
+		a.setAttribute('indexfile', product.indexfile);
+		a.onclick = productlink_click;
+		a.innerText = product.name;
+		a.id = product.indexfile;
+
+		li = document.createElement('li');
+		li.appendChild(a);
+		list.appendChild(li);
+	}
+
+	div.appendChild(list);
+
+	document.body.appendChild(div);
 }
 
 window.onload = function() {
-	httpGetAsync(data_dir + '/' + index_file, loadIndexFromJson);
+	//httpGetAsync(data_dir + '/' + index_file, loadIndexFromJson);
+	httpGetAsync(data_dir + '/' + index_file, build_product_index);
 }