3 files changed, 117 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..1cb9948
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width">
+		<title>Weather</title>
+
+		<link rel="stylesheet" type="text/css" href="style.css">
+	</head>
+	<body>
+		<script src="index.js"></script>
+	</body>
+</html>
diff --git a/web/index.js b/web/index.js
new file mode 100644
index 0000000..085215f
--- /dev/null
+++ b/web/index.js
@@ -0,0 +1,90 @@
+// python3 -m http.server
+
+const data_dir = 'data';
+const index_file = "pmsl_t850.index.json";
+
+var index = null;
+var mapframe = null;
+
+function httpGetAsync(url, callback)
+{
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function() {
+        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+            callback(xmlHttp.responseText);
+    }
+    xmlHttp.open("GET", url, true);
+    xmlHttp.send(null);
+}
+
+function loadIndexFromJson(raw_text) {
+	index = JSON.parse(raw_text);
+	//TODO pass index here. that would be cleaner than public vars.
+	build_interface();
+}
+
+function build_indexlist() {
+	if (index==null) {
+		return;
+	}
+
+	div = document.createElement('div');
+	div.classList.add('index');
+
+	list = document.createElement('ul');
+
+	for (const i in index) {
+		var map = index[i];
+
+		a = document.createElement('a');
+		a.classList.add('link');
+		a.setAttribute('href', '');// data_dir + '/' + map.file);
+		a.setAttribute('mapfile', map.file);
+		a.onclick = indexlink_click;
+		a.innerText = map.valid_offset;
+		a.id = map.file;
+
+		li = document.createElement('li');
+		li.appendChild(a);
+		list.appendChild(li);
+
+	}
+
+	div.appendChild(list);
+	return div;
+}
+
+function indexlink_click(e) {
+	console.log(this.id);
+
+	mapframe.src = data_dir + '/' + this.getAttribute('mapfile');
+	return false;
+}
+
+function build_mapframe() {
+	div = document.createElement('div');
+	div.classList.add('mapframe');
+	frame = document.createElement('img');
+	//frame.classList.add('mapframe');
+	mapframe = frame;
+	div.appendChild(frame);
+
+	return div;
+}
+
+function build_interface() {
+	index = build_indexlist();
+	mapframe = build_mapframe();
+
+	document.body.appendChild(index);
+	document.body.appendChild(mapframe);
+}
+
+function clear_interface() {
+	index.remove();
+	mapframe.remove();
+}
+
+window.onload = function() {
+	httpGetAsync(data_dir + '/' + index_file, loadIndexFromJson);
+}
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..f478501
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,13 @@
+:root {
+	--dummy: white;
+	--indexwidth: 50px;
+}
+
+div.index {
+	width: var(--indexwidth);
+	position: fixed;
+}
+
+div.mapframe {
+	margin-left: var(--indexwidth);
+}