Skip to content

Instantly share code, notes, and snippets.

@christrotter89

christrotter89/NxjaYa.markdown

Created January 9, 2016 19:08
Show Gist options
  • Save christrotter89/1248de5b684cf94f4860 to your computer and use it in GitHub Desktop.
Save christrotter89/1248de5b684cf94f4860 to your computer and use it in GitHub Desktop.
Download ZIP
NxjaYa
Raw
index.html
<html lang="en" ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
</head>
<body layout="column">
<md-toolbar class="md-whiteframe-1dp">
<div class="md-toolbar-tools">
<div class="md-title">Risk Register - {{company}}</div>
<span flex></span>
<md-button class="md-raised">Download data</md-button>
</div>
</md-toolbar>
<md-content laout="column" flex ng-controller="nutritionController">
<md-card>
<div layout="row" layout-wrap class="checkboxes">
<md-checkbox ng-model="options.autoSelect">Auto Row Select</md-checkbox>
<md-checkbox ng-model="options.largeEditDialog">Lard Edit Dialogs</md-checkbox>
<md-checkbox ng-model="options.rowSelection">Row Selection</md-checkbox>
<md-checkbox ng-model="options.boundaryLinks">Pagination Boundary Links</md-checkbox>
<md-checkbox ng-model="options.pageSelector">Pagination Page Selector</md-checkbox>
</div>
</md-card>
<md-card>
<md-toolbar class="md-table-toolbar md-default" ng-hide="options.rowSelection && selected.length">
<div class="md-toolbar-tools">
<span>Nutrition</span>
<div flex></div>
<md-button ng-click="loadStuff()">Async Operation</md-button>
</div>
</md-toolbar>
<md-toolbar class="md-table-toolbar alternate" ng-show="options.rowSelection && selected.length">
<div class="md-toolbar-tools">
<span>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}} selected</span>
</div>
</md-toolbar>
<md-table-container>
<table md-table md-row-select="options.rowSelection" ng-model="selected" md-progress="promise">
<thead md-head md-order="query.order" md-on-reorder="logOrder">
<tr md-row>
<th md-column ng-repeat="category in categories" md-order-by="category"><span>{{category}}</span></th>
<th md-column md-order-by="comment">
<md-icon>comments</md-icon>
<span>Comments</span>
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="dessert" md-on-select="logItem" md-auto-select="options.autoSelect" ng-disabled="dessert.calories.value > 400" ng-repeat="risk in risks | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
<td md-cell>{{risk.id}}</td>
<td md-cell>{{risk.likelihood}}
<svg height="100" width="100">
<circle class="md-warn" cx="50" cy="50" r="40" fill="rgb(255,87,34)" />
</svg>
</td>
<td md-cell>{{risk.residual}}
<svg height="100" width="100">
<circle class="md-warn" cx="50" cy="50" r="40" fill="rgb(255,87,34)" />
</svg>
</td>
<td md-cell>{{risk.risk}}</td>
<td md-cell>{{risk.impact}}</td>
<td md-cell>{{risk.control}}</td>
<td md-cell hide-gt-xs show-gt-md>{{risk.comments}}</td>
<td md-cell hide-gt-xs show-gt-lg>{{risk.strategy}}</td>
<td md-cell hide-gt-xs show-gt-lg>{{risk.owner}}</td>
<td md-cell ng-click="editComment($event, dessert)" ng-class="{'md-placeholder': !dessert.comment}">
{{dessert.comment || 'Add a comment'}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{desserts.count}}" md-page-select="options.pageSelector" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"></md-table-pagination>
</md-card>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
</body>
</html>
Raw
script.js
angular.module('demoApp', ['ngMaterial', 'md.data.table'])
.config(['$mdThemingProvider', function ($mdThemingProvider) {
'use strict';
$mdThemingProvider.theme('default')
.primaryPalette('blue');
}])
.controller('nutritionController', ['$mdEditDialog', '$q', '$scope', '$timeout', function ($mdEditDialog, $q, $scope, $timeout) {
'use strict';
$scope.selected = [];
$scope.options = {
autoSelect: true,
boundaryLinks: false,
largeEditDialog: false,
pageSelector: false,
rowSelection: true
};
$scope.query = {
order: 'name',
limit: 5,
page: 1
};
$scope.desserts = {
"count": 9,
"data": [
{
"name": "Frozen yogurt",
"type": "Ice cream",
"calories": { "value": 159.0 },
"fat": { "value": 6.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 4.0 },
"sodium": { "value": 87.0 },
"calcium": { "value": 14.0 },
"iron": { "value": 1.0 }
}, {
"name": "Ice cream sandwich",
"type": "Ice cream",
"calories": { "value": 237.0 },
"fat": { "value": 9.0 },
"carbs": { "value": 37.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 129.0 },
"calcium": { "value": 8.0 },
"iron": { "value": 1.0 }
}, {
"name": "Eclair",
"type": "Pastry",
"calories": { "value": 262.0 },
"fat": { "value": 16.0 },
"carbs": { "value": 24.0 },
"protein": { "value": 6.0 },
"sodium": { "value": 337.0 },
"calcium": { "value": 6.0 },
"iron": { "value": 7.0 }
}, {
"name": "Cupcake",
"type": "Pastry",
"calories": { "value": 305.0 },
"fat": { "value": 3.7 },
"carbs": { "value": 67.0 },
"protein": { "value": 4.3 },
"sodium": { "value": 413.0 },
"calcium": { "value": 3.0 },
"iron": { "value": 8.0 }
}, {
"name": "Jelly bean",
"type": "Candy",
"calories": { "value": 375.0 },
"fat": { "value": 0.0 },
"carbs": { "value": 94.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 50.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 0.0 }
}, {
"name": "Lollipop",
"type": "Candy",
"calories": { "value": 392.0 },
"fat": { "value": 0.2 },
"carbs": { "value": 98.0 },
"protein": { "value": 0.0 },
"sodium": { "value": 38.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 2.0 }
}, {
"name": "Honeycomb",
"type": "Other",
"calories": { "value": 408.0 },
"fat": { "value": 3.2 },
"carbs": { "value": 87.0 },
"protein": { "value": 6.5 },
"sodium": { "value": 562.0 },
"calcium": { "value": 0.0 },
"iron": { "value": 45.0 }
}, {
"name": "Donut",
"type": "Pastry",
"calories": { "value": 452.0 },
"fat": { "value": 25.0 },
"carbs": { "value": 51.0 },
"protein": { "value": 4.9 },
"sodium": { "value": 326.0 },
"calcium": { "value": 2.0 },
"iron": { "value": 22.0 }
}, {
"name": "KitKat",
"type": "Candy",
"calories": { "value": 518.0 },
"fat": { "value": 26.0 },
"carbs": { "value": 65.0 },
"protein": { "value": 7.0 },
"sodium": { "value": 54.0 },
"calcium": { "value": 12.0 },
"iron": { "value": 6.0 }
}
]
};
$scope.company = "Gulf Keystone";
$scope.categories = ["id", "Likelihood risk", "Residual risk", "Risk", "Impact", "Control measures", "Other comments", "Risk Strategy", "Risk Owner"];
$scope.risks = [
{"id":"1", "likelihood":"high", "residual": "low", "risk": "Generic geopolitical risk may result in harmful impacts to our operations.", "impact": "Operations may cease resulting in less output.", "control": "Continual monitoring of media for threats that require proactive dialogue.", "comments": "Ongoing expansion of media sources.", "owner": "John Smith", "strategy":""}
];
$scope.editComment = function (event, dessert) {
event.stopPropagation(); // in case autoselect is enabled
var editDialog = {
modelValue: dessert.comment,
placeholder: 'Add a comment',
save: function (input) {
if(input.$modelValue === 'Donald Trump') {
return $q.reject();
}
if(input.$modelValue === 'Bernie Sanders') {
return dessert.comment = 'FEEL THE BERN!'
}
dessert.comment = input.$modelValue;
},
targetEvent: event,
title: 'Add a comment',
validators: {
'md-maxlength': 30
}
};
var promise;
if($scope.options.largeEditDialog) {
promise = $mdEditDialog.large(editDialog);
} else {
promise = $mdEditDialog.small(editDialog);
}
promise.then(function (ctrl) {
var input = ctrl.getInput();
input.$viewChangeListeners.push(function () {
input.$setValidity('test', input.$modelValue !== 'test');
});
});
};
$scope.getTypes = function () {
return ['Candy', 'Ice cream', 'Other', 'Pastry'];
};
$scope.loadStuff = function () {
$scope.promise = $timeout(function () {
// loading
}, 2000);
}
$scope.logItem = function (item) {
console.log(item.name, 'was selected');
};
$scope.logOrder = function (order) {
console.log('order: ', order);
};
$scope.logPagination = function (page, limit) {
console.log('page: ', page);
console.log('limit: ', limit);
}
}]);
Raw
style.css
body,
md-content {
background-color: #f5f5f5 !important;
}
body > md-toolbar {
z-index: 3;
}
md-toolbar.md-table-toolbar.alternate {
color: #1e88e5;
background-color: #e3f2fd;
}
md-toolbar.md-table-toolbar.alternate .md-toolbar-tools {
font-size: 16px;
}
md-card:first-child {
padding: 8px 8px 8px 24px;
}
.checkboxes > md-checkbox {
margin: 0;
padding: 16px;
min-width: 300px;
flex: 0 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment