tech(playlist): convert to typescript

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

@@ -1,14 +1,14 @@
 <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.name}}</a></li>
+		<li ng-class="{active: ctrl.isNew()}" ng-show="ctrl.isNew()"><a href="datasources/create">New</a></li>
+		<li class="active" ng-show="!ctrl.isNew()"><a href="playlists/edit/{{ctrl.playlist.id}}">{{ctrl.playlist.name}}</a></li>
 	</ul>
 </navbar>
 
 <div class="page-container" ng-form="playlistEditForm">
   <div class="page">
-    <h2 ng-show="isNew()">New playlist</h2>
-    <h2 ng-show="!isNew()">Edit playlist</h2>
+    <h2 ng-show="ctrl.isNew()">New playlist</h2>
+    <h2 ng-show="!ctrl.isNew()">Edit playlist</h2>
 
     <h4>Name and interval</h4>
 
@@ -20,7 +20,7 @@
               Name
             </li>
             <li>
-              <input type="text" required ng-model="playlist.name" class="input-xlarge tight-form-input">
+              <input type="text" required ng-model="ctrl.playlist.name" class="input-xlarge tight-form-input">
             </li>
           </ul>
           <div class="clearfix"></div>
@@ -31,7 +31,7 @@
               Interval
             </li>
             <li>
-              <input type="text" required ng-model="playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
+              <input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="input-xlarge tight-form-input">
             </li>
           </ul>
           <div class="clearfix"></div>
@@ -50,10 +50,10 @@
             <li>
               <input type="text"
                      class="tight-form-input input-xlarge last"
-                     ng-model="searchQuery"
+                     ng-model="ctrl.searchQuery"
                      placeholder="dashboard search term"
                      ng-trim="true"
-                     ng-change="search()">
+                     ng-change="ctrl.search()">
             </li>
           </ul>
           <div class="clearfix"></div>
@@ -64,20 +64,20 @@
 
   <div class="row">
     <div class="span5 pull-left">
-			<h5>Search results ({{filteredPlaylistItems.length}})</h5>
+			<h5>Search results ({{ctrl.filteredPlaylistItems.length}})</h5>
        <table class="grafana-options-table">
-        <tr ng-repeat="playlistItem in filteredPlaylistItems">
+        <tr ng-repeat="playlistItem in ctrl.filteredPlaylistItems">
           <td style="white-space: nowrap;">
             {{playlistItem.title}}
           </td>
           <td style="text-align: center">
-            <button class="btn btn-inverse btn-mini pull-right" ng-click="addPlaylistItem(playlistItem)">
+            <button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
               <i class="fa fa-plus"></i>
               Add to playlist
             </button>
           </td>
         </tr>
-        <tr ng-if="isSearchResultsEmpty()">
+        <tr ng-if="ctrl.isSearchResultsEmpty()">
           <td colspan="2">
             <i class="fa fa-warning"></i> Search results empty
           </td>
@@ -87,18 +87,18 @@
     <div class="span5 pull-left">
       <h5>Added dashboards</h5>
       <table class="grafana-options-table">
-        <tr ng-repeat="playlistItem in playlistItems">
+        <tr ng-repeat="playlistItem in ctrl.playlistItems">
           <td style="white-space: nowrap;">
             {{playlistItem.title}}
           </td>
           <td style="text-align: right">
-            <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="movePlaylistItemUp(playlistItem)">
+            <button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
               <i class="fa fa-arrow-up"></i>
             </button>
-            <button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="movePlaylistItemDown(playlistItem)">
+            <button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
               <i class="fa fa-arrow-down"></i>
             </button>
-            <button class="btn btn-inverse btn-mini" ng-click="removePlaylistItem(playlistItem)">
+            <button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
               <i class="fa fa-remove"></i>
             </button>
           </td>
@@ -113,11 +113,11 @@
     <!-- <div class="tight-form"> -->
       <button type="button"
               class="btn btn-success"
-              ng-disabled="playlistEditForm.$invalid || isPlaylistEmpty()"
-              ng-click="savePlaylist(playlist, playlistItems)">Save</button>
+              ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()"
+              ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</button>
       <button type="button"
               class="btn btn-inverse"
-              ng-click="backToList()">Cancel</button>
+              ng-click="ctrl.backToList()">Cancel</button>
     <!-- </div> -->
   </div>
 

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

@@ -19,7 +19,7 @@
         <th style="width: 25px"></th>
 
       </thead>
-      <tr ng-repeat="playlist in playlists">
+      <tr ng-repeat="playlist in ctrl.playlists">
         <td>
 					<a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
         </td>
@@ -39,7 +39,7 @@
           </a>
         </td>
         <td  class="text-right">
-          <a ng-click="removePlaylist(playlist)" class="btn btn-danger btn-mini">
+          <a ng-click="ctrl.removePlaylist(playlist)" class="btn btn-danger btn-mini">
             <i class="fa fa-remove"></i>
           </a>
         </td>

public/app/features/playlist/playlist_edit_ctrl.js

@@ -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();
-  });
-});

public/app/features/playlist/playlist_edit_ctrl.ts

@@ -0,0 +1,141 @@
+///<reference path="../../headers/common.d.ts" />
+
+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);

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', {

public/app/features/playlist/playlists_ctrl.js

@@ -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);
-        }
-      });
-
-    };
-
-  });
-});

public/app/features/playlist/playlists_ctrl.ts

@@ -0,0 +1,45 @@
+///<reference path="../../headers/common.d.ts" />
+
+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);