Skip to content

D
doodle
Commit 793787cb by Simon
Options

Backend terminé

parent 70281c44
Showing with 272 additions and 48 deletions
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){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment