Skip to content

D
doodle
Commit 4dfafd84 by Simon
Options

Fred's first throw

parents
Showing with 339 additions and 0 deletions
.idea/misc.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/untitled.iml" filepath="$PROJECT_DIR$/.idea/untitled.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/untitled.iml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
assets/lib/doodle/css/doodle.css 0 → 100644
table {
border-collapse:collapse;
width:90%;
table-layout: fixed;
}
th, td {
border:1px solid black;
width:20%;
}
td, th {
text-align:center;
}
caption {
font-weight:bold
}
\ No newline at end of file
assets/lib/doodle/js/doodle.js 0 → 100644
(function($) {
/**
* doodle Object
* @param item
* @param config
*/
let Doodle = function(item, config) {
this.item = item;
this.config = config;
this.json = null;
this.days = [];
this.hours = [];
this.initLoad = () => {
this.getJsonData();
if(!this.json) {
console.warn('Invalid Json data');
return;
}
this.getDays();
this.getHours();
this.createTable();
};
this.createTable = () => {
this.item.html(`
<table>
<thead>
${this.createHeaderTable()}
</thead>
<tbody>
${this.createBodyTable()}
</tbody>
</table>
`);
};
/**
* Create table header for hours
* @returns {string}
*/
this.createBodyTable = () => {
let html = '';
for(let index in this.days) {
html += `
<tr>
<td>${this.days[index]}</td>
${this.createBodyContent(this.days[index])}
</tr>
`;
}
return html;
};
/**
* Create body content
* @param index
* @returns {string}
*/
this.createBodyContent = (index) => {
let html = '';
for(let key in this.hours) {
if(this.json[index].includes(this.hours[key])) {
html += '<td><input type="checkbox" /></td>';
} else {
html += '<td></td>';
}
}
return html;
};
/**
* Create table header for hours
* @returns {string}
*/
this.createHeaderTable = () => {
let html = `
<tr>
<th></th>
`;
for(let index in this.hours) {
html += `
<th>${this.hours[index]}</th>
`;
}
html += `
</tr>
`;
return html;
};
/**
* Get Days
*/
this.getDays = () => {
this.days = Object.keys(this.json);
console.log(new Date(this.days[0]))
};
/**
* 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]);
}
}
}
};
/**
* 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){
this.json = JSON.parse(data);
}
}
};
/**
* 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;
}
};
/**
* Init
*/
this.initLoad();
};
/**
*
* @param options
* @returns {$.fn.Doodle}
* @constructor
*/
$.fn.Doodle = function(options) {
let config = initializeConfig();
this.each(function() {
new Doodle($(this), config);
});
return this;
/**
*
*/
function initializeConfig() {
let defaultOptions = {
editMode: false
};
return $.extend({}, defaultOptions, options);
}
};
})(jQuery);
\ No newline at end of file
css/starter-template.css 0 → 100644
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 2rem;
}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<link href="assets/lib/doodle/css/doodle.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-12">
<div class="doodle" data-json="json/data.json"></div>
</div>
</div>
<hr>
<footer>
<p>© Company 2017</p>
</footer>
</div> <!-- /container -->
<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://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/doodle.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</body></html>
js/app.js 0 → 100644
$( document ).ready(function() {
$('.doodle').Doodle();
});
\ No newline at end of file
json/data.json 0 → 100644
{
"Vendredi 19 janvier": ["10", "11", "12"],
"Samedi 20 janvier": ["13", "14", "15"],
"Dimanche 21 janvier": ["10", "14", "17"]
}
\ 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