add upcoming

README.md

@@ -43,6 +43,10 @@ If you hover over an movie, you can click on `Suggestions` to search for recomme
 
 `Trending` will display a list of the current popular movies on TMDb. This list updates daily.
 
+### Upcoming Movies
+
+`Upcoming` will display new movies which will be released soon. TMDb do not yet support regional queries but this is coming soon.
+
 ### Export / Import
 
 Also you can make a backup of all your movies in the settings page. If you click the `EXPORT MOVIES` button, there will be an download for an `json` file. This file
@@ -87,11 +91,9 @@ You can edit your admin account (username and password) in the settings page (li
 
 * Settings
   * Sync scout driver
-* Ajax request for settings
 
 ### Further Development
 
-* Explore upcoming and popular movies
 * Multi User
 * Toggle to display genre or release date?
 * Series and Animes?

backend/app/Http/Controllers/TMDBController.php

@@ -28,4 +28,9 @@
     {
       return $this->tmdb->trending();
     }
+
+    public function upcoming()
+    {
+      return $this->tmdb->upcoming();
+    }
   }

backend/app/Services/TMDB.php

@@ -57,30 +57,14 @@
       return trim(str_replace('3D', '', $title->first()->title));
     }
 
-    /**
-     * Search TMDB for current popular movies.
-     *
-     * @return \Illuminate\Support\Collection
-     */
     public function trending()
     {
-      $response = $this->client->get('/3/movie/popular', ['query' => ['api_key' => $this->apiKey]]);
+      return $this->searchTrendingOrUpcoming('popular');
+    }
 
-      $items = collect($this->createItems($response));
-      $allID = $items->pluck('tmdb_id');
-
-      // Get all movies from trendig which already in database.
-      $inDB = Item::whereIn('tmdb_id', $allID)->get()->toArray();
-
-      // Remove all inDB movies from trending.
-      $filtered = $items->filter(function($item) use ($inDB) {
-        return ! in_array($item['tmdb_id'], array_column($inDB, 'tmdb_id'));
-      });
-
-      $merged = $filtered->merge($inDB);
-
-      // Reset array keys to dispxlay inDB items first.
-      return array_values($merged->reverse()->toArray());
+    public function upcoming()
+    {
+      return $this->searchTrendingOrUpcoming('upcoming');
     }
 
     /**
@@ -116,6 +100,33 @@
       return collect($this->createItems($response));
     }
 
+    /**
+     * Search TMDB for current popular or upcoming movies .
+     *
+     * @param $type
+     * @return array
+     */
+    private function searchTrendingOrUpcoming($type)
+    {
+      $response = $this->client->get('/3/movie/' . $type, ['query' => ['api_key' => $this->apiKey]]);
+
+      $items = collect($this->createItems($response));
+      $allID = $items->pluck('tmdb_id');
+
+      // Get all movies from trendig which already in database.
+      $inDB = Item::whereIn('tmdb_id', $allID)->get()->toArray();
+
+      // Remove all inDB movies from trending.
+      $filtered = $items->filter(function($item) use ($inDB) {
+        return ! in_array($item['tmdb_id'], array_column($inDB, 'tmdb_id'));
+      });
+
+      $merged = $filtered->merge($inDB);
+
+      // Reset array keys to dispxlay inDB items first.
+      return array_values($merged->reverse()->toArray());
+    }
+
     /**
      * @param $response
      * @return array

backend/routes/web.php

@@ -9,6 +9,7 @@
 
     Route::get('/suggestions/{tmdbID}', 'TMDBController@suggestions');
     Route::get('/trending', 'TMDBController@trending');
+    Route::get('/upcoming', 'TMDBController@upcoming');
 
     Route::group(['middleware' => 'auth'], function() {
       Route::get('/export', 'ItemController@export');

client/app/components/Content/Item.vue

@@ -51,8 +51,19 @@
       },
 
       released() {
+        const path = this.$route.path;
         const released = new Date(this.localItem.released * 1000);
 
+        if(path == '/upcoming') {
+          const language = navigator.language || navigator.userLanguage;
+
+          return released.toLocaleDateString(language, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+          });
+        }
+
         return released.getFullYear();
       }
     },

client/app/components/Content/TMDBContent.vue

@@ -44,6 +44,8 @@
           this.initTrending();
         } else if(path == '/suggestions') {
           this.initSuggestions();
+        } else if(path == '/upcoming') {
+          this.initUpcoming();
         }
       },
 
@@ -61,6 +63,13 @@
           this.items = value.body;
           this.SET_LOADING(false);
         });
+      },
+
+      initUpcoming() {
+        this.$http.get(`${config.api}/upcoming`).then(value => {
+          this.items = value.body;
+          this.SET_LOADING(false);
+        });
       }
     },
 

client/app/components/Header.vue

@@ -14,6 +14,7 @@
       <nav class="site-nav">
         <ul>
           <li><router-link to="/trending">Trending</router-link></li>
+          <li><router-link to="/upcoming">Upcoming</router-link></li>
         </ul>
       </nav>
 

client/app/routes.js

@@ -19,6 +19,7 @@ export default new Router({
     { path: '/settings', component: Settings },
     { path: '/suggestions', component: TMDBContent },
     { path: '/trending', component: TMDBContent },
+    { path: '/upcoming', component: TMDBContent },
     { path: '*', component: Content }
   ]
 });

client/resources/sass/components/_header.scss

@@ -96,10 +96,6 @@ header {
   margin: 7px 60px 0 0;
 
   @include media(5) {
-    margin: 7px 20px 0 0;
-  }
-
-  @include media(6) {
     float: left;
     width: 100%;
     margin: 20px 0 0 0;
@@ -125,6 +121,7 @@ header {
     color: #fff;
     text-decoration: none;
     text-transform: uppercase;
+    font-size: 16px;
     border-bottom: 2px solid transparent;
 
     &.router-link-active {
@@ -134,5 +131,9 @@ header {
     &:active {
       opacity: .6;
     }
+
+    @include media(5) {
+      font-size: 14px;
+    }
   }
 }

client/resources/sass/components/_search.scss

@@ -45,7 +45,7 @@
     color: #989898;
   }
 
-  @include media(3) {
+  @include media(5) {
     font-size: 16px;
   }
 }