Skip to content

D
doodle
Commit 386e04d1 by Simon
Options

Yolo ça marche

parent cfc1c73c
Showing with 535 additions and 132 deletions
assets/lib/doodle/css/doodle.css
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
table { table {
border-collapse:collapse; border-collapse:collapse;
width: 100%; width: 100%;
table-layout: fixed;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
...@@ -13,6 +12,7 @@ table thead tr th{ ...@@ -13,6 +12,7 @@ table thead tr th{
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
border-bottom: 1px solid #f3f3f3 !important;
} }
table thead tr th:nth-child(2) { table thead tr th:nth-child(2) {
...@@ -44,19 +44,25 @@ table tr td:first-child { ...@@ -44,19 +44,25 @@ table tr td:first-child {
} }
table thead tr th { table thead tr th {
border-top: none; border-top: none !important;
border-left: none; border-left: none;
border-right: none; border-right: none;
} }
table tbody tr td:first-child {
min-width: 90px;
}
table tbody tr td { table tbody tr td {
color: #6d5cae; color: #6d5cae;
padding: 0; padding: 0 !important;
line-height: 1.2; line-height: 1.2;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
min-height: 50px; min-height: 50px;
min-width: 80px;
height: 50px; height: 50px;
vertical-align: middle !important;
} }
tr:nth-child(2n) { tr:nth-child(2n) {
...@@ -167,4 +173,10 @@ label.label_input{ ...@@ -167,4 +173,10 @@ label.label_input{
/******************************************************* /*******************************************************
***********************END INPUT*********************** ***********************END INPUT***********************
*******************************************************/ *******************************************************/
\ No newline at end of file
@media screen and (min-width: 768px){
table{
table-layout: fixed;
}
}
\ No newline at end of file
assets/lib/doodle/js/doodle.js
...@@ -5,22 +5,18 @@ ...@@ -5,22 +5,18 @@
* @param config * @param config
*/ */
let Doodle = function(item, config) { let DoodleFront = function(item, config) {
this.item = item; this.item = item;
this.config = config; this.config = config;
this.json = null; this.json = null;
this.days = []; this.days = [];
this.hours = []; this.hours = [];
this.outputJson = {};
const EDITMODE = this.config.editMode;
this.initLoad = () => { this.initLoad = () => {
console.log('INIT');
//Vide le localStorage au chargement de la page
localStorage.clear();
this.getJsonData(); this.getJsonData();
if(!this.json) { if(!this.json) {
console.warn('Invalid Json data'); console.warn('Invalid Json data');
return; return;
...@@ -29,71 +25,48 @@ ...@@ -29,71 +25,48 @@
this.getDays(); this.getDays();
this.getHours(); this.getHours();
this.createTable(); this.createTable();
}; };
/**
* Create Table
*/
this.createTable = () => { this.createTable = () => {
$(document).on('click', 'input[type=checkbox]', this.eventInput); $(document).on('click', 'input[type=checkbox]', this.eventInput);
this.item.html(` this.item.append(`
<table id="myTables"> <table class="table doodle-table">
<thead>
${this.createHeaderTable()} ${this.createHeaderTable()}
<tbody> </thead>
${this.createBodyTable()}
</tbody> <tbody>
${this.createBodyTable()}
</tbody>
</table> </table>
`); `);
}; };
/** /**
* Create table header for hours * Create table header for hours
* @returns {string} * @returns {string}
*/ */
this.createBodyTable = () => { this.createBodyTable = () => {
let $thead = $('<thead>'); let $tbody = $('<tbody>');
let html, tbodyFinal; let html, tbodyFinal;
if (EDITMODE) { for(let index in this.days) {
let dayLength = this.days.length; let $tr = $('<tr>');
for(let i = 0; i < (dayLength + 1); i++) {
let $tr = $('<tr>');
if (!(i == dayLength)) { let formatDateDay = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('dddd');
let formatDateDay = moment(this.days[i], 'DD/MM/YYYY').locale('fr').format('dddd'); let formatDateMonth = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD <br> MMMM');
let formatDateMonth = moment(this.days[i], 'DD/MM/YYYY').locale('fr').format('DD MMMM');
html = $tr.append('<td>' + formatDateDay + '</td>')
.append('<td>' + formatDateMonth + '</td>')
.append(this.createBodyContent(this.days[i]));
}
html = $tr.append('<td>+</td>');
tbodyFinal = $thead.append(html);
}
}
else {
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');
html = $tr.append('<td>' + formatDateDay + '</td>') html = $tr.append('<td>' + formatDateDay + '</td>')
.append('<td>' + formatDateMonth + '</td>') .append('<td>' + formatDateMonth + '</td>')
.append(this.createBodyContent(this.days[index])); .append(this.createBodyContent(this.days[index]));
tbodyFinal = $tbody.append(html);
tbodyFinal = $thead.append(html);
}
} }
return tbodyFinal.html(); return tbodyFinal.html();
}; };
...@@ -103,20 +76,19 @@ ...@@ -103,20 +76,19 @@
* @returns {string} * @returns {string}
*/ */
this.createBodyContent = (index) => { this.createBodyContent = (index) => {
let html, plop; let html;
let $td = $('<td>'); let $td = $('<td>');
for(let key in this.hours) { for(let key in this.hours) {
if(this.json[index].includes(this.hours[key])) if(this.json[index].includes(this.hours[key]))
html = '<td>' + createInputBox(this.hours[key], index) + '</td>'; html = '<td>' + createInputBox(this.hours[key], index) + '</td>';
else else
html = '<td></td>'; html = '<td></td>';
plop = $td.append(html); $td.append(html);
} }
return plop.html(); return $td.html();
}; };
/** /**
...@@ -136,44 +108,35 @@ ...@@ -136,44 +108,35 @@
* @returns {string} * @returns {string}
*/ */
this.createHeaderTable = () => { this.createHeaderTable = () => {
let $thead = $('<thead>');
let $tr = $('<tr>'); let $tr = $('<tr>');
let html, theadFinal; let thead;
let finalSortedTab = []; let finalSortedTab = [];
// Nombre de cases vide // Nombre de cases vide
let nbrCaseVide = 2; const NBRCASEVIDE = 2;
//Ajoute les cases vide
for (let i = 0; i < NBRCASEVIDE; i++) {
thead = $tr.append('<th></th>');
}
// Permet de mettre un 'h' pour les heures/minutes // Permet de mettre un 'h' pour les heures/minutes
this.hours.forEach( (el, index) => { this.hours.forEach( (el, index) => {
if (el.split(':').length === 2) { if (el.indexOf(':') === -1) {
let test = el.split(':'); el += 'h';
let final = test[0] + 'h' + test[1];
finalSortedTab.push(final);
} else { } else {
finalSortedTab.push(el) el = el.replace(':', 'h');
} }
});
let hoursSorted = finalSortedTab.sort();
//Ajouter les cases vide finalSortedTab.push(el);
for (let i = 0; i < nbrCaseVide; i++) { });
html = $tr.append('<th></th>');
}
for(let index in hoursSorted) { //Ajoute les heures
console.log('nt cc', hoursSorted[index]); for(let index in finalSortedTab) {
html = $tr.append('<th>' + hoursSorted[index] + '</th>'); thead = $tr.append('<th>' + finalSortedTab[index] + '</th>');
if (index == this.hours.length - 1 && EDITMODE) {
html = $tr.append('<th>+</th>');
}
} }
theadFinal = $thead.append(html); return thead.html();
return theadFinal.html();
}; };
/** /**
...@@ -208,7 +171,11 @@ ...@@ -208,7 +171,11 @@
} else { } else {
let data = this.fileExistsAndGetData(dataJson); let data = this.fileExistsAndGetData(dataJson);
if(data){ if(data){
this.json = JSON.parse(data); let json = JSON.parse(data);
if (!$.isEmptyObject(json)) {
this.json = json;
}
} }
} }
}; };
...@@ -245,60 +212,342 @@ ...@@ -245,60 +212,342 @@
/** /**
* Generate JSON * Generate JSON
* @param date
* @param heure
* @param isChecked
*/ */
this.createJSON = (date, heure, isChecked) => { this.createJSON = () => {
let $input = $(this.config.output);
if ($input.length > 0) {
$input.val(JSON.stringify(this.outputJson));
}
};
/**
* Event for input
* @param e event
*/
this.eventInput = (e) => {
let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked');
let json = {}; if (isChecked) {
this.addInOutputObject(data);
} else {
this.removeInOutputObject(data)
}
this.createJSON();
};
if (localStorage.getItem('test')) { /**
json = JSON.parse(localStorage.getItem('test')); * Add value into json
* @param data
*/
this.addInOutputObject = (data) => {
if (!this.outputJson[data[0]]) {
this.outputJson[data[0]] = [];
} }
if ($.inArray(heure, json[date]) === -1) { let output = this.outputJson[data[0]];
console.log('Jsuis pas encore lo');
if (json[date] === undefined) { if (output.indexOf(data[1]) === -1) {
json[date] = [ heure ]; output.push(data[1]);
} else { }
if (isChecked) { };
json[date].push(heure);
json[date].sort(); /**
* Remove value from json
* @param data
*/
this.removeInOutputObject = (data) => {
if (this.outputJson[data[0]]) {
let output = this.outputJson[data[0]];
let index = output.indexOf(data[1]);
if (index !== -1) {
output.splice(index, 1);
if (output.length === 0) {
delete this.outputJson[data[0]];
} }
} }
} else { }
if (!isChecked) { };
console.log('Je suis lo et pa check, alor jdegoge');
/**
//Supprime l'entrée dans le JSON * Init
let index = json[date].indexOf(heure); */
if (index > -1) { this.initLoad();
json[date].splice(index, 1); };
/**
* For back
* @param item
* @param config
* @constructor
*/
let DoodleBack = function (item, config) {
this.item = item;
this.config = config;
this.json = null;
this.days = [];
this.hours = [];
this.outputJson = {};
this.init = true;
this.initLoad = () => {
if (this.init) {
this.getJsonData();
if(!this.json) {
console.warn('Invalid Json data');
return;
}
this.getDays();
this.getHours();
this.init = false;
}
this.createTable();
this.createEvents();
};
this.reinit = () => {
console.log('REINIT');
this.createJSON();
$('.doodle').html('');
$(document).off('click', 'input[type=checkbox]');
$(document).off('click', 'td button');
$(document).off('focusout keypress', '#addDate');
$(document).off('focusout', '#addHour');
this.initLoad();
};
this.createEvents = () => {
$(document).on('click', 'input[type=checkbox]', this.eventCheckInput);
$(document).on('click', 'td button', this.eventRemoveDate);
$(document).on('click', 'th button', this.eventRemoveHour);
$('#addDate').on('focusout keypress', this.eventAddDate);
$('#addHour').on('focusout keypress', this.eventAddHour);
};
/**
* Create Table
*/
this.createTable = () => {
this.item.append(`
<table class="table doodle-table">
<thead>
${this.createHeaderTable()}
</thead>
<tbody>
${this.createBodyTable()}
</tbody>
</table>
`);
};
/**
* Create table header for hours
* @returns {string}
*/
this.createBodyTable = () => {
let $tbody = $('<tbody>');
let html, tbodyFinal;
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');
html = $tr .append('<td><button>X</button></td>')
.append('<td><span>' + formatDateDay + ' ' + formatDateMonth + '</span></td>')
.append(this.createBodyContent(formatDate));
tbodyFinal = $tbody.append(html);
}
tbodyFinal.append('<td><input id="addDate" type="date"></td>');
return tbodyFinal.html();
};
/**
* Create body content
* @param index
* @returns {string}
*/
this.createBodyContent = (index) => {
let html;
let $td = $('<td>');
for(let key in this.hours) {
if(this.outputJson[index] && this.outputJson[index].includes(this.hours[key]))
html = '<td>' + createInputBox(this.hours[key], index, true) + '</td>';
else
html = '<td>' + createInputBox(this.hours[key], index, false) + '</td>';
$td.append(html);
}
return $td.html();
};
/**
* Creer l'input
* @param hour
* @param day
* @returns {string}
*/
function createInputBox(hour, day, checked) {
let dayFormat = moment(day, 'DD/MM/YYYY').format('DDMMYYYY');
let isChecked = checked ? 'checked' : '';
let data = dayFormat + '_' + hour;
return `<label class='label_input'>
<input type='checkbox' ${isChecked} data-check="${data}" /><span><i></i></span>
</label>`
}
/**
* Create table header for hours
* @returns {string}
*/
this.createHeaderTable = () => {
let $tr = $('<tr>');
let thead;
let finalSortedTab = [];
// Nombre de cases vide
let nbrCaseVide = 2;
//Ajoute les cases vide
for (let i = 0; i < nbrCaseVide; i++) {
thead = $tr.append('<th></th>');
}
// Permet de mettre un 'h' pour les heures/minutes
this.hours.forEach( (el, index) => {
if (el.indexOf(':') === -1) {
el += 'h';
} else {
el = el.replace(':', 'h');
}
finalSortedTab.push(el);
});
//Ajoute les heures
for(let index in finalSortedTab) {
thead = $tr.append('<th><button>X</button><span>' + finalSortedTab[index] + '</span></th>');
}
thead = $tr.append('<th><input type="time" id="addHour" step="300"></th>');
return thead.html();
};
/**
* Get Days
*/
this.getDays = () => {
this.days = Object.keys(this.json);
};
/**
* Get Hours
*/
this.getHours = () => {
for(let key in this.json) {
for(let index in this.json[key]) {
if(!this.hours.includes(this.json[key][index])) {
this.hours.push(this.json[key][index]);
this.hours.sort();
} }
}
}
};
/**
* Get Json data
*/
this.getJsonData = () => {
let dataJson = $(this.config.input).val();
//Supprime la clé dans le JSON si le tableau est vide if(this.isJsonString(dataJson)){
if (json[date].length === 0) { this.json = JSON.parse(dataJson);
console.log('Jsui vide lo'); } else {
delete json[date]; let data = this.fileExistsAndGetData(dataJson);
if(data){
let json = JSON.parse(data);
if (!$.isEmptyObject(json)) {
this.json = json;
} }
} }
} }
localStorage.setItem('test', JSON.stringify(json)); this.populateOutputJson();
};
console.log(json); this.populateOutputJson = () => {
for (let index in this.json) {
for (let i in this.json[index]) {
let dayFormat = moment(index, 'DD/MM/YYYY').format('DDMMYYYY');
let $input = $('<input type="hidden">'); this.addInOutputObject([dayFormat, this.json[index][i]] )
}
//Check si l'input est créé }
if ($('#jsonGenerate').length !== 0) { };
$input.val(JSON.stringify(json));
/**
* Check if string is valid Json
* @param str
* @returns {boolean}
*/
this.isJsonString = (str) => {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
};
/**
* Check if file exist and get data
* @param url
* @returns {boolean}
*/
this.fileExistsAndGetData = (url) => {
if(url){
let req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.response;
} else { } else {
$input.val(JSON.stringify(json)).attr('id', 'jsonGenerate'); return false;
$('#myTables').after($input); }
};
/**
* Generate JSON
*/
this.createJSON = () => {
let $input = $(this.config.output);
if ($input.length > 0) {
$input.val(JSON.stringify(this.outputJson));
} }
}; };
...@@ -306,15 +555,141 @@ ...@@ -306,15 +555,141 @@
* Event for input * Event for input
* @param e event * @param e event
*/ */
this.eventInput = (e) => { this.eventCheckInput = (e) => {
let data = $(e.target).data('check').split('_'); let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked'); let isChecked = $(e.target).is(':checked');
if (isChecked) {
this.addInOutputObject(data);
} else {
this.removeInOutputObject(data)
}
this.createJSON();
};
/**
* Add date
* @param e
*/
this.eventAddDate = (e) => {
console.log(e);
if(e.which === 13 || e.type === 'focusout') {
let valDate = $(e.target).val();
let formatDateDay = moment(valDate, 'YYYY-MM-DD').locale('fr').format('DDMMYYYY');
let formatDateOnSneFou = moment(valDate, 'YYYY-MM-DD').locale('fr').format('DD/MM/YYYY');
this.addInOutputObject(formatDateDay);
this.days.push(formatDateOnSneFou);
this.days.sort();
this.reinit();
}
let date = data[0];
let hour = data[1];
this.createJSON(date, hour, isChecked); };
/**
* Add hour
* @param e
*/
this.eventAddHour = (e) => {
if(e.which === 13 || e.type === 'focusout') {
let valHour = $(e.target).val();
this.hours.push(valHour);
this.hours.sort();
this.reinit();
}
};
/**
* Remove Date
* @param e
*/
this.eventRemoveDate = (e) => {
let date = $(e.target).parent().parent().find('span').text();
console.log(date);
let formatDateDay = moment(date, 'dddd DD MMMM').locale('fr').format('DDMMYYYY');
let formatDateOnSneFou = moment(date, 'dddd DD MMMM').locale('fr').format('DD/MM/YYYY');
let index = this.days.indexOf(formatDateOnSneFou);
if (index !== -1) {
this.days.splice(index, 1)
}
delete this.outputJson[formatDateDay];
this.reinit();
};
/**
* Remove hour
* @param e
*/
this.eventRemoveHour = (e) => {
let hour = $(e.target).parent().find('span').first().text();
hour = hour.replace('h', ':');
if(hour.length < 5){
hour = hour.substring(0, hour.length-1);
}
let index = this.hours.indexOf(hour);
if (index !== -1) {
this.hours.splice(index, 1)
}
for(let yolo in this.outputJson) {
let pipa = this.outputJson[yolo].indexOf(hour);
if (pipa !== -1) {
this.outputJson[yolo].splice(pipa, 1);
}
}
this.reinit();
};
/**
* Add value into json
* @param data
*/
this.addInOutputObject = (data) => {
if (typeof data === 'string') {
this.outputJson[data] = [];
} else {
if (!this.outputJson[data[0]]) {
this.outputJson[data[0]] = [];
}
let output = this.outputJson[data[0]];
if (output.indexOf(data[1]) === -1) {
output.push(data[1]);
}
}
};
/**
* Remove value from json
* @param data
*/
this.removeInOutputObject = (data) => {
if (this.outputJson[data[0]]) {
let output = this.outputJson[data[0]];
let index = output.indexOf(data[1]);
if (index !== -1) {
output.splice(index, 1);
}
}
}; };
/** /**
...@@ -334,7 +709,12 @@ ...@@ -334,7 +709,12 @@
let config = initializeConfig(); let config = initializeConfig();
this.each(function() { this.each(function() {
new Doodle($(this), config); if (!config.editMode) {
new DoodleFront($(this), config);
}
else {
new DoodleBack($(this), config);
}
}); });
return this; return this;
...@@ -344,7 +724,9 @@ ...@@ -344,7 +724,9 @@
*/ */
function initializeConfig() { function initializeConfig() {
let defaultOptions = { let defaultOptions = {
editMode: false editMode: false,
output: '',
input: ''
}; };
return $.extend({}, defaultOptions, options); return $.extend({}, defaultOptions, options);
......
index.html
...@@ -60,7 +60,11 @@ ...@@ -60,7 +60,11 @@
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="doodle" data-json="json/data.json"></div> <!--<div class="doodle table-responsive"></div>
<input type="hidden" id="inputVal" value='{"19/01/2018":["10","11","12"],"20/01/2018":["10","11","12"],"21/01/2018":["10","11","12"],"22/01/2018":["10","11","12"],"23/01/2018":["10","11","12"],"24/01/2018":["10","11:15","12"]}'>-->
<div class="doodle table-responsive" data-json="json/data.json"></div>
<input type="hidden" id="inputVal" value='' />
</div> </div>
</div> </div>
......
js/app.js
$( document ).ready(function() { $( document ).ready(function() {
$('.doodle').Doodle({ $('.doodle').Doodle({
editMode: false editMode: false,
output: '#inputVal',
input: '#inputVal'
}); });
}); });
\ No newline at end of file
json/data.json
{ {
"19/01/2018": ["10", "11", "12", "18"], "19/01/2018": ["10", "11", "12"],
"20/01/2018": ["13", "14", "15"], "20/01/2018": ["10", "11", "12"],
"21/01/2018": ["10", "14", "16", "17"], "21/01/2018": ["10", "11", "12"],
"24/01/2018": ["10", "15", "17"], "22/01/2018": ["10", "11", "12"],
"26/01/2018": ["10", "10", "13" ,"18"], "23/01/2018": ["10", "11", "12"],
"20/02/2018": ["10", "10", "13" ,"18"] "24/01/2018": ["10", "11:15", "12"],
"25/01/2018": ["10", "11:15", "12", "15"]
} }
\ No newline at end of file
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