Skip to content

D
doodle
Commit e40fdfff by Simon
Options

Ca marche lo

parent 5e04ff7b
Showing with 155 additions and 29 deletions
assets/lib/doodle/js/doodle.js
...@@ -4,13 +4,17 @@ ...@@ -4,13 +4,17 @@
* @param item * @param item
* @param config * @param config
*/ */
let Doodle = function(item, config) { let Doodle = 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 = [];
const EDITMODE = this.config.editMode;
this.initLoad = () => { this.initLoad = () => {
this.getJsonData(); this.getJsonData();
if(!this.json) { if(!this.json) {
...@@ -25,6 +29,8 @@ ...@@ -25,6 +29,8 @@
}; };
this.createTable = () => { this.createTable = () => {
$(document).on('click', 'input[type=checkbox]', this.eventInput);
this.item.html(` this.item.html(`
<table id="myTables"> <table id="myTables">
${this.createHeaderTable()} ${this.createHeaderTable()}
...@@ -41,24 +47,53 @@ ...@@ -41,24 +47,53 @@
* @returns {string} * @returns {string}
*/ */
this.createBodyTable = () => { this.createBodyTable = () => {
let html = ''; let $thead = $('<thead>');
let html, tbodyFinal;
for(let index in this.days) {
html += ` if (EDITMODE) {
<tr> let dayLength = this.days.length;
<td>${this.days[index]}</td>
${this.createBodyContent(this.days[index])} for(let i = 0; i < (dayLength + 1); i++) {
</tr> let $tr = $('<tr>');
`;
if (!(i == dayLength)) {
let formatDate = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD MMMM YYYY');
html = $tr.append('<td>' + formatDate + '</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 formatDate = moment(this.days[index], 'DD/MM/YYYY').locale('fr').format('DD MMMM YYYY');
html = $tr.append('<td>' + formatDate + '</td>')
.append(this.createBodyContent(this.days[index]));
tbodyFinal = $thead.append(html);
}
} }
return html;
return tbodyFinal.html();
}; };
function createInputBox(hasTask, name, id, setDisabled) { function createInputBox(hour, day) {
return "<input type='checkbox' id='" + id + "' name='" + name + "'" + let dayFormat = moment(day, 'DD/MM/YYYY').format('DDMMYYYY');
(hasTask ? " checked" : "") + (setDisabled ? " disabled" : "") + " />" + console.log(dayFormat);
"<label class='checkWrapper' for='" + id + "'></label>";
return "<input type='checkbox' data-check=" + dayFormat + '_' + hour + " />"
} }
/** /**
...@@ -67,17 +102,21 @@ ...@@ -67,17 +102,21 @@
* @returns {string} * @returns {string}
*/ */
this.createBodyContent = (index) => { this.createBodyContent = (index) => {
let html = ''; let html, plop;
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><input type="checkbox" /></td>'; html = '<td>' + createInputBox(this.hours[key], index) + '</td>';
} else { } else {
html += '<td></td>'; html = '<td></td>';
}
}
plop = $td.append(html);
} }
return html; return plop.html();
}; };
/** /**
...@@ -89,12 +128,20 @@ ...@@ -89,12 +128,20 @@
let $tr = $('<tr>'); let $tr = $('<tr>');
let html, theadFinal; let html, theadFinal;
for(let index in this.hours) { let hoursSorted = this.hours.sort();
for(let index in hoursSorted) {
//La première case est vide //La première case est vide
if (index < 1) if (index < 1) {
html = $tr.append('<th></th>'); html = $tr.append('<th></th>');
}
html = $tr.append('<th>' + hoursSorted[index] + '</th>');
html = $tr.append('<th>' + this.hours[index] + '</th>'); if (index == this.hours.length - 1 && EDITMODE) {
html = $tr.append('<th>+</th>');
}
} }
theadFinal = $thead.append(html); theadFinal = $thead.append(html);
...@@ -107,7 +154,6 @@ ...@@ -107,7 +154,6 @@
*/ */
this.getDays = () => { this.getDays = () => {
this.days = Object.keys(this.json); this.days = Object.keys(this.json);
console.log(new Date(this.days[0]))
}; };
/** /**
...@@ -169,6 +215,77 @@ ...@@ -169,6 +215,77 @@
} }
}; };
this.createJSON = (date, heure, isChecked) => {
/*let json = {};
console.log(isChecked);
if (localStorage.getItem('test')) {
console.log('YEnA');
json = JSON.parse(localStorage.getItem('test'));
} else {
console.log('Empty');
json = {
date : '',
hour: []
};
}
console.log(json.date);
/!**
* Check si je suis lo
*!/
if ($.inArray(heure, json.hour) === -1) {
console.log('Jsuis pas encore lo');
json.date = date;
json.hour.push(heure);
}
localStorage.setItem('test', JSON.stringify(json));
console.log(json);*/
let json = {};
if (localStorage.getItem('test')) {
console.log('YEnA');
json = JSON.parse(localStorage.getItem('test'));
}
if ($.inArray(heure, json[date]) === -1) {
console.log('Jsuis pas encore lo');
if (json[date] === undefined) {
json[date] = [ heure ];
} else {
json[date].push(heure);
}
}
localStorage.setItem('test', JSON.stringify(json));
console.log(json);
};
/**
* Event for input
* @param e event
*/
this.eventInput = (e) => {
let data = $(e.target).data('check').split('_');
let isChecked = $(e.target).is(':checked');
let date = data[0];
let hour = data[1];
this.createJSON(date, hour, isChecked);
};
/** /**
* Init * Init
*/ */
......
assets/lib/doodle/js/moment.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/lib/doodle/js/moment.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"><head> <html lang="fr"><head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
...@@ -74,7 +74,9 @@ ...@@ -74,7 +74,9 @@
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>
<script src="assets/lib/doodle/js/moment.js"></script>
<script src="assets/lib/doodle/js/doodle.js" type="text/javascript"></script> <script src="assets/lib/doodle/js/doodle.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script> <script src="js/app.js" type="text/javascript"></script>
</body></html> </body></html>
js/app.js
$( document ).ready(function() { $( document ).ready(function() {
$('.doodle').Doodle(); $('.doodle').Doodle({
editMode: false
});
}); });
\ No newline at end of file
json/data.json
{ {
"Vendredi 19 janvier": ["10", "11", "12"], "19/01/2018": ["10", "11", "12", "18"],
"Samedi 20 janvier": ["13", "14", "15"], "20/01/2018": ["13", "14", "15"],
"Dimanche 21 janvier": ["10", "14", "17"] "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"]
} }
\ 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