flaskify
This commit is contained in:
@@ -1,48 +0,0 @@
|
||||
div#gridcontainer
|
||||
{
|
||||
width: 800px;
|
||||
line-height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
div.griditem, div.palette
|
||||
{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 6px;
|
||||
background: #AAA;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
div.palette {
|
||||
|
||||
border-radius: 50%;
|
||||
margin-left: 20px;
|
||||
margin-top: 30px;
|
||||
border: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
div#current-palette {
|
||||
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
float: right;
|
||||
margin: 20px 60px 30px;
|
||||
border: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
background: #333;
|
||||
|
||||
}
|
||||
|
||||
#palettes {
|
||||
|
||||
float: left;
|
||||
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="100_blocks.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="palettes"></div>
|
||||
<div id="current-palette"></div>
|
||||
<div id="gridcontainer"></div>
|
||||
|
||||
<script type="text/javascript" src="100_blocks.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
18
models.py
Normal file
18
models.py
Normal file
@@ -0,0 +1,18 @@
|
||||
from sqlalchemy import create_engine, Column, String, Integer
|
||||
from sqlalchemy.orm import sessionmaker
|
||||
from sqlalchemy.ext.declarative import declarative_base
|
||||
|
||||
Base = declarative_base()
|
||||
|
||||
engine = create_engine('sqlite:///boards.db')
|
||||
session = sessionmaker(bind=engine)()
|
||||
|
||||
|
||||
|
||||
class Board(Base):
|
||||
|
||||
__tablename__ = 'boards'
|
||||
|
||||
id = Column(Integer, primary_key=True)
|
||||
layout = Column(String(100), nullable=False)
|
||||
name = Column(String(50), nullable=False)
|
||||
31
routes.py
Normal file
31
routes.py
Normal file
@@ -0,0 +1,31 @@
|
||||
from flask import Flask, render_template, request, jsonify
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
|
||||
@app.route('/')
|
||||
def main():
|
||||
color_label_dict = {'red':'exercise',
|
||||
'blue':'work',
|
||||
'yellow':'admin',
|
||||
'green':'finance'}
|
||||
|
||||
colors = list(color_label_dict.keys())
|
||||
color_num_dict = {'': 0}
|
||||
color_num_dict = {color: idx + 1 for idx, color in enumerate(colors)}
|
||||
|
||||
return render_template('100_blocks.html',
|
||||
colors=colors,
|
||||
color_label_dict=color_label_dict,
|
||||
color_num_dict=color_num_dict)
|
||||
|
||||
|
||||
@app.route('/save/', methods=['POST'])
|
||||
def save():
|
||||
print(vars(request.form))
|
||||
return jsonify(vars(request.form))
|
||||
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
49
static/css/100_blocks.css
Normal file
49
static/css/100_blocks.css
Normal file
@@ -0,0 +1,49 @@
|
||||
:root {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
|
||||
#gridcontainer
|
||||
{
|
||||
width: 800px;
|
||||
line-height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.griditem, .palette
|
||||
{
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 6px;
|
||||
background: #AAA;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.palette {
|
||||
|
||||
border-radius: 50%;
|
||||
margin-left: 20px;
|
||||
margin-top: 30px;
|
||||
border: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
#current-palette {
|
||||
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
float: right;
|
||||
margin: 20px 60px 30px;
|
||||
border: 2px solid black;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#palettes {
|
||||
|
||||
float: left;
|
||||
|
||||
}
|
||||
@@ -1,3 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<div id="palettes"></div>
|
||||
<div id="current-palette"></div>
|
||||
<div id="gridcontainer"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
/// begin JavaScript
|
||||
|
||||
function changeColor(o){
|
||||
|
||||
o.style.backgroundColor = o.style.backgroundColor == paletteColor ? '#AAA' : paletteColor;
|
||||
@@ -12,10 +29,39 @@ function setPalette(o) {
|
||||
|
||||
}
|
||||
|
||||
function save() {
|
||||
boxes = document.getElementsByClassName('griditem');
|
||||
layout = '';
|
||||
|
||||
for (var box of boxes) {
|
||||
num = colorNumLookup[box.style.backgroundColor];
|
||||
if (num == undefined) {
|
||||
num = 0;
|
||||
}
|
||||
layout += num
|
||||
}
|
||||
|
||||
var data = new FormData();
|
||||
data.append("json", JSON.stringify(layout));
|
||||
console.log(data)
|
||||
|
||||
fetch("/save/", {
|
||||
|
||||
headers: {'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'},
|
||||
method: "POST",
|
||||
body: data});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
window.onload = function () {
|
||||
|
||||
paletteColors = ['red', 'blue', 'yellow', 'green'];
|
||||
paletteColors = {{ colors | tojson }};
|
||||
colorLabelLookup = {{ color_label_dict | tojson }};
|
||||
colorNumLookup = {{ color_num_dict | tojson }};
|
||||
console.log(colorNumLookup);
|
||||
paletteColor = paletteColors[0];
|
||||
gridContainer = document.getElementById('gridcontainer');
|
||||
palettesDiv = document.getElementById('palettes');
|
||||
@@ -56,3 +102,7 @@ window.onload = function () {
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user