Refs #2982: starting with reactux integration

1 files changed, 61 insertions, 3 deletions

diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
index fa72a76aa..def212690 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
+++ b/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
@@ -10,18 +10,75 @@ const reorderArray = (arr) =>{
 
 const Metas = ({metas}) => {
   let day_types = reorderArray(metas.day_types)
+  let colorList = ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"]
+
   return (
     <div className='form-horizontal'>
       <div className="row">
         <div className="col-lg-12">
           {/* comment (name) */}
-          <div className="form-group"></div>
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4 required">
+              Nom <abbr title="Champ requis">*</abbr>
+            </label>
+            <div className="col-sm-8">
+              <input
+                type='text'
+                className='form-control'
+                value={metas.comment}
+                />
+            </div>
+          </div>
 
           {/* color */}
-          <div className="form-group"></div>
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4">Couleur associée</label>
+            <div className="col-sm-8">
+              <div className="dropdown color_selector">
+                <button
+                  type='button'
+                  className="btn btn-default dropdown-toggle"
+                  id='dpdwn_color'
+                  data-toggle='dropdown'
+                  aria-haspopup='true'
+                  aria-expanded='true'
+                >
+                  <span
+                    className='fa fa-circle mr-xs'
+                    style={{color: metas.color}}
+                  ></span>
+                  <span className='caret'></span>
+                </button>
+
+                <div className="form-group dropdown-menu" aria-labelledby='dpdwn_color'>
+                  {colorList.map((c, i) =>
+                    <span className="radio" key={i}>
+                      <label htmlFor="">
+                        <input
+                          type='radio'
+                          className='color_selector'
+                          value={c}
+                        />
+                        <span
+                          className='fa fa-circle'
+                          style={{color: ((c == '') ? 'transparent' : c)}}
+                        ></span>
+                      </label>
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
 
           {/* tags */}
-          <div className="form-group"></div>
+          <div className="form-group">
+            <label htmlFor="" className="control-label col-sm-4">Etiquettes</label>
+            <div className="col-sm-8">
+              {/* Select2 to implement*/}
+              <input type="text" value='ton papa' className='form-control'/>
+            </div>
+          </div>
 
           {/* day_types */}
           <div className="form-group">
@@ -52,6 +109,7 @@ const Metas = ({metas}) => {
           </div>
         </div>
       </div>
+      <div className="separator"></div>
     </div>
   )
 }