Finished trakt.tv UI and half of the translations (didn't add new key…

…s yet) re #27
SchizoDuckie · Jul 15, 2014 · d685dd5 · d685dd5
1 parent e0b27c4
commit d685dd5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 22 deletions.
diff --git a/_locales/en_us.json b/_locales/en_us.json
@@ -330,11 +330,11 @@
     "TRAKTTV/sync-enabled/lbl": "Enabled",
     "TRAKTTV/sync-encrypt/btn": "Encrypt and store password",
     "TRAKTTV/sync-password/lbl": "Password",
-    "TRAKTTV/sync-read/btn": "Read From Trakt.TV",
+    "TRAKTTV/sync-read/btn": "Import shows and watched episodes From Trakt.TV",
     "TRAKTTV/sync-username/lbl": "Username",
     "TRAKTTV/sync-write/btn": "Push local series and episodes to Trakt.TV",
-    "TRAKTTV/sync/desc": "TraktTV description and instructions to be added here.",
-    "TRAKTTV/sync/hdr": "Experimental!",
+    "TRAKTTV/sync/desc": "If you have a Trakt.TV account, you can have DuckieTV automatically fill itself by passing your credentials below.\nAll your favorite shows and watched episodes will be fetched and added to your favorites list.\n\nIf you enable Trakt.TV Sync all shows that you add and episodes that you mark watched in DuckieTV will automatically synced to your Trakt.TV account.",
+    "TRAKTTV/sync/hdr": "Trakt.TV Sync",
     "TRAKTTV/sync/lbl": "sync",
     "TYPEAHEAD/download/tooltip": "download",
     "TYPEAHEAD/leechers/tooltip": "leechers",

diff --git a/css/main.css b/css/main.css
@@ -928,3 +928,12 @@ calendar-event h2 {
     width: 150px;
     height: 220px;
 }
+
+
+.alert {
+	white-space: pre;
+}
+
+.alert strong {
+	display: block;
+}
diff --git a/js/controllers/TraktTVCtrl.js b/js/controllers/TraktTVCtrl.js
@@ -21,6 +21,13 @@
          }
      };
 
+     $scope.clearCredentials = function() {
+		$scope.credentials.passwordHash = $scope.credentials.password = $scope.credentials.username = null;
+		$rootScope.setSetting('trakttv.passwordHash', null);
+		$rootScope.setSetting('trakttv.username', null);
+
+     }
+
      $scope.isDownloaded = function(tvdb_id) {
          return tvdb_id in $scope.tvdbSeries;
      };
@@ -42,9 +49,11 @@
      };
 
      $scope.getUserSuggestions = function() {
+     	 $scope.traktTVLoading = true;
          TraktTV.getUserSuggestions().then(function(data) {
              console.log("Found user suggestions from Trakt.tV", data);
              $scope.traktTVSuggestions = data;
+             $scope.traktTVLoading = false;
          });
      };
 

diff --git a/templates/settings/default.html b/templates/settings/default.html
@@ -1,8 +1,7 @@
 <table class="table table-condensed table-light" style='background-color: rgba(0,0,0,0.0); color:white;'>
   <tr>
     <td colspan="2" style="border:0">
-      <p class="alert alert-info"> <strong>{{'DEFAULT/manual/hdr'|translate}}</strong><br>
-      {{'DEFAULT/manual/desc'|translate}}
+      <p class="alert alert-info"><strong>{{'DEFAULT/manual/hdr'|translate}}</strong>{{'DEFAULT/manual/desc'|translate}}</p>
     </td>
   </tr>
   <tr>

diff --git a/templates/settings/trakttv.html b/templates/settings/trakttv.html
@@ -10,37 +10,46 @@
           <p class="alert alert-info"><strong>{{'TRAKTTV/sync/hdr'|translate}}</strong> {{'TRAKTTV/sync/desc'|translate}}</p>
           <div ng-controller="TraktTVCtrl">
           <form name="userCredentials">
-            <table style="margin-bottom:10px"><td>
-              <input type='text' name='username' ng-model='credentials.username' placeholder="Trakt.TV {{'TRAKTTV/sync-username/lbl'|translate}}" />
-              <input type='password' name='password' ng-model='credentials.password' placeholder="Trakt.TV {{'TRAKTTV/sync-password/lbl'|translate}}" />
-            </td><td style="padding-left: 10px">
-              <button ng-click='encryptPassword()' class="btn btn-info">{{'TRAKTTV/sync-encrypt/btn'|translate}}</button><br>
-            </td></table>
+            <table style="margin-bottom:10px;">
+            <tr>
+            <td style='padding:10px'>
+              <h3>Trakt.TV Username:</h3> <input type='text' name='username' ng-model='credentials.username' placeholder="Trakt.TV {{'TRAKTTV/sync-username/lbl'|translate}}" />
+              </td>
+            	<td style="padding: 10px">
+              <h3>Trakt.TV Password:</h3> <input type='password' name='password' ng-model='credentials.password' placeholder="Trakt.TV {{'TRAKTTV/sync-password/lbl'|translate}}" />
+            </td><td valign='bottom' style="padding: 10px">
+              <button ng-click='encryptPassword()' class="btn btn-info">{{'TRAKTTV/sync-encrypt/btn'|translate}}</button> <button ng-click="clearCredentials()"  class="btn btn-danger">Clear Credentials<br>
+            </td>
+            </tr></table>
 
             <button class="btn btn-success" style="margin-bottom:10px" ng-if="credentials.passwordHash && !getSetting('trakttv.sync')" ng-click="setSetting('trakttv.sync',true)">Enable TraktTV Watched Sync</button>
             <button class="btn btn-danger" style="margin-bottom:10px" ng-if="credentials.passwordHash && getSetting('trakttv.sync')" ng-click="setSetting('trakttv.sync',false)">Disable TraktTV Watched Sync</button>
-            <br>
-            <!-- 
-             Should these buttons be hidden unless track.tv credentials have been stored?? 
-            -->
-            <button ng-click="readTraktTV()" class="btn btn-success">{{'TRAKTTV/sync-read/btn'|translate}}</button>
-            <button ng-click="pushToTraktTV()" class="btn btn-success">{{'TRAKTTV/sync-write/btn'|translate}}</button><br><br>
-            <button ng-click="getUserSuggestions()" class="btn btn-success">Fetch Trakt.TV suggestions</button>
-
+            <p ng-if="credentials.passwordHash">
+	            <button ng-click="readTraktTV()" class="btn btn-success">{{'TRAKTTV/sync-read/btn'|translate}}</button>
+	            <button ng-click="pushToTraktTV()" class="btn btn-success">{{'TRAKTTV/sync-write/btn'|translate}}</button><br><br>
+          	</p>
           </form>
 
           <div ng-if="traktTVSeries">
              <p ng-repeat="serie in traktTVSeries">Fetched show: {{serie.title}}. Watched episodes: {{ countWatchedEpisodes(serie) }} </p>
-             <serieheader style='display:inline-block;' ng-repeat="serie in traktTVSeries" ng-if="isDownloaded(serie.tvdb_id)" data="getDownloaded(serie.tvdb_id)" no-listbutton=1 no-title=1 no-overview=1>
+             <serieheader style='display:inline-block; margin:5px;' ng-repeat="serie in traktTVSeries" ng-if="isDownloaded(serie.tvdb_id)" data="getDownloaded(serie.tvdb_id)" no-listbutton=1 no-title=1 no-overview=1>
                 <em class="earmark" ng-show="isAdded(serie.tvdb_id)">&check;</em>
                 <em class="earmark" ng-show="isAdding(serie.tvdb_id)"><img src="img/spinner.gif"></em>
              </serieheader>
           </ul>
           </div>
-
+          <div ng-if="!traktTVSuggestions && credentials.passwordHash">
+          	  <div class="alert alert-info">Trakt.TV can also provide TV-Show suggestions based shows you added to your profile. You can fetch them here</p></div>
+              <button ng-click="getUserSuggestions()" class="btn btn-success">Fetch Trakt.TV suggestions</button>
+          </div>
+          <div ng-if="traktTVLoading" style='text-align:center; padding: 40px;'>
+           	<p>Please wait, contacting Trakt.TV</p>
+          	<img src='img/spinner.gif'>
+          </div>
           <div ng-if="traktTVSuggestions">
             <h1>Fetched Suggestions from Trakt.TV based on series your Trakt.TV profile:</h1>
-             <serieheader style='display:inline-block;' ng-repeat="serie in traktTVSuggestions" data="serie" no-listbutton=1 no-title=1 no-overview=1>
+            <p>Click to add a show</p>
+             <serieheader style='display:inline-block; margin:5px;' ng-repeat="serie in traktTVSuggestions" data="serie" no-listbutton=1 no-title=1 no-overview=1>
                 <em class="earmark" ng-show="isAdded(serie.tvdb_id)">&check;</em>
                 <em class="earmark" ng-show="isAdding(serie.tvdb_id)"><img src="img/spinner.gif"></em>
              </serieheader>