valence-connect
Version:
Connect to Valence for requests coming from applications running in the Valence Portal
104 lines • 6.27 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular Grid - Material Design</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet"
href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.1-master-a687bfc/angular-material.css">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css">
<link rel="stylesheet" href="resources/app.css">
<script src="VBASEURL/resources/valence.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.js"></script>
<script src="https://angular-data-grid.github.io/dist/pagination.js"></script>
<script src="https://angular-data-grid.github.io/dist/dataGrid.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="customersApp" ng-controller="customersAppController" ng-cloak>
<div layout="column" layout-fill>
<md-content layout-padding layout="row" layout-align="center">
<div flex-gt-md="60" flex-md="80" flex-xs="100">
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
<div layout-gt-sm="row" layout-sm="column" layout-align="end center">
<div flex-gt-sm="75" flex-xs="100">
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination mdl-shadow--2dp"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
<md-select ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<md-option>10</md-option>
<md-option>25</md-option>
<md-option>50</md-option>
<md-option>75</md-option>
</md-select>
</md-input-container>
</div>
</div>
</div>
<div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th sortable="NUMBER" class="sortable">
<span>Customer #</span>
</th>
<th sortable="NAME" class="sortable">
<span>Name</span>
</th>
<th sortable='CITY' class="sortable">
<span>City</span>
</th>
<th sortable='STATE' class="sortable">
<span>State</span>
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td class="mdl-data-table__cell--non-numeric">
<span ng-bind="item.NUMBER"></span>
</td>
<td ng-bind="item.NAME"></td>
<td ng-bind="item.CITY"></td>
<td ng-bind="item.STATE"></td>
</tr>
</tbody>
</table>
</div>
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
<md-select ng-init="paginationOptions.itemsPerPage = '10'"
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<md-option>10</md-option>
<md-option>25</md-option>
<md-option>50</md-option>
<md-option>75</md-option>
</md-select>
</md-input-container>
</div>
</div>
</div>
</md-content>
</div>
</body>
</html>