Now with top 10 movies from API.

Author: mikeckennedy

days/093-096-vuejs/movie_exploder/js/fake_data.js

@@ -1,19 +1,6 @@
 movies_temp = {
     "keyword": "top_10",
     "hits": [
-        {
-            "imdb_code": "tt0691996",
-            "title": "Towering Inferno",
-            "director": "John Blanchard",
-            "keywords": [],
-            "duration": 65,
-            "genres": [
-                "comedy"
-            ],
-            "rating": "",
-            "year": 0,
-            "imdb_score": 9.5
-        },
         {
             "imdb_code": "tt0111161",
             "title": "The Shawshank Redemption",
@@ -73,125 +60,6 @@ movies_temp = {
             "year": 0,
             "imdb_score": 9.1
         },
-        {
-            "imdb_code": "tt3082898",
-            "title": "Kickboxer: Vengeance",
-            "director": "John Stockwell",
-            "keywords": [],
-            "duration": 90,
-            "genres": [
-                "action"
-            ],
-            "rating": "",
-            "year": 2016,
-            "imdb_score": 9.1
-        },
-        {
-            "imdb_code": "tt0468569",
-            "title": "The Dark Knight",
-            "director": "Christopher Nolan",
-            "keywords": [
-                "psychopath",
-                "urban setting",
-                "based on comic book",
-                "star died before release",
-                "dc comics"
-            ],
-            "duration": 152,
-            "genres": [
-                "drama",
-                "thriller",
-                "action",
-                "crime"
-            ],
-            "rating": "PG-13",
-            "year": 2008,
-            "imdb_score": 9.0
-        },
-        {
-            "imdb_code": "tt0071562",
-            "title": "The Godfather: Part II",
-            "director": "Francis Ford Coppola",
-            "keywords": [
-                "corrupt politician",
-                "revenge",
-                "lake tahoe nevada",
-                "1950s",
-                "melancholy"
-            ],
-            "duration": 220,
-            "genres": [
-                "drama",
-                "crime"
-            ],
-            "rating": "R",
-            "year": 1974,
-            "imdb_score": 9.0
-        },
-        {
-            "imdb_code": "tt2802850",
-            "title": "Fargo",
-            "director": "",
-            "keywords": [
-                "anthology",
-                "minnesota",
-                "insurance salesman",
-                "police officer",
-                "death"
-            ],
-            "duration": 53,
-            "genres": [
-                "drama",
-                "thriller",
-                "crime"
-            ],
-            "rating": "TV-MA",
-            "year": 0,
-            "imdb_score": 9.0
-        },
-        {
-            "imdb_code": "tt0167260",
-            "title": "The Lord of the Rings: The Return of the King",
-            "director": "Peter Jackson",
-            "keywords": [
-                "epic",
-                "battle",
-                "king",
-                "orc",
-                "ring"
-            ],
-            "duration": 192,
-            "genres": [
-                "drama",
-                "action",
-                "adventure",
-                "fantasy"
-            ],
-            "rating": "PG-13",
-            "year": 2003,
-            "imdb_score": 8.9
-        },
-        {
-            "imdb_code": "tt0108052",
-            "title": "Schindler's List",
-            "director": "Steven Spielberg",
-            "keywords": [
-                "nazi",
-                "german soldier",
-                "jew",
-                "german",
-                "jewish"
-            ],
-            "duration": 185,
-            "genres": [
-                "drama",
-                "history",
-                "biography"
-            ],
-            "rating": "R",
-            "year": 1993,
-            "imdb_score": 8.9
-        }
     ],
     "truncated_results": true
 }

days/093-096-vuejs/movie_exploder/js/site.js

@@ -1,36 +1,62 @@
-// noinspection ES6ModulesDependencies
 
 const base_url = "http://movie_service.talkpython.fm/api/"
 
+// noinspection ES6ModulesDependencies
 app = new Vue({
     el: '#app',
     data: {
         search_text: null,
-        movies: movies_temp.hits,
-        genres: genres_temp,
-        selected_genre: genres_temp[0],
-        no_genre: genres_temp[0],
+        movies: [],
+        genres: [],
+        selected_genre: null,
+        no_genre: "Top movies by genre",
     },
     methods: {
         search: function () {
             let text = this.search_text
+            // noinspection JSUnusedGlobalSymbols
+            this.selected_genre = this.no_genre
             this.load_movies(base_url + "search/" + text)
         },
         top_10: function () {
-            console.log("Would have loaded top 10")
+            // noinspection JSUnusedGlobalSymbols
+            this.selected_genre = this.no_genre
+            this.load_movies(base_url + "movie/top")
         },
         load_genre: function (genre) {
             console.log("Would load " + genre)
         },
         load_movies: function (url) {
             let that = this
+            // noinspection ES6ModulesDependencies, JSUnresolvedVariable
             axios.get(url)
                 .then(function (response) { // handle success
                     that.movies = response.data.hits
                 })
                 .catch(function (error) { // handle error
                     console.log("ERROR! " + error);
                 })
+        },
+        load_all_genres: function() {
+            let that = this
+            // noinspection ES6ModulesDependencies, JSUnresolvedVariable
+            axios.get(base_url + 'movie/genre/all')
+                .then(function (response) { // handle success
+                    let genres = response.data
+                    genres.unshift(that.no_genre)
+                    that.genres = genres
+                    that.selected_genre = that.no_genre
+                })
+                .catch(function (error) { // handle error
+                    console.log("ERROR! " + error);
+                })
+        },
+        init: function() {
+            this.load_all_genres()
+            this.top_10()
         }
     }
 })
+
+app.init()
+