Add time input to conribution form

After adding it as a separate field, I figured out that we should use
the same picker, because otherwise we'd have to keep the date in sync
depending on the time zone. Zones are too messy in that regard, and the
date is already normalized to UTC before creating the contribution
record.

closes #141

app/components/add-contribution/component.js

@@ -21,13 +21,13 @@ export default Component.extend({
 
   init () {
     this._super(...arguments);
-    this.set('defaultDate', new Date());
+    this.set('defaultDate', new Date()); // TODO use beginning of current hour
 
     // Default attributes used by reset
     this.set('attributes', {
       contributorId: null,
       kind: null,
-      date: [new Date()],
+      date: this.defaultDate,
       amount: null,
       description: null,
       url: null,
@@ -49,8 +49,8 @@ export default Component.extend({
       }
 
       const attributes = this.getProperties(Object.keys(this.attributes));
-      const [ date/* , time */ ] = attributes.date[0].toISOString().split('T');
+      const [ date, time ] = attributes.date[0].toISOString().split('T');
-      attributes.date = date;
+      [ attributes.date, attributes.time ] = [ date, time ];
 
       this.set('inProgress', true);
 

app/components/add-contribution/template.hbs

@@ -1,54 +1,68 @@
 <form {{action "submit" on="submit"}}>
-  <p>
+  <label>
-    <select required onchange={{action (mut contributorId) value="target.value"}}>
+    <p class="label">Contributor:</p>
-      <option value="" selected disabled hidden>Contributor</option>
+    <p>
-      {{#each contributors as |contributor|}}
+      <select required onchange={{action (mut contributorId) value="target.value"}}>
-        <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
+        <option value="" selected disabled hidden></option>
-      {{/each}}
+        {{#each contributors as |contributor|}}
-    </select>
+          <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
-  </p>
+        {{/each}}
-  <p>
+      </select>
-    <select required onchange={{action (mut kind) value="target.value"}}>
+    </p>
-      <option value="" selected disabled hidden>Kind</option>
+  </label>
-      <option value="community" selected={{eq kind "community"}}>Community</option>
+  <label>
-      <option value="design" selected={{eq kind "design"}}>Design</option>
+    <p class="label">Kind:</p>
-      <option value="dev" selected={{eq kind "dev"}}>Development</option>
+    <p>
-      <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
+      <select required onchange={{action (mut kind) value="target.value"}}>
-      <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
+        <option value="" selected disabled hidden></option>
-      <option value="special" selected={{eq kind "special"}}>Special</option>
+        <option value="community" selected={{eq kind "community"}}>Community</option>
-    </select>
+        <option value="design" selected={{eq kind "design"}}>Design</option>
-  </p>
+        <option value="dev" selected={{eq kind "dev"}}>Development</option>
-  <p>
+        <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
-    {{ember-flatpickr
+        <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
-      allowInput=false
+        <option value="special" selected={{eq kind "special"}}>Special</option>
-      altFormat="F j, Y"
+      </select>
-      altInput=true
+    </p>
-      altInputClass="date-alt"
+  </label>
-      date=date
+  <label>
-      dateFormat="Y-m-d"
+    <p class="label">Date:</p>
-      defaultDate=defaultDate
+    <p>
-      maxDate=defaultDate
+      {{ember-flatpickr
-      onChange=(action (mut date))
+        date=date
-    }}
+        defaultDate=defaultDate
-  </p>
+        maxDate=defaultDate
-  <p>
+        enableTime=true
-    {{input type="text"
+        time_24hr=true
-            placeholder="500"
+        onChange=(action (mut date))
-            value=amount
+      }}
-            class=(if isValidAmount "valid" "")}}
+    </p>
-  </p>
+  </label>
-  <p>
+  <label>
-    {{input type="text"
+    <p class="label">Amount:</p>
-            placeholder="Description"
+    <p>
-            value=description
+      {{input type="text"
-            class=(if isValidDescription "valid" "")}}
+              placeholder="500"
-  </p>
+              value=amount
-  <p>
+              class=(if isValidAmount "valid" "")}}
-    {{input type="text"
+    </p>
-            placeholder="URL (optional)"
+  </label>
-            value=url
+  <label>
-            class=(if isValidUrl "valid" "")}}
+    <p class="label">Description:</p>
-  </p>
+    <p>
+      {{input type="text"
+              value=description
+              class=(if isValidDescription "valid" "")}}
+    </p>
+  </label>
+  <label>
+    <p class="label">URL (optional):</p>
+    <p>
+      {{input type="text"
+              value=url
+              class=(if isValidUrl "valid" "")}}
+    </p>
+  </label>
+
   <p class="actions">
     {{input type="submit"
             disabled=inProgress

app/styles/_forms.scss

@@ -7,6 +7,10 @@ section#add-proposal {
     p {
       margin-bottom: 1.5rem;
 
+      &.label {
+        margin-bottom: .5rem;
+      }
+
       &.actions {
         padding-top: 1.5rem;
         text-align: center;