filtering

3 files changed, 65 insertions, 57 deletions

diff --git a/imdb-lookup/html/index-files/css/style.css b/imdb-lookup/html/index-files/css/style.css
index 483d8bb..aa3d234 100644
--- a/imdb-lookup/html/index-files/css/style.css
+++ b/imdb-lookup/html/index-files/css/style.css
@@ -1,5 +1,5 @@
 .box {
- margin: 20px 50px auto;
+ margin: 10px 20px auto;
  border-radius: 5px;
  box-shadow: 0px 0px 15px 0px gray;
  background-color: #fafafa;
@@ -55,7 +55,10 @@
     font-size: 8pt;
     vertical-align: center;
 }
-.headline { font-size: 0.9em; color: 3e3e3e; }
+.headline {
+ font-size: 10pt; 
+ color: 3e3e3e;
+}
 .plot { margin-top: 10px; }
 .consensus { margin-top: 10px; font-style: italic;}
 .box-footer {
diff --git a/imdb-lookup/html/index-files/js/app.js b/imdb-lookup/html/index-files/js/app.js
index 3bba2a1..a3a9632 100644
--- a/imdb-lookup/html/index-files/js/app.js
+++ b/imdb-lookup/html/index-files/js/app.js
@@ -1,8 +1,6 @@
 var App = Ember.Application.create();
 App.ApplicationAdapter = DS.FixtureAdapter.extend();
-
-App.Router.map(function() { // put your routes here
-});
+App.Router.map(function() { });
 
 App.IndexRoute = Ember.Route.extend({
     model: function() {
@@ -12,6 +10,7 @@ App.IndexRoute = Ember.Route.extend({
 
 App.Movie = DS.Model.extend({
     title: DS.attr('string'),
+    summary: DS.attr('string'),
     path: DS.attr('string'),
     poster: DS.attr('string'),
     tagline: DS.attr('string'),
@@ -21,16 +20,14 @@ App.Movie = DS.Model.extend({
     path: DS.attr(),
     tags: DS.attr(),
 
-    imdbRating: DS.attr('int'),
-    imdbVotes: DS.attr('int'),
+    imdbRating: DS.attr('number'),
+    imdbVotes: DS.attr('number'),
 
     omdbTomatoConsensus: DS.attr('string'),
-    omdbTomato: DS.attr('int'),
-    omdbUserTomato: DS.attr('int'),
+    omdbTomatoMeter: DS.attr('number'),
     omdbTomatoRating: DS.attr(),
-    omdbTomatoUserRating: DS.attr(),
 
-    tmdbId: DS.attr('int'),
+    tmdbId: DS.attr('number'),
 
     linkTmdb: function() {
         return "http://www.themoviedb.org/movie/" + this.get('tmdbId');
@@ -52,11 +49,19 @@ App.Movie = DS.Model.extend({
 App.IndexController = Ember.ArrayController.extend({
     page: 1,
     perPage: "10",
+    filterTextEntry: "",
+    filter: "",
     sortAscending: "false",
     sortProperties: function() {
         return [this.get("firstSortProperty")];
     }.property("firstSortProperty"),
     firstSortProperty: "title",
+    possibleSortProperties: [ {value:"title",label:"Title"},
+                              {value:"imdbRating", label:"IMDB Rating"},
+                              {value:"imdbVotes", label:"IMDB Votes"},
+                              {value:"release", label:"Release Year"},
+                              {value:"omdbTomatoMeter", label:"RottenTomatoes Meter %"},
+                              {value:"omdbTomatoRating", label:"RottenTomatoes Rating"}],
     visiblePerPage: ["10", "20", "25", "50", "100", "250", "500"],
     pages: function() {
         var list = [];
@@ -89,19 +94,39 @@ App.IndexController = Ember.ArrayController.extend({
             list.push({number: i, runningLabel: runningLabel, style: style});
         }
         return list;
-    }.property('page','perPage','sortProperties','sortAscending'),
+    }.property('page','perPage','sortProperties','sortAscending','pagesCount'),
     paginatedContent: function() {
         var page = this.get('page');
         return this._getPaginatedContent(page);
-    }.property('arrangedContent.[]', 'page', 'perPage'),
+    }.property('filteredContent.[]', 'page', 'perPage'),
+    filteredContent: function() {
+        var filter = this.get("filter").toUpperCase().split(" ");
+        var content = this.get("arrangedContent");
+        return content.filter(function(movie) {
+            if (movie) {
+                var title = movie.get("title");
+                for (var i = 0; i<filter.length; i++) {
+                    if (title.toUpperCase().indexOf(filter[i]) == -1) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        });
+    }.property('arrangedContent.[]', 'page', 'perPage', 'filter'),
     pagesCount: function() {
-        return Math.ceil(this.get("content.length") / parseInt(this.get("perPage")))
-    }.property('content.[]', 'perPage'),
+        var contentLength = this.get("filteredContent.length") ;
+        if (contentLength == 0) {
+            return 0;
+        } else {
+            return Math.ceil(contentLength / parseInt(this.get("perPage")));
+        }
+    }.property('filteredContent.[]', 'perPage'),
     _getPaginatedContent: function(page) {
         var perPage = parseInt(this.get('perPage'));
         var start   = (page - 1 ) * perPage;
         var end     = page * perPage;
-        return this.get('arrangedContent').slice(start, end)
+        return this.get('filteredContent').slice(start, end)
     },
     actions: {
         setPage: function(property) {
@@ -118,6 +143,9 @@ App.IndexController = Ember.ArrayController.extend({
             if (current > 1) {
                 this.set('page', current-1);
             }
+        },
+        applyFilter: function() {
+            this.set("filter", this.get("filterTextEntry"));
         }
     }
 });
@@ -141,5 +169,5 @@ App.RadioView = Ember.Checkbox.extend({
 function dataCb(data) {
     App.Movie.reopenClass({FIXTURES:data})
 }
-window['dataCb'] = dataCb;
 
+// vim: tabstop=4 expandtab shiftwidth=4 softtabstop=4:
diff --git a/imdb-lookup/html/index.html b/imdb-lookup/html/index.html
index fbce633..deff8b2 100644
--- a/imdb-lookup/html/index.html
+++ b/imdb-lookup/html/index.html
@@ -13,31 +13,17 @@
   <script type="text/x-handlebars" id="index">
   <div class="box">
    <fieldset style="display: inline-block;">
+    <legend>Filter</legend>
+    {{input value=filterTextEntry placeholder="Type to filter.." insert-newline='applyFilter' size="10"}}
+    <button {{action "applyFilter"}}>Go</button>
+   </fieldset>
+   <fieldset style="display: inline-block;">
     <legend>Sort by</legend>
-    <label>
-     {{view "radio" name="sortProperties" value="title" property="firstSortProperty"}}
-     Title
-    </label>
-    <label>
-     {{view "radio" name="sortProperties" value="imdbRating" property="firstSortProperty"}}
-     IMDB Rating 
-    </label>
-    <label>
-     {{view "radio" name="sortProperties" value="imdbVotes" property="firstSortProperty"}}
-     IMDB Votes
-    </label>
-    <label>
-     {{view "radio" name="sortProperties" value="release" property="firstSortProperty"}}
-     Release Year
-    </label>
-    <label>
-     {{view "radio" name="sortProperties" value="omdbTomato" property="firstSortProperty"}}
-     RT Meter %
-    </label>
-    <label>
-     {{view "radio" name="sortProperties" value="omdbTomatoRating" property="firstSortProperty"}}
-     RT Rating
-    </label>
+    {{view "select"
+      content=possibleSortProperties
+      optionValuePath="content.value"
+      optionLabelPath="content.label"
+      value=firstSortProperty}}
    </fieldset>
    <fieldset style="display: inline-block;">
     <legend>Sort Direction</legend>
@@ -87,19 +73,15 @@
         <span class="movie-tag">{{tag}}</span>
         {{/each}}
        </div>
-       <div class="headline">
+       <div class="headline">{{movie.summary}}</div>
        <div class="plot">{{movie.plot}}</div>
        <div class="consensus">{{movie.omdbTomatoConsensus}}</div>
        <table class="details">
-        {{#if movie.website}}
-        <tr>
-         <td colspan="2">
-          ➜ <a {{bind-attr href=movie.website}}>{{movie.website}}</a>
-         </td>
-        </tr>
-        {{/if}}
         <tr>
          <td colspan="2">
+         {{#if movie.website}}
+          ➜ <a {{bind-attr href=movie.website}}>Website</a>
+         {{/if}}
           ➜ <a {{bind-attr href=movie.linkTmdb}} rel="noreferrer">themoviedb.org</a>&ensp;
           ➜ <a {{bind-attr href=movie.linkImdb}} rel="noreferrer">imdb.com</a>&ensp;
           ➜ <a {{bind-attr href=movie.linkLetterboxd}} rel="noreferrer">letterboxd.com</a>&ensp;
@@ -112,19 +94,14 @@
       </td>
       <td class="ratings">
        <table>
+        <tr><td>Release</td><td>{{movie.release}}</td></tr>
         <tr><td>IMDB</td><td>{{movie.imdbRating}}</td></tr>
         <tr><td>IMDB votes</td><td>{{movie.imdbVotes}}</td></tr>
         {{#if movie.omdbTomatoRating}}
         <tr><td>RT</td><td>{{movie.omdbTomatoRating}}</td></tr>
         {{/if}}
-        {{#if movie.omdbTomatoUserRating}}
-        <tr><td>RT User</td><td>{{movie.omdbTomatoUserRating}}</td></tr>
-        {{/if}}
-        {{#if movie.omdbTomato}}
-        <tr><td>Meter</td><td>{{movie.omdbTomato}}%</td></tr>
-        {{/if}}
-        {{#if movie.omdbUserTomato}}
-        <tr><td>Meter User</td><td>{{movie.omdbUserTomato}}%</td></tr>
+        {{#if movie.omdbTomatoMeter}}
+        <tr><td>Meter</td><td>{{movie.omdbTomatoMeter}}%</td></tr>
         {{/if}}
        </table>
       </td>