diff --git a/boards.db b/boards.db index 2ba26d6..8a6db1b 100644 Binary files a/boards.db and b/boards.db differ diff --git a/models.py b/models.py index 215a893..19bcf65 100644 --- a/models.py +++ b/models.py @@ -14,5 +14,8 @@ class Board(Base): __tablename__ = 'boards' id = Column(Integer, primary_key=True) - layout = Column(String(100), nullable=False) + layout = Column(String(528), nullable=False) name = Column(String(50), nullable=False) + + def __repr__(self): + return f' name: {self.name} {self.layout}' diff --git a/routes.py b/routes.py index d305076..c65e322 100644 --- a/routes.py +++ b/routes.py @@ -1,5 +1,10 @@ +import random +from string import ascii_lowercase + from flask import Flask, render_template, request, jsonify +from models import Board, session + app = Flask(__name__) @@ -8,11 +13,22 @@ def main(): color_label_dict = {'red':'exercise', 'blue':'work', 'yellow':'admin', - 'green':'finance'} + 'green':'finance', + '#2C2416':'', + 'black':'', + '#F98D8D':'', + 'orange':'', + 'white': '', + '#1a1b29': '', + '#000080': '', + '#333333':'', + '#CF5300': '', + '#8B0000': '', + } colors = list(color_label_dict.keys()) color_num_dict = {'': 0} - color_num_dict = {color: idx + 1 for idx, color in enumerate(colors)} + color_num_dict = {color: str(idx + 1).zfill(2) for idx, color in enumerate(colors)} return render_template('100_blocks.html', colors=colors, @@ -20,10 +36,15 @@ def main(): color_num_dict=color_num_dict) -@app.route('/save/', methods=['POST']) +@app.route('/save', methods=['POST']) def save(): - print(vars(request.form)) - return jsonify(vars(request.form)) + name = '' + for i in range(12): + name += random.choice(ascii_lowercase) + layout = list(request.get_json().values())[0] + session.add(Board(layout=layout, name=name)) + session.commit() + return jsonify(session.query(Board).first().layout) diff --git a/static/css/100_blocks.css b/static/css/100_blocks.css index 55119fc..6c2195f 100644 --- a/static/css/100_blocks.css +++ b/static/css/100_blocks.css @@ -6,28 +6,26 @@ #gridcontainer { - width: 800px; + width: 1700px; line-height: 0; clear: both; } -.griditem, .palette +.griditem { display: inline-block; width: 70px; height: 70px; - margin-left: 2px; - margin-bottom: 6px; + margin-left: -4px; background: #AAA; - border: 1px solid black; } .palette { - border-radius: 50%; - margin-left: 20px; + display: inline-block; margin-top: 30px; - border: 2px solid black; + width: 70px; + height: 70px; } @@ -37,7 +35,6 @@ height: 90px; float: right; margin: 20px 60px 30px; - border: 2px solid black; } diff --git a/templates/100_blocks.html b/templates/100_blocks.html index 2435950..d24d9f8 100644 --- a/templates/100_blocks.html +++ b/templates/100_blocks.html @@ -41,18 +41,16 @@ function save() { layout += num } - var data = new FormData(); - data.append("json", JSON.stringify(layout)); - console.log(data) - - fetch("/save/", { + console.log(layout); + fetch("/save", { headers: {'Accept': 'application/json', 'Content-Type': 'application/json'}, method: "POST", - body: data}); + body: JSON.stringify({layout: layout}) +}) } @@ -66,7 +64,7 @@ window.onload = function () { gridContainer = document.getElementById('gridcontainer'); palettesDiv = document.getElementById('palettes'); - for (i=0; i<100; i++) { + for (i=0; i<264; i++) { box = document.createElement('div'); box.className = 'griditem';