diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 6f47c65568f..ca5cd05a997 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,14 +1,14 @@
-

New playlist

-

Edit playlist

+

New playlist

+

Edit playlist

Name and interval

@@ -20,7 +20,7 @@ Name
  • - +
    • @@ -31,7 +31,7 @@ Interval
  • - +
    • @@ -50,10 +50,10 @@
  • + ng-change="ctrl.search()">
    • @@ -64,20 +64,20 @@
    -
    Search results ({{filteredPlaylistItems.length}})
    +
    Search results ({{ctrl.filteredPlaylistItems.length}})
    - + - + @@ -87,18 +87,18 @@
    Added dashboards
    {{playlistItem.title}} -
    Search results empty
    - + @@ -113,11 +113,11 @@ + ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" + ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save + ng-click="ctrl.backToList()">Cancel diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index a8a4724b34c..4aa7944623c 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -19,7 +19,7 @@ - + @@ -39,7 +39,7 @@ diff --git a/public/app/features/playlist/playlist_edit_ctrl.js b/public/app/features/playlist/playlist_edit_ctrl.js deleted file mode 100644 index 9b493c47d25..00000000000 --- a/public/app/features/playlist/playlist_edit_ctrl.js +++ /dev/null @@ -1,144 +0,0 @@ -define([ - 'angular', - 'app/core/config', - 'lodash' -], -function (angular, config, _) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('PlaylistEditCtrl', function($scope, playlistSrv, backendSrv, $location, $route) { - $scope.filteredPlaylistItems = []; - $scope.foundPlaylistItems = []; - $scope.searchQuery = ''; - $scope.loading = false; - $scope.playlist = { - interval: '10m', - }; - $scope.playlistItems = []; - - $scope.init = function() { - if ($route.current.params.id) { - var playlistId = $route.current.params.id; - - backendSrv.get('/api/playlists/' + playlistId) - .then(function(result) { - $scope.playlist = result; - }); - - backendSrv.get('/api/playlists/' + playlistId + '/items') - .then(function(result) { - $scope.playlistItems = result; - }); - } - - $scope.search(); - }; - - $scope.search = function() { - var query = {limit: 10}; - - if ($scope.searchQuery) { - query.query = $scope.searchQuery; - } - - $scope.loading = true; - - backendSrv.search(query) - .then(function(results) { - $scope.foundPlaylistItems = results; - $scope.filterFoundPlaylistItems(); - }) - .finally(function() { - $scope.loading = false; - }); - }; - - $scope.filterFoundPlaylistItems = function() { - $scope.filteredPlaylistItems = _.reject($scope.foundPlaylistItems, function(playlistItem) { - return _.findWhere($scope.playlistItems, function(listPlaylistItem) { - return parseInt(listPlaylistItem.value) === playlistItem.id; - }); - }); - }; - - $scope.addPlaylistItem = function(playlistItem) { - playlistItem.value = playlistItem.id.toString(); - playlistItem.type = 'dashboard_by_id'; - playlistItem.order = $scope.playlistItems.length + 1; - - $scope.playlistItems.push(playlistItem); - $scope.filterFoundPlaylistItems(); - }; - - $scope.removePlaylistItem = function(playlistItem) { - _.remove($scope.playlistItems, function(listedPlaylistItem) { - return playlistItem === listedPlaylistItem; - }); - $scope.filterFoundPlaylistItems(); - }; - - $scope.savePlaylist = function(playlist, playlistItems) { - var savePromise; - - playlist.items = playlistItems; - - savePromise = playlist.id - ? backendSrv.put('/api/playlists/' + playlist.id, playlist) - : backendSrv.post('/api/playlists', playlist); - - savePromise - .then(function() { - $scope.appEvent('alert-success', ['Playlist saved', '']); - $location.path('/playlists'); - }, function() { - $scope.appEvent('alert-error', ['Unable to save playlist', '']); - }); - }; - - $scope.isNew = function() { - return !$scope.playlist.id; - }; - - $scope.isPlaylistEmpty = function() { - return !$scope.playlistItems.length; - }; - - $scope.isSearchResultsEmpty = function() { - return !$scope.foundPlaylistItems.length; - }; - - $scope.isSearchQueryEmpty = function() { - return $scope.searchQuery === ''; - }; - - $scope.backToList = function() { - $location.path('/playlists'); - }; - - $scope.isLoading = function() { - return $scope.loading; - }; - - $scope.movePlaylistItem = function(playlistItem, offset) { - var currentPosition = $scope.playlistItems.indexOf(playlistItem); - var newPosition = currentPosition + offset; - - if (newPosition >= 0 && newPosition < $scope.playlistItems.length) { - $scope.playlistItems.splice(currentPosition, 1); - $scope.playlistItems.splice(newPosition, 0, playlistItem); - } - }; - - $scope.movePlaylistItemUp = function(playlistItem) { - $scope.movePlaylistItem(playlistItem, -1); - }; - - $scope.movePlaylistItemDown = function(playlistItem) { - $scope.movePlaylistItem(playlistItem, 1); - }; - - $scope.init(); - }); -}); diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts new file mode 100644 index 00000000000..f8f4a29fd5c --- /dev/null +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -0,0 +1,141 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import coreModule from '../../core/core_module'; +import config from 'app/core/config'; + +export class PlaylistEditCtrl { + filteredPlaylistItems: any = []; + foundPlaylistItems: any = []; + searchQuery: string = ''; + loading: boolean = false; + playlist: any = { + interval: '10m', + }; + playlistItems: any = []; + + /** @ngInject */ + constructor(private $scope, private playlistSrv, private backendSrv, private $location, private $route) { + if ($route.current.params.id) { + var playlistId = $route.current.params.id; + + backendSrv.get('/api/playlists/' + playlistId) + .then((result) => { + this.playlist = result; + }); + + backendSrv.get('/api/playlists/' + playlistId + '/items') + .then((result) => { + this.playlistItems = result; + }); + } + + this.search(); + } + + search() { + var query: any = {limit: 10}; + + if (this.searchQuery) { + query.query = this.searchQuery; + } + + this.loading = true; + + this.backendSrv.search(query) + .then((results) => { + this.foundPlaylistItems = results; + this.filterFoundPlaylistItems(); + }) + .finally(() => { + this.loading = false; + }); + }; + + filterFoundPlaylistItems() { + this.filteredPlaylistItems = _.reject(this.foundPlaylistItems, (playlistItem) => { + return _.findWhere(this.playlistItems, (listPlaylistItem) => { + return parseInt(listPlaylistItem.value) === playlistItem.id; + }); + }); + }; + + addPlaylistItem(playlistItem) { + playlistItem.value = playlistItem.id.toString(); + playlistItem.type = 'dashboard_by_id'; + playlistItem.order = this.playlistItems.length + 1; + + this.playlistItems.push(playlistItem); + this.filterFoundPlaylistItems(); + }; + + removePlaylistItem(playlistItem) { + _.remove(this.playlistItems, (listedPlaylistItem) => { + return playlistItem === listedPlaylistItem; + }); + this.filterFoundPlaylistItems(); + }; + + savePlaylist(playlist, playlistItems) { + var savePromise; + + playlist.items = playlistItems; + + savePromise = playlist.id + ? this.backendSrv.put('/api/playlists/' + playlist.id, playlist) + : this.backendSrv.post('/api/playlists', playlist); + + savePromise + .then(() => { + this.$scope.appEvent('alert-success', ['Playlist saved', '']); + this.$location.path('/playlists'); + }, () => { + this.$scope.appEvent('alert-error', ['Unable to save playlist', '']); + }); + }; + + isNew() { + return !this.playlist.id; + }; + + isPlaylistEmpty() { + return !this.playlistItems.length; + }; + + isSearchResultsEmpty() { + return !this.foundPlaylistItems.length; + }; + + isSearchQueryEmpty() { + return this.searchQuery === ''; + }; + + backToList() { + this.$location.path('/playlists'); + }; + + isLoading() { + return this.loading; + }; + + movePlaylistItem(playlistItem, offset) { + var currentPosition = this.playlistItems.indexOf(playlistItem); + var newPosition = currentPosition + offset; + + if (newPosition >= 0 && newPosition < this.playlistItems.length) { + this.playlistItems.splice(currentPosition, 1); + this.playlistItems.splice(newPosition, 0, playlistItem); + } + }; + + movePlaylistItemUp(playlistItem) { + this.movePlaylistItem(playlistItem, -1); + }; + + movePlaylistItemDown(playlistItem) { + this.movePlaylistItem(playlistItem, 1); + }; +} + +coreModule.controller('PlaylistEditCtrl', PlaylistEditCtrl); diff --git a/public/app/features/playlist/playlist_routes.js b/public/app/features/playlist/playlist_routes.js index 2de1f7b30c8..a3f9cc26f8c 100644 --- a/public/app/features/playlist/playlist_routes.js +++ b/public/app/features/playlist/playlist_routes.js @@ -1,4 +1,4 @@ -define([ + define([ 'angular', 'app/core/config', 'lodash' @@ -12,14 +12,17 @@ function (angular) { $routeProvider .when('/playlists', { templateUrl: 'app/features/playlist/partials/playlists.html', + controllerAs: 'ctrl', controller : 'PlaylistsCtrl' }) .when('/playlists/create', { templateUrl: 'app/features/playlist/partials/playlist.html', + controllerAs: 'ctrl', controller : 'PlaylistEditCtrl' }) .when('/playlists/edit/:id', { templateUrl: 'app/features/playlist/partials/playlist.html', + controllerAs: 'ctrl', controller : 'PlaylistEditCtrl' }) .when('/playlists/play/:id', { diff --git a/public/app/features/playlist/playlists_ctrl.js b/public/app/features/playlist/playlists_ctrl.js deleted file mode 100644 index 375492e6772..00000000000 --- a/public/app/features/playlist/playlists_ctrl.js +++ /dev/null @@ -1,43 +0,0 @@ -define([ - 'angular', - 'lodash' -], -function (angular, _) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('PlaylistsCtrl', function($scope, $location, backendSrv) { - backendSrv.get('/api/playlists') - .then(function(result) { - $scope.playlists = result; - }); - - $scope.removePlaylistConfirmed = function(playlist) { - _.remove($scope.playlists, {id: playlist.id}); - - backendSrv.delete('/api/playlists/' + playlist.id) - .then(function() { - $scope.appEvent('alert-success', ['Playlist deleted', '']); - }, function() { - $scope.appEvent('alert-error', ['Unable to delete playlist', '']); - $scope.playlists.push(playlist); - }); - }; - - $scope.removePlaylist = function(playlist) { - - $scope.appEvent('confirm-modal', { - title: 'Confirm delete playlist', - text: 'Are you sure you want to delete playlist ' + playlist.name + '?', - yesText: "Delete", - icon: "fa-warning", - onConfirm: function() { - $scope.removePlaylistConfirmed(playlist); - } - }); - - }; - - }); -}); diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts new file mode 100644 index 00000000000..af687a9698a --- /dev/null +++ b/public/app/features/playlist/playlists_ctrl.ts @@ -0,0 +1,45 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import coreModule from '../../core/core_module'; + +export class PlaylistsCtrl { + playlists: any; + + /** @ngInject */ + constructor(private $scope, private $location, private backendSrv) { + backendSrv.get('/api/playlists') + .then((result) => { + this.playlists = result; + }); + } + + removePlaylistConfirmed(playlist) { + _.remove(this.playlists, { id: playlist.id }); + + this.backendSrv.delete('/api/playlists/' + playlist.id) + .then(() => { + this.$scope.appEvent('alert-success', ['Playlist deleted', '']); + }, () => { + this.$scope.appEvent('alert-error', ['Unable to delete playlist', '']); + this.playlists.push(playlist); + }); + }; + + removePlaylist(playlist) { + + this.$scope.appEvent('confirm-modal', { + title: 'Confirm delete playlist', + text: 'Are you sure you want to delete playlist ' + playlist.name + '?', + yesText: "Delete", + icon: "fa-warning", + onConfirm: () => { + this.removePlaylistConfirmed(playlist); + } + }); + + }; +} + +coreModule.controller('PlaylistsCtrl', PlaylistsCtrl);
    {{playlistItem.title}} - - -
    {{playlist.name}} - +