Proper dates behavior

3 files changed, 41 insertions, 14 deletions

diff --git a/client/button.js b/client/button.js
index 0b3cbfb..27beb28 100644
--- a/client/button.js
+++ b/client/button.js
@@ -107,17 +107,27 @@ Template.login.events({
 });
 
 Template.dates.events({
-  'submit form.dates': function (event) {
+  'click input.monthOptions, click input.yearOptions': function (event) {
     var month = $('input[name=monthOptions]:checked').val();
     var year = $('input[name=yearOptions]:checked').val();
     if (month !== undefined && year !== undefined) {
       Meteor.call('getInstagramMedia', +year, +month, function(error, results) {
-        console.log('Instagram response', results.data)
-        Session.set('photos', results.data.data);
+        console.log('Instagram response', results.data);
+        if (results.data.data.length > 0) {
+          Session.set('photos', results.data.data);
+          $('form.dates div.error').hide();
+          $('form.dates button.dates').show();
+        }
+        else {
+          $('form.dates button.dates').hide();
+          $('form.dates div.error').show();
+        }
       });
-      Router.go('photos');
-      _.delay(animate, 2000);
     }
+  },
+  'submit form.dates': function (event) {
+    Router.go('photos');
+    _.delay(animate, 2000);
     return false;
   }
 })
diff --git a/client/colors.less b/client/colors.less
index 6bb2a50..db572c0 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -98,12 +98,27 @@ body {
               }
             }
           }
-          div.error {
-            color: #2636F9;
-            width: 400px;
+          div.next {
             text-align: center;
-            margin: 0 auto;
-            margin-top: 30px;
+            div.error {
+              color: #2636F9;
+              width: 400px;
+              margin: 0 auto;
+              margin-top: 30px;
+            }
+            button.dates {
+              font-size: 1.2em;
+              width: 130px;
+              margin-top: 20px;
+              color: #2636F9;
+              padding: 7px 35px;
+              background-color: white;
+              border: 1px #2636F9 solid;
+              &:hover, &:active {
+                color: white;
+                background-color: #2636F9;
+              }
+            }
           }
         }
       }
diff --git a/client/templates/dates.html b/client/templates/dates.html
index 8b9a257..2b16a5c 100644
--- a/client/templates/dates.html
+++ b/client/templates/dates.html
@@ -15,8 +15,10 @@
             {{/each}}
           </div>
         </div>
-        <div class="error" style="display: none;">Apparently you don't have enough photos to create a statistic from, please choose another month and try again</div>
-        <button type="submit" class="dates" style="display: none;">Start</button>
+        <div class="next">
+          <div class="error" style="display: none;">Apparently you don't have enough photos to create a statistic from, please choose another month and try again</div>
+          <button type="submit" class="dates" style="display: none;">Start</button>
+        </div>
       </form>
     </div>
   </div>
@@ -32,12 +34,12 @@
 
 <template name="month">
   <div class="month-button">
-    <input type="radio" name="monthOptions" id="monthRadio{{val}}" value="{{val}}">
+    <input type="radio" class="monthOptions" name="monthOptions" id="monthRadio{{val}}" value="{{val}}">
     <label class="radio-inline" for="monthRadio{{val}}">{{name}}</label>
   </div>
 </template>
 
 <template name="year">
-  <input type="radio" name="yearOptions" id="yearRadio{{this}}" value="{{this}}">
+  <input type="radio" class="yearOptions" name="yearOptions" id="yearRadio{{this}}" value="{{this}}">
   <label class="radio-inline" for="yearRadio{{this}}">{{this}}</label>
 </template>