luci-app-example: add app

add a minimalistic example app for modern js-based apps

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

2 files changed, 66 insertions, 0 deletions

diff --git a/applications/luci-app-example/htdocs/luci-static/resources/view/example/form.js b/applications/luci-app-example/htdocs/luci-static/resources/view/example/form.js
new file mode 100644
index 0000000000..75fa3c3079
--- /dev/null
+++ b/applications/luci-app-example/htdocs/luci-static/resources/view/example/form.js
@@ -0,0 +1,36 @@
+'use strict';
+'require view';
+'require form';
+
+return view.extend({
+  render: function() {
+    var m, s, o;
+
+    m = new form.Map('example', _('Example Form'),
+         _('Example Form Configuration.'));
+
+    s = m.section(form.TypedSection, 'first', _('first section'));
+    s.anonymous = true;
+
+    s.option(form.Value, 'first_option', _('First Option'),
+       _('Input for the first option'));
+
+    s = m.section(form.TypedSection, 'second', _('second section'));
+    s.anonymous = true;
+
+    o = s.option(form.Flag, 'flag', _('Flag Option'),
+     _('A boolean option'));
+    o.default = '1';
+    o.rmempty = false;
+
+    o = s.option(form.ListValue, 'select', _('Select Option'),
+     _('A select option'));
+    o.placeholder = 'placeholder';
+    o.value('key1', 'value1');
+    o.value('key2', 'value2');
+    o.rmempty = false;
+    o.editable = true;
+
+    return m.render();
+  },
+});
diff --git a/applications/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js b/applications/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js
new file mode 100644
index 0000000000..feae899a17
--- /dev/null
+++ b/applications/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js
@@ -0,0 +1,30 @@
+'use strict';
+'require uci';
+'require view';
+
+return view.extend({
+  handleSaveApply: null,
+  handleSave: null,
+  handleReset: null,
+  load: function() {
+    return Promise.all([
+      uci.load('example')
+    ]);
+  },
+  render: function(data) {
+    var body = E([
+      E('h2', _('Example HTML Page'))
+    ]);
+    var sections = uci.sections('example');
+    var listContainer = E('div');
+    var list = E('ul');
+    list.appendChild(E('li', { 'class': 'css-class' }, ['First Option in first section: ', E('em', {}, [sections[0].first_option])]));
+    list.appendChild(E('li', { 'class': 'css-class' }, ['Flag in second section: ', E('em', {}, [sections[1].flag])]));
+    list.appendChild(E('li', { 'class': 'css-class' }, ['Select in second section: ', E('em', {}, [sections[1].select])]));
+    listContainer.appendChild(list);
+    body.appendChild(listContainer);
+    console.log(sections);
+    return body;
+  }
+  });
+