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