a lot of changes, including moving most view data into the board object.

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',
+          ]
+
+

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'<Layout> 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)

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('/<board_name>')
+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)
 
 
 

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 {
 

templates/100_blocks.html

@@ -8,6 +8,17 @@
   <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>
@@ -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 )
+
+}
+
 
 }
 </script>