131 lines
2.8 KiB
HTML
131 lines
2.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Colors Colors</title>
|
|
<link rel="stylesheet" type="text/css" href="/static/css/100_blocks.css"/>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="save"><a href="javascript:save();">Save Board</a></div>
|
|
{% if all_boards %}
|
|
<div id="load-div">
|
|
|
|
<select name="load" id="load">
|
|
{% for board in all_boards %}
|
|
<option id="{{board.name}}" href="/{{board.name}}">{{board.name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
</div>
|
|
{% endif %}
|
|
<div id="palettes"></div>
|
|
<div id="current-palette"></div>
|
|
<div id="gridcontainer"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
/// begin JavaScript
|
|
|
|
board_name = "{{board.name}}";
|
|
num_clicks = '';
|
|
|
|
function changeColor(o){
|
|
|
|
o.style.backgroundColor = o.style.backgroundColor == paletteColor ? 'rgb(250,250,250)' : paletteColor;
|
|
|
|
}
|
|
|
|
|
|
function setPalette(o) {
|
|
|
|
paletteColor = o.style.backgroundColor;
|
|
|
|
}
|
|
|
|
function save() {
|
|
boxes = document.getElementsByClassName('griditem');
|
|
layout = '';
|
|
|
|
for (var box of boxes) {
|
|
num = colorNumLookup[box.style.backgroundColor];
|
|
if (num == undefined) {
|
|
num = 0;
|
|
}
|
|
layout += num
|
|
}
|
|
|
|
while (board_name == '') {
|
|
board_name = prompt('what would you like to name it?');
|
|
}
|
|
|
|
fetch("/save", {
|
|
|
|
headers: {'Accept': 'application/json',
|
|
'Content-Type': 'application/json'},
|
|
method: "POST",
|
|
body: JSON.stringify({layout: layout,
|
|
board_name: board_name})
|
|
|
|
|
|
})
|
|
}
|
|
|
|
|
|
window.onload = function () {
|
|
|
|
paletteColors = {{ board.color_list | tojson }};
|
|
colorNumLookup = {{ board.color_num_dict | tojson }};
|
|
paletteColor = paletteColors[0];
|
|
gridContainer = document.getElementById('gridcontainer');
|
|
palettesDiv = document.getElementById('palettes');
|
|
|
|
for (i=0; i<312; i++) {
|
|
|
|
box = document.createElement('div');
|
|
box.className = 'griditem';
|
|
|
|
box.addEventListener('click', function () {
|
|
|
|
changeColor(this);
|
|
num_clicks++;
|
|
if (board_name != '' || board_name == '' && num_clicks > 25) {
|
|
save();
|
|
}
|
|
|
|
});
|
|
|
|
box.style.marginRight = '4px';
|
|
gridContainer.appendChild(box);
|
|
|
|
}
|
|
|
|
for (colorIndex in paletteColors) {
|
|
|
|
paletteElement = document.createElement('div');
|
|
paletteElement.className = 'palette';
|
|
paletteElement.style.backgroundColor = paletteColors[colorIndex];
|
|
paletteElement.addEventListener('click', function () {
|
|
|
|
setPalette(this);
|
|
|
|
});
|
|
|
|
palettesDiv.appendChild(paletteElement);
|
|
|
|
}
|
|
|
|
loader = document.getElementById('load');
|
|
loader.onchange = function() {
|
|
|
|
window.open('http://0.0.0.0:5000/' + loader.options[loader.selectedIndex].id )
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|