luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js fix tag

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js fix var name

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js use load for script & fix bugs

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js fix script

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js fix bugs

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js fix view

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js fix script

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js fix view

luci-app-olsr-viz: migrate to js

luci-app-olsr-viz: migrate to js fix script

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>

luci-app-olsr-viz: migrate to js

1 files changed, 166 insertions, 0 deletions

diff --git a/applications/luci-app-olsr-viz/htdocs/luci-static/resources/view/olsr-viz/olsr-viz-view.js b/applications/luci-app-olsr-viz/htdocs/luci-static/resources/view/olsr-viz/olsr-viz-view.js
new file mode 100644
index 0000000000..7624e0e7b2
--- /dev/null
+++ b/applications/luci-app-olsr-viz/htdocs/luci-static/resources/view/olsr-viz/olsr-viz-view.js
@@ -0,0 +1,166 @@
+'use strict';
+'require uci';
+'require view';
+'require poll';
+'require ui';
+'require rpc';
+
+
+return view.extend({
+	callGetOlsrVizData: rpc.declare({
+		object: 'olsrvizinfo',
+		method: 'getolsrvizdata'
+	}),
+
+	fetch_jsoninfo: function () {
+		var jsonreq4 = '';
+		var json;
+		var data;
+		var self = this;
+		return new Promise(function (resolve, reject) {
+			L.resolveDefault(self.callGetOlsrVizData(), {})
+				.then(function (res) {
+					json = res;
+					data = json.jsonreq4;
+					resolve([data]);
+				})
+				.catch(function (err) {
+					console.error(err);
+					reject([null]);
+				});
+		});
+	},
+
+	action_olsr_viz: function () {
+		var self = this;
+		return new Promise(function (resolve, reject) {
+			self
+				.fetch_jsoninfo()
+				.then(function ([data]) {
+					var result = { viz_data: data };
+					resolve(result);
+				})
+				.catch(function (err) {
+					reject(err);
+				});
+		});
+	},
+
+	load: function () {
+		var self = this;
+		document.querySelector('head').appendChild(E('style', { 'type': 'text/css' }, [
+			'.label {color:black;background-color:white}',
+			'.olsr_viz_main {width: 100%; height: 93%; border: 1px solid #ccc; margin-left:auto; margin-right:auto; text-align:center; overflow: scroll}'
+		]));
+		return new Promise(function (resolve, reject) {
+			var script = E('script', { 'type': 'text/javascript' });
+			script.onload = resolve;
+			script.onerror = reject;
+			script.src = L.resource('olsr-viz.js');
+			document.querySelector('head').appendChild(script);
+		});
+	},
+	render: function () {
+		var viz_res;
+		var self = this;
+		return this.action_olsr_viz()
+			.then(function (result) {
+				viz_res = result.viz_data;
+
+				var nodeDiv = E('div', { 'id': 'nodes', 'style': 'width: 1px; height: 1px; position: relative; z-index:4' });
+				var edgeDiv = E('div', { 'id': 'edges', 'style': 'width: 1px; height: 1px; position: relative; z-index:2' });
+				
+				var mainDiv = E('div', {
+					'id': 'main',
+					'class': 'olsr_viz_main'
+				}, [nodeDiv, edgeDiv]);
+
+				var zoomInput = E('input', {
+					'id': 'zoom',
+					'name': 'zoom',
+					'type': 'text',
+					'value': '2.0',
+					'size': '5',
+					'style': 'min-width: unset !important;',
+					'onchange': 'set_scale()'
+				});
+				var metricInput = E('input', {
+					'id': 'maxmetric',
+					'name': 'maxmetric',
+					'type': 'text',
+					'value': '3',
+					'size': '4',
+					'style': 'min-width: unset !important;',
+					'change': (ev)=>set_maxmetric(ev.target.value)
+				});
+				var autoOptimizationCheckbox = E('input', {
+					'id': 'auto_declump',
+					'name': 'auto_declump',
+					'type': 'checkbox',
+					'change': (ev) => set_autodeclump(ev.target.checked),
+					'checked': 'checked'
+				});
+				var hostnamesCheckbox = E('input', {
+					'id': 'show_hostnames',
+					'name': 'show_hostnames',
+					'type': 'checkbox',
+					'change': (ev) => set_showdesc(ev.target.checked),
+					'checked': 'checked'
+				});
+
+				var form = E('form', { 'action': '' }, [
+					E('p', {}, [
+						E('b', { 'title': 'Bestimmt die Vergrößerungsstufe.' }, 'Zoom '),
+						E('a', { 'href': '#', 'click': () =>set_scale(scale+0.1) }, '+ '),
+						E('a', { 'href': '#', 'click': () =>set_scale(scale-0.1) },  '\u2212 '),
+						zoomInput,
+						E('b', { 'title': 'Beschränkt die Anzeige auf eine maximale Hop-Entfernung.' }, '  Metrik'),
+						E('a', { 'href': '#', 'click': () => set_maxmetric(maxmetric+1) }, '+ '),
+						E('a', { 'href': '#', 'click': () => set_maxmetric(Math.max(maxmetric, 1) - 1) }, '\u2212'),
+						metricInput,
+						E('b', { 'title': 'Schaltet die automatischen Layout-Optimierung ein.' }, '  Optimierung'),
+						autoOptimizationCheckbox,
+						E('b', { 'title': 'Zeige Hostnamen an.' }, ' |  Hostnamen'),
+						hostnamesCheckbox,
+						E('a', { 'href': '#', 'click': viz_save, 'title': 'Speichert die aktuellen Einstellungen in einem Cookie.', 'style': 'font-weight:700;' }, ' |  Speichern'),
+						E('a', { 'href': '#', 'click': viz_reset, 'title': 'Startet das Viz-Skriptprogramm neu.', 'style': 'font-weight:700;' }, ' |  Zurücksetzen')
+					])
+				]);
+
+				var debugSpan = E('span', { 'id': 'debug', 'style': 'visibility:hidden;' });
+				var vizDiv = E('div', { 'id': 'RSIFrame', 'name': 'RSIFrame', 'style': 'border:0px; width:0px; height:0px; visibility:hidden;' });
+				viz_setup(vizDiv, mainDiv, nodeDiv, edgeDiv, debugSpan, zoomInput, metricInput); viz_update();
+				
+				function setInnerHTML(elm, html) {
+					elm.innerHTML = html;
+
+					Array.from(elm.querySelectorAll("script"))
+						.forEach(oldScriptEl => {
+							const newScriptEl = document.createElement("script");
+
+							Array.from(oldScriptEl.attributes).forEach(attr => {
+								newScriptEl.setAttribute(attr.name, attr.value)
+							});
+
+							const scriptText = document.createTextNode(oldScriptEl.innerHTML);
+							newScriptEl.appendChild(scriptText);
+
+							oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
+						});
+				};
+
+				setInnerHTML(vizDiv, viz_res);
+
+				var renderDiv = E('div', { 'style': 'width:100%; height:640px; border:none', 'scrolling': 'no' }, [mainDiv]);
+				var result = E([], {}, [form, debugSpan, renderDiv, vizDiv]);
+				return result;
+			})
+			.catch(function (error) {
+				console.error(error);
+			});
+	},
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null,
+});
+