From 02a86624ec02ec797f7156cc7f8b9057975ab34b Mon Sep 17 00:00:00 2001 From: =?utf8?q?Andreas=20Br=C3=A4u?= Date: Mon, 11 Oct 2021 00:22:15 +0200 Subject: [PATCH] luci-app-example: add app MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit add a minimalistic example app for modern js-based apps Signed-off-by: Andreas Bräu --- applications/luci-app-example/Makefile | 11 +++ applications/luci-app-example/README.md | 11 +++ .../resources/view/example/form.js | 36 ++++++++++ .../resources/view/example/htmlview.js | 30 ++++++++ .../luci-app-example/po/de/example.po | 71 +++++++++++++++++++ .../luci-app-example/po/en/example.po | 62 ++++++++++++++++ .../luci-app-example/po/templates/example.pot | 62 ++++++++++++++++ .../root/etc/uci-defaults/80_example | 8 +++ .../share/luci/menu.d/luci-app-example.json | 30 ++++++++ .../share/rpcd/acl.d/luci-app-example.json | 25 +++++++ 10 files changed, 346 insertions(+) create mode 100644 applications/luci-app-example/Makefile create mode 100644 applications/luci-app-example/README.md create mode 100644 applications/luci-app-example/htdocs/luci-static/resources/view/example/form.js create mode 100644 applications/luci-app-example/htdocs/luci-static/resources/view/example/htmlview.js create mode 100644 applications/luci-app-example/po/de/example.po create mode 100644 applications/luci-app-example/po/en/example.po create mode 100644 applications/luci-app-example/po/templates/example.pot create mode 100644 applications/luci-app-example/root/etc/uci-defaults/80_example create mode 100644 applications/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json create mode 100644 applications/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json diff --git a/applications/luci-app-example/Makefile b/applications/luci-app-example/Makefile new file mode 100644 index 0000000000..70834ad909 --- /dev/null +++ b/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 diff --git a/applications/luci-app-example/README.md b/applications/luci-app-example/README.md new file mode 100644 index 0000000000..379bb7e032 --- /dev/null +++ b/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`. 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; + } + }); + diff --git a/applications/luci-app-example/po/de/example.po b/applications/luci-app-example/po/de/example.po new file mode 100644 index 0000000000..33d7465b24 --- /dev/null +++ b/applications/luci-app-example/po/de/example.po @@ -0,0 +1,71 @@ +# +# Translators: +# Andi Bräu , 2021 +# +msgid "" +msgstr "" +"Last-Translator: Andi Bräu , 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" diff --git a/applications/luci-app-example/po/en/example.po b/applications/luci-app-example/po/en/example.po new file mode 100644 index 0000000000..b6433a4998 --- /dev/null +++ b/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 "" diff --git a/applications/luci-app-example/po/templates/example.pot b/applications/luci-app-example/po/templates/example.pot new file mode 100644 index 0000000000..b6433a4998 --- /dev/null +++ b/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 "" diff --git a/applications/luci-app-example/root/etc/uci-defaults/80_example b/applications/luci-app-example/root/etc/uci-defaults/80_example new file mode 100644 index 0000000000..529e6b0bd4 --- /dev/null +++ b/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 diff --git a/applications/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json b/applications/luci-app-example/root/usr/share/luci/menu.d/luci-app-example.json new file mode 100644 index 0000000000..7b4772328a --- /dev/null +++ b/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" + } + } +} diff --git a/applications/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json b/applications/luci-app-example/root/usr/share/rpcd/acl.d/luci-app-example.json new file mode 100644 index 0000000000..998cb4b0e1 --- /dev/null +++ b/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" + ] + } + } +} -- 2.30.2