From 71efb8dec6e53e8c9a74613876ec6f30c69c3844 Mon Sep 17 00:00:00 2001
From: sipp11 <sipp11@mycapsules.com>
Date: Tue, 16 Dec 2014 06:48:03 +0700
Subject: [PATCH] wip

---
 index.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++----
 js/app.js  | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 177 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index b947e97..a0469f9 100644
--- a/index.html
+++ b/index.html
@@ -28,10 +28,20 @@
 <script type="text/x-handlebars">
 <div class="container-fluid">
   <div class="row">
-    <div class="col-xs-12 col-sm-6 col-md-6 col-md-offset-3"><h1 class="text-center">Movies <small><a href="//showtimes.everyday.in.th">#ShowtimesTH</a></small></h1></div>
+    <div class="col-lg-8 col-lg-offset-2">
+      <h1 class="text-center">Movies <small><a href="//showtimes.everyday.in.th">#ShowtimesTH</a></small></h1>
+      <ul class="nav nav-pills nav-justified">
+        <li role="presentation">
+          {{#link-to 'nowshowing'}}Now Showing{{/link-to}}</a></li>
+        <li role="presentation">{{#link-to 'comingsoon'}}Coming Soon{{/link-to}}</li>
+        <li role="presentation">{{#link-to 'older'}}Older{{/link-to}}</li>
+      </ul>
+    </div>
   </div>
   <div class="row">
+    <div class="col-lg-12">
     {{outlet}}
+    </div>
   </div>
 
 {{outlet modal}}
@@ -47,7 +57,75 @@
 </script>
 
 <script type="text/x-handlebars" data-template-name="movies">
-<ul id="container">
+<ul id="container" class="col-lg-12">
+{{#each model}}
+<li class="thumbnail">
+  {{#if backdrop_path}}
+  <img src="/img/300x169.gif" alt=""  data-echo="http://image.tmdb.org/t/p/w300{{unbound backdrop_path}}" width="300" height="169" class="img-rounded" {{action 'openInfoModal' this}}>
+  {{else}}
+    {{#if poster_path}}
+      <img src="/img/92x138.gif" alt="" width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="http://image.tmdb.org/t/p/w92{{unbound poster_path}}" />
+    {{else}}
+      {{#if poster_url}}
+      <img src="/img/158x240.gif" alt="" width="158" height="240" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="{{unbound poster_url}}" />
+      {{else}}
+      <img src="/img/92x138.gif" alt="" width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} />
+      {{/if}}
+    {{/if}}
+  {{/if}}
+  <div class="caption">
+    <h4 {{action 'openInfoModal' this}}>{{original_title}}</h4>
+    {{#if tagline.en}}
+      <blockquote class="blockquote-reverse"><footer>{{tagline.en}}</footer></blockquote>
+    {{/if}}
+    {{#each rating}}
+      <span class="small">{{provider}} rating: {{vote_average}} ({{vote_count}} votes)</span>
+    {{/each}}
+    <p>{{#if imdb_id}}<a href="http://www.imdb.com/title/{{unbound imdb_id}}/" class="btn btn-default btn-xs" role="button">IMDb</a> {{/if}}{{#if tmdb_id}}<a href="http://www.themoviedb.org/movie/{{unbound tmdb_id}}/" class="btn btn-default btn-xs">TMDb</a>{{/if}}</p>
+    {{#if release_date}}<span class="small">Release Date: {{format-date release_date}}</span>{{/if}}
+  </div>
+</li>
+{{/each}} 
+</ul>
+</script>
+
+
+
+<script type="text/x-handlebars" data-template-name="comingsoon">
+<ul id="container" class="col-lg-12">
+{{#each model}}
+<li class="thumbnail">
+  {{#if backdrop_path}}
+  <img src="/img/300x169.gif" alt=""  data-echo="http://image.tmdb.org/t/p/w300{{unbound backdrop_path}}" width="300" height="169" class="img-rounded" {{action 'openInfoModal' this}}>
+  {{else}}
+    {{#if poster_path}}
+      <img src="/img/92x138.gif" alt="" width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="http://image.tmdb.org/t/p/w92{{unbound poster_path}}" />
+    {{else}}
+      {{#if poster_url}}
+      <img src="/img/158x240.gif" alt="" width="158" height="240" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="{{unbound poster_url}}" />
+      {{else}}
+      <img src="/img/92x138.gif" alt="" width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} />
+      {{/if}}
+    {{/if}}
+  {{/if}}
+  <div class="caption">
+    <h4 {{action 'openInfoModal' this}}>{{original_title}}</h4>
+    {{#if tagline.en}}
+      <blockquote class="blockquote-reverse"><footer>{{tagline.en}}</footer></blockquote>
+    {{/if}}
+    {{#each rating}}
+      <span class="small">{{provider}} rating: {{vote_average}} ({{vote_count}} votes)</span>
+    {{/each}}
+    <p>{{#if imdb_id}}<a href="http://www.imdb.com/title/{{unbound imdb_id}}/" class="btn btn-default btn-xs" role="button">IMDb</a> {{/if}}{{#if tmdb_id}}<a href="http://www.themoviedb.org/movie/{{unbound tmdb_id}}/" class="btn btn-default btn-xs">TMDb</a>{{/if}}</p>
+    {{#if release_date}}<span class="small">Release Date: {{format-date release_date}}</span>{{/if}}
+  </div>
+</li>
+{{/each}} 
+</ul>
+</script>
+
+<script type="text/x-handlebars" data-template-name="older">
+<ul id="container" class="col-lg-12">
 {{#each model}}
 <li class="thumbnail">
   {{#if backdrop_path}}
@@ -65,13 +143,14 @@
   {{/if}}
   <div class="caption">
     <h4 {{action 'openInfoModal' this}}>{{original_title}}</h4>
-    {{#if tagline}}
-      <blockquote class="blockquote-reverse"><footer>{{tagline}}</footer></blockquote>
+    {{#if tagline.en}}
+      <blockquote class="blockquote-reverse"><footer>{{tagline.en}}</footer></blockquote>
     {{/if}}
     {{#each rating}}
       <span class="small">{{provider}} rating: {{vote_average}} ({{vote_count}} votes)</span>
     {{/each}}
     <p>{{#if imdb_id}}<a href="http://www.imdb.com/title/{{unbound imdb_id}}/" class="btn btn-default btn-xs" role="button">IMDb</a> {{/if}}{{#if tmdb_id}}<a href="http://www.themoviedb.org/movie/{{unbound tmdb_id}}/" class="btn btn-default btn-xs">TMDb</a>{{/if}}</p>
+    {{#if release_date}}<span class="small">Release Date: {{format-date release_date}}</span>{{/if}}
   </div>
 </li>
 {{/each}} 
@@ -88,11 +167,11 @@
 <div class="modal-body">
   <ul>
     <li><strong>Cast</strong>: 
-    {{#each cast}} 
+    {{#each cast.en}} 
       {{this}},
     {{/each}}
     </li>
-    <li><strong>Director</strong>: {{director}}</li>
+    <li><strong>Director</strong>: {{director.en}}</li>
 
     {{#if tmdb}}
       {{#if tmdb.release_date}}<li><strong>Release Date</strong>: {{format-date tmdb.release_date}}</li>{{/if}}
@@ -100,7 +179,7 @@
       {{#if tmdb.runtime}}<li><strong>Runtime</strong>: {{tmdb.runtime}}</li>{{/if}}
     {{/if}}
   </ul>
-  {{#if storyline}}<p>{{storyline}}</p>{{/if}}
+  {{#if storyline.en}}<p>{{storyline.en}}</p>{{/if}}
   <small class="muted">{{_id}}</small>
 </div>
 
diff --git a/js/app.js b/js/app.js
index 7115bec..151b8f5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -21,8 +21,8 @@ App.ApplicationRoute = Ember.Route.extend({
   }
 });
 
-var restUrl = 'http://showtimes.everyday.in.th/api';
-// var restUrl = 'http://localhost:8989';
+// var restUrl = 'http://showtimes.everyday.in.th/api';
+var restUrl = 'http://localhost:5000';
 var today = new Date();
 
 
@@ -33,12 +33,15 @@ App.ApplicationController = Ember.Controller.extend({
 
 App.Router.map(function() {
     this.resource('movies');
+    this.resource('nowshowing');
+    this.resource('comingsoon');
+    this.resource('older');
 });
 
 // redirect '/' to 'groups' by default
 App.IndexRoute = Ember.Route.extend({
-  beforeModel: function() {
-    this.transitionTo('movies');
+  afterModel: function() {
+    this.transitionTo('nowshowing');
   }
 });
 
@@ -88,6 +91,89 @@ App.MoviesRoute = Ember.Route.extend({
     }
 });
 
+App.NowshowingRoute = Ember.Route.extend({
+  model: function(params) {
+    return $.getJSON(restUrl+'/movies/').then(function(data) {
+        return data.objects.map(function(movies) {
+            return movies;
+        });
+    });
+  }
+});
+
+App.ComingsoonRoute = Ember.Route.extend({
+  model: function(params) {
+    return $.getJSON(restUrl+'/movies/comingsoon/').then(function(data) {
+        return data.objects.map(function(movies) {
+            return movies;
+        });
+    });
+  }
+});
+
+App.OlderRoute = Ember.Route.extend({
+  model: function(params) {
+    return $.getJSON(restUrl+'/movies/older/').then(function(data) {
+        return data.objects.map(function(movies) {
+            return movies;
+        });
+    });
+  }
+});
+
+App.ComingsoonView = Ember.View.extend({
+  didInsertElement: function() {
+      Ember.run.next(this, function() {
+          this.$('#container').isotope({
+              layoutMode: 'masonry',
+              itemSelector: '.thumbnail',
+              transitionDuration: '0.7s',
+              isResizeBound: true
+          });
+          echo.init({
+            offset: 100,
+            throttle: 250,
+            unload: false
+          });
+      });
+  }
+});
+
+App.NowshowingView = Ember.View.extend({
+  didInsertElement: function() {
+      Ember.run.next(this, function() {
+          this.$('#container').isotope({
+              layoutMode: 'masonry',
+              itemSelector: '.thumbnail',
+              transitionDuration: '0.7s',
+              isResizeBound: true
+          });
+          echo.init({
+            offset: 100,
+            throttle: 250,
+            unload: false
+          });
+      });
+  }
+});
+App.OlderView = Ember.View.extend({
+  didInsertElement: function() {
+      Ember.run.next(this, function() {
+          this.$('#container').isotope({
+              layoutMode: 'masonry',
+              itemSelector: '.thumbnail',
+              transitionDuration: '0.7s',
+              isResizeBound: true
+          });
+          echo.init({
+            offset: 100,
+            throttle: 250,
+            unload: false
+          });
+      });
+  }
+});
+
 App.MoviesView = Ember.View.extend({
     didInsertElement: function() {
         Ember.run.next(this, function() {
@@ -98,7 +184,7 @@ App.MoviesView = Ember.View.extend({
                 isResizeBound: true
             });
             echo.init({
-              offset: 10,
+              offset: 100,
               throttle: 250,
               unload: false
             });