Merge pull request #198 from YunoHost/config_panel

[enh] POC for config panel interface

src/bower.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "bootstrap": "3.3.6",
     "font-awesome": "4.5.0",
-    "handlebars": "1.3.0",
+    "handlebars": "4.0.11",
     "sammy": "0.7.6",
     "js-cookie": "2.1.0",
     "source-sans-pro": "git://github.com/adobe-fonts/source-sans-pro.git#2.020R-ro/1.075R-it",

src/js/yunohost/controllers/apps.js

@@ -160,6 +160,34 @@
         });
     });
 
+    // Get app config panel
+    app.get('#/apps/:app/config-panel', function (c) {
+        c.api('/apps/'+c.params['app']+'/config-panel', function(data) {
+            c.view('app/app_config-panel', data);
+        });
+    });
+
+    app.post('#/apps/:app/config', function(c) {
+        // taken from app install
+        $.each(c.params, function(k, v) {
+            if (typeof(v) === 'object' && Array.isArray(v)) {
+                // And return only first value
+                c.params[k] = v[0];
+            }
+        });
+
+        var app_id = c.params['app'];
+        delete c.params['app'];
+
+        var params = {
+            'args': c.serialize(c.params.toHash())
+        }
+
+        c.api('/apps/'+app_id+'/config', function() { // http://api.yunohost.org/#!/app/app_install_post_2
+            c.redirect('#/apps/'+app_id+'/config-panel');
+        }, 'POST', params);
+    })
+
     // Special case for custom app installation.
     app.get('#/apps/install/custom', function (c) {
         // If we try to GET /apps/install/custom, it means that installation fail.

src/js/yunohost/main.js

@@ -49,7 +49,7 @@
               + options.fn(this)
               + '</span>');
         });
-        
+
         // Load tooltips on the page; needed if using tooltips
         Handlebars.registerHelper('load_tooltips', function() {
           return new Handlebars.SafeString(
@@ -60,6 +60,25 @@
               + '</script>');
         });
 
+        // equality stuff because mustache/Handlebars is lame
+        // source https://stackoverflow.com/a/31632215
+        Handlebars.registerHelper('eq', function(a, b) {
+          return a === b;
+        });
+
+        Handlebars.registerHelper('neq', function(a, b) {
+          return a !== b;
+        });
+
+        Handlebars.registerHelper('in', function(a) {
+          // skip first one
+          for (var i = 1; i < arguments.length; ++i) {
+            if (arguments[i] == a)
+              return true;
+          }
+          return false;
+        });
+
         // Look for supported type of storage to use
         /**
          * http://sammyjs.org/docs/api/0.7.4/all#Sammy.Store.LocalStorage

src/locales/en.json

@@ -136,6 +136,7 @@
     "error_server": "Server error",
     "error_server_unexpected": "Unexpected server error (%s)",
     "everyone_has_access": "Everyone has access.",
+    "experimental_warning": "Warning: this feature is experimental and not consider stable, you shouldn't be using it except if you know what you are doing.",
     "filesystem": "Filesystem",
     "firewall": "Firewall",
     "footer_version" : "Powered by <a href='https://yunohost.org'>YunoHost</a> %s (%s).",

src/views/app/app_config-panel.ms

@@ -0,0 +1,73 @@
+<div class="btn-breadcrumb">
+    <a href="#/" ><i class="fa-home"></i><span class="sr-only">{{t 'home'}}</span></a>
+    <a href="#/apps">{{t 'applications'}}</a>
+    <a href="#/apps/{{app_id}}">{{app_name}}</a>
+    <a href="#/apps/{{app_id}}/config-panel">{{t 'config-panel'}}</a>
+</div>
+
+<div class="separator"></div>
+
+<div class="alert alert-warning" role="alert">{{t 'experimental_warning'}}</div>
+
+
+{{#if config_panel}}
+
+<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+{{#config_panel}}
+<h2>{{../app_name}} configuration panel</h2>
+<hr>
+{{#panel}}
+    <div class="panel panel-default">
+        <div class="panel-heading" role="tab" id="heading-{{ @index }}">
+            <h2 class="panel-title">
+                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ @index }}" aria-expanded="true" aria-controls="collapse-{{ @index }}">
+                    {{name}}
+                <small>{{help}}</small>
+                </a>
+            </h2>
+        </div>
+        <div id="collapse-{{ @index }}" class="panel-collapse collapse {{#if (eq @index 0)}}in{{/if}}" role="tabpanel" aria-labelledby="heading-{{ @index }}">
+            <div class="panel-body">
+            <form class="form-horizontal" action="#/apps/{{../../app_id}}/config" method="POST">
+                {{#sections}}
+                <div class="panel panel-default">
+                    <div class="panel-heading"><h3 class="panel-title">{{name}} <small>{{help}}</small></h3></div>
+                    <div class="panel-body">
+                        <ul>
+                        {{#options}}
+                        <div class="form-group">
+                            <label for="{{id}}" class="col-sm-2 control-label">{{name}}</label>
+                            <div class="col-sm-10">
+                            {{#if (in type "number" "text" "password" "color" "date" "datetime-local" "email" "month number" "range" "search" "tel" "time" "url" "week")}}
+                                <input type="number" class="form-control" id="{{id}}" name="{{id}}" placeholder="{{placeholder}}">
+                                <span class="help-block">{{ help }}</span>
+                            {{else if (eq type "bool")}}
+                            <input type="radio" name="{{id}}" value="true" {{#if value}}checked{{/if}}> yes
+                            <input type="radio" name="{{id}}" value="false"{{#if (eq value false)}}checked{{/if}}> no
+                            <span class="help-block">{{ help }}</span>
+                            {{/if}}
+                            </div>
+                        </div>
+                        {{/options}}
+                        </ul></li>
+                        </ul>
+                    </div>
+                </div>
+                {{/sections}}
+
+                <br>
+                <div><button class="btn btn-primary" type="submit">Save</button></div>
+            </form>
+            </div>
+        </div>
+    </div>
+{{/panel}}
+{{/config_panel}}
+</div>
+
+{{else}}
+<div class="alert alert-warning">
+    <span class="fa-exclamation-triangle"></span>
+    {{t 'app_config_panel_no_panel'}}
+</div>
+{{/if}}