Added episode controller, updated date picker with click events, expa…

…nded shown information, moved seriedetails to a directive

css/main.css

@@ -153,6 +153,10 @@ serieheader:hover aside {
   background-color: rgba(0,0,0,0.8);
 }
 
+table.light h1 {
+    color:white;
+}
+
 .nobreaks {
   white-space: nowrap;
 }
@@ -352,6 +356,9 @@ input[type=text] {
   background-color: rgba(0,0,0, 0.8);
 }
 
+[date-picker] .event a {
+  color: white;
+}
 
 [date-picker] div.tooltip.bottom {
   width: 500px !important;

js/app.js

@@ -52,6 +52,10 @@ angular.module('SeriesGuide', [
     	templateUrl: 'templates/serie.html',
     	controller: 'SerieCtrl'
     })
+    .when('/serie/:id/episode/:episode', {
+        templateUrl: 'templates/episode.html',
+        controller: 'EpisodeCtrl'
+    })
     .when('/settings', {
       templateUrl: 'templates/settings.html',
       controller: 'SettingsCtrl'

js/controllers.js

@@ -84,6 +84,61 @@ angular.module('SeriesGuide.controllers', ['ngAnimate'])
 })
 
 
+.controller('EpisodeCtrl',  
+
+	function(TheTVDB, ThePirateBay, FavoritesService, $routeParams, $scope) {
+		console.log('Episodes controller!', $routeParams.id, $routeParams.episode, $scope, TheTVDB);
+
+		$scope.searching = false;
+		var currentDate = new Date();
+
+		CRUD.FindOne('Serie', { 'TVDB_ID': $routeParams.id }).then(function(serie) {
+			$scope.serie = serie.asObject();
+			serie.Find("Episode", { ID_Episode: $routeParams.episode}).then(function(epi) {
+						$scope.episode = epi[0].asObject();
+						$scope.$digest();
+					}, function(err) {
+						debugger;
+						console.log("Episodes booh!", err);
+				});
+		}, function(err) { debugger; })
+
+
+		/**
+		 * Check if airdate has passed
+		 */
+		$scope.hasAired = function(serie) {
+			return serie.firstaired && new Date(serie.firstaired) <= currentDate;
+		};
+
+		$scope.getSearchString = function(serie, episode) {
+
+			return serie.name+' '+$scope.getEpisodeNumber(episode);
+		};
+
+		$scope.getEpisodeNumber = function(episode) {
+			var sn = episode.seasonnumber.toString(), en = episode.episodenumber.toString(), out = ['S', sn.length == 1 ? '0'+sn : sn, 'E', en.length == 1 ? '0'+en : en].join('');
+			return out;
+		}
+
+		$scope.searchTPB = function(serie, episode) {
+			$scope.items = [];
+			$scope.searching = true;
+			var search = $scope.getSearchString(serie, episode);
+			console.log("Search: ", search);
+			 ThePirateBay.search(search).then(function(results) {
+			 	$scope.items = results;
+			 	$scope.searching = false;
+			 	console.log('Added episodes: ', $scope);
+			 }, function(e) { 
+			 	console.error("TPB search failed!"); 
+			 	$scope.searching = false; 
+			 });
+		}
+
+})
+
+
 .controller('SettingsCtrl', 
   function($scope, $location, UserService) {
     $scope.user = UserService.user;

js/directives.js

@@ -11,3 +11,11 @@
     templateUrl: "templates/serieHeader.html"
  }
 })
+
+.directive('serieDetails', function() {
+  return {
+    restrict: 'E',
+    scope: { 'serie': '=serie' },
+    templateUrl: "templates/serieDetails.html"
+ }
+})

js/seriesguide.calendar.js

@@ -28,6 +28,14 @@ angular.module('SeriesGuide.calendar', ['SeriesGuide.providers','ngAnimate'])
     }
 })
 
+.directive('calendarEvent', function() {
+ return {
+      restrict: 'E',
+      scope: { event:'='},
+      templateUrl: 'templates/event.html'
+    }
+})
+
 .directive('calendar', function (FavoritesService, CalendarEvents, $rootScope)  {
 
    this.update = function($rootScope) {
@@ -46,8 +54,8 @@ angular.module('SeriesGuide.calendar', ['SeriesGuide.providers','ngAnimate'])
                 events.push({
                   start : new Date(data[i].get('firstaired')), 
                   serie: cache[data[i].get('ID_Serie')].get('name'),
-                  episode: data[i],
-                  templateUrl: 'templates/calendar.episode'
+                  serieID: cache[data[i].get('ID_Serie')].get('TVDB_ID'),
+                  episode: data[i]
                 });
              }
              CalendarEvents.setEvents(events);
@@ -76,6 +84,10 @@ angular.module('SeriesGuide.calendar', ['SeriesGuide.providers','ngAnimate'])
         $rootScope.$on('episodes:updated', function(event) {
           this.update();
         });
+
+        $rootScope.eventClick = function(evt) {
+          console.debug("vent click!", evt);
+        }
       },
     };
 });

js/vendor/datePicker.js

@@ -22,8 +22,8 @@ function getVisibleMinutes(date, step) {
 }
 
 function getVisibleWeeks(date) {
-  var startMonth = date.getMonth();
   date = new Date(date || new Date());
+  var startMonth = date.getMonth();
   date.setDate(1);
   date.setHours(0);
   date.setMinutes(0);

tab.html

@@ -18,8 +18,6 @@
       </ul>
     </div>
   </div>
-  <script src='./js/vendor/jquery.min.js'></script>
-
   <script src='./js/vendor/promise-3.2.0.js'></script>
   <script src='./js/vendor/CRUD.js'></script>
   <script src='./js/vendor/CRUD.SqliteAdapter.js'></script>

templates/datepicker.html

@@ -18,10 +18,7 @@
             ng-class="{'now':isNow(day),'active':isSameDay(day),'disabled':(day.getMonth()!=date.getMonth()),'after':isAfter(day),'before':isBefore(day)}"
             ng-bind="day.getDate()">
             </span>
-            <div class="event" ng-if="hasEvent(day)" ng-repeat="event in getEvents(day)" ng-click="eventClick(event)" tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-html-unsafe="<h2>{{event.serie}} {{event.episode.getFormattedEpisode()}}</h2><p>{{event.episode.get('episodename')}}</p><p>{{event.episode.get('overview')}}</p>">
-                {{ event.serie }}
-            </div>
-
+            <calendar-event event="event" ng-if="hasEvent(day)" ng-repeat="event in getEvents(day)"></calendar-event>
         </td>
       </tr>
       </tbody>

templates/episode.html

@@ -0,0 +1,58 @@
+<serieHeader no-button=1 data="serie" class="full"></serieHeader>
+
+<div class="row serie">
+  <div class="col-md-8">
+  <table class="table table-condensed light" style='margin-top: 20px; border: 1px solid #efefef; border-collapse:collapse;'>
+	<tbody  ng-if="!episode">
+	<tr>
+		<td>Fetching episode</td>
+	</tr>
+	</tbody>
+	<tbody ng-if="episode">
+		<tr><td colspan="2" ng-style="{ 'text-decoration': episode.downloaded ? 'line-through' : 'none'}"><h3> <div class="dropdown" style='display:inline-block'>
+				     <a ng-if="hasAired(episode)" ng-click="searchTPB(serie, episode)" class="dropdown dropdown-toggle"><img src="img/icon-magnet.png"/></a>
+				       <div class="dropdown-menu" style='width: 550px'>
+						   <table>
+						   		<tr ng-if="searching">
+						   			<td><p>Searching Thepiratebay
+						   			 please wait.</p></td>
+						   		</tr>
+						   		<tr ng-if="!searching && items.length == 0">
+						   			<td >
+						   				<p>No results found for</p>
+						   				<strong>{{ getSearchString(serie, episode) }} </strong>
+						   				<p>Do you want to try an alternative tpb search?</p>
+						   				<button ng-click="searchmanual(getSearchString(serie, episode))">Seach manually</button>
+						   			</td>
+						   		</tr>
+						   		<tr ng-if="!searching && items.length > 0 ">
+						   			<th>&nbsp;</th><th>name</th><th>S</th><th>L</th>
+						   		</tr>
+								<tr ng-if="!searching && items.length > 0 " ng-repeat="seed in items">
+									<td style='width:30px; padding:5px;' ng-bind-html="seed.magnetlink.replace('static/', '/') | unsafe"></td>
+								    <td ng-bind-html="seed.releasename | unsafe"></td>
+								    <td style='width:50px' ng-bind="seed.seeders"></td>
+								    <td style='width:50px'ng-bind="seed.leechers"></td>
+							    </tr>
+							</table>	
+						</div>
+				</div>{{getEpisodeNumber(episode)}} - {{ episode.episodename }}</h3>
+		</td></tr>
+		<tr><td colspan="2">
+			<div style='float:left; width: 300px; height:180px; background-size:contain; background-repeat:no-repeat; margin: 10px; ' lazy-background="http://thetvdb.com/banners/{{episode.filename}}"></div>
+		{{episode.overview}}
+
+		</td></tr>
+		<tr><th>writer</th><td>{{episode.writer}}</td></tr>
+		<tr><th>director</th><td>{{episode.director}}</td></tr>
+		<tr><th>gueststars</th><td>{{episode.gueststars}}</td></tr>
+		<tr><th>firstaired</th><td>{{episode.firstaired|date:'dd-MM-yyyy'}}</td></tr>
+		<tr><th>rating</th><td>{{episode.rating}} ({{episode.ratingcount}} ratings)</td></tr>
+		<tr><th>lastupdated</th><td>{{episode.lastupdated|date:'dd-MM-yyyy'}}</td></tr>
+	  </tbody>
+	</table>
+	</div>
+	<div class="col-md-4">
+		<serie-details serie="serie"></serie-info>
+	</div>
+</div>

templates/event.html

@@ -0,0 +1,3 @@
+  <div class="event" tooltip-placement="bottom" tooltip-popup-delay="800" tooltip-html-unsafe="<h2>{{event.serie.name}} {{event.episode.getFormattedEpisode()}}</h2><p>{{event.episode.get('episodename')}}</p><p>{{event.episode.get('overview')}}</p>">
+      <a href='#/serie/{{event.serieID}}/episode/{{event.episode.getID()}}'>{{ event.serie }}</a>
+  </div>

templates/serie.html

@@ -17,7 +17,9 @@ <h1># of episodes : {{ episodes.length }}</h1>
 			<th>Download</th>
 		</tr>
 		<tr ng-repeat="episode in episodes | orderBy: getEpisodeNumber:true">
-		   	 <td ng-style="{ 'text-decoration': episode.downloaded ? 'line-through' : 'none'}">{{getEpisodeNumber(episode)}}</td>
+		   	 <td ng-style="{ 'text-decoration': episode.downloaded ? 'line-through' : 'none'}">
+		   	 <a href="#/serie/{{serie['TVDB_ID']}}/episode/{{episode.ID_Episode}}">{{getEpisodeNumber(episode)}}</a>
+		   	 </td>
 		     <td>{{ episode.episodename }}</td>
 		     <td class="nobreaks">{{ episode.firstaired | date:'dd-MM-yyyy'}}</td>
 		     <td>
@@ -53,7 +55,8 @@ <h1># of episodes : {{ episodes.length }}</h1>
 		</tbody>
 	</table>
 	</div>
-	<div class="col-md-6">
-		<h1>Series info</h1>
+	<div class="col-md-2"></div>
+	<div class="col-md-4">
+		<serie-details serie="serie"></serie-info>
 	</div>
 </div>