Skip to content

D
doodle
Commit 386e04d1 by Simon
Options

Yolo ça marche

parent cfc1c73c
Showing with 524 additions and 120 deletions
assets/lib/doodle/css/doodle.css
......@@ -3,7 +3,6 @@
table {
border-collapse:collapse;
width: 100%;
table-layout: fixed;
font-family: 'Roboto', sans-serif;
}
......@@ -13,6 +12,7 @@ table thead tr th{
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 14px;
border-bottom: 1px solid #f3f3f3 !important;
}
table thead tr th:nth-child(2) {
......@@ -44,19 +44,25 @@ table tr td:first-child {
}
table thead tr th {
border-top: none;
border-top: none !important;
border-left: none;
border-right: none;
}
table tbody tr td:first-child {
min-width: 90px;
}
table tbody tr td {
color: #6d5cae;
padding: 0;
padding: 0 !important;
line-height: 1.2;
text-transform: uppercase;
font-size: 12px;
min-height: 50px;
min-width: 80px;
height: 50px;
vertical-align: middle !important;
}
tr:nth-child(2n) {
......@@ -168,3 +174,9 @@ label.label_input{
/*******************************************************
***********************END INPUT***********************
*******************************************************/
@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 @@
* @param config
*/
let Doodle = function(item, config) {
let DoodleFront = function(item, config) {
this.item = item;
this.config = config;
this.json = null;
this.days = [];
this.hours = [];
const EDITMODE = this.config.editMode;
this.outputJson = {};
this.initLoad = () => {
console.log('INIT');
//Vide le localStorage au chargement de la page
localStorage.clear();
this.getJsonData();
if(!this.json) {
console.warn('Invalid Json data');
return;
......@@ -29,15 +25,20 @@
this.getDays();
this.getHours();
this.createTable();
};
/**
* Create Table
*/
this.createTable = () => {
$(document).on('click', 'input[type=checkbox]', this.eventInput);
this.item.html(`
<table id="myTables">
this.item.append(`
<table class="table doodle-table">
<thead>
${this.createHeaderTable()}
</thead>
<tbody>
${this.createBodyTable()}
</tbody>
......@@ -45,54 +46,336 @@
`);
};
/**
* Create table header for hours
* @returns {string}
*/
this.createBodyTable = () => {
let $thead = $('<thead>');
let $tbody = $('<tbody>');
let html, tbodyFinal;
if (EDITMODE) {
let dayLength = this.days.length;
for(let i = 0; i < (dayLength + 1); i++) {
for(let index in this.days) {
let $tr = $('<tr>');
if (!(i == dayLength)) {
let formatDateDay = moment(this.days[i], 'DD/MM/YYYY').locale('fr').format('dddd');
let formatDateMonth = moment(this.days[i], 'DD/MM/YYYY').locale('fr').format('DD MMMM');
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 <br> MMMM');
html = $tr.append('<td>' + formatDateDay + '</td>')
.append('<td>' + formatDateMonth + '</td>')
.append(this.createBodyContent(this.days[i]));
.append(this.createBodyContent(this.days[index]));
tbodyFinal = $tbody.append(html);
}
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.json[index].includes(this.hours[key]))
html = '<td>' + createInputBox(this.hours[key], index) + '</td>';
else
html = '<td></td>';
$td.append(html);
}
return $td.html();
};
/**
* Creer l'input
* @param hour
* @param day
* @returns {string}
*/
function createInputBox(hour, day) {
let dayFormat = moment(day, 'DD/MM/YYYY').format('DDMMYYYY');
return "<label class='label_input'><input type='checkbox' data-check=" + dayFormat + '_' + hour + " /><span><i></i></span></label>"
}
html = $tr.append('<td>+</td>');
/**
* Create table header for hours
* @returns {string}
*/
this.createHeaderTable = () => {
let $tr = $('<tr>');
let thead;
let finalSortedTab = [];
tbodyFinal = $thead.append(html);
// Nombre de cases vide
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
this.hours.forEach( (el, index) => {
if (el.indexOf(':') === -1) {
el += 'h';
} else {
el = el.replace(':', 'h');
}
else {
finalSortedTab.push(el);
});
//Ajoute les heures
for(let index in finalSortedTab) {
thead = $tr.append('<th>' + finalSortedTab[index] + '</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.item.data('json');
if(this.isJsonString(dataJson)){
this.json = JSON.parse(dataJson);
} else {
let data = this.fileExistsAndGetData(dataJson);
if(data){
let json = JSON.parse(data);
if (!$.isEmptyObject(json)) {
this.json = 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 {
return false;
}
};
/**
* Generate JSON
*/
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');
if (isChecked) {
this.addInOutputObject(data);
} else {
this.removeInOutputObject(data)
}
this.createJSON();
};
/**
* Add value into json
* @param data
*/
this.addInOutputObject = (data) => {
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);
if (output.length === 0) {
delete this.outputJson[data[0]];
}
}
}
};
/**
* Init
*/
this.initLoad();
};
/**
* 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>' + formatDateDay + '</td>')
.append('<td>' + formatDateMonth + '</td>')
.append(this.createBodyContent(this.days[index]));
html = $tr .append('<td><button>X</button></td>')
.append('<td><span>' + formatDateDay + ' ' + formatDateMonth + '</span></td>')
.append(this.createBodyContent(formatDate));
tbodyFinal = $thead.append(html);
}
tbodyFinal = $tbody.append(html);
}
tbodyFinal.append('<td><input id="addDate" type="date"></td>');
return tbodyFinal.html();
};
......@@ -103,20 +386,19 @@
* @returns {string}
*/
this.createBodyContent = (index) => {
let html, plop;
let html;
let $td = $('<td>');
for(let key in this.hours) {
if(this.json[index].includes(this.hours[key]))
html = '<td>' + createInputBox(this.hours[key], index) + '</td>';
if(this.outputJson[index] && this.outputJson[index].includes(this.hours[key]))
html = '<td>' + createInputBox(this.hours[key], index, true) + '</td>';
else
html = '<td></td>';
html = '<td>' + createInputBox(this.hours[key], index, false) + '</td>';
plop = $td.append(html);
$td.append(html);
}
return plop.html();
return $td.html();
};
/**
......@@ -125,10 +407,15 @@
* @param day
* @returns {string}
*/
function createInputBox(hour, day) {
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' data-check=" + dayFormat + '_' + hour + " /><span><i></i></span></label>"
return `<label class='label_input'>
<input type='checkbox' ${isChecked} data-check="${data}" /><span><i></i></span>
</label>`
}
/**
......@@ -136,44 +423,37 @@
* @returns {string}
*/
this.createHeaderTable = () => {
let $thead = $('<thead>');
let $tr = $('<tr>');
let html, theadFinal;
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.split(':').length === 2) {
let test = el.split(':');
let final = test[0] + 'h' + test[1];
finalSortedTab.push(final);
if (el.indexOf(':') === -1) {
el += 'h';
} else {
finalSortedTab.push(el)
el = el.replace(':', 'h');
}
});
let hoursSorted = finalSortedTab.sort();
//Ajouter les cases vide
for (let i = 0; i < nbrCaseVide; i++) {
html = $tr.append('<th></th>');
}
finalSortedTab.push(el);
});
for(let index in hoursSorted) {
console.log('nt cc', hoursSorted[index]);
html = $tr.append('<th>' + hoursSorted[index] + '</th>');
if (index == this.hours.length - 1 && EDITMODE) {
html = $tr.append('<th>+</th>');
}
//Ajoute les heures
for(let index in finalSortedTab) {
thead = $tr.append('<th><button>X</button><span>' + finalSortedTab[index] + '</span></th>');
}
theadFinal = $thead.append(html);
thead = $tr.append('<th><input type="time" id="addHour" step="300"></th>');
return theadFinal.html();
return thead.html();
};
/**
......@@ -201,16 +481,33 @@
* Get Json data
*/
this.getJsonData = () => {
let dataJson = this.item.data('json');
let dataJson = $(this.config.input).val();
if(this.isJsonString(dataJson)){
this.json = JSON.parse(dataJson);
} else {
let data = this.fileExistsAndGetData(dataJson);
if(data){
this.json = JSON.parse(data);
let json = JSON.parse(data);
if (!$.isEmptyObject(json)) {
this.json = json;
}
}
}
this.populateOutputJson();
};
this.populateOutputJson = () => {
for (let index in this.json) {
for (let i in this.json[index]) {
let dayFormat = moment(index, 'DD/MM/YYYY').format('DDMMYYYY');
this.addInOutputObject([dayFormat, this.json[index][i]] )
}
}
};
/**
......@@ -245,76 +542,154 @@
/**
* Generate JSON
* @param date
* @param heure
* @param isChecked
*/
this.createJSON = (date, heure, isChecked) => {
this.createJSON = () => {
let $input = $(this.config.output);
let json = {};
if (localStorage.getItem('test')) {
json = JSON.parse(localStorage.getItem('test'));
if ($input.length > 0) {
$input.val(JSON.stringify(this.outputJson));
}
};
if ($.inArray(heure, json[date]) === -1) {
console.log('Jsuis pas encore lo');
/**
* Event for input
* @param e event
*/
this.eventCheckInput = (e) => {
let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked');
if (json[date] === undefined) {
json[date] = [ heure ];
} else {
if (isChecked) {
json[date].push(heure);
json[date].sort();
}
}
this.addInOutputObject(data);
} else {
if (!isChecked) {
console.log('Je suis lo et pa check, alor jdegoge');
//Supprime l'entrée dans le JSON
let index = json[date].indexOf(heure);
if (index > -1) {
json[date].splice(index, 1);
this.removeInOutputObject(data)
}
//Supprime la clé dans le JSON si le tableau est vide
if (json[date].length === 0) {
console.log('Jsui vide lo');
delete json[date];
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();
}
};
/**
* 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)
}
localStorage.setItem('test', JSON.stringify(json));
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);
}
console.log(json);
let index = this.hours.indexOf(hour);
let $input = $('<input type="hidden">');
if (index !== -1) {
this.hours.splice(index, 1)
}
//Check si l'input est créé
if ($('#jsonGenerate').length !== 0) {
$input.val(JSON.stringify(json));
for(let yolo in this.outputJson) {
let pipa = this.outputJson[yolo].indexOf(hour);
} else {
$input.val(JSON.stringify(json)).attr('id', 'jsonGenerate');
$('#myTables').after($input);
if (pipa !== -1) {
this.outputJson[yolo].splice(pipa, 1);
}
}
this.reinit();
};
/**
* Event for input
* @param e event
* Add value into json
* @param data
*/
this.eventInput = (e) => {
let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked');
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]);
}
}
};
let date = data[0];
let hour = 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]);
this.createJSON(date, hour, isChecked);
if (index !== -1) {
output.splice(index, 1);
}
}
};
/**
......@@ -334,7 +709,12 @@
let config = initializeConfig();
this.each(function() {
new Doodle($(this), config);
if (!config.editMode) {
new DoodleFront($(this), config);
}
else {
new DoodleBack($(this), config);
}
});
return this;
......@@ -344,7 +724,9 @@
*/
function initializeConfig() {
let defaultOptions = {
editMode: false
editMode: false,
output: '',
input: ''
};
return $.extend({}, defaultOptions, options);
......
index.html
......@@ -60,7 +60,11 @@
<!-- Example row of columns -->
<div class="row">
<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>
......
js/app.js
$( document ).ready(function() {
$('.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"],
"20/01/2018": ["13", "14", "15"],
"21/01/2018": ["10", "14", "16", "17"],
"24/01/2018": ["10", "15", "17"],
"26/01/2018": ["10", "10", "13" ,"18"],
"20/02/2018": ["10", "10", "13" ,"18"]
"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"],
"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