Add initial support to add applinks

src/views/apps.html

@@ -31,6 +31,31 @@
   </div>
 </div>
 
+<!-- Modal applinks add -->
+<div class="modal fade" id="applinksAddModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Add external app link</h4>
+      </div>
+      <div class="modal-body">
+        <form name="applinksAddForm" role="form" ng-submit="applinksAdd.submit()" autocomplete="off">
+          <div class="form-group" ng-class="{ 'has-error': (applinksAddForm.upstreamUri.$dirty && applinksAddForm.upstreamUri.$invalid) || (!applinksAddForm.upstreamUri.$dirty && applinksAdd.error.upstreamUri) }">
+            <label class="control-label">UpstreamURI</label>
+            <input type="text" class="form-control" ng-model="applinksAdd.upstreamUri" name="upstreamUri" id="inputUpstreamUri" autofocus autocomplete="off" required>
+          </div>
+
+          <input class="ng-hide" type="submit" ng-disabled="applinksAddForm.$invalid || applinksAdd.busy"/>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
+        <button type="button" class="btn btn-success" ng-click="applinksAdd.submit()">{{ 'main.dialog.save' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="content content-large">
 
     <!-- Workaround for select-all issue, see commit message -->
@@ -57,6 +82,7 @@
     <div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
       <h1 class="view-header">
         {{ 'apps.title' | tr }}
+        <button class="btn btn-outline" ng-click="applinksAdd.show()" uib-tooltip="Add Applink" tooltip-placement="right"><i class="fas fa-plus"></i></button>
         <div class="pull-right">
           <form class="form-inline">
             <input type="text" class="form-control" ng-show="installedApps.length > 8" placeholder="{{ 'apps.searchPlaceholder' | tr }}" id="appSearch" ng-model="appSearch"/>

src/views/apps.js

@@ -89,6 +89,32 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
         }
     };
 
+    $scope.applinksAdd = {
+        error: {},
+        busy: false,
+        upstreamUri: '',
+
+        show: function () {
+            $scope.applinksAdd.error = {};
+            $scope.applinksAdd.busy = false;
+            $scope.applinksAdd.upstreamUri = '';
+
+            $('#applinksAddModal').modal('show');
+
+            return false; // prevent propagation and default
+        },
+
+        submit: function () {
+            if (!$scope.applinksAdd.upstreamUri) return;
+
+            Client.addApplink({ upstreamUri: $scope.applinksAdd.upstreamUri }, function (error, result) {
+                if (error) return console.error('Failed to add applink', error);
+
+                $('#applinksAddModal').modal('hide');
+            });
+        }
+    };
+
     $scope.showAppConfigure = function (app, view) {
         $location.path('/app/' + app.id + '/' + view);
     };
@@ -136,6 +162,13 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
         });
     });
 
+    // setup all the dialog focus handling
+    ['applinksAddModal'].forEach(function (id) {
+        $('#' + id).on('shown.bs.modal', function () {
+            $(this).find("[autofocus]:first").focus();
+        });
+    });
+
     $('.collapse').on('shown.bs.collapse', function(){
         $(this).parent().find('.fa-angle-right').removeClass('fa-angle-right').addClass('fa-angle-down');
     }).on('hidden.bs.collapse', function(){