safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 13:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUACAMOLE-5: Generalize and clean the guacGroupList directive such that arbitrary GroupListItem types can be supported.

Browse Source
This commit is contained in:
Michael Jumper
2016-08-05 16:28:33 -07:00
parent 558d242060
commit 56d9c90940
11 changed files with 121 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
guacamole/src/main/webapp/app/groupList/directives/guacGroupList.js
View File

@@ -46,37 +46,18 @@ angular.module('groupList').directive('guacGroupList', [function guacGroupList()
context : '=',
/**
* The URL or ID of the Angular template to use when rendering a
* connection. The @link{GroupListItem} associated with that
* connection will be exposed within the scope of the template
* as <code>item</code>, and the arbitrary context object, if any,
* will be exposed as <code>context</code>.
* The map of @link{GroupListItem} type to the URL or ID of the
* Angular template to use when rendering a @link{GroupListItem} of
* that type. The @link{GroupListItem} itself will be within the
* scope of the template as <code>item</code>, and the arbitrary
* context object, if any, will be exposed as <code>context</code>.
* If the template for a type is omitted, items of that type will
* not be rendered. All standard types are defined by
* @link{GroupListItem.Type}, but use of custom types is legal.
*
* @type String
* @type Object.<String, String>
*/
connectionTemplate : '=',
/**
* The URL or ID of the Angular template to use when rendering a
* connection group. The @link{GroupListItem} associated with that
* connection group will be exposed within the scope of the
* template as <code>item</code>, and the arbitrary context object,
* if any, will be exposed as <code>context</code>.
*
* @type String
*/
connectionGroupTemplate : '=',
/**
* The URL or ID of the Angular template to use when rendering a
* sharing profile. The @link{GroupListItem} associated with that
* sharing profile will be exposed within the scope of the template
* as <code>item</code>, and the arbitrary context object, if any,
* will be exposed as <code>context</code>.
*
* @type String
*/
sharingProfileTemplate : '=',
templates : '=',
/**
* Whether the root of the connection group hierarchy given should
@@ -145,51 +126,20 @@ angular.module('groupList').directive('guacGroupList', [function guacGroupList()
};
/**
* Returns whether the given item represents a connection that can
* be displayed. If there is no connection template, then no
* connection is visible.
*
* @param {GroupListItem} item
* The item to check.
* Returns whether a @link{GroupListItem} of the given type can be
* displayed. If there is no template associated with the given
* type, then a @link{GroupListItem} of that type cannot be
* displayed.
*
* @param {String} type
* The type to check.
*
* @returns {Boolean}
* true if the given item is a connection that can be
* displayed, false otherwise.
* true if the given @link{GroupListItem} type can be displayed,
* false otherwise.
*/
$scope.isVisibleConnection = function isVisibleConnection(item) {
return item.isConnection && !!$scope.connectionTemplate;
};
/**
* Returns whether the given item represents a connection group
* that can be displayed. If there is no connection group template,
* then no connection group is visible.
*
* @param {GroupListItem} item
* The item to check.
*
* @returns {Boolean}
* true if the given item is a connection group that can be
* displayed, false otherwise.
*/
$scope.isVisibleConnectionGroup = function isVisibleConnectionGroup(item) {
return item.isConnectionGroup && !!$scope.connectionGroupTemplate;
};
/**
* Returns whether the given item represents a sharing profile that
* can be displayed. If there is no sharing profile template, then
* no sharing profile is visible.
*
* @param {GroupListItem} item
* The item to check.
*
* @returns {Boolean}
* true if the given item is a sharing profile that can be
* displayed, false otherwise.
*/
$scope.isVisibleSharingProfile = function isVisibleSharingProfile(item) {
return item.isSharingProfile && !!$scope.sharingProfileTemplate;
$scope.isVisible = function isVisible(type) {
return !!$scope.templates[type];
};
// Set contents whenever the connection group is assigned or changed
@@ -212,7 +162,8 @@ angular.module('groupList').directive('guacGroupList', [function guacGroupList()
// Create root item for current connection group
var rootItem = GroupListItem.fromConnectionGroup(dataSource, connectionGroup,
!!$scope.connectionTemplate, !!$scope.sharingProfileTemplate,
$scope.isVisible(GroupListItem.Type.CONNECTION),
$scope.isVisible(GroupListItem.Type.SHARING_PROFILE),
countActiveConnections);
// If root group is to be shown, add it as a root item
@@ -265,7 +216,7 @@ angular.module('groupList').directive('guacGroupList', [function guacGroupList()
* connection group.
*/
$scope.toggleExpanded = function toggleExpanded(groupListItem) {
groupListItem.isExpanded = !groupListItem.isExpanded;
groupListItem.expanded = !groupListItem.expanded;
};
}]

46
guacamole/src/main/webapp/app/groupList/templates/guacGroupList.html
View File

@@ -1,55 +1,31 @@
<div class="group-list">
<script type="text/ng-template" id="nestedItem.html">
<div class="{{item.type}}" ng-if="isVisible(item.type)"
ng-class="{
expanded : item.expanded,
expandable : item.expandable,
empty : !item.children.length
}">
<!-- Connection -->
<div class="connection expandable" ng-if="isVisibleConnection(item)"
ng-class="{expanded: item.isExpanded, empty: !item.children.length}">
<!-- Item caption -->
<div class="caption">
<!-- Expand/collapse icon -->
<div class="icon expand" ng-click="toggleExpanded(item)"
ng-if="sharingProfileTemplate"></div>
ng-if="item.expandable"></div>
<ng-include src="connectionTemplate"/>
<ng-include src="templates[item.type]"/>
</div>
<!-- Children of this connection -->
<div class="children" ng-show="item.isExpanded">
<!-- Children of item (if any) -->
<div class="children" ng-if="item.expanded">
<div class="list-item" ng-repeat="item in item.children | orderBy : 'name'"
ng-include="'nestedItem.html'"></div>
</div>
</div>
<!-- Connection group -->
<div class="group expandable" ng-if="isVisibleConnectionGroup(item)"
ng-class="{expanded: item.isExpanded, empty: !item.children.length, balancer: item.isBalancing}">
<div class="caption">
<!-- Expand/collapse icon -->
<div class="icon expand" ng-click="toggleExpanded(item)"></div>
<ng-include src="connectionGroupTemplate"/>
</div>
<!-- Children of this group -->
<div class="children" ng-if="item.isExpanded">
<div class="list-item" ng-repeat="item in item.children | orderBy : 'name'"
ng-include="'nestedItem.html'"></div>
</div>
</div>
<!-- Sharing profile -->
<div class="sharing-profile" ng-show="isVisibleSharingProfile(item)">
<div class="caption">
<ng-include src="sharingProfileTemplate"/>
</div>
</div>
</script>
<!-- Root-level connections / groups -->

87
guacamole/src/main/webapp/app/groupList/types/GroupListItem.js
View File

@@ -77,43 +77,36 @@ angular.module('groupList').factory('GroupListItem', ['ConnectionGroup', functio
this.children = template.children || [];
/**
* Whether this item represents a connection. If this item represents
* a connection group or sharing profile, this MUST be false.
* The type of object represented by this GroupListItem. Standard types
* are defined by GroupListItem.Type, but custom types are also legal.
*
* @type Boolean
* @type String
*/
this.isConnection = template.isConnection;
this.type = template.type;
/**
* Whether this item represents a connection group. If this item
* represents a connection or sharing profile, this MUST be false.
* Whether this item, or items of the same type, can contain children.
* This may be true even if this particular item does not presently
* contain children.
*
* @type Boolean
*/
this.isConnectionGroup = template.isConnectionGroup;
/**
* Whether this item represents a sharing profile. If this item
* represents a connection or connection group, this MUST be false.
*
* @type Boolean
*/
this.isSharingProfile = template.isSharingProfile;
this.expandable = template.expandable;
/**
* Whether this item represents a balancing connection group.
*
* @type Boolean
*/
this.isBalancing = template.isBalancing;
this.balancing = template.balancing;
/**
* Whether the children items should be displayed.
*
* @type Boolean
*/
this.isExpanded = template.isExpanded;
this.expanded = template.expanded;
/**
* Returns the number of currently active users for this connection,
* connection group, or sharing profile, if known.
@@ -126,9 +119,11 @@ angular.module('groupList').factory('GroupListItem', ['ConnectionGroup', functio
/**
* The connection, connection group, or sharing profile whose data is
* exposed within this GroupListItem.
* exposed within this GroupListItem. If the type of this GroupListItem
* is not one of the types defined by GroupListItem.Type, then this
* value may be anything.
*
* @type Connection|ConnectionGroup|SharingProfile
* @type Connection|ConnectionGroup|SharingProfile|*
*/
this.wrappedItem = template.wrappedItem;
@@ -192,9 +187,8 @@ angular.module('groupList').factory('GroupListItem', ['ConnectionGroup', functio
dataSource : dataSource,
// Type information
isConnection : true,
isConnectionGroup : false,
isSharingProfile : false,
expandable : includeSharingProfiles,
type : GroupListItem.Type.CONNECTION,
// Already-converted children
children : children,
@@ -287,10 +281,9 @@ angular.module('groupList').factory('GroupListItem', ['ConnectionGroup', functio
dataSource : dataSource,
// Type information
isConnection : false,
isConnectionGroup : true,
isSharingProfile : false,
isBalancing : connectionGroup.type === ConnectionGroup.Type.BALANCING,
type : GroupListItem.Type.CONNECTION_GROUP,
balancing : connectionGroup.type === ConnectionGroup.Type.BALANCING,
expandable : true,
// Already-converted children
children : children,
@@ -341,9 +334,7 @@ angular.module('groupList').factory('GroupListItem', ['ConnectionGroup', functio
dataSource : dataSource,
// Type information
isConnection : false,
isConnectionGroup : false,
isSharingProfile : true,
type : GroupListItem.Type.SHARING_PROFILE,
// Wrapped item
wrappedItem : sharingProfile
@@ -352,6 +343,42 @@ angular.module('groupList').factory('GroupListItem', ['ConnectionGroup', functio
};
/**
* All pre-defined types of GroupListItems. Note that, while these are the
* standard types supported by GroupListItem and the related guacGroupList
* directive, the type string is otherwise arbitrary and custom types are
* legal.
*
* @type Object.<String, String>
*/
GroupListItem.Type = {
/**
* The standard type string of a GroupListItem which represents a
* connection.
*
* @type String
*/
CONNECTION : 'connection',
/**
* The standard type string of a GroupListItem which represents a
* connection group.
*
* @type String
*/
CONNECTION_GROUP : 'connection-group',
/**
* The standard type string of a GroupListItem which represents a
* sharing profile.
*
* @type String
*/
SHARING_PROFILE : 'sharing-profile'
};
return GroupListItem;
}]);

7
guacamole/src/main/webapp/app/home/controllers/homeController.js
View File

@@ -26,6 +26,7 @@ angular.module('home').controller('homeController', ['$scope', '$injector',
// Get required types
var ConnectionGroup = $injector.get('ConnectionGroup');
var ClientIdentifier = $injector.get('ClientIdentifier');
var GroupListItem = $injector.get('GroupListItem');
// Get required services
var authenticationService = $injector.get('authenticationService');
@@ -95,15 +96,15 @@ angular.module('home').controller('homeController', ['$scope', '$injector',
getClientIdentifier : function getClientIdentifier(item) {
// If the item is a connection, generate a connection identifier
if (item.isConnection)
if (item.type === GroupListItem.Type.CONNECTION)
return ClientIdentifier.toString({
dataSource : item.dataSource,
type : ClientIdentifier.Types.CONNECTION,
id : item.identifier
});
// If the item is a connection, generate a connection group identifier
if (item.isConnectionGroup)
// If the item is a connection group, generate a connection group identifier
if (item.type === GroupListItem.Type.CONNECTION_GROUP)
return ClientIdentifier.toString({
dataSource : item.dataSource,
type : ClientIdentifier.Types.CONNECTION_GROUP,

5
guacamole/src/main/webapp/app/home/templates/connectionGroup.html
View File

@@ -1,5 +1,4 @@
<span class="name">
<a ng-show="item.isBalancing" ng-href="#/client/{{context.getClientIdentifier(item)}}">{{item.name}}</a>
<span ng-show="!item.isBalancing">{{item.name}}</span>
<a ng-show="item.balancing" ng-href="#/client/{{context.getClientIdentifier(item)}}">{{item.name}}</a>
<span ng-show="!item.balancing">{{item.name}}</span>
</span>

6
guacamole/src/main/webapp/app/home/templates/home.html
View File

@@ -25,8 +25,10 @@
<guac-group-list
context="context"
connection-groups="filteredRootConnectionGroups"
connection-template="'app/home/templates/connection.html'"
connection-group-template="'app/home/templates/connectionGroup.html'"
templates="{
'connection' : 'app/home/templates/connection.html',
'connection-group' : 'app/home/templates/connectionGroup.html'
}"
page-size="20"></guac-group-list>
</div>

8
guacamole/src/main/webapp/app/index/styles/lists.css
View File

@@ -18,28 +18,28 @@
*/
.user,
.group,
.connection-group,
.connection {
cursor: pointer;
}
.user a,
.connection a,
.group a {
.connection-group a {
text-decoration:none;
color: black;
}
.user a:hover,
.connection a:hover,
.group a:hover {
.connection-group a:hover {
text-decoration:none;
color: black;
}
.user a:visited,
.connection a:visited,
.group a:visited {
.connection-group a:visited {
text-decoration:none;
color: black;
}

6
guacamole/src/main/webapp/app/index/styles/ui.css
View File

@@ -178,11 +178,11 @@ div.section {
background-position: center center;
}
.group > .caption .icon {
.connection-group > .caption .icon {
background-image: url('images/folder-closed.png');
}
.group.expanded > .caption .icon {
.connection-group.expanded > .caption .icon {
background-image: url('images/folder-open.png');
}
@@ -213,7 +213,7 @@ div.section {
padding-left: 13px;
}
.group.empty.balancer .icon {
.connection-group.empty.balancer .icon {
background-image: url('images/protocol-icons/guac-monitor.png');
}

4
guacamole/src/main/webapp/app/manage/templates/locationChooser.html
View File

@@ -9,7 +9,9 @@
context="groupListContext"
show-root-group="true"
connection-groups="rootGroups"
connection-group-template="'app/manage/templates/locationChooserConnectionGroup.html'"/>
templates="{
'connection-group' : 'app/manage/templates/locationChooserConnectionGroup.html'
}"/>
</div>
</div>

8
guacamole/src/main/webapp/app/manage/templates/manageUser.html
View File

@@ -78,9 +78,11 @@
<guac-group-list
context="groupListContext"
connection-groups="filteredRootGroups"
connection-template="'app/manage/templates/connectionPermission.html'"
sharing-profile-template="'app/manage/templates/sharingProfilePermission.html'"
connection-group-template="'app/manage/templates/connectionGroupPermission.html'"
templates="{
'connection' : 'app/manage/templates/connectionPermission.html',
'sharing-profile' : 'app/manage/templates/sharingProfilePermission.html',
'connection-group' : 'app/manage/templates/connectionGroupPermission.html'
}"
page-size="20"/>
</div>
</div>

6
guacamole/src/main/webapp/app/settings/templates/settingsConnections.html
View File

@@ -33,7 +33,9 @@
<guac-group-list
page-size="25"
connection-groups="filteredRootGroups"
connection-template="'app/settings/templates/connection.html'"
connection-group-template="'app/settings/templates/connectionGroup.html'"/>
templates="{
'connection' : 'app/settings/templates/connection.html',
'connection-group' : 'app/settings/templates/connectionGroup.html'
}"/>
</div>
</div>