From 699db93b181bf55458cdc81bcfab67e445f6ff42 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 15 Nov 2018 19:59:24 +0100
Subject: [PATCH] Add initial addons view

---
 src/index.html        |  1 +
 src/js/client.js      | 14 +++++++++
 src/js/index.js       |  3 ++
 src/views/addons.html | 68 +++++++++++++++++++++++++++++++++++++++++++
 src/views/addons.js   | 17 +++++++++++
 5 files changed, 103 insertions(+)
 create mode 100644 src/views/addons.html
 create mode 100644 src/views/addons.js

diff --git a/src/index.html b/src/index.html
index 3cf34df52..12346c847 100644
--- a/src/index.html
+++ b/src/index.html
@@ -150,6 +150,7 @@
                             <ul class="dropdown-menu" role="menu">
                                 <li><a href="#/account"><i class="fa fa-user fa-fw"></i> Account</a></li>
                                 <li ng-show="user.admin"><a href="#/activity"><i class="fa fa-list-alt fa-fw"></i> Activity</a></li>
+                                <li ng-show="user.admin"><a href="#/addons"><i class="fa fa-puzzle-piece fa-fw"></i> Addons</a></li>
                                 <!-- <li ng-show="user.admin"><a href="#/tokens"><i class="fa fa-key fa-fw"></i> API Access</a></li> -->
                                 <li ng-show="user.admin"><a href="#/backups"><i class="fa fa-archive fa-fw"></i> Backups</a></li>
                                 <li ng-show="user.admin"><a href="#/domains"><i class="fa fa-globe fa-fw"></i> Domains & Certs</a></li>
diff --git a/src/js/client.js b/src/js/client.js
index 9a88462e3..08699574f 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -679,6 +679,20 @@ angular.module('Application').service('Client', ['$http', '$interval', 'md5', 'N
         }).error(defaultErrorHandler(callback));
     };
 
+    Client.prototype.getAddons = function (callback) {
+        get('/api/v1/addons').success(function (data, status) {
+            if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
+            callback(null, data.addons);
+        }).error(defaultErrorHandler(callback));
+    };
+
+    Client.prototype.getAddon = function (addon, callback) {
+        get('/api/v1/addons/' + addon).success(function (data, status) {
+            if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
+            callback(null, data.addon);
+        }).error(defaultErrorHandler(callback));
+    };
+
     Client.prototype.getUsers = function (callback) {
         get('/api/v1/users').success(function (data, status) {
             if (status !== 200 || typeof data !== 'object') return callback(new ClientError(status, data));
diff --git a/src/js/index.js b/src/js/index.js
index 21657db8e..95e6c065a 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -70,6 +70,9 @@ app.config(['$routeProvider', function ($routeProvider) {
     }).when('/users', {
         controller: 'UsersController',
         templateUrl: 'views/users.html?<%= revision %>'
+    }).when('/addons', {
+        controller: 'AddonsController',
+        templateUrl: 'views/addons.html?<%= revision %>'
     }).when('/appstore', {
         controller: 'AppStoreController',
         templateUrl: 'views/appstore.html?<%= revision %>'
diff --git a/src/views/addons.html b/src/views/addons.html
new file mode 100644
index 000000000..2eab05a87
--- /dev/null
+++ b/src/views/addons.html
@@ -0,0 +1,68 @@
+<div class="content">
+
+  <div class="text-left">
+    <h1>Addons</h1>
+  </div>
+
+  <div class="text-left">
+    <h3>Overview</h3>
+  </div>
+
+  <div class="card" style="margin-bottom: 15px;">
+    <div class="row">
+      <div class="col-xs-12">
+        Cloudron addons are addons for the apps. These include for example databases and authentication modules.<br/>
+        A full list of available addons can be found <a href="https://cloudron.io/developer/addons/" target="_blank">here</a>.
+      </div>
+    </div>
+  </div>
+
+  <div class="text-left">
+    <h3>Status</h3>
+  </div>
+
+  <div class="card" style="margin-bottom: 15px;">
+    <div class="row">
+      <div class="col-xs-12">
+        <div class="row ng-hide" ng-show="!ready">
+          <div class="col-xs-12 text-center">
+            <h2><i class="fa fa-circle-o-notch fa-spin"></i></h2>
+          </div>
+        </div>
+        <div class="row animateMeOpacity ng-hide" ng-show="ready">
+          <div class="col-xs-12">
+            <table class="table table-hover">
+              <thead>
+                <tr>
+                  <th style="width: 0.5%;"></th>
+                  <th style="width:45%">Addon</th>
+                  <th style="width:49.5%">Status</th>
+                  <th style="width: 5%" class="text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr ng-repeat="addon in addons">
+                  <td>
+                    <i class="fa fa-briefcase" uib-tooltip="Active"></i>
+                  </td>
+                  <td class="elide-table-cell">
+                    {{ addon.name }}
+                  </td>
+                  <td class="elide-table-cell">
+                    -
+                  </td>
+                  <td class="text-right no-wrap" style="vertical-align: bottom">
+                    <button class="btn btn-xs btn-default" ng-click="" title="Start"><i class="fa fa-paper-plane"></i></button>
+                    <button class="btn btn-xs btn-default" ng-click="" title="Stop"><i class="fa fa-pencil-alt"></i></button>
+                    <button class="btn btn-xs btn-danger" ng-click="" title="Logs"><i class="far fa-trash-alt"></i></button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/views/addons.js b/src/views/addons.js
new file mode 100644
index 000000000..bd1781b6a
--- /dev/null
+++ b/src/views/addons.js
@@ -0,0 +1,17 @@
+'use strict';
+
+angular.module('Application').controller('AddonsController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
+    Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
+
+    $scope.ready = false;
+    $scope.addons = [];
+
+    Client.onReady(function () {
+        Client.getAddons(function (error, result) {
+            if (error) return Client.error(error);
+
+            $scope.addons = result.map(function (a) { return { name: a }; });
+            $scope.ready = true;
+        });
+    });
+}]);