mark all episodes at once

Author: devfake

README.md

@@ -105,7 +105,6 @@ You can also set options to display release date and/or genre of your own list.
 
 ### Further Development
 
-* Mark all episodes at once
 * Fetch new episodes (maybe option with cron to send user an info mail)
 * Upcoming and trending for tv shows
 * Swap own TMDb service with an package

backend/app/Http/Controllers/ItemController.php

@@ -164,6 +164,12 @@ private function createItem($data, TMDB $tmdb)
       return $item;
     }
 
+    /**
+     * Set an episode as seen/unseen.
+     *
+     * @param $id
+     * @return \Illuminate\Contracts\Routing\ResponseFactory|\Symfony\Component\HttpFoundation\Response
+     */
     public function setSeen($id)
     {
       $episode = Episode::find($id);
@@ -174,6 +180,23 @@ public function setSeen($id)
       }
     }
 
+    /**
+     * Toggle all episodes of an season as seen/unseen.
+     */
+    public function toggleSeason()
+    {
+      $tmdb_id = Input::get('tmdb_id');
+      $season = Input::get('season');
+      $seen = Input::get('seen');
+
+      $episodes = Episode::where('tmdb_id', $tmdb_id)->where('season_number', $season)->get();
+
+      foreach($episodes as $episode) {
+        $episode->seen = $seen;
+        $episode->save();
+      }
+    }
+
     /**
      * Save all episodes of each season.
      *

backend/routes/web.php

@@ -25,6 +25,7 @@
 
       Route::patch('/userdata', 'UserController@changeUserData');
       Route::patch('/set-seen/{id}', 'ItemController@setSeen');
+      Route::patch('/toggle-season', 'ItemController@toggleSeason');
       Route::get('/episodes/{tmdb_id}', 'ItemController@episodes');
 
       Route::get('/search-tmdb', 'TMDBController@search');

client/app/components/Modal/Season.vue

@@ -18,13 +18,13 @@
       </span>
     </div>
 
+    <div class="item-header no-select" v-if=" ! loadingModalData">
+      <span class="header-episode">#</span>
+      <span class="header-name">Name</span>
+      <span class="header-seen" @click="toggleAll()">Toggle all</span>
+    </div>
+
     <div class="modal-content" v-if=" ! loadingModalData">
-      <!--div class="item-header">
-        <span class="header-episode">#</span>
-        <span class="header-name">Name</span>
-        <span></span>
-      </div-->
-      <!-- todo: mark all as read -->
       <div @click="setSeen(episode)" class="modal-item" v-for="(episode, index) in episodes[seasonActiveModal]">
         <span class="modal-episode no-select">E{{ addZero(episode.episode_number) }}</span>
         <span class="modal-name">{{ episode.name }}</span>
@@ -44,9 +44,44 @@
   export default {
     mixins: [Helper],
 
+    computed: {
+      ...mapState({
+        modalType: state => state.modalType,
+        modalData: state => state.modalData,
+        loadingModalData: state => state.loadingModalData,
+        seasonActiveModal: state => state.seasonActiveModal
+      }),
+
+      episodes() {
+        return this.modalData.episodes;
+      }
+    },
+
     methods: {
       ...mapMutations([ 'SET_SEASON_ACTIVE_MODAL', 'CLOSE_MODAL' ]),
 
+      toggleAll() {
+        const season = this.seasonActiveModal;
+        const tmdb_id = this.modalData.episodes[1][0].tmdb_id;
+        const seen = this.seasonCompleted(season);
+
+        this.markAllEpisodes(season, seen);
+
+        http.patch(`${config.api}/toggle-season`, {
+          tmdb_id,
+          season,
+          seen: ! seen
+        });
+      },
+
+      markAllEpisodes(season, seen) {
+        const episodes = this.episodes[season];
+
+        for(let episode of episodes) {
+          episode.seen = ! seen;
+        }
+      },
+
       setSeen(episode) {
         episode.seen = ! episode.seen;
         http.patch(`${config.api}/set-seen/${episode.id}`).catch(error => {
@@ -65,19 +100,6 @@
 
         return true;
       }
-    },
-
-    computed: {
-      ...mapState({
-        modalType: state => state.modalType,
-        modalData: state => state.modalData,
-        loadingModalData: state => state.loadingModalData,
-        seasonActiveModal: state => state.seasonActiveModal
-      }),
-
-      episodes() {
-        return this.modalData.episodes;
-      }
     }
   }
 </script>

client/resources/sass/components/_modal.scss

@@ -98,7 +98,8 @@
 .item-header {
   float: left;
   width: 100%;
-  padding: 10px 10px 0 10px;
+  padding: 10px;
+  background: #2f2f2f;
 
   span {
     float: left;
@@ -113,6 +114,21 @@
   text-align: right;
 }
 
+.header-seen {
+  float: right !important;
+  cursor: pointer;
+
+  @include transition(color);
+
+  &:hover {
+    color: rgba(#fff, .8);
+  }
+
+  &:active {
+    color: rgba(#fff, .4);
+  }
+}
+
 .modal-content-loading {
   padding: 100px 0;
 }