From a9480a09f1e7ae6540d1ecaf28cc1da485abe2bb Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Wed, 31 Jul 2019 13:20:39 +0200
Subject: [PATCH] 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 |   8 +-
 app/components/add-contribution/template.hbs | 114 +++++++++++--------
 app/styles/_forms.scss                       |   4 +
 3 files changed, 72 insertions(+), 54 deletions(-)

diff --git a/app/components/add-contribution/component.js b/app/components/add-contribution/component.js
index 4b16e65..6dd293d 100644
--- a/app/components/add-contribution/component.js
+++ b/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');
-      attributes.date = date;
+      const [ date, time ] = attributes.date[0].toISOString().split('T');
+      [ attributes.date, attributes.time ] = [ date, time ];
 
       this.set('inProgress', true);
 
diff --git a/app/components/add-contribution/template.hbs b/app/components/add-contribution/template.hbs
index 8126463..2d2751f 100644
--- a/app/components/add-contribution/template.hbs
+++ b/app/components/add-contribution/template.hbs
@@ -1,54 +1,68 @@
 <form {{action "submit" on="submit"}}>
-  <p>
-    <select required onchange={{action (mut contributorId) value="target.value"}}>
-      <option value="" selected disabled hidden>Contributor</option>
-      {{#each contributors as |contributor|}}
-        <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
-      {{/each}}
-    </select>
-  </p>
-  <p>
-    <select required onchange={{action (mut kind) value="target.value"}}>
-      <option value="" selected disabled hidden>Kind</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>
-      <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
-      <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
-      <option value="special" selected={{eq kind "special"}}>Special</option>
-    </select>
-  </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
-      onChange=(action (mut date))
-    }}
-  </p>
-  <p>
-    {{input type="text"
-            placeholder="500"
-            value=amount
-            class=(if isValidAmount "valid" "")}}
-  </p>
-  <p>
-    {{input type="text"
-            placeholder="Description"
-            value=description
-            class=(if isValidDescription "valid" "")}}
-  </p>
-  <p>
-    {{input type="text"
-            placeholder="URL (optional)"
-            value=url
-            class=(if isValidUrl "valid" "")}}
-  </p>
+  <label>
+    <p class="label">Contributor:</p>
+    <p>
+      <select required onchange={{action (mut contributorId) value="target.value"}}>
+        <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></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>
+        <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
+        <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
+        <option value="special" selected={{eq kind "special"}}>Special</option>
+      </select>
+    </p>
+  </label>
+  <label>
+    <p class="label">Date:</p>
+    <p>
+      {{ember-flatpickr
+        date=date
+        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"
+              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
diff --git a/app/styles/_forms.scss b/app/styles/_forms.scss
index f9e3dd9..75f3067 100644
--- a/app/styles/_forms.scss
+++ b/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;