luci-app-example: Update with more documentation, more examples (#6503)

* luci-app-example: Update with more documentation, examples
* Update translations file
* Move more YAML support to .md file, improve README
* luci-app-example: Update with more documentation, examples
* luci-app-example: Fix missed call to load_sample_yaml
* Format with tabs by using jsbeautify

1 files changed, 109 insertions, 0 deletions

diff --git a/applications/luci-app-example/htdocs/luci-static/resources/view/example/rpc-jsonmap-tablesection.js b/applications/luci-app-example/htdocs/luci-static/resources/view/example/rpc-jsonmap-tablesection.js
new file mode 100644
index 0000000000..4a009782e4
--- /dev/null
+++ b/applications/luci-app-example/htdocs/luci-static/resources/view/example/rpc-jsonmap-tablesection.js
@@ -0,0 +1,109 @@
+'use strict';
+'require form';
+'require rpc';
+'require view';
+
+/*
+Declare the RPC calls that are needed. The object value maps to the name
+listed by the shell command
+
+$ ubus list
+
+Custom scripts can be placed in /usr/libexec/rpcd, and must emit JSON. The name of the file
+in that directory will be the value for the object key in the declared map.
+
+Permissions to make these calls must be granted in /usr/share/rpcd/acl.d
+via a file named the same as the application package name (luci-app-example)
+*/
+var load_sample2 = rpc.declare({
+	object: 'luci.example',
+	method: 'get_sample2'
+});
+
+function capitalize(message) {
+	var arr = message.split(" ");
+	for (var i = 0; i < arr.length; i++) {
+		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
+	}
+	return arr.join(" ");
+}
+
+return view.extend({
+	generic_failure: function (message) {
+		// Map an error message into a div for rendering
+		return E('div', {
+			'class': 'error'
+		}, [_('RPC call failure: '), message])
+	},
+	render_sample2_using_jsonmap: function (sample) {
+		console.log('render_sample2_using_jsonmap()');
+		console.log(sample);
+
+		// Handle errors as before
+		if (sample.error) {
+			return this.generic_failure(sample.error)
+		}
+
+		// Variables you'll usually see declared in LuCI JS apps; forM, Section, Option
+		var m, s, o;
+
+		/*
+		LuCI has the concept of a JSONMap. This will map a structured object to
+		a configuration form. Normally you'd use this with a UCI-powered result,
+		since saving via an RPC call is going to be more difficult than using the
+		built-in UCI/ubus libraries.
+        
+		https://openwrt.github.io/luci/jsapi/LuCI.form.JSONMap.html
+        
+		Execute   ubus call luci.example get_sample2   to see the JSON being used.
+		*/
+		m = new form.JSONMap(sample, _('JSONMap TableSection Sample'), _(
+			'See browser console for raw data'));
+		// Make the form read-only; this only matters if the apply/save/reset handlers
+		// are not replaced with null to disable them.
+		m.readonly = true;
+		// Set up for a tabbed display
+		m.tabbed = false;
+
+		const option_names = Object.keys(sample);
+		for (var i = option_names.length - 1; i >= 0; i--) {
+			var option_name = option_names[i];
+			var display_name = option_name.replace("_", " ");
+			s = m.section(form.TableSection, option_name, capitalize(display_name), _(
+				'Description for this table section'))
+			o = s.option(form.Value, 'name', _('Option name'));
+			o = s.option(form.Value, 'value', _('Option value'));
+			o = s.option(form.DynamicList, 'parakeets', 'Parakeets');
+		}
+		return m;
+	},
+	/*
+	load() is called on first page load, and the results of each promise are
+	placed in an array in the call order. This array is passed to the render()
+	function as the first argument.
+	*/
+	load: function () {
+		return Promise.all([
+			load_sample2(),
+		]);
+	},
+	// render() is called by the LuCI framework to do any data manipulation, and the
+	// return is used to modify the DOM that the browser shows.
+	render: function (data) {
+		// data[0] will be the result from load_sample2
+		var sample2 = data[0] || {};
+		return this.render_sample2_using_jsonmap(sample2).render();
+	},
+	/*
+	Since this is a view-only screen, the handlers are disabled
+	Normally, when using something like Map or JSONMap, you would 
+	not null out these handlers, so that the form can be saved/applied.
+    
+	With a RPC data source, you would need to define custom handlers
+	that verify the changes, and make RPC calls to a backend that can
+	process the request.
+	*/
+	handleSave: null,
+	handleSaveApply: null,
+	handleReset: null
+})
\ No newline at end of file