Add initial addons view

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>

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;
+        });
+    });
+}]);