luci-base: add client based view actions
authorJo-Philipp Wich <jo@mein.io>
Mon, 1 Apr 2019 13:38:00 +0000 (15:38 +0200)
committerJo-Philipp Wich <jo@mein.io>
Sun, 7 Jul 2019 13:25:49 +0000 (15:25 +0200)
Introduce a new view() target for CBI dispatch nodes, as long with the
required template and plumbing work in luci.js to allow requiring view
classes.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
modules/luci-base/htdocs/luci-static/resources/luci.js
modules/luci-base/luasrc/dispatcher.lua
modules/luci-base/luasrc/view/view.htm [new file with mode: 0644]

index c71865f96fc18063c207080e78c8e0f91a2e4f0a..896ded3af0954cbe81cbed1f23a273bb07c3eece 100644 (file)
                                        for (var i = 0; ptr && i < parts.length - 1; i++)
                                                ptr = ptr[parts[i]];
 
-                                       if (!ptr)
-                                               L.error('DependencyError',
-                                                       'Parent "%s" for class "%s" is missing',
-                                                       parts.slice(0, i).join('.'), name);
+                                       if (ptr)
+                                               ptr[parts[i]] = instance;
 
-                                       classes[name] = ptr[parts[i]] = instance;
+                                       classes[name] = instance;
 
                                        return instance;
                                });
                        };
 
                        /* Request class file */
-                       classes[name] = Request.get(url, { cache: true }).then(compileClass);
+                       classes[name] = Request.get(url, { cache: true })
+                               .then(compileClass)
+                               .catch(L.error);
 
                        return classes[name];
                },
                        __name__: 'LuCI.View',
 
                        __init__: function() {
-                               var mc = document.getElementById('maincontent');
+                               var vp = document.getElementById('view');
 
-                               L.dom.content(mc, E('div', { 'class': 'spinning' }, _('Loading view…')));
+                               L.dom.content(vp, E('div', { 'class': 'spinning' }, _('Loading view…')));
 
                                return Promise.resolve(this.load())
                                        .then(L.bind(this.render, this))
                                        .then(L.bind(function(nodes) {
-                                               var mc = document.getElementById('maincontent');
+                                               var vp = document.getElementById('view');
 
-                                               L.dom.content(mc, nodes);
-                                               L.dom.append(mc, this.addFooter());
-                                       }, this));
+                                               L.dom.content(vp, nodes);
+                                               L.dom.append(vp, this.addFooter());
+                                       }, this)).catch(L.error);
                        },
 
                        load: function() {},
index 626a46dfd28b674db96e899b027e800ea4ad284e..e8106b741d533541279597cf98dc8a8e4c7fedb0 100644 (file)
@@ -857,6 +857,15 @@ function template(name)
 end
 
 
+local _view = function(self, ...)
+       require "luci.template".render("view", { view = self.view })
+end
+
+function view(name)
+       return {type = "view", view = name, target = _view}
+end
+
+
 local function _cbi(self, ...)
        local cbi = require "luci.cbi"
        local tpl = require "luci.template"
diff --git a/modules/luci-base/luasrc/view/view.htm b/modules/luci-base/luasrc/view/view.htm
new file mode 100644 (file)
index 0000000..bddd8e4
--- /dev/null
@@ -0,0 +1,8 @@
+<%+header%>
+
+<div id="view">
+       <div class="spinning"><%:Loading view…%></div>
+       <script type="text/javascript">L.require('view.<%=view%>');</script>
+</div>
+
+<%+footer%>