luci-app-olsr-services: migrate to js

Signed-off-by: Andreas Bräu <ab@andi95.de>

1 files changed, 82 insertions, 0 deletions

diff --git a/applications/luci-app-olsr-services/htdocs/luci-static/resources/view/freifunk-services/services.js b/applications/luci-app-olsr-services/htdocs/luci-static/resources/view/freifunk-services/services.js
new file mode 100644
index 0000000000..3a3d11ae1d
--- /dev/null
+++ b/applications/luci-app-olsr-services/htdocs/luci-static/resources/view/freifunk-services/services.js
@@ -0,0 +1,82 @@
+'use strict';
+'require rpc';
+'require view';
+'require poll';
+
+const tableHead = '<div class="tr cbi-section-table-titles">' +
+    '<div class="th cbi-section-table-cell">' + _('Url') + '</div>' +
+    '<div class="th cbi-section-table-cell">' + _('Protocol') + '</div>' +
+    '<div class="th cbi-section-table-cell">' + _('Source') + '</div>' +
+    '</div>';
+
+var getOlsrd4Services = rpc.declare({
+    object: 'olsr-services',
+    method: 'services4',
+    expect: {}
+});
+
+var getOlsrd6Services = rpc.declare({
+    object: 'olsr-services',
+    method: 'services6',
+    expect: {}
+});
+
+function updateServicesTable(servicesArray) {
+    var table = document.getElementById("olsr_services");
+    var tempElement = document.createElement('div');
+    tempElement.innerHTML = tableHead;
+    table.replaceChildren(tempElement.firstChild);
+    servicesArray.forEach(function (service, index) {
+        var node = document.createElement('div');
+        var index = 1 + index % 2;
+        var sourceUrl = service.isIpv6 ? '[' + service.source + ']' : service.source;
+        node.classList.add('tr', 'cbi-section-table-row', 'cbi-rowstyle-' + index);
+        node.innerHTML =
+            '<div class="td cbi-section-table-cell left"><a href="' + service.url + '">' + service.description + '</a></div>' +
+            '<div class="td cbi-section-table-cell left">' + service.protocol + '</div>' +
+            '<div class="td cbi-section-table-cell left"><a href="http://' + sourceUrl + '/cgi-bin-status.html">' + service.source + '</a></div>';
+        table.appendChild(node);
+    });
+}
+
+function extractServiceInformation(results) {
+    var servicesArray = [];
+    results.forEach(function(result) {
+        if (result.configured && result.services != "") {
+            var isIpv6 = result.source == "olsrd6";
+            var services = result.services.split('\n');
+            services.forEach(function (service) {
+                var source = service.split('#')[1];
+                var serviceRawDescription = service.replace(/\t/g, '').split('#')[0].split('|');
+                var url = serviceRawDescription[0];
+                var protocol = serviceRawDescription[1];
+                var description = serviceRawDescription[2];
+                servicesArray.push({ "source": source, "url": url, "protocol": protocol, "description": description, "isIpv6": isIpv6 });
+            });
+        }
+    });
+    return servicesArray;
+}
+
+return view.extend({
+    handleSaveApply: null,
+    handleSave: null,
+    handleReset: null,
+    render: function (data) {
+        poll.add(function () {
+            Promise.all([getOlsrd4Services(), getOlsrd6Services()]).then(function (results) {
+                var servicesArray = extractServiceInformation(results);
+                updateServicesTable(servicesArray);
+            });
+        }, 30);
+        return E([], {}, [
+            E('h2', { 'name': 'content' }, [_('Services')]),
+            E('legend', {}, [_('Internal services')]),
+            E('fieldset', { 'class': 'cbi-section' }, [
+                E('div', { 'class': 'table cbi-section-table', 'id': 'olsr_services' }, [
+                    E(tableHead)
+                ])
+            ]),
+        ]);
+    }
+});