Allow to change applinks icon

src/views/apps.html

@@ -112,6 +112,18 @@
             <input type="text" class="form-control" ng-model="applinksEdit.label" name="label" id="inputLabel" autocomplete="off">
           </div>
 
+          <div class="form-group">
+            <div>
+              <label class="control-label">{{ 'app.display.icon' | tr }}</label>
+            </div>
+            <div id="previewIcon" class="app-custom-icon" ng-click="applinksEdit.showCustomIconSelector()">
+              <img ng-src="{{ applinksEdit.iconUrl() || 'img/appicon_fallback.png' }}" fallback-icon="img/appicon_fallback.png" onerror="imageErrorHandler(this)"/>
+              <div class="overlay"></div>
+            </div>
+            <a href="" style="font-weight: normal;" ng-click="applinksEdit.resetCustomIcon()">Clear Icon.</a> This will fetch the app's favicon.
+            <input type="file" id="applinksEditIconFileInput" style="display: none" accept="image/png"/>
+          </div>
+
           <div class="form-group">
             <label class="control-label">{{ 'app.display.tags' | tr }}</label>
             <tag-input class="form-control" placeholder="{{ 'app.display.tagsPlaceholder' | tr }}" taglist="applinksEdit.tags" name="tags" uib-tooltip="{{ 'app.display.tagsTooltip' | tr }}"></tag-input>

src/views/apps.js

@@ -155,12 +155,33 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
         error: {},
         busyEdit: false,
         busyRemove: false,
+        applink: {},
         id: '',
         upstreamUri: '',
         label: '',
         tags: '',
         accessRestrictionOption: '',
         accessRestriction: { users: [], groups: [] },
+        icon: { data: null },
+
+        iconUrl: function () {
+            if ($scope.applinksEdit.icon.data === '__original__') { // user clicked reset
+                // https://png-pixel.com/ white pixel placeholder
+                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=';
+            } else if ($scope.applinksEdit.icon.data) { // user uploaded icon
+                return $scope.applinksEdit.icon.data;
+            } else { // current icon
+                return $scope.applinksEdit.applink.iconUrl;
+            }
+        },
+
+        resetCustomIcon: function () {
+            $scope.applinksEdit.icon.data = '__original__';
+        },
+
+        showCustomIconSelector: function () {
+            $('#applinksEditIconFileInput').click();
+        },
 
         isAccessRestrictionValid: function () {
             return !!($scope.applinksEdit.accessRestriction.users.length || $scope.applinksEdit.accessRestriction.groups.length);
@@ -170,6 +191,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
             $scope.applinksEdit.error = {};
             $scope.applinksEdit.busyEdit = false;
             $scope.applinksEdit.busyRemove = false;
+            $scope.applinksEdit.applink = applink;
             $scope.applinksEdit.id = applink.id;
             $scope.applinksEdit.upstreamUri = applink.upstreamUri;
             $scope.applinksEdit.label = applink.label;
@@ -208,10 +230,18 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
                 accessRestriction.groups = $scope.applinksEdit.accessRestriction.groups.map(function (g) { return g.id; });
             }
 
+            var icon;
+            if ($scope.applinksEdit.icon.data === '__original__') { // user reset the icon
+                icon = '';
+            } else if ($scope.applinksEdit.icon.data) { // user loaded custom icon
+                icon = $scope.applinksEdit.icon.data.replace(/^data:image\/[a-z]+;base64,/, '');
+            }
+
             var data = {
                 upstreamUri: $scope.applinksEdit.upstreamUri,
                 label: $scope.applinksEdit.label,
                 accessRestriction: accessRestriction,
+                icon: icon,
                 tags: $scope.applinksEdit.tags.split(' ').map(function (t) { return t.trim(); }).filter(function (t) { return !!t; })
             };
 
@@ -295,6 +325,17 @@ angular.module('Application').controller('AppsController', ['$scope', '$translat
         });
     });
 
+    $('#applinksEditIconFileInput').get(0).onchange = function (event) {
+        var fr = new FileReader();
+        fr.onload = function () {
+            $scope.$apply(function () {
+                // var file = event.target.files[0];
+                $scope.applinksEdit.icon.data = fr.result;
+            });
+        };
+        fr.readAsDataURL(event.target.files[0]);
+    };
+
     // setup all the dialog focus handling
     ['applinksAddModal', 'applinksEditModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {