diff --git a/.routes.py.swo b/.routes.py.swo new file mode 100644 index 0000000..2f5127a Binary files /dev/null and b/.routes.py.swo differ diff --git a/boards.db b/boards.db index 8a6db1b..d3e0f31 100644 Binary files a/boards.db and b/boards.db differ diff --git a/config.py b/config.py new file mode 100644 index 0000000..a57afc5 --- /dev/null +++ b/config.py @@ -0,0 +1,25 @@ + + + +config = dict(num_squares=312) + +colors = [ + 'red', + 'blue', + 'yellow', + 'green', + '#2C2416', + 'black', + '#F98D8D', + 'orange', + '#1A1B29', + '#000080', + '#333333', + '#CF5300', + '#8B0000', + '#FFCE00', + '#006400', + '#CA278C', + ] + + diff --git a/models.py b/models.py index 19bcf65..9e86feb 100644 --- a/models.py +++ b/models.py @@ -1,11 +1,15 @@ +from collections import namedtuple + from sqlalchemy import create_engine, Column, String, Integer -from sqlalchemy.orm import sessionmaker +from sqlalchemy.orm import sessionmaker, scoped_session from sqlalchemy.ext.declarative import declarative_base +from config import config, colors + Base = declarative_base() engine = create_engine('sqlite:///boards.db') -session = sessionmaker(bind=engine)() +session = scoped_session(sessionmaker(bind=engine)) @@ -14,8 +18,72 @@ class Board(Base): __tablename__ = 'boards' id = Column(Integer, primary_key=True) - layout = Column(String(528), nullable=False) - name = Column(String(50), nullable=False) + name = Column(String(50), unique=True, nullable=False) + layout = Column(String(config['num_squares'] * 2), nullable=False) + palette = Column(String(400), nullable=False) def __repr__(self): return f' name: {self.name} {self.layout}' + + def update(self, layout): + self.layout = layout + session.commit() + + @property + def color_list(self): + return get_colors_from_palette(self.palette) + + @property + def color_num_dict(self): + return get_color_num_dict(self.color_list) + + +def get_boards(**kwargs): + return session.query(Board).filter_by(**kwargs).all() + + +def get_board(**kwargs): + one = get_boards(**kwargs) + if len(one) > 0: + return one[0] + + +def create_board(name, layout, colors): + new_board = Board(name=name, + layout=layout, + palette=prep_colors_for_table(colors)) + + session.add(new_board) + session.commit() + return new_board + + +def get_colors_from_palette(a_palette: str): + parsed_colors = [] + palette_list = a_palette.split('#')[1:] + for color in palette_list: + if color[0].islower(): + parsed_colors.append(color) + else: + parsed_colors.append('#' + color) + return parsed_colors + + +def get_color_num_dict(color_list): + return {color: str(idx + 1).zfill(2) + for idx, color in enumerate(color_list)} + + +def prep_colors_for_table(some_colors): + palette = '' + for color in some_colors: + if not color.startswith('#'): + color = '#' + color + palette += color + return palette + + +base_board = get_board(name='') or create_board('', '00' * num_squares, colors) + +# each number is represented by a two-digit integer string +color_num_dict = get_color_num_dict(colors) diff --git a/routes.py b/routes.py index c65e322..0be5eef 100644 --- a/routes.py +++ b/routes.py @@ -1,50 +1,40 @@ import random from string import ascii_lowercase -from flask import Flask, render_template, request, jsonify +from flask import Flask, render_template, request, jsonify, redirect, url_for -from models import Board, session +from config import config +from models import session, get_color_num_dict, base_board, colors, color_num_dict, get_board, get_boards, \ + create_board app = Flask(__name__) +num_squares = config['num_squares'] + + + +@app.route('/') +def main_board(board_name=None): + return render_template('100_blocks.html', + all_boards=get_boards(), + board=get_board(name=board_name) or base_board) @app.route('/') def main(): - color_label_dict = {'red':'exercise', - 'blue':'work', - 'yellow':'admin', - '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: str(idx + 1).zfill(2) 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) + all_boards=get_boards(), + board=base_board) @app.route('/save', methods=['POST']) def save(): - 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) + layout, board_name = request.get_json().values() + board = get_board(name=board_name) + if board is not None: + board.update(layout) + else: + board = create_board(layout, board_name, colors) + return jsonify(board.layout) diff --git a/static/css/100_blocks.css b/static/css/100_blocks.css index 6c2195f..55d99e3 100644 --- a/static/css/100_blocks.css +++ b/static/css/100_blocks.css @@ -1,6 +1,6 @@ :root { font-family: Arial, sans-serif; - background: #333; + background: rgb(250,250,250); } @@ -17,13 +17,13 @@ width: 70px; height: 70px; margin-left: -4px; - background: #AAA; + background: rgb(250,250,250); } .palette { display: inline-block; - margin-top: 30px; + margin-top: 10px; width: 70px; height: 70px; @@ -34,10 +34,13 @@ width: 90px; height: 90px; float: right; - margin: 20px 60px 30px; + margin: 10px 10px 10px; } +#load { +} + #palettes { diff --git a/templates/100_blocks.html b/templates/100_blocks.html index b0e573c..382032e 100644 --- a/templates/100_blocks.html +++ b/templates/100_blocks.html @@ -8,6 +8,17 @@ + {% if all_boards %} +
+ + + +
+ {% endif %}
@@ -16,9 +27,12 @@ /// begin JavaScript +board_name = "{{board.name}}"; +num_clicks = ''; + function changeColor(o){ - o.style.backgroundColor = o.style.backgroundColor == paletteColor ? '#AAA' : paletteColor; + o.style.backgroundColor = o.style.backgroundColor == paletteColor ? 'rgb(250,250,250)' : paletteColor; } @@ -26,7 +40,6 @@ function changeColor(o){ function setPalette(o) { paletteColor = o.style.backgroundColor; - currentPaletteDiv.style.backgroundColor = paletteColor; } @@ -42,13 +55,17 @@ function save() { layout += num } - console.log(layout); + 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}) + body: JSON.stringify({layout: layout, + board_name: board_name}) }) @@ -57,15 +74,13 @@ function save() { window.onload = function () { - paletteColors = {{ colors | tojson }}; - colorLabelLookup = {{ color_label_dict | tojson }}; - colorNumLookup = {{ color_num_dict | tojson }}; - console.log(colorNumLookup); + 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<264; i++) { + for (i=0; i<312; i++) { box = document.createElement('div'); box.className = 'griditem'; @@ -73,6 +88,10 @@ window.onload = function () { box.addEventListener('click', function () { changeColor(this); + num_clicks++; + if (board_name != '' || board_name == '' && num_clicks > 25) { + save(); + } }); @@ -96,9 +115,13 @@ window.onload = function () { } - currentPaletteDiv = document.getElementById('current-palette') - currentPaletteDiv.style.backgroundColor = paletteColor; - +loader = document.getElementById('load'); +loader.onchange = function() { + + window.open('http://0.0.0.0:5000/' + loader.options[loader.selectedIndex].id ) + +} + }