applications/luci-app-example/htdocs/luci-static/resources/view/example/rpc-jsonmap-tablesection.js

   1 'use strict';
   2 'require form';
   3 'require rpc';
   4 'require view';
   5
   6 /*
   7 Declare the RPC calls that are needed. The object value maps to the name
   8 listed by the shell command
   9
  10 $ ubus list
  11
  12 Custom scripts can be placed in /usr/libexec/rpcd, and must emit JSON. The name of the file
  13 in that directory will be the value for the object key in the declared map.
  14
  15 Permissions to make these calls must be granted in /usr/share/rpcd/acl.d
  16 via a file named the same as the application package name (luci-app-example)
  17 */
  18 var load_sample2 = rpc.declare({
  19         object: 'luci.example',
  20         method: 'get_sample2'
  21 });
  22
  23 function capitalize(message) {
  24         var arr = message.split(" ");
  25         for (var i = 0; i < arr.length; i++) {
  26                 arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  27         }
  28         return arr.join(" ");
  29 }
  30
  31 return view.extend({
  32         generic_failure: function (message) {
  33                 // Map an error message into a div for rendering
  34                 return E('div', {
  35                         'class': 'error'
  36                 }, [_('RPC call failure: '), message])
  37         },
  38         render_sample2_using_jsonmap: function (sample) {
  39                 console.log('render_sample2_using_jsonmap()');
  40                 console.log(sample);
  41
  42                 // Handle errors as before
  43                 if (sample.error) {
  44                         return this.generic_failure(sample.error)
  45                 }
  46
  47                 // Variables you'll usually see declared in LuCI JS apps; forM, Section, Option
  48                 var m, s, o;
  49
  50                 /*
  51                 LuCI has the concept of a JSONMap. This will map a structured object to
  52                 a configuration form. Normally you'd use this with a UCI-powered result,
  53                 since saving via an RPC call is going to be more difficult than using the
  54                 built-in UCI/ubus libraries.
  55
  56                 https://openwrt.github.io/luci/jsapi/LuCI.form.JSONMap.html
  57
  58                 Execute   ubus call luci.example get_sample2   to see the JSON being used.
  59                 */
  60                 m = new form.JSONMap(sample, _('JSONMap TableSection Sample'), _(
  61                         'See browser console for raw data'));
  62                 // Make the form read-only; this only matters if the apply/save/reset handlers
  63                 // are not replaced with null to disable them.
  64                 m.readonly = true;
  65                 // Set up for a tabbed display
  66                 m.tabbed = false;
  67
  68                 const option_names = Object.keys(sample);
  69                 for (var i = option_names.length - 1; i >= 0; i--) {
  70                         var option_name = option_names[i];
  71                         var display_name = option_name.replace("_", " ");
  72                         s = m.section(form.TableSection, option_name, capitalize(display_name), _(
  73                                 'Description for this table section'))
  74                         o = s.option(form.Value, 'name', _('Option name'));
  75                         o = s.option(form.Value, 'value', _('Option value'));
  76                         o = s.option(form.DynamicList, 'parakeets', 'Parakeets');
  77                 }
  78                 return m;
  79         },
  80         /*
  81         load() is called on first page load, and the results of each promise are
  82         placed in an array in the call order. This array is passed to the render()
  83         function as the first argument.
  84         */
  85         load: function () {
  86                 return Promise.all([
  87                         load_sample2(),
  88                 ]);
  89         },
  90         // render() is called by the LuCI framework to do any data manipulation, and the
  91         // return is used to modify the DOM that the browser shows.
  92         render: function (data) {
  93                 // data[0] will be the result from load_sample2
  94                 var sample2 = data[0] || {};
  95                 return this.render_sample2_using_jsonmap(sample2).render();
  96         },
  97         /*
  98         Since this is a view-only screen, the handlers are disabled
  99         Normally, when using something like Map or JSONMap, you would
 100         not null out these handlers, so that the form can be saved/applied.
 101
 102         With a RPC data source, you would need to define custom handlers
 103         that verify the changes, and make RPC calls to a backend that can
 104         process the request.
 105         */
 106         handleSave: null,
 107         handleSaveApply: null,
 108         handleReset: null
 109 })