<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
height: 500px;
}
#grafic{
background-color: #33ff33;
}
#grafic-d{
height:40px;
text-align:center;
background-color:#FF9999;
width: 100%;
}
.b-container {
width: 100%;
}
.b-container--container-item {
float: left;
}
.b-dairly {
display: inline-block;
width: 700px;
}
.b-grafic {
display: inline-block;
width: 100%;
}
.eRow{
padding: 0;
margin: 0;
border: 1px gray solid;
}
.eColomn {
display: inline-block;
width: 17%;
height: 25px;
padding: 5px;
text-align: center;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div class="b-container">
<div class="clearfix">
<div class="b-container--container-item">
<div class="b-dairly">
<div id="grafic-d">ЕЖЕДНЕВНИК</div>
<div class="eDivTable"></div>
<div>
<input type="button" class="eButtonAdd" value="Add new notice" />
</div>
</div>
</div>
<div class="b-container--container-item">
<div class="b-grafic">
<div id="grafic">График</div>
<div id="test1">
<div id="barchart_values" style="width: 500px; height: 300px;"></div>
</div>
</div>
</div>
</div>
</div>
<script>
function fReturnInitArray(){
return [
["Element", "время(ч)", { role: "style" } ],
["сон", 5, "#b87333"],
["завтрак", 0.3, "silver"],
["уход в институт ", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
];
};
function fBuildArray(eDivTable){
var aArray = new Array();
aArray.push(fReturnInitArray()[0]);
var eRowSum = eDivTable.querySelectorAll('.eRow');
//console.log('eRowSum.length = ' + eRowSum.length);
for(k=0;k<eRowSum.length;k++){
var eColomnSum = eRowSum[k].querySelectorAll('.eColomn');
//console.log(k + ' eColomnSum.length = ' + eColomnSum.length);
var aColomnArray = new Array();
for(l=0;l<eColomnSum.length;l++){
if(k>0 && l<3){
//console.log('value = ' + eColomnSum[l].innerHTML + '; k = ' + k + '; l = ' + l + ';');
if(l == 1){
aColomnArray.push(parseInt(eColomnSum[l].innerHTML));
}else{
aColomnArray.push(eColomnSum[l].innerHTML);
};
};
};
if(k>0){
aArray.push(aColomnArray);
};
};
//console.log('aArray = ' + aArray);
return aArray;
};
google.load("visualization", "1", {packages:["corechart"]});
// google.setOnLoadCallback(drawChart(fReturnInitArray()));
function drawChart(aChartData){
var data = google.visualization.arrayToDataTable(aChartData);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Распорядок дня",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
};
window.onload = function(){
var eDivTable = document.querySelectorAll('.eDivTable')[0];
var aChartInitData = fReturnInitArray();
for(i=0;i<aChartInitData.length;i++){
//console.log('aChartInitData[i] = ' + aChartInitData[i]);
var eDivRow = document.createElement('div');
eDivRow.classList.add('eRow');
eDivTable.appendChild(eDivRow);
for(j=0;j<aChartInitData[i].length;j++){
//console.log('aChartInitData[i][j] = ' + aChartInitData[i][j]);
var eDivColomn = document.createElement('div');
var sTextNode = document.createTextNode(aChartInitData[i][j]);
eDivColomn.classList.add('eColomn');
eDivRow.appendChild(eDivColomn);
eDivColomn.appendChild(sTextNode);
};
if(i>0){
eDivColomn = document.createElement('div');
eDivColomn.classList.add('eColomn');
var eButtonEdit = document.createElement('input');
eButtonEdit.type = 'button';
eButtonEdit.value = 'edit';
eButtonEdit.classList.add('eButtonEdit');
eDivRow.appendChild(eDivColomn);
eDivColomn.appendChild(eButtonEdit);
eDivColomn = document.createElement('div');
eDivColomn.classList.add('eColomn');
var eButtonDelete = document.createElement('input');
eButtonDelete.type = 'button';
eButtonDelete.value = 'delete';
eButtonDelete.classList.add('eButtonDelete');
eDivRow.appendChild(eDivColomn);
eDivColomn.appendChild(eButtonDelete);
};
};
var aConstructedArray = fBuildArray(eDivTable);
drawChart(aConstructedArray);
$('.eButtonAdd').click(function(){
$(this).css('display', 'none');
var eDivTable = document.querySelectorAll('.eDivTable')[0];
eButtonEditSum = eDivTable.querySelectorAll('.eButtonEdit');
for(m=0; m<eButtonEditSum.length; m++){
eButtonEditSum[m].style.display = 'none';
};
eButtonDeleteSum = eDivTable.querySelectorAll('.eButtonDelete');
for(m=0;m<eButtonDeleteSum.length;m++){
eButtonDeleteSum[m].style.display = 'none';
};
var eDivRow = document.createElement('div');
eDivRow.classList.add('eRow');
eDivTable.appendChild(eDivRow);
var eDivColomn01 = document.createElement('div');
var eInputText01 = document.createElement('input');
eInputText01.type = 'text';
var eDivColomn02 = document.createElement('div');
var eInputText02 = document.createElement('input');
eInputText02.type = 'text';
var eDivColomn03 = document.createElement('div');
var eInputText03 = document.createElement('input');
eInputText01.type = 'text';
var eDivColomn04 = document.createElement('div');
var eInputButtonAdd = document.createElement('input');
eInputButtonAdd.type = 'button';
eInputButtonAdd.value = 'Confirm';
eInputButtonAdd.classList.add('eButtonConfirm');
var eDivColomn05 = document.createElement('div');
var eInputButtonCancel = document.createElement('input');
eInputButtonCancel.type = 'button';
eInputButtonCancel.value = 'Cancel';
eInputButtonCancel.classList.add('eButtonCancel');
eDivColomn01.classList.add('eColomn');
eDivColomn02.classList.add('eColomn');
eDivColomn03.classList.add('eColomn');
eDivColomn04.classList.add('eColomn');
eDivColomn05.classList.add('eColomn');
eDivRow.appendChild(eDivColomn01);
eDivRow.appendChild(eDivColomn02);
eDivRow.appendChild(eDivColomn03);
eDivRow.appendChild(eDivColomn04);
eDivRow.appendChild(eDivColomn05);
eDivColomn01.appendChild(eInputText01);
eDivColomn02.appendChild(eInputText02);
eDivColomn03.appendChild(eInputText03);
eDivColomn04.appendChild(eInputButtonAdd);
eDivColomn05.appendChild(eInputButtonCancel);
$('.eButtonConfirm').click(function(){
alert('А тут вообще замена input на его значение ммм..');
});
$('.eButtonCancel').click(function(){
var eDivTable = document.querySelectorAll('.eDivTable')[0];
eButtonEditSum = eDivTable.querySelectorAll('.eButtonEdit');
for(m=0; m<eButtonEditSum.length; m++){
eButtonEditSum[m].style.display = 'block';
};
eButtonDeleteSum = eDivTable.querySelectorAll('.eButtonDelete');
for(m=0;m<eButtonDeleteSum.length;m++){
eButtonDeleteSum[m].style.display = 'block';
};
var eButtonAdd = document.querySelectorAll('.eButtonAdd')[0];
eButtonAdd.style.display = 'block';
eDivRow.remove();
});
});
$('.eButtonEdit').click(function(){
alert('Самое интересное оставил тебе');
});
$('.eButtonDelete').click(function(){
alert('Это тоже интересное');
});
};
</script>
</body>
</html>