Group apps by domain
This commit is contained in:
Johannes Zellner
@@ -245,6 +245,11 @@ h1, h2, h3 {
|
||||
// Apps view
|
||||
// ----------------------------
|
||||
|
||||
.app-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
padding: 10px;
|
||||
min-width: 225px;
|
||||
@@ -260,14 +265,8 @@ h1, h2, h3 {
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item:hover .grid-item-bottom {
|
||||
@media(min-width:768px) {
|
||||
opacity: 1;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-content {
|
||||
position: relative; // required to make action buttons positioned absolute within the element
|
||||
background-color: white;
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
@@ -284,21 +283,10 @@ h1, h2, h3 {
|
||||
font-family: $font-family-heading;
|
||||
}
|
||||
|
||||
.grid-item-bottom-mobile {
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
background-color: white;
|
||||
|
||||
@media(min-width:768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item-bottom {
|
||||
.grid-item-actions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
padding: 10px 15px;
|
||||
right: -10px;
|
||||
opacity: 0;
|
||||
background-color: transparent;
|
||||
@@ -310,6 +298,13 @@ h1, h2, h3 {
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item:hover .grid-item-actions {
|
||||
@media(min-width:768px) {
|
||||
opacity: 1;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-update-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@@ -520,92 +520,77 @@
|
||||
</div>
|
||||
|
||||
<div class="animateMeOpacity ng-hide" ng-show="installedApps.length > 0">
|
||||
<div class="col-sm-1 grid-item" ng-repeat="app in installedApps | orderBy:'location'">
|
||||
<div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
|
||||
<a ng-href="{{ app | applicationLink }}" ng-click="((app | installError) === true && showError(app)) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) }">
|
||||
<div class="grid-item-top">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
|
||||
<br/>
|
||||
<img ng-src="{{app.iconUrl || 'img/appicon_fallback.png'}}" fallback-icon="img/appicon_fallback.png" appstore-icon="{{ app.iconUrlStore }}" onerror="imageErrorHandler(this)" class="app-icon"/>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center">
|
||||
<div class="grid-item-top-title" data-fittext>{{ app.location || app.fqdn }}</div>
|
||||
<div class="text-muted status" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden" uib-tooltip="{{ app.message | shortAppMessage }}">
|
||||
{{ app | installationStateLabel }}
|
||||
</div>
|
||||
<div class="status" ng-style="{ 'visibility': (app | installationActive) ? 'visible' : 'hidden' }">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-repeat="domain in domains">
|
||||
<h2 style="padding-left: 15px;">{{ domain.domain }}</h2>
|
||||
<div class="app-grid">
|
||||
<div class="grid-item" ng-repeat="app in installedApps | filter:{domain:domain.domain} | orderBy:'location'">
|
||||
<a ng-href="{{ app | applicationLink }}" ng-click="((app | installError) === true && showError(app)) || ((app | appIsInstalledAndHealthy) && app.pendingPostInstallConfirmation && appPostInstallConfirm.show(app))" target="_blank" ng-class="{ 'hand': (app | appIsInstalledAndHealthy) }">
|
||||
<div style="background-color: white;" class="highlight grid-item-content" uib-tooltip="{{ app.fqdn }}">
|
||||
<div class="grid-item-top">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center" style="padding-left: 5px; padding-right: 5px;">
|
||||
<br/>
|
||||
<img ng-src="{{app.iconUrl || 'img/appicon_fallback.png'}}" fallback-icon="img/appicon_fallback.png" appstore-icon="{{ app.iconUrlStore }}" onerror="imageErrorHandler(this)" class="app-icon"/>
|
||||
</div>
|
||||
<div class="grid-item-bottom-mobile" ng-show="user.admin || (config.features.spaces && app.ownerId === user.id)">
|
||||
<div class="row">
|
||||
<div class="col-xs-4 text-left">
|
||||
<a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'">
|
||||
<i class="fa fa-undo scale"></i>
|
||||
</a>
|
||||
|
||||
<a href="" ng-click="appConfigure.show(app)" ng-show="app.installationState === 'installed' || app.installationState === 'pending_configure' || (app | installError)">
|
||||
<i ng-hide="(app | installError)" class="fa fa-pencil-alt scale"></i>
|
||||
<i ng-show="(app | installError)" class="fa fa-wrench scale"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center"></div>
|
||||
<div class="col-xs-4 text-right">
|
||||
<a href="" ng-click="showUninstall(app)">
|
||||
<i class="fa fa-times scale"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center">
|
||||
<div class="grid-item-top-title" data-fittext>{{ app.location || app.fqdn }}</div>
|
||||
<div class="text-muted status" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden" uib-tooltip="{{ app.message | shortAppMessage }}">
|
||||
{{ app | installationStateLabel }}
|
||||
</div>
|
||||
<div class="status" ng-style="{ 'visibility': (app | installationActive) ? 'visible' : 'hidden' }">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item-bottom" ng-show="user.admin || (config.features.spaces && app.ownerId === user.id)">
|
||||
<div style="text-align: center;">
|
||||
<a href="" ng-click="showUninstall(app)" uib-tooltip="Uninstall" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-times scale"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-item-actions" ng-show="user.admin || (config.features.spaces && app.ownerId === user.id)">
|
||||
<div style="text-align: center;">
|
||||
<a href="" ng-click="showUninstall(app)" uib-tooltip="Uninstall" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-times scale"></i></a>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'" uib-tooltip="Backups" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-archive scale"></i></a>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<a href="" ng-click="appRestore.show(app)" ng-show="backupConfig.provider !== 'noop'" uib-tooltip="Backups" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-archive scale"></i></a>
|
||||
</div>
|
||||
|
||||
<div ng-show="(app.installationState === 'installed' || app.installationState === 'pending_configure') && !(app | installError)" style="text-align: center;">
|
||||
<a href="" ng-click="appConfigure.show(app)" uib-tooltip="Configure" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-pencil-alt scale"></i></a>
|
||||
</div>
|
||||
<div ng-show="(app.installationState === 'installed' || app.installationState === 'pending_configure') && !(app | installError)" style="text-align: center;">
|
||||
<a href="" ng-click="appConfigure.show(app)" uib-tooltip="Configure" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-pencil-alt scale"></i></a>
|
||||
</div>
|
||||
|
||||
<div ng-show="app | installError" style="text-align: center;">
|
||||
<a href="" ng-click="appConfigure.show(app)" uib-tooltip="Repair" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-wrench scale"></i></a>
|
||||
</div>
|
||||
<div ng-show="app | installError" style="text-align: center;">
|
||||
<a href="" ng-click="appConfigure.show(app)" uib-tooltip="Repair" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-wrench scale"></i></a>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a ng-href="{{ '/terminal.html?id=' + app.id }}" target="_blank" uib-tooltip="Terminal" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-terminal scale"></i></a>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<a ng-href="{{ '/terminal.html?id=' + app.id }}" target="_blank" uib-tooltip="Terminal" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-terminal scale"></i></a>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a ng-href="{{ '/logs.html?appId=' + app.id }}" target="_blank" uib-tooltip="Logs" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-file-alt scale"></i></a>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<a ng-href="{{ '/logs.html?appId=' + app.id }}" target="_blank" uib-tooltip="Logs" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-file-alt scale"></i></a>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a href="" ng-click="showInformation(app)" uib-tooltip="Information" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-info-circle scale"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<a href="" ng-click="showInformation(app)" uib-tooltip="Information" tooltip-placement="right" tooltip-class="app-tooltip"><i class="fa fa-info-circle scale"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- we check the version here because the box updater does not know when an app gets updated -->
|
||||
<div class="app-update-badge" ng-show="config.update.apps[app.id].manifest.version && config.update.apps[app.id].manifest.version !== app.manifest.version && (app | installSuccess)">
|
||||
<a href="" ng-click="showUpdate(app, config.update.apps[app.id].manifest)" title="Update Available">
|
||||
<span class="fa-stack fa-lg scale-small">
|
||||
<i class="fa fa-circle fa-stack-2x text-success"></i>
|
||||
<i class="fa fa-arrow-alt-circle-up fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- we check the version here because the box updater does not know when an app gets updated -->
|
||||
<div class="app-update-badge" ng-show="config.update.apps[app.id].manifest.version && config.update.apps[app.id].manifest.version !== app.manifest.version && (app | installSuccess)">
|
||||
<a href="" ng-click="showUpdate(app, config.update.apps[app.id].manifest)" title="Update Available">
|
||||
<span class="fa-stack fa-lg scale-small">
|
||||
<i class="fa fa-circle fa-stack-2x text-success"></i>
|
||||
<i class="fa fa-arrow-alt-circle-up fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
|
||||
$scope.config = Client.getConfig();
|
||||
$scope.user = Client.getUserInfo();
|
||||
$scope.domains = [];
|
||||
$scope.usedDomains = [];
|
||||
$scope.groups = [];
|
||||
$scope.users = [];
|
||||
$scope.backupConfig = {};
|
||||
@@ -657,8 +658,20 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
|
||||
});
|
||||
}
|
||||
|
||||
function refreshInstalledApps() {
|
||||
Client.refreshInstalledApps();
|
||||
|
||||
var tmp = [];
|
||||
$scope.installedApps.forEach(function (app) {
|
||||
if (!tmp.find(function (d) { return d.domain === app.domain; })) tmp.push({ domain: app.domain, apps: [] });
|
||||
tmp.find(function (d) { return d.domain === app.domain; }).apps.push(app);
|
||||
});
|
||||
|
||||
$scope.usedDomains = tmp;
|
||||
}
|
||||
|
||||
Client.onReady(function () {
|
||||
Client.refreshInstalledApps(); // refresh the new list immediately when switching from another view (appstore)
|
||||
refreshInstalledApps(); // refresh the new list immediately when switching from another view (appstore)
|
||||
|
||||
$scope.spacesSuffix = $scope.user.username.replace(/\./g, '-');
|
||||
|
||||
@@ -669,7 +682,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
|
||||
if ($scope.user.admin && !$scope.config.managed) getBackupConfig(); // FIXME: detect disabled backups some other way
|
||||
}
|
||||
|
||||
var refreshAppsTimer = $interval(Client.refreshInstalledApps.bind(Client), 5000);
|
||||
var refreshAppsTimer = $interval(refreshInstalledApps, 5000);
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
$interval.cancel(refreshAppsTimer);
|
||||
|
||||
Reference in New Issue
Block a user