Review

data/boards.csv

@@ -1,3 +1,9 @@
-id,title
-1,"Board 1"
-2,"Board 2"
+id,title,userid
+1,"Board public 1",0
+2,"Board user 1",1
+3,"Board user 2",2
+4,"Board user 2_2",2
+5,"Board public 2",0
+6,"Board user 3",3
+7,"Board user 2_3",2
+8,"Board public 3",0

data/cards.csv

@@ -11,3 +11,4 @@ id,board_id,title,status_id,order
 10,2,"planning",2,0
 11,2,"done card 1",3,0
 12,2,"done card 1",3,1
+13,3,"planning",2,1

data/statuses.csv

@@ -1,5 +1,5 @@
 id,title
 0,new
-1,"in progress"
+1,"in_progress"
 2,testing
 3,done

data/users.csv

@@ -0,0 +1,3 @@
+id,username,password
+1,gabor,$2b$12$cyufJCWyed8lP57ATXq.9.SdfRu5S7jHOzloY1AI8kuBjpbe4.MvG
+2,alma,$2b$12$bmNkkgmQEYhw4WDdpAOYze5PqXBKwj.E2IkX7zC60E.NBFNuce/I2

data_handler.py

@@ -28,3 +28,11 @@ def get_cards_for_board(board_id):
             card['status_id'] = get_card_status(card['status_id'])  # Set textual status for the card
             matching_cards.append(card)
     return matching_cards
+
+
+def get_users():
+    return persistence.get_users(force=True)
+
+
+def write_users(user_data):
+    return persistence.write_users(user_data)

main.py

@@ -1,12 +1,14 @@
-from flask import Flask, render_template, url_for
-from util import json_response
+from flask import Flask, render_template, url_for, request
+# from util import json_response
+import util
+import json
 
 import data_handler
 
 app = Flask(__name__)
 
 
-@app.route("/")
+@app.route("/", methods=["GET", "POST"])
 def index():
     """
     This is a one-pager which shows all the boards and cards
@@ -15,7 +17,7 @@ def index():
 
 
 @app.route("/get-boards")
-@json_response
+@util.json_response
 def get_boards():
     """
     All the boards
@@ -24,7 +26,7 @@ def get_boards():
 
 
 @app.route("/get-cards/<int:board_id>")
-@json_response
+@util.json_response
 def get_cards_for_board(board_id: int):
     """
     All cards that belongs to a board
@@ -33,6 +35,43 @@ def get_cards_for_board(board_id: int):
     return data_handler.get_cards_for_board(board_id)
 
 
+@app.route('/login', methods=["GET", "POST"])
+def login():
+    users = data_handler.get_users()
+    user_data = util.get_user_data_from_form(request.form)
+
+    if util.check_user_login(user_data, users):
+        userid = util.get_usr_id(user_data["username"], users)
+        dic = {"userid": userid,
+               "success": True}
+
+        return json.dumps(dic), 200, {'ContentType': 'application/json'}
+    return json.dumps({'success': False}), 500, {'ContentType': 'application/json'}
+
+
+@app.route('/register', methods=["POST"])
+def register():
+    user_data = util.get_user_data_from_form(request.form)
+    users = data_handler.get_users()
+    if not util.check_user_exists(user_data["username"], users):
+        user_data["password"] = util.hash_password(user_data["password"])
+        user_data["id"] = util.get_max_id(data_handler.get_users()) + 1
+        if users:
+            users.append(user_data)
+        else:
+            users = [user_data]
+        print(users)
+        data_handler.write_users(users)
+
+        userid = util.get_usr_id(user_data["username"], users)
+        dic = {"userid": userid,
+               "success": True}
+
+        return json.dumps(dic), 200, {'ContentType': 'application/json'}
+
+    return json.dumps({'success': False}), 500, {'ContentType': 'application/json'}
+
+
 def main():
     app.run(debug=True)
 

persistence.py

@@ -1,12 +1,24 @@
 import csv
 
 STATUSES_FILE = './data/statuses.csv'
+STATUSES_HEADER = ['id', 'title']
 BOARDS_FILE = './data/boards.csv'
+BOARDS_HEADER = ['id', 'title', 'userid']
 CARDS_FILE = './data/cards.csv'
+CARDS_HEADER = ['id', 'board_id', 'title', 'status_id', 'order']
+USERS_FILE = './data/users.csv'
+USERS_HEADER = ['id', 'username', 'password']
 
 _cache = {}  # We store cached data in this dict to avoid multiple file readings
 
 
+def _write_csv(file_name, data, header):
+    with open(file_name, 'w') as csvfile:
+        writer = csv.DictWriter(csvfile, fieldnames=header, delimiter=',', quotechar='"')
+        writer.writeheader()
+        writer.writerows(data)
+
+
 def _read_csv(file_name):
     """
     Reads content of a .csv file
@@ -49,3 +61,23 @@ def get_boards(force=False):
 
 def get_cards(force=False):
     return _get_data('cards', CARDS_FILE, force)
+
+
+def get_users(force=False):
+    return _get_data('users', USERS_FILE, force)
+
+
+def write_statuses(data):
+    return _write_csv(STATUSES_FILE, data, STATUSES_HEADER)
+
+
+def write_boards(data):
+    return _write_csv(BOARDS_FILE, data, BOARDS_HEADER)
+
+
+def write_cards(data):
+    return _write_csv(CARDS_FILE, data, CARDS_HEADER)
+
+
+def write_users(data):
+    return _write_csv(USERS_FILE, data, USERS_HEADER)

requirements.txt

@@ -0,0 +1,10 @@
+bcrypt==3.1.6
+cffi==1.12.3
+Click==7.0
+Flask==1.0.2
+itsdangerous==1.1.0
+Jinja2==2.10.1
+MarkupSafe==1.1.1
+pycparser==2.19
+six==1.12.0
+Werkzeug==0.15.2

static/css/main.css

@@ -1,3 +1,129 @@
-#boards {
-    background-color: green;
-}
+:root{
+    --border-radius: 3px;
+    --status-1: #590000;
+    --status-2: #594300;
+    --status-3: #525900;
+    --status-4: #085900;
+}
+
+body{
+    min-width: 620px;
+    background: #ddd url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/diagonal-noise.png);
+    font-family: sans-serif;
+}
+
+h1, .board-title, .board-column-title{
+    font-weight: 100;
+}
+
+h1{
+    text-align: center;
+    font-size: 4em;
+    letter-spacing: 5px;
+    transform: scale(1.2, 1);
+}
+
+button{
+    background: #222;
+    color: #fff;
+    border: none;
+    font-size: 14px;
+    font-family: sans-serif;
+    padding: 4px 10px;
+}
+
+.board-container{
+    max-width: 960px;
+    margin: 0 auto;
+}
+
+section.board{
+    margin: 20px;
+    border: aliceblue;
+    background: #ffffff90;
+    border-radius: 3px;
+}
+
+.board-header{
+    height: 50px;
+    background: #fff;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.board-title{
+    margin: 13px;
+    display: inline-block;
+    font-size: 20px;
+}
+.board-title, .board-add, .board-toggle{
+    display: inline-block;
+}
+
+.board-toggle{
+    float: right;
+    margin: 13px;
+}
+
+.board-columns{
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.board-column{
+    padding: 10px;
+    flex: 1;
+}
+
+.board-column-content{
+    min-height: 49px;
+}
+
+.board-column-content:empty{
+    /*This only works if the tag is really empty and there is not even whitespace inside*/
+    border: 4px solid #cdcdcd;
+    margin-top: 4px;
+    border-radius: 10px;
+    background: #eee;
+}
+
+.board-column-title{
+    text-align: center;
+}
+
+.card{
+    position: relative;
+    background: #222;
+    color: #fff;
+    border-radius: var(--border-radius);
+    margin: 4px 0;
+    padding: 4px;
+}
+
+.board-column:nth-of-type(1) .card{
+    background: var(--status-1);
+}
+
+.board-column:nth-of-type(2) .card{
+    background: var(--status-2);
+}
+
+.board-column:nth-of-type(3) .card{
+    background: var(--status-3);
+}
+
+.board-column:nth-of-type(4) .card{
+    background: var(--status-4);
+}
+
+.card-remove{
+    display: block;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.card-title{
+    padding-right: 16px;
+}

static/js/data_handler.js

@@ -24,6 +24,9 @@ export let dataHandler = {
     },
     getBoards: function (callback) {
         // the boards are retrieved and then the callback function is called with the boards
+        if(this._data.hasOwnProperty('boards')){
+            callback(this._data.boards);
+        }
 
         // Here we use an arrow function to keep the value of 'this' on dataHandler.
         //    if we would use function(){...} here, the value of 'this' would change.
@@ -43,6 +46,13 @@ export let dataHandler = {
     },
     getCardsByBoardId: function (boardId, callback) {
         // the cards are retrieved and then the callback function is called with the cards
+        if (this._data.hasOwnProperty('cards')) {
+            callback(this._data.cards);
+        }
+        this._api_get(`/get-cards/${boardId}`, (response) => {
+            this._data = response;
+            callback(response)
+        });
     },
     getCard: function (cardId, callback) {
         // the card is retrieved and then the callback function is called with the card
@@ -55,3 +65,5 @@ export let dataHandler = {
     }
     // here comes more features
 };
+
+sessionStorage.get