Add time picker

src/itinerary/ItineraryIndex.jsx

@@ -89,9 +89,10 @@ class ItineraryIndex extends Component {
       time: time
     })
   }
-  setDate(date) {
+  setDate(date, time) {
     this.setState({
-      date: date
+      date: date, 
+      time: time
     })
     console.log('parent set date', date)
   }
@@ -105,7 +106,7 @@ class ItineraryIndex extends Component {
           <FavoriteBar favCards={this.state.favCards} add={this.add.bind(this)} />
         </div>
         <div className="welcome">
-          <Set setDate={this.setDate.bind(this)} />
+          <Set setDate={this.setDate.bind(this)}/>
           <h3 className="title is-3">{this.state.date.format('LL')}</h3>
         </div>
         <div className="columns">

src/itinerary/Set.jsx

@@ -6,7 +6,7 @@ class Set extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      startDate: moment()
+      startDate: moment(),
     };
     this.handleChange = this.handleChange.bind(this);
   }
@@ -16,6 +16,9 @@ class Set extends Component {
       startDate: date
     });
   }
+  handleInput(time) {
+    console.log(time)
+  }
   toggleActive() {
     this.setState({
       isActive: !this.state.isActive
@@ -49,20 +52,18 @@ class Set extends Component {
                 selected={this.state.startDate}
                 onChange={this.handleChange}
               />
-            </section>
-            <section className="modal-card-foot">
-              <div className="column">
-                <div className="control has-text-centered">
-                  <button type="submit" value="submit" className="button" onClick={this.submitDate.bind(this)}>Submit</button>
+                <div className="column">
+                  <div className="control has-text-centered">
+                    <button type="submit" value="submit" className="button" onClick={this.submitDate.bind(this)}>Submit</button>
+                  </div>
                 </div>
-              </div>
             </section>
-            <div>
-            </div>
+              <div>
+              </div>
+              </div>
           </div>
         </div>
-      </div>
-    );
+        );
   }
 }
 

src/itinerary/TimeSet.jsx

@@ -1,24 +1,63 @@
 import React, { Component } from 'react';
 
 class TimeSet extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      startTime: 9
+    };
+  }
   render() {
-    const timeArray = this.props.time;
-    console.log('time in timeset is', parseInt(this.props.time))
-    const cardArray = this.props.card
-    console.log(cardArray)
     return (
-      <div className="has-text-centered">
-         {
-          timeArray.map((time) => {
-            return <div className="time" >
-               <h6 className="title is-6">{`${time} : 00`}</h6>
-            </div>;
-          })
-        } 
+      <div className="time-input">
+        <input className="input" type="number" placeholder="9" onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            console.log('new time!!!!!', event.target.value)
+          }
+        }} />
+        <div className="select is-multiple"onClick={(event) => {
+              if (event.key === 'Enter') {
+                console.log('new time!!!!!', event.target.value)
+              }
+            }}>
+          <select multiple size="2">
+            <option value="AM" onClick={(event) => {
+              if (event.key === 'Enter') {
+                console.log('new time!!!!!', event.target.value)
+              }
+            }}>AM</option>
+            <option value="PM" onClick={(event) => {
+              if (event.key === 'Enter') {
+                console.log('new time!!!!!', event.target.value)
+              }
+            }}>PM</option>
+          </select>
         </div>
+      </div>
     );
   }
 }
 
 export default TimeSet;
-
+// Logic for rendering times based on start time and duration of card 
+//       <div className="has-text-centered">
+//          {
+//           timeArray.map((time) => {
+//             if(time === 9){
+//                return <div className="time">
+//                <h6 className="title is-6">{`${time} : 00`}</h6>
+//             </div>;
+//             } else {
+//               return <div className="time" style={{marginTop: time*12 + 'px'}}>
+//                <h6 className="title is-6">{`${time} : 00`}</h6>
+//             </div>;
+//             }
+//           })
+//         } 
+//         </div>
+//     );
+//   }
+// }
+      // <div className="time has-text-centered">
+      //   <h6 className="title is-6">{this.props.time} : 00</h6>
+      // </div>

src/itinerary/dnd/SortableComponent.jsx

@@ -87,6 +87,7 @@ class SortableComponent extends Component {
   render() {
 
     const items = this.props.cards;
+    console.log('items are', items)
     const renderedItems = this.state.items.map(card =>
           <div className='box'>
             <article className='media large'>
@@ -99,9 +100,8 @@ class SortableComponent extends Component {
               <div className="content">
                 <p>
                   <strong>{card.title}</strong>
-                  <br className="subtitle"></br>
-                  {card.address}
-                  <br></br><small>{card.duration}</small>
+                  <br></br>
+                  <h6 className="subtitle is-6">{card.description}</h6>
                 </p>
               </div>
             </div>

styles/_itineraryCard.scss

@@ -1,5 +1,10 @@
 .itinerary-container {
   margin: 120px 80px;
+    .image{
+      .img{
+        height: 100%;
+      }
+  }
   .columns{
   .morning {
     margin-top: 1rem;
@@ -14,7 +19,7 @@
     height:80px;
   }
   .media-content.large{
-    height:10rem;
+    height:10rem; 
   }
   .fa {
   color:$green;