Making select menu for refresh choice look nicer

This commit is contained in:
luke14free 2016-11-18 17:40:04 +01:00 committed by Arik Fraimovich
parent 21cfa35211
commit 4c3de76ea1
2 changed files with 35 additions and 34 deletions

View File

@ -1,21 +1,20 @@
<div class="container"> <div class="container">
<page-header title="{{$ctrl.dashboard.name}}"> <page-header title="{{$ctrl.dashboard.name}}">
<div class='row'>
<div class='col-lg-6'>
<ui-select ng-model="$ctrl.refreshRate" on-select="$ctrl.loadDashboard(true); $ctrl.autoRefresh()">
<ui-select-match>
<span><i class="zmdi zmdi-refresh"></i>&nbsp; {{$select.selected.name}}</span>
</ui-select-match>
<ui-select-choices repeat="item in ($ctrl.refreshRates | filter: $select.search) track by item.name">
<span><i class="zmdi zmdi-refresh"></i>&nbsp; {{item.name}}</span>
</ui-select-choices>
</ui-select>
</div>
<div class='col-lg-6'>
<span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print"> <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
<button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Refresh all once" ng-click="$ctrl.loadDashboard(true)"> <div class="btn-group" uib-dropdown>
<span class="zmdi zmdi-refresh"></span> <button id="split-button" type="button" class="btn btn-default" ng-click="$ctrl.loadDashboard(true)">
{{$ctrl.refreshRate === null ? 'Refresh' : $ctrl.refreshRate.name}}
</button> </button>
<button type="button" class="btn btn-default" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" ng-model="$ctrl.refreshRate" uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem" ng-repeat="refreshRate in $ctrl.refreshRates">
<a href="#" ng-click="$ctrl.setRefreshRate(refreshRate)">{{refreshRate.name}}</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()"> <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()">
<span class="zmdi zmdi-fullscreen"></span> <span class="zmdi zmdi-fullscreen"></span>
</button> </button>
@ -34,8 +33,6 @@
<li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.archiveDashboard()">Archive Dashboard</a></li> <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.archiveDashboard()">Archive Dashboard</a></li>
</ul> </ul>
</div> </div>
</div>
</div>
</page-header> </page-header>
<div class="col-lg-12 p-5 m-b-10 bg-orange c-white" ng-if="$ctrl.dashboard.is_archived"> <div class="col-lg-12 p-5 m-b-10 bg-orange c-white" ng-if="$ctrl.dashboard.is_archived">

View File

@ -6,11 +6,10 @@ function DashboardCtrl($routeParams, $location, $timeout, $q, $uibModal,
AlertDialog, Dashboard, currentUser, clientConfig, Events) { AlertDialog, Dashboard, currentUser, clientConfig, Events) {
this.refreshEnabled = false; this.refreshEnabled = false;
this.isFullscreen = false; this.isFullscreen = false;
this.refreshRate = { name: 'no auto refresh', rate: 0 }; this.refreshRate = null;
this.showPermissionsControl = clientConfig.showPermissionsControl; this.showPermissionsControl = clientConfig.showPermissionsControl;
this.currentUser = currentUser; this.currentUser = currentUser;
this.refreshRates = [ this.refreshRates = [
{ name: 'no auto refresh', rate: 0 },
{ name: '10 seconds', rate: 10 }, { name: '10 seconds', rate: 10 },
{ name: '30 seconds', rate: 30 }, { name: '30 seconds', rate: 30 },
{ name: '1 minute', rate: 60 }, { name: '1 minute', rate: 60 },
@ -20,6 +19,11 @@ function DashboardCtrl($routeParams, $location, $timeout, $q, $uibModal,
{ name: '1 hour', rate: 60 * 60 }, { name: '1 hour', rate: 60 * 60 },
]; ];
this.setRefreshRate = (rate) => {
this.refreshRate = rate;
this.loadDashboard(true);
this.autoRefresh();
};
const renderDashboard = (dashboard, force) => { const renderDashboard = (dashboard, force) => {
// $scope.$parent.pageTitle = dashboard.name; // $scope.$parent.pageTitle = dashboard.name;