<!doctype html>
<html ng-app="patternfly.views">
<head>
<!-- PatternFly Styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.14.0/css/patternfly.min.css" rel="stylesheet" media="screen, print" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.14.0/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print" />
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/jquery.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/bootstrap.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/bootstrap-combobox.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/bootstrap-datepicker.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/moment.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/bootstrap-datetimepicker.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/bootstrap-select.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/bootstrap-treeview.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/c3.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/d3.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/patternfly.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/angular.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/angular-sanitize.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/angular-animate.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/ui-bootstrap-tpls.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/angular-bootstrap-prettify.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/lodash.min.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/angular-patternfly.js"></script>
<script src="http://angular-patternfly.rhcloud.com/grunt-scripts/angular-ui-router.min.js"></script>
<script>
angular.module('patternfly.views').controller('ViewCtrl', ['$scope', '$templateCache',
function ($scope, $templateCache) {
$scope.eventText = '';
var handleSelect = function (item, e) {
$scope.eventText = item.name + ' selected\r\n' + $scope.eventText;
};
var handleSelectionChange = function (selectedItems, e) {
$scope.eventText = selectedItems.length + ' items selected\r\n' + $scope.eventText;
};
var handleClick = function (item, e) {
$scope.eventText = item.name + ' clicked\r\n' + $scope.eventText;
};
var handleDblClick = function (item, e) {
$scope.eventText = item.name + ' double clicked\r\n' + $scope.eventText;
};
var handleCheckBoxChange = function (item, selected, e) {
$scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText;
};
var checkDisabledItem = function(item) {
return $scope.showDisabled && (item.name === "John Smith");
};
$scope.enableButtonForItemFn = function(action, item) {
return !((action.name ==='Action 2') && (item.name === "Frank Livingston")) &&
!(action.name === 'Start' && item.started);
};
$scope.updateMenuActionForItemFn = function(action, item) {
if (action.name === 'Another Action') {
action.isVisible = (item.name !== "John Smith");
}
};
$scope.exampleChartConfig = {
'chartId': 'pctChart',
'units': 'GB',
'thresholds': {
'warning':'60',
'error':'90'
}
};
$scope.selectType = 'checkbox';
$scope.updateSelectionType = function() {
if ($scope.selectType === 'checkbox') {
$scope.config.selectItems = false;
$scope.config.showSelectBox = true;
} else if ($scope.selectType === 'row') {
$scope.config.selectItems = true;
$scope.config.showSelectBox = false;
} else {
$scope.config.selectItems = false
$scope.config.showSelectBox = false;
}
};
$scope.showDisabled = false;
$scope.config = {
selectItems: false,
multiSelect: false,
dblClick: false,
selectionMatchProp: 'name',
selectedItems: [],
checkDisabled: checkDisabledItem,
showSelectBox: true,
useExpandingRows: false,
onSelect: handleSelect,
onSelectionChange: handleSelectionChange,
onCheckBoxChange: handleCheckBoxChange,
onClick: handleClick,
onDblClick: handleDblClick
};
$scope.items = [
{
name: "Fred Flintstone",
address: "20 Dinosaur Way",
city: "Bedrock",
state: "Washingstone"
},
{
name: "John Smith",
address: "415 East Main Street",
city: "Norfolk",
state: "Virginia",
disableRowExpansion: true
},
{
name: "Frank Livingston",
address: "234 Elm Street",
city: "Pittsburgh",
state: "Pennsylvania"
},
{
name: "Linda McGovern",
address: "22 Oak Street",
city: "Denver",
state: "Colorado"
},
{
name: "Jim Brown",
address: "72 Bourbon Way",
city: "Nashville",
state: "Tennessee"
},
{
name: "Holly Nichols",
address: "21 Jump Street",
city: "Hollywood",
state: "California"
},
{
name: "Marie Edwards",
address: "17 Cross Street",
city: "Boston",
state: "Massachusetts"
},
{
name: "Pat Thomas",
address: "50 Second Street",
city: "New York",
state: "New York"
},
];
$scope.getMenuClass = function (item) {
var menuClass = "";
if (item.name === "Jim Brown") {
menuClass = 'red';
}
return menuClass;
};
$scope.hideMenuActions = function (item) {
return (item.name === "Marie Edwards");
};
var performAction = function (action, item) {
$scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
};
var startServer = function (action, item) {
$scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
item.started = true;
};
var buttonInclude = '<span class="fa fa-plus"></span>{{actionButton.name}}';
$templateCache.put('my-button-template', buttonInclude);
var startButtonInclude = '<span ng-disabled="item.started">{{item.started ? "Starting" : "Start"}}</span>';
$templateCache.put('start-button-template', startButtonInclude);
$scope.actionButtons = [
{
name: 'Start',
class: 'btn-primary',
include: 'start-button-template',
title: 'Start the server',
actionFn: startServer
},
{
name: 'Action 1',
title: 'Perform an action',
actionFn: performAction
},
{
name: 'Action 2',
title: 'Do something else',
actionFn: performAction
},
{
name: 'Action 3',
include: 'my-button-template',
title: 'Do something special',
actionFn: performAction
}
];
$scope.menuActions = [
{
name: 'Action',
title: 'Perform an action',
actionFn: performAction
},
{
name: 'Another Action',
title: 'Do something else',
actionFn: performAction
},
{
name: 'Disabled Action',
title: 'Unavailable action',
actionFn: performAction,
isDisabled: true
},
{
name: 'Something Else',
title: '',
actionFn: performAction
},
{
isSeparator: true
},
{
name: 'Grouped Action 1',
title: 'Do something',
actionFn: performAction
},
{
name: 'Grouped Action 2',
title: 'Do something similar',
actionFn: performAction
}
];
}
]);
</script>
</head>
<body>
<div ng-controller="ViewCtrl" class="row example-container">
<div class="col-md-12 list-view-container">
<div pf-list-view class="example-list-view" id="exampleListView"
config="config" items="items"
action-buttons="actionButtons"
enable-button-for-item-fn="enableButtonForItemFn"
menu-actions="menuActions"
update-menu-action-for-item-fn="updateMenuActionForItemFn"
menu-class-for-item-fn="getMenuClass"
hide-menu-for-item-fn="hideMenuActions">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
{{item.name}}
</div>
<div class="list-group-item-text">
{{item.address}}
</div>
</div>
<div class="list-view-pf-additional-info">
<div class="list-view-pf-additional-info-item">
{{item.city}}
</div>
<div class="list-view-pf-additional-info-item">
{{item.state}}
</div>
</div>
<list-expanded-content>
<div class="row">
<div class="col-md-3">
<div pf-donut-pct-chart config="exampleChartConfig" data="{'used': '350','total': '1000'}" center-label="'Percent Used'"></div>
</div>
<div class="col-md-9">
<dl class="dl-horizontal">
<dt>Host</dt>
<dd>{{$parent.item.city}}</dd>
<dt>Admin</dt>
<dd>{{$parent.item.name}}</dd>
<dt>Time</dt>
<dd>January 15, 2016 10:45:11 AM</dd>
<dt>Severity</dt>
<dd>Warning</dd>
<dt>Cluster</dt>
<dd>Cluster 1</dd>
</dl>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</list-expanded-content>
</div>
</div>
<hr class="col-md-12">
<div class="col-md-12">
<form role="form">
<div class="form-group">
<label>Selection</label>
</br>
<label class="radio-inline">
<input type="radio" ng-model="selectType" value="checkbox" ng-change="updateSelectionType()">Checkbox</input>
</label>
<label class="radio-inline">
<input type="radio" ng-model="selectType" value="row" ng-change="updateSelectionType()">Row</input>
</label>
<label class="radio-inline">
<input type="radio" ng-model="selectType" value="none" ng-change="updateSelectionType()">None</input>
</label>
</div>
</form>
</div>
<div class="col-md-12">
<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" ng-model="config.dblClick">Double Click</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" ng-model="config.multiSelect" ng-disabled="config.dblClick">Multi Select</input>
</label>
</div>
</form>
</div>
<div class="col-md-12">
<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" ng-model="showDisabled">Show Disabled Rows</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" ng-model="config.useExpandingRows">Show Expanding Rows</input>
</label>
</div>
</form>
</div>
<div class="col-md-12">
<label style="font-weight:normal;vertical-align:center;">Events: </label>
</div>
<div class="col-md-12">
<textarea rows="10" class="col-md-12">{{eventText}}</textarea>
</div>
</div>
</body>
</html>