better use of ember-easyForm and validations on create.options-datetime

app/controllers/create/options-datetime.js

@@ -99,20 +99,22 @@ export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
         datetimesCount = this.get('datetimesInputFields'),
         self = this;
     
-    dates.forEach(function(date){
-      var o = {
-        title: date.title,
-        times: Ember.A()
-      };
-      
-      for(var i = 1; i<=datetimesCount; i++) {
-        o.times.pushObject({
-          value: ''
-        });
-      }
-      
-      datetimes.pushObject(self.get('datetimesTimesArray').create({'contents':o}));
-    });
+    if (typeof dates !== 'undefined') {
+      dates.forEach(function(date){
+        var o = {
+          title: date.title,
+          times: Ember.A()
+        };
+
+        for(var i = 1; i<=datetimesCount; i++) {
+          o.times.pushObject({
+            value: ''
+          });
+        }
+
+        datetimes.pushObject(self.get('datetimesTimesArray').create({'contents':o}));
+      });
+    }
 
     return datetimes;
   }.property('options'),
@@ -130,11 +132,7 @@ export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
     }.property('contents.times.@each.value')
   }),
   
-  /*
-   * Checks if input is valid
-   * runs after each changed input time
-   */
-  isValid: function(){
+  enoughTimes: function(){
     var datetimes = this.get('datetimes'),
         self = this,
         isValid = true;
@@ -157,14 +155,6 @@ export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
     return isValid;
   }.property('datetimes.@each.@eachTimesValue'),
   
-  /*
-   * invokes isValid state
-   * used to enable / disabled next button
-   */
-  isNotValid: function(){
-    return !this.get('isValid');
-  }.property('isValid'),
-  
   getHoursAndMinutesFromInput: function(time){
     // try to split time in minutes and hours
     var t;
@@ -196,5 +186,13 @@ export default Ember.ObjectController.extend(Ember.Validations.Mixin, {
     else {
       return false;
     }
+  },
+  
+  validations: {
+    enoughTimes: {
+      acceptance: {
+        message: Ember.I18n.t('create.options-datetime.error.notEnoughTimes')
+      }
+    }
   }
 });

app/lang/translations.js

@@ -7,11 +7,13 @@ export default {
     "create.meta.input.description.label": "description",
     "create.meta.input.description.placeholder": "enter a description if you like",
     "create.next": "next",
-    "create.options.label": "options",
+    "create.options.options.label": "options",
     "create.options.add-another-option": "add another option",
+    "create.options.error.notEnoughOptions": "you must enter atleast two options",
+    "create.options-datetime.datetimes.label": "datetimes",
     "create.options-datetime.more-inputs": "more inputs for time",
     "create.options-datetime.copy-first-line": "copy first line",
-    "create.options.error.notEnoughOptions": "you must enter atleast two options",
+    "create.options-datetime.error.notEnoughTimes": "you must enter atleast one time per date",
     "errors.inclusion": "is not included in the list",
     "errors.exclusion": "is reserved",
     "errors.invalid": "is invalid",
@@ -58,11 +60,13 @@ export default {
     "create.meta.input.description.label": "description",
     "create.meta.input.description.placeholder": "enter a description if you like",
     "create.next": "weiter",
-    "create.options.label": "Optionen",
+    "create.options.options.label": "Optionen",
     "create.options.add-another-option": "Mehr Optionen",
+    "create.options.error.notEnoughOptions": "mindestens zwei Optionen",
+    "create.options-datetime.datetimes.label": "datetimes",
     "create.options-datetime.more-inputs": "Mehr Zeiten eingeben",
     "create.options-datetime.copy-first-line": "Erste Zeile kopieren",
-    "create.options.error.notEnoughOptions": "mindestens zwei Optionen",
+    "create.options-datetime.error.notEnoughTimes": "mindestens eine Zeit pro Tag",
     "errors.inclusion": "is not included in the list",
     "errors.exclusion": "is reserved",
     "errors.invalid": "is invalid",

app/templates/create/options-datetime.hbs

@@ -1,28 +1,34 @@
 <div class="box">
-  <form role="form">
-    <table class="table">
-      <tbody>
-        {{#each datetime in datetimes}}
-          <tr>
-            <td>
-              {{formattedDate datetime.contents.title 'll'}}
-            </td>
-            {{#each time in datetime.contents.times}}
+  {{#form-for controller}}
+    {{#input enoughTimes}}
+      {{label-field enoughTimes
+          textTranslation="create.options-datetime.datetimes.label"
+      }}
+      <table class="table">
+        <tbody>
+          {{#each datetime in datetimes}}
+            <tr>
               <td>
-                <div class="form-group">
-                  {{input value=time.value type="time" class="form-control" step="900"}}
-                </div>
+                {{formattedDate datetime.contents.title 'll'}}
               </td>
-            {{/each}}
-          </tr>
-        {{/each}}
-      </tbody>
-    </table>
-
-    <p class="help-text">
-      Hours and minutes have to be seperated by a color (e.g. 12:30).
-      You have to enter atleast one valid time for each date.
-    </p>
+              {{#each time in datetime.contents.times}}
+                <td>
+                  {{#input time.value}}
+                    {{input-field time.value as='time'
+                        step='900'
+                    }}
+                  {{/input}}
+                </td>
+              {{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+      {{hint-field enoughTimes
+          text="Hours and minutes have to be seperated by a color (e.g. 12:30). You have to enter atleast one valid time for each date."
+      }}
+      {{error-field enoughTimes}}
+    {{/input}}
 
     <div class="form-group">
       <button {{action "moreTimes"}} class="btn btn-default">{{t "create.options-datetime.more-inputs"}}</button>
@@ -32,8 +38,6 @@
       <button {{action "copyFirstLine"}} class="btn btn-default">{{t "create.options-datetime.copy-first-line"}}</button>
     </div>
     
-    <div class="form-group">
-      <button {{action "submitDatetimes"}} class="btn btn-default" {{bind-attr disabled=isNotValid}}>{{t "create.next"}}</button>
-    </div>
-  </form>
+    {{submit 'next'}}
+  {{/form-for}}
 </div>

app/templates/create/options.hbs

@@ -1,8 +1,12 @@
 <div class="box">
   {{#if isMakeAPoll}}
+
     {{#form-for controller}}
+      
       {{#input enoughOptions}}
-        {{label-field enoughOptions}}
+        {{label-field enoughOptions
+            textTranslation="create.options.options.label"
+        }}
         {{#each option in options}}
           {{#input option.title}}
             {{input-field option.title}}
@@ -12,14 +16,19 @@
           {{error-field enoughOptions}}
         {{/if}}
       {{/input}}
+      
       <div class="form-group">
         <button {{action "moreOptions" target="view"}} class="btn btn-default"> add another option </button>
       </div>
+      
       {{submit 'next'}}
+      
     {{/form-for}}
+
   {{/if}}
 
   {{#if isFindADate}}
+    
     <div id="datepicker">
       {{view 'datepicker'}}
     </div>
@@ -35,5 +44,6 @@
       }}
       {{submit 'next'}}
     {{/form-for}}
+    
   {{/if}}
 </div>