refactor(playlist): refactor of playlist feature, and PR #3776

public/app/features/playlist/all.js

@@ -1,6 +1,6 @@
 define([
   './playlists_ctrl',
-  './playlistSrv',
+  './playlist_srv',
   './playlist_edit_ctrl',
   './playlist_routes'
 ], function () {});

public/app/features/playlist/partials/playlist.html

@@ -1,7 +1,7 @@
 <navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
 	<ul class="nav">
 		<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
-		<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li>
+		<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a></li>
 	</ul>
 </navbar>
 
@@ -20,7 +20,7 @@
               Name
             </li>
             <li>
-              <input type="text" required ng-model="playlist.title" class="input-xlarge tight-form-input">
+              <input type="text" required ng-model="playlist.name" class="input-xlarge tight-form-input">
             </li>
           </ul>
           <div class="clearfix"></div>

public/app/features/playlist/partials/playlists.html

@@ -1,12 +1,12 @@
-<topnav icon="fa fa-fw fa-list" title="Playlists"></topnav>
+<navbar icon="fa fa-fw fa-list" title="Playlists"></navbar>
 
 <div class="page-container">
   <div class="page-wide">
 
-		<button type="submit" class="btn btn-inverse pull-right" ng-click="createPlaylist()">
+		<a class="btn btn-inverse pull-right" href="playlists/create">
 			<i class="fa fa-plus"></i>
 			New playlist
-		</button>
+		</a>
 
     <h2>Saved playlists</h2>
 
@@ -21,7 +21,7 @@
       </thead>
       <tr ng-repeat="playlist in playlists">
         <td>
-					<a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a>
+					<a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
         </td>
         <td >
 					<a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a>

public/app/features/playlist/playlist_edit_ctrl.js

@@ -13,7 +13,9 @@ function (angular, config, _) {
     $scope.foundPlaylistItems = [];
     $scope.searchQuery = '';
     $scope.loading = false;
-    $scope.playlist = {};
+    $scope.playlist = {
+      interval: '10m',
+    };
     $scope.playlistItems = [];
 
     $scope.init = function() {
@@ -68,7 +70,6 @@ function (angular, config, _) {
 
       $scope.playlistItems.push(playlistItem);
       $scope.filterFoundPlaylistItems();
-
     };
 
     $scope.removePlaylistItem = function(playlistItem) {

public/app/features/playlist/playlist_routes.js

@@ -23,12 +23,9 @@ function (angular) {
         controller : 'PlaylistEditCtrl'
       })
       .when('/playlists/play/:id', {
-        templateUrl: 'app/partials/dashboard.html',
-        controller : 'LoadDashboardCtrl',
         resolve: {
           init: function(playlistSrv, $route) {
             var playlistId = $route.current.params.id;
-
             playlistSrv.start(playlistId);
           }
         }

public/app/features/playlist/playlist_srv.ts

@@ -17,9 +17,7 @@ class PlaylistSrv {
   next() {
     this.$timeout.cancel(this.cancelPromise);
 
-    angular.element(window).unbind('resize');
-
-    if (this.index > this.dashboards.length -1) {
+    if (this.index > this.dashboards.length - 1) {
       this.start(this.playlistId);
     } else {
       var dash = this.dashboards[this.index];
@@ -27,11 +25,11 @@ class PlaylistSrv {
       this.$location.url('dashboard/' + dash.uri);
 
       this.index++;
-      this.cancelPromise = this.$timeout(() => { this.next(); }, this.interval);
+      this.cancelPromise = this.$timeout(() => this.next(), this.interval);
     }
   }
 
-  prevfunction() {
+  prev() {
     this.index = Math.max(this.index - 2, 0);
     this.next();
   }
@@ -41,20 +39,15 @@ class PlaylistSrv {
 
     this.index = 0;
     this.playlistId = playlistId;
-
     this.$rootScope.playlistSrv = this;
 
-    this.backendSrv.get('/api/playlists/' + playlistId)
-      .then((playlist) => {
-        this.backendSrv.get('/api/playlists/' + playlistId + '/dashboards')
-          .then((dashboards) => {
-            this.dashboards = dashboards;
-            this.interval = kbn.interval_to_ms(playlist.interval);
-            this.cancelPromise = this.$timeout(() => { this.next(); }, this.interval);
-
-            this.next();
-          });
+    this.backendSrv.get(`/api/playlists/${playlistId}`).then(playlist => {
+      this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then(dashboards => {
+        this.dashboards = dashboards;
+        this.interval = kbn.interval_to_ms(playlist.interval);
+        this.next();
       });
+    });
   }
 
   stop() {
@@ -62,7 +55,7 @@ class PlaylistSrv {
     this.playlistId = 0;
 
     if (this.cancelPromise) {
-        this.$timeout.cancel(this.cancelPromise);
+      this.$timeout.cancel(this.cancelPromise);
     }
 
     this.$rootScope.playlistSrv = null;

public/app/features/playlist/playlists_ctrl.js

@@ -13,31 +13,31 @@ function (angular, _) {
         $scope.playlists = result;
       });
 
-    $scope.removePlaylist = function(playlist) {
-      var modalScope = $scope.$new(true);
+    $scope.removePlaylistConfirmed = function(playlist) {
+      _.remove($scope.playlists, {id: playlist.id});
 
-      modalScope.playlist = playlist;
-      modalScope.removePlaylist = function() {
-        modalScope.dismiss();
-        _.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.appEvent('show-modal', {
-        src: './app/features/playlist/partials/playlist-remove.html',
-        scope: modalScope
+      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.createPlaylist = function() {
-      $location.path('/playlists/create');
+    $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);
+        }
+      });
+
     };
+
   });
 });