luci-app-example: add app

add a minimalistic example app for modern js-based apps

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

applications/luci-app-example/Makefile

@@ -0,0 +1,11 @@
+# See /LICENSE for more information.
+# This is free software, licensed under the GNU General Public License v2.
+
+include $(TOPDIR)/rules.mk
+
+LUCI_TITLE:=LuCI example app for js based luci
+LUCI_DEPENDS:=+luci-base
+
+include ../../luci.mk
+
+# call BuildPackage - OpenWrt buildroot signature

applications/luci-app-example/README.md

@@ -0,0 +1,11 @@
+# Example app for js based Luci
+
+This app is meant to be a kind of template, example or starting point for developing new luci apps.
+
+It provides two pages in the admin backend. One is based on a view with a form and makes use of internal models. The other one uses the `E()`-method to create more flexibel pages.
+
+The view based page is used to modify the example configuration.
+
+The html view page just shows the configured values.
+
+The configuration is stored in `/etc/config/example`.

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();
+  },
+});

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;
+  }
+  });
+

applications/luci-app-example/po/de/example.po

@@ -0,0 +1,71 @@
+# 
+# Translators:
+# Andi Bräu <freifunk@andi95.de>, 2021
+# 
+msgid ""
+msgstr ""
+"Last-Translator: Andi Bräu <freifunk@andi95.de>, 2021\n"
+"Language-Team: German (https://www.transifex.com/forderverein-freie-netzwerke-ev/teams/126043/de/)\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Language: de\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:22
+msgid "A boolean option"
+msgstr "Eine boolsche Option"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:27
+msgid "A select option"
+msgstr "Eine Auswahloption"
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:3
+msgid "Example"
+msgstr "Beispiel"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:9
+msgid "Example Form"
+msgstr "Beispielformular"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:10
+msgid "Example Form Configuration."
+msgstr "Beispielformularkonfiguration"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js:16
+msgid "Example HTML Page"
+msgstr "Beispiel-HTML-Seite"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:15
+msgid "First Option"
+msgstr "Erste Option"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:21
+msgid "Flag Option"
+msgstr "Kennzeichenoption"
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:14
+msgid "Form View"
+msgstr "Formularansicht"
+
+#: utils/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json:3
+msgid "Grant UCI access to LuCI app ecample"
+msgstr "UCI-Zugriff für LuCI Beispielanwendung gewähren"
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:23
+msgid "HTML Page"
+msgstr "HTML Seite"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:16
+msgid "Input for the first option"
+msgstr "Eingabe für die erste Option"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:26
+msgid "Select Option"
+msgstr "Auswahloption"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:12
+msgid "first section"
+msgstr "Erste Sektion"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:18
+msgid "second section"
+msgstr "Zweite Sektion"

applications/luci-app-example/po/en/example.po

@@ -0,0 +1,62 @@
+msgid ""
+msgstr "Content-Type: text/plain; charset=UTF-8"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:22
+msgid "A boolean option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:27
+msgid "A select option"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:3
+msgid "Example"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:9
+msgid "Example Form"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:10
+msgid "Example Form Configuration."
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js:16
+msgid "Example HTML Page"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:15
+msgid "First Option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:21
+msgid "Flag Option"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:14
+msgid "Form View"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json:3
+msgid "Grant UCI access to LuCI app ecample"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:23
+msgid "HTML Page"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:16
+msgid "Input for the first option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:26
+msgid "Select Option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:12
+msgid "first section"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:18
+msgid "second section"
+msgstr ""

applications/luci-app-example/po/templates/example.pot

@@ -0,0 +1,62 @@
+msgid ""
+msgstr "Content-Type: text/plain; charset=UTF-8"
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:22
+msgid "A boolean option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:27
+msgid "A select option"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:3
+msgid "Example"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:9
+msgid "Example Form"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:10
+msgid "Example Form Configuration."
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js:16
+msgid "Example HTML Page"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:15
+msgid "First Option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:21
+msgid "Flag Option"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:14
+msgid "Form View"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json:3
+msgid "Grant UCI access to LuCI app ecample"
+msgstr ""
+
+#: utils/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json:23
+msgid "HTML Page"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:16
+msgid "Input for the first option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:26
+msgid "Select Option"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:12
+msgid "first section"
+msgstr ""
+
+#: utils/luci-app-example/htdocs/luci-static/resources/view/example/form.js:18
+msgid "second section"
+msgstr ""

applications/luci-app-example/root/etc/uci-defaults/80_example

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+touch /etc/config/example
+uci set example.first=first
+uci set example.second=second
+uci commit
+
+return 0

applications/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json

@@ -0,0 +1,30 @@
+{
+  "admin/example/": {
+    "title": "Example",
+    "order": 60,
+    "action": {
+      "type": "firstchild"
+    },
+    "depends": {
+      "acl": [ "luci-app-example" ]
+    }
+  },
+
+  "admin/example/form": {
+    "title": "Form View",
+    "order": 1,
+    "action": {
+      "type": "view",
+      "path": "example/form"
+    }
+  },
+
+  "admin/example/html": {
+    "title": "HTML Page",
+    "order": 2,
+    "action": {
+      "type": "view",
+      "path": "example/htmlview"
+    }
+  }
+}

applications/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json

@@ -0,0 +1,25 @@
+{
+  "luci-app-example": {
+    "description": "Grant UCI access to LuCI app ecample",
+    "read": {
+      "ubus": {
+        "uci": [
+          "get"
+        ]
+      },
+      "uci": [
+        "example"
+      ]
+    },
+    "write": {
+      "ubus": {
+        "uci": [
+          "set", "commit"
+        ]
+      },
+      "uci": [
+        "example"
+      ]
+    }
+  }
+}