Backend terminé

assets/lib/doodle/css/doodle.css

 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
 
 .doodle-table {
-    border-collapse:collapse;
+    border-collapse: collapse;
     width: 100%;
-    font-family: 'Roboto', sans-serif;
+    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+
+    margin-top: 150px;
+}
+
+.table-responsive {
+    overflow-x: visible;
 }
 
 thead tr th {
@@ -12,18 +18,17 @@ thead tr th {
 
 .doodle-table thead tr th{
     padding: 15px;
-    font-family: Roboto, sans-serif;
-    font-weight: 400;
+    height: 70px;
+    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    font-weight: 700;
     font-size: 14px;
-    border-bottom: 1px solid #f3f3f3 !important;
-}
-
-.doodle-table thead tr th:nth-child(2) {
-    border-right: none
+    border-bottom: 1px solid #e6e6e6 !important;
+    vertical-align: middle;
+    cursor: default;
 }
 
 .doodle-table tr td:nth-child(2) {
-    border-right: 1px solid #f3f3f3;
+    border-right: none;
     border-left: none;
 }
 
@@ -39,21 +44,32 @@ thead tr th {
 
 .doodle-table thead tr th:last-child {
     border-right: none;
+    min-width: 130px;
+    max-width: 145px;
+    background: #fafafa;
+    border-bottom: 1px dashed #e6e6e6 !important;
 }
 
+.doodle-table tr td:last-child {
+    background: #fafafa;
+    border: 1px dashed #e6e6e6;
+}
+
+
 .doodle-table tr td:first-child {
     border-left: none;
     border-right: none;
+    min-width: 175px;
+    width: 230px;
+    position: relative;
+    cursor: default;
 }
 
 .doodle-table thead tr th {
     border-top: none !important;
     border-left: none;
     border-right: none;
-}
-
-.doodle-table tbody tr td:first-child {
-    min-width: 90px;
+    position: relative;
 }
 
 .doodle-table tbody tr td {
@@ -62,12 +78,21 @@ thead tr th {
     line-height: 1.2;
     text-transform: uppercase;
     font-size: 12px;
-    min-height: 50px;
-    min-width: 80px;
-    height: 50px;
+    height: 70px;
+    min-width: 100px;
+    max-width: 200px;
     vertical-align: middle !important;
 }
 
+.doodle-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.doodle-table tbody tr td .date_format{
+    margin-left: 18px;
+}
+
+
 .doodle-table tbody tr td.purple-background {
     background-color: #e2deef;
     transition: background-color 100ms ease;
@@ -78,36 +103,130 @@ thead tr th {
     border-right: none;
 }
 
-.doodle-table tr td:last-child {
-    border-right: none;
-}
-
-.doodle-table td:nth-child(-n+2):hover {
-    background: none !important;
-}
-
 .doodle-table td:hover {
     background: #8a7dbe;
     transition: background 200ms ease;
 }
 
+.doodle-table tr:last-child td:hover, .doodle-table tr:last-child td {
+    background: #fafafa;
+}
+
 .doodle-table td:hover .label_input span{
     border-color: #fff;
     transition: border-color 100ms ease 100ms;
 }
 
 .doodle-table th, td {
-    border:1px solid #f3f3f3;
+    border:1px solid #e6e6e6;
     padding: 0;
 }
 
-.doodle-table td, th {
+.doodle-table th {
     text-align:center;
 }
+
+.doodle-table .delete_row {
+    background: #fddddd;
+    position: absolute;
+    width: 70px;
+    height: 71px;
+    left: -70px;
+    top: -1px;
+    opacity: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.doodle-table .delete_col{
+    background: #fddddd;
+    position: absolute;
+    width: 100%;
+    top: -74px;
+    height: 74px;
+    left: 0;
+    opacity: 0;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.doodle-table .delete_row button{
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    font-weight: 200;
+    background: #f55753;
+    color: #fff;
+    border-radius: 2px;
+    border: none;
+    cursor: pointer;
+}
+
+.doodle-table .delete_col a{
+    width: 21px;
+    height: 21px;
+    padding: 0;
+    font-weight: 200;
+    background: #f55753;
+    color: #fff;
+    border-radius: 2px;
+    border: none;
+    text-decoration: none;
+    align-self: center;
+
+}
+
+.doodle-table .delete_row button:focus{
+    outline: none;
+}
+
+
+.doodle-table #date:hover {
+    background: #fdf2f2 !important;
+    color: #f55753;
+    transition: all .250s ease;
+}
+
+.doodle-table #heure:hover {
+    background: #fdf2f2 !important;
+    color: #f55753;
+    transition: all .500s ease;
+}
+
 /*******************************************************
  *************************INPUT*************************
  *******************************************************/
 
+#myDatepicker{
+    width: 80%;
+    margin-left: 18px;
+}
+
+#myDatepicker label, .timepicker label {
+    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    text-transform: uppercase;
+    color: #2c2c2c !important;
+    font-size: 10px;
+    position: absolute;
+    z-index: 4;
+    margin-left: 0.75rem;
+    margin-top: 0.3rem;
+    font-weight: 400;
+}
+
+::-webkit-input-placeholder {
+    color: #bababa !important;
+    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    font-size: 14px;
+    opacity: 1; /* Firefox */
+    vertical-align: bottom;
+}
+
+
+
 label.label_input{
     cursor: pointer;
     position: relative;
@@ -118,6 +237,19 @@ label.label_input{
     margin-bottom: 0;
 }
 
+.form-control {
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    padding: 1.15rem 0.75rem 0.25rem 0.75rem;
+}
+
+.input-group-addon {
+    background: #f0f0f0;
+    border: 1px solid #dfdfdf !important;
+    color: #adadad;
+    border-radius: 2px;
+}
+
 .label_input input {
     display: none;
 }
@@ -182,8 +314,9 @@ label.label_input{
  ***********************END INPUT***********************
  *******************************************************/
 
+/*
 @media screen and (min-width: 768px){
     .doodle-table{
         table-layout: fixed;
     }
-}
+}*/
\ No newline at end of file

assets/lib/doodle/js/doodle.js

@@ -319,10 +319,13 @@
         this.reinit = () => {
             this.createJSON();
             $('.doodle').html('');
-            /*$(document).off('click', 'input[type=checkbox]');
-            $(document).off('click', 'td button');*/
+            $(document).off('click', 'input[type=checkbox]');
+            $(document).off('click', 'td button');
             $(document).off('changeDate', '#addDate');
             $(document).off('hide.timepicker', '#timepicker');
+            $(document).off('mouseenter mouseleave', '#date');
+            $(document).off('mouseenter mouseleave', '#heure');
+
 
             this.initLoad();
         };
@@ -351,9 +354,56 @@
 
             $(document).on('click', 'input[type=checkbox]', this.eventCheckInput);
             $(document).on('click', 'td button', this.eventRemoveDate);
-            $(document).on('click', 'th button', this.eventRemoveHour);
+            $(document).on('click', 'th a', this.eventRemoveHour);
             $(document).on('changeDate', '#myDatepicker', this.eventAddDate);
             $(document).on('hide.timepicker', '#timepicker',this.eventAddHour);
+            $(document).on('mouseenter mouseleave', '#date', function (e) {
+                if (e.type === 'mouseenter') {
+                    $(e.target).find('div').css('display', 'flex');
+                    $(e.target).find('div').animate({
+                        opacity : 1,
+                        display: 'flex'
+                    }, 250, 'linear');
+                } else {
+                    if ($(e.target).is('div.delete_row') ) {
+                        $(e.target).css('display', 'none');
+                        $(e.target).animate({
+                            opacity : 0,
+                            display: 'none'
+                        }, 200);
+                    } else {
+                        $(e.target).find('div').css('display', 'none');
+                        $(e.target).find('div').animate({
+                            opacity : 0,
+                            display: 'none'
+                        }, 200);
+                    }
+                }
+            });
+
+            $(document).on('mouseenter mouseleave', '#heure', function (e) {
+                if (e.type === 'mouseenter') {
+                    $(e.target).find('div').css('display', 'flex');
+                    $(e.target).find('div').animate({
+                        opacity : 1,
+                        display: 'flex'
+                    }, 250, 'linear');
+                } else {
+                    if ($(e.target).is('div.delete_col') ) {
+                        $(e.target).css('display', 'none');
+                        $(e.target).animate({
+                            opacity : 0,
+                            display: 'none'
+                        }, 200);
+                    } else {
+                        $(e.target).find('div').css('display', 'none');
+                        $(e.target).find('div').animate({
+                            opacity : 0,
+                            display: 'none'
+                        }, 200);
+                    }
+                }
+            });
 };
 
         /**
@@ -361,7 +411,7 @@
          */
         this.createTable = () => {
             this.item.append(`
-                <table class="table doodle-table">
+                <table class="table doodle-table backend">
                 <thead>
                     ${this.createHeaderTable()}
                 </thead>
@@ -371,6 +421,8 @@
                  </tbody>
                 </table>
             `);
+
+            this.generateEmptyCell();
         };
 
         this.initCSS = () => {
@@ -385,30 +437,48 @@
             let $tbody = $('<tbody>');
             let html, tbodyFinal;
 
-            for(let index in this.days) {
-                let $tr = $('<tr>');
+            if (!$.isEmptyObject(this.outputJson)) {
+                for(let index in this.days) {
+                    let $tr = $('<tr>');
 
-                let formatDateDay = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('dddd');
-                let formatDateMonth = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD MMMM');
-                let formatDate = moment(this.days[index], 'DD/MM/YYYY').format('DDMMYYYY');
+                    let formatDateDay = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('dddd DD');
+                    let formatDateMonth = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('MMMM');
+                    let formatDate = moment(this.days[index], 'DD/MM/YYYY').format('DDMMYYYY');
 
+                    html = $tr.append('<td id="date"><span class="date_format"><b>' + formatDateDay + '</b> ' + formatDateMonth + '</span><div class="delete_row"><button>x</button></div></td>')
+                        .append(this.createBodyContent(formatDate))
+                        .append('<td></td>');
 
-                html = $tr .append('<td><button>X</button></td>')
-                    .append('<td><span>' + formatDateDay + ' ' + formatDateMonth + '</span></td>')
-                    .append(this.createBodyContent(formatDate));
 
+                    tbodyFinal = $tbody.append(html);
+                }
 
-                tbodyFinal = $tbody.append(html);
+                tbodyFinal.append(`<td><div id="myDatepicker" class="input-group date" data-provide="datepicker">
+                                       <label>Date</label>
+                                       <input type="text" id="addDate" class="form-control" placeholder="jj / mm / aaaa">
+                                       <span class="input-group-addon">
+                                            <i class="fa fa-calendar"></i>
+                                       </span>
+                                    </div>
+                                </td> `);
             }
 
+            else {
+                let $tr = $('<tr>');
 
-            tbodyFinal.append(`<th><div id="myDatepicker" class="input-group date" data-provide="datepicker">
-                                       <input type="text" id="addDate" class="form-control" placeholder="jj/mm/aaaa">
+                html = $tr.append(`<td><div id="myDatepicker" class="input-group date" data-provide="datepicker">
+                                       <label>Date</label>
+                                       <input type="text" id="addDate" class="form-control" placeholder="jj / mm / aaaa">
                                        <span class="input-group-addon">
                                             <i class="fa fa-calendar"></i>
                                        </span>
                                     </div>
-                                </th> `);
+                                </td> `);
+
+                tbodyFinal = $tbody.append(html);
+            }
+
+
 
             return tbodyFinal.html();
         };
@@ -461,7 +531,7 @@
             let finalSortedTab = [];
 
             // Nombre de cases vide
-            let nbrCaseVide = 2;
+            let nbrCaseVide = 1;
 
             //Ajoute les cases vide
             for (let i = 0; i < nbrCaseVide; i++) {
@@ -481,10 +551,11 @@
 
             //Ajoute les heures
             for(let index in finalSortedTab) {
-                thead = $tr.append('<th><button>X</button><span>' + finalSortedTab[index] + '</span></th>');
+                thead = $tr.append('<th id="heure"><span>' + finalSortedTab[index] + '</span><div class="delete_col"><a href="#">x</a></div></th>');
             }
 
             thead = $tr.append(`<th><div class="input-group bootstrap-timepicker timepicker">
+                                        <label>Horaire</label>
                                         <input id="timepicker" type="text" class="form-control" data-provide="timepicker">
                                         <span class="input-group-addon">
                                             <i class="fa fa-clock-o"></i>
@@ -495,6 +566,19 @@
         };
 
         /**
+         * Generate empty cell
+         */
+        this.generateEmptyCell = () => {
+            let colLength = $('table thead th#heure').length + 1;
+            let lastTR = $('.doodle-table tbody tr:last-child');
+
+            for (let i = 0; i < colLength; i++) {
+                $(lastTR).append('<td></td>')
+            }
+
+        };
+
+        /**
          * Get Days
          */
         this.getDays = () => {
@@ -640,6 +724,7 @@
          * @param e
          */
         this.eventAddDate = (e) => {
+            e.stopImmediatePropagation();
             //Force la fermeture du datePicker
             $('#myDatepicker').datepicker('hide');
 
@@ -664,6 +749,8 @@
          * @param e
          */
         this.eventAddHour = (e) => {
+            e.stopImmediatePropagation();
+
             let splitHour = e.time.value.split(':');
 
             //Permet de mettre dans le bon format DD:mm, le timePicker retourne mauvais format
@@ -695,6 +782,8 @@
          * @param e
          */
         this.eventRemoveDate = (e) => {
+            e.stopImmediatePropagation();
+
             let date = $(e.target).parent().parent().find('span').text();
 
             let formatDateDay = moment(date, 'dddd DD MMMM').locale('fr').format('DDMMYYYY');
@@ -715,7 +804,10 @@
          * @param e
          */
         this.eventRemoveHour = (e) => {
-            let hour = $(e.target).parent().find('span').first().text();
+            e.stopImmediatePropagation();
+            e.preventDefault();
+
+            let hour = $(e.target).parent().parent().find('span').first().text();
             hour = hour.replace('h', ':');
 
             if(hour.length < 5){