From 3f055829ce1c0610f2c53978f8342236a463d50a Mon Sep 17 00:00:00 2001 From: GaborPap Date: Tue, 14 May 2019 11:08:37 +0200 Subject: [PATCH 01/26] Workshop --- static/js/data_handler.js | 3 +++ static/js/dom.js | 13 +++++++++---- templates/index.html | 2 +- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/static/js/data_handler.js b/static/js/data_handler.js index 66df0ba8..92c3d2e5 100644 --- a/static/js/data_handler.js +++ b/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. diff --git a/static/js/dom.js b/static/js/dom.js index 0092afb7..a9e2542b 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -1,5 +1,5 @@ // It uses data_handler.js to visualize elements -import { dataHandler } from "./data_handler.js"; +import {dataHandler} from "./data_handler.js"; export let dom = { _appendToElement: function (elementToExtend, textToAppend, prepend = false) { @@ -22,7 +22,7 @@ export let dom = { }, loadBoards: function () { // retrieves boards and makes showBoards called - dataHandler.getBoards(function(boards){ + dataHandler.getBoards(function (boards) { dom.showBoards(boards); }); }, @@ -32,7 +32,7 @@ export let dom = { let boardList = ''; - for(let board of boards){ + for (let board of boards) { boardList += `
  • ${board.title}
    • `; @@ -44,7 +44,12 @@ export let dom = { `; - this._appendToElement(document.querySelector('#boards'), outerHtml); + //this._appendToElement(document.querySelector('#boards'), outerHtml); + + const boardContainer = document.querySelector('#boards'); + + boardContainer.innerHTML = ''; + boardContainer.insertAdjacentHTML('beforeend', outerHtml); }, loadCards: function (boardId) { // retrieves cards and makes showCards called diff --git a/templates/index.html b/templates/index.html index 6f42f26e..bea6634e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -12,7 +12,7 @@ - +

    ProMan

    From 15a64388a722b416fb5cb975da3ee3d08405026a Mon Sep 17 00:00:00 2001 From: BihackerViktor Date: Wed, 15 May 2019 13:20:27 +0200 Subject: [PATCH 02/26] login --- static/js/dom.js | 6 +++++- templates/index.html | 46 +++++++++++++++++++++++++++++--------------- templates/modal.html | 32 ++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 17 deletions(-) create mode 100644 templates/modal.html diff --git a/static/js/dom.js b/static/js/dom.js index a9e2542b..6b8fae81 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -19,6 +19,7 @@ export let dom = { }, init: function () { // This function should run once, when the page is loaded. + document.getElementById('login_button').addEventListener('click', dom.login) }, loadBoards: function () { // retrieves boards and makes showBoards called @@ -59,4 +60,7 @@ export let dom = { // it adds necessary event listeners also }, // here comes more features -}; + login: function () { + $('inputModal').modal({show:true}) + } +}; \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index bea6634e..9f47a8fa 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,21 +1,35 @@ - - - - - ProMan + + + + + ProMan - - - - + + + + - - - - -

    ProMan

    -
    Boards are loading...
    - + + + + + + + + + +

    ProMan

    +
    Boards are loading...
    +{% include 'modal.html' %} + \ No newline at end of file diff --git a/templates/modal.html b/templates/modal.html new file mode 100644 index 00000000..fe244b4a --- /dev/null +++ b/templates/modal.html @@ -0,0 +1,32 @@ + + + From 46f24e0f75a1d0038f5ff43ad720278bd4b36968 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rton=20T=C3=A9vald?= Date: Wed, 15 May 2019 13:25:15 +0200 Subject: [PATCH 03/26] write_csv --- persistence.py | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/persistence.py b/persistence.py index 1e1f1e3d..0a3d2735 100644 --- a/persistence.py +++ b/persistence.py @@ -1,12 +1,23 @@ import csv STATUSES_FILE = './data/statuses.csv' +STATUSES_HEADER = ['id', 'title'] BOARDS_FILE = './data/boards.csv' +BOARDS_HEADER = ['id', 'title'] CARDS_FILE = './data/cards.csv' +CARDS_HEADER = ['id', 'board_id', 'title', 'status_id', 'order'] + _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 +60,15 @@ def get_boards(force=False): def get_cards(force=False): return _get_data('cards', CARDS_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) From 01d4a8cdfd87e490f026da19c1be325746dfd4ee Mon Sep 17 00:00:00 2001 From: Roy91 Date: Wed, 15 May 2019 14:04:54 +0200 Subject: [PATCH 04/26] in prgoress --- static/css/main.css | 132 ++++++++++++++++++++++++++++++++++++++- static/js/dom.js | 26 ++++---- static/js/main.js | 2 + templates/index.html | 3 +- templates/templates.html | 29 +++++++++ 5 files changed, 175 insertions(+), 17 deletions(-) create mode 100644 templates/templates.html diff --git a/static/css/main.css b/static/css/main.css index d8f3b84f..a8b8f2f2 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,129 @@ -#boards { - background-color: green; -} \ No newline at end of file +: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; +} diff --git a/static/js/dom.js b/static/js/dom.js index a9e2542b..0c33575b 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -30,26 +30,26 @@ export let dom = { // shows boards appending them to #boards div // it adds necessary event listeners also - let boardList = ''; + + let template = document.querySelector('#board_header'); + const boardContainer = document.querySelector('#boards'); + let clone = document.importNode(template.content, true); for (let board of boards) { - boardList += ` -
  • ${board.title}
    • - `; - } + let section = document.createElement('section'); + section.classList.add('board'); + console.log(clone.querySelector('.board-title')); + clone.querySelector('.board-title').innerHTML = board.title; - const outerHtml = ` -
      - ${boardList} -
    - `; - //this._appendToElement(document.querySelector('#boards'), outerHtml); - const boardContainer = document.querySelector('#boards'); + section.appendChild(clone); + boardContainer.appendChild(section); + } + + //this._appendToElement(document.querySelector('#boards'), outerHtml); boardContainer.innerHTML = ''; - boardContainer.insertAdjacentHTML('beforeend', outerHtml); }, loadCards: function (boardId) { // retrieves cards and makes showCards called diff --git a/static/js/main.js b/static/js/main.js index f9298ae2..556afd8c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -7,6 +7,8 @@ function init() { // loads the boards to the screen dom.loadBoards(); + dom.loadCards(); + } init(); diff --git a/templates/index.html b/templates/index.html index bea6634e..64300681 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,9 +13,10 @@ +

    ProMan

    Boards are loading...
    - + {% include "templates.html" %} \ No newline at end of file diff --git a/templates/templates.html b/templates/templates.html new file mode 100644 index 00000000..e140f8c6 --- /dev/null +++ b/templates/templates.html @@ -0,0 +1,29 @@ + + + +{# Board header template parent section class="board" #} + + +{# Board coulumn template parent: div class="board-columns" #} + + +{# Card sample parent:board-column-content #} + + From 6a8f925f0a8333ee77007869a070c366e5df8ce2 Mon Sep 17 00:00:00 2001 From: Roy91 Date: Wed, 15 May 2019 14:16:42 +0200 Subject: [PATCH 05/26] board show --- static/js/dom.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/static/js/dom.js b/static/js/dom.js index 0c33575b..735a2fe9 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -30,26 +30,22 @@ export let dom = { // shows boards appending them to #boards div // it adds necessary event listeners also - - let template = document.querySelector('#board_header'); const boardContainer = document.querySelector('#boards'); - let clone = document.importNode(template.content, true); + boardContainer.innerHTML = ''; for (let board of boards) { + let template = document.querySelector('#board_header'); + let clone = document.importNode(template.content, true); let section = document.createElement('section'); section.classList.add('board'); console.log(clone.querySelector('.board-title')); clone.querySelector('.board-title').innerHTML = board.title; - - - section.appendChild(clone); boardContainer.appendChild(section); } + console.log(boardContainer); //this._appendToElement(document.querySelector('#boards'), outerHtml); - - boardContainer.innerHTML = ''; }, loadCards: function (boardId) { // retrieves cards and makes showCards called From 95f1e2c80edcba9f989617076f28761e121debb1 Mon Sep 17 00:00:00 2001 From: Roy91 Date: Wed, 15 May 2019 14:17:43 +0200 Subject: [PATCH 06/26] listAllBoardHeader --- static/js/dom.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/static/js/dom.js b/static/js/dom.js index 735a2fe9..e442802a 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -38,13 +38,10 @@ export let dom = { let clone = document.importNode(template.content, true); let section = document.createElement('section'); section.classList.add('board'); - console.log(clone.querySelector('.board-title')); clone.querySelector('.board-title').innerHTML = board.title; section.appendChild(clone); boardContainer.appendChild(section); } - console.log(boardContainer); - //this._appendToElement(document.querySelector('#boards'), outerHtml); }, loadCards: function (boardId) { From 168640c732328f896e4f1ccad8b03e5ae796e23f Mon Sep 17 00:00:00 2001 From: GaborPap Date: Wed, 15 May 2019 14:59:46 +0200 Subject: [PATCH 07/26] ajax --- main.py | 23 +++++++++++++++----- persistence.py | 2 +- static/js/data_handler.js | 2 ++ static/js/dom.js | 44 +++++++++++++++++++++++++++++++++++++-- util.py | 12 ++++++++++- 5 files changed, 74 insertions(+), 9 deletions(-) diff --git a/main.py b/main.py index 9e25a1ac..59393e86 100644 --- a/main.py +++ b/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/") -@json_response +@util.json_response def get_cards_for_board(board_id: int): """ All cards that belongs to a board @@ -32,6 +34,17 @@ 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(): + user = request.form.get('user-name') + + password = request.form.get('password') + pass_tmp = util.hash_password("alma") + + if util.verify_password(password,pass_tmp): + # print("+slkdjflskdjfskldjfs") + return json.dumps({'success': True}), 200, {'ContentType': 'application/json'} + return json.dumps({'success': False}), 500, {'ContentType': 'application/json'} def main(): app.run(debug=True) diff --git a/persistence.py b/persistence.py index 1e1f1e3d..6cc0b4f8 100644 --- a/persistence.py +++ b/persistence.py @@ -24,7 +24,7 @@ def _read_csv(file_name): def _get_data(data_type, file, force): """ Reads defined type of data from file or cache - :param data_type: key where the data is stored in cache + :param data_type: key where the data is stored in cachexxxx :param file: relative path to data file :param force: if set to True, cache will be ignored :return: OrderedDict diff --git a/static/js/data_handler.js b/static/js/data_handler.js index 92c3d2e5..7c92d1c0 100644 --- a/static/js/data_handler.js +++ b/static/js/data_handler.js @@ -58,3 +58,5 @@ export let dataHandler = { } // here comes more features }; + +sessionStorage.get \ No newline at end of file diff --git a/static/js/dom.js b/static/js/dom.js index 6b8fae81..3aad1b27 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -61,6 +61,46 @@ export let dom = { }, // here comes more features login: function () { - $('inputModal').modal({show:true}) - } + + let data = { + "url": "/login", + "message": "Wrong user name or password" + }; + + dom.getAjax(data); + }, + + + + getAjax: function(data) { + let form_values = {}; + $('#inputModal').modal({show: true}); + $('#inputForm').submit(function () { + let $inputs = $('#inputForm :input'); + $inputs.each(function () { + form_values[this.name] = $(this).val(); + }); + + $.ajax({ + type: 'POST', + url: '/login', + dataType: 'json', + data: form_values + }) + .then( + + function success() { + alert("Logged in"); + location.reload() + }, + function fail() { + alert(data["message"]); + location.reload(); + } + ); + + + }); +} + }; \ No newline at end of file diff --git a/util.py b/util.py index 352cbd88..26f36679 100644 --- a/util.py +++ b/util.py @@ -1,6 +1,6 @@ from functools import wraps from flask import jsonify - +import bcrypt def json_response(func): """ @@ -13,3 +13,13 @@ def decorated_function(*args, **kwargs): return jsonify(func(*args, **kwargs)) return decorated_function + +def hash_password(plain_text_password): + hashed_bytes = bcrypt.hashpw(plain_text_password.encode('utf-8'), bcrypt.gensalt()) + return hashed_bytes.decode('utf-8') + + +def verify_password(plain_text_password, hashed_password): + hashed_bytes_password = hashed_password.encode('utf-8') + return bcrypt.checkpw(plain_text_password.encode('utf-8'), hashed_bytes_password) + From fbc3b3db73499a20ced7cb7ebee8ee37970165d8 Mon Sep 17 00:00:00 2001 From: GaborPap Date: Thu, 16 May 2019 08:53:03 +0200 Subject: [PATCH 08/26] merge --- main.py | 1 + static/js/dom.js | 3 ++- templates/modal.html | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/main.py b/main.py index 59393e86..628f4c41 100644 --- a/main.py +++ b/main.py @@ -36,6 +36,7 @@ def get_cards_for_board(board_id: int): @app.route('/login', methods=["GET","POST"]) def login(): + user = request.form.get('user-name') password = request.form.get('password') diff --git a/static/js/dom.js b/static/js/dom.js index 3aad1b27..3a0b5ff4 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -73,9 +73,10 @@ export let dom = { getAjax: function(data) { + event.preventDefault(); let form_values = {}; $('#inputModal').modal({show: true}); - $('#inputForm').submit(function () { + $('#submit-button').click( function () { let $inputs = $('#inputForm :input'); $inputs.each(function () { form_values[this.name] = $(this).val(); diff --git a/templates/modal.html b/templates/modal.html index fe244b4a..f448678f 100644 --- a/templates/modal.html +++ b/templates/modal.html @@ -22,7 +22,7 @@
    - +
    From f36603f35320415a2566bdcc3cba80a71a956cb8 Mon Sep 17 00:00:00 2001 From: Roy91 Date: Thu, 16 May 2019 09:49:12 +0200 Subject: [PATCH 09/26] tolni --- static/js/data_handler.js | 8 ++++++++ static/js/dom.js | 29 ++++++++++++++++++++++++----- static/js/main.js | 1 - templates/index.html | 2 +- templates/templates.html | 26 ++++++++++++++++++++++---- 5 files changed, 55 insertions(+), 11 deletions(-) diff --git a/static/js/data_handler.js b/static/js/data_handler.js index 92c3d2e5..40b66cb1 100644 --- a/static/js/data_handler.js +++ b/static/js/data_handler.js @@ -46,6 +46,14 @@ 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; + // console.log(this._data = response); + callback(response) + }); }, getCard: function (cardId, callback) { // the card is retrieved and then the callback function is called with the card diff --git a/static/js/dom.js b/static/js/dom.js index e442802a..e34280a8 100644 --- a/static/js/dom.js +++ b/static/js/dom.js @@ -26,30 +26,49 @@ export let dom = { dom.showBoards(boards); }); }, + showBoards: function (boards) { // shows boards appending them to #boards div // it adds necessary event listeners also - const boardContainer = document.querySelector('#boards'); + const boardContainer = document.querySelector('.board-container'); boardContainer.innerHTML = ''; for (let board of boards) { + let template = document.querySelector('#board_header'); let clone = document.importNode(template.content, true); - let section = document.createElement('section'); - section.classList.add('board'); + let section = document.createElement(`section`); + section.id = `board${board.id}`; + section.classList.add(`board`); clone.querySelector('.board-title').innerHTML = board.title; section.appendChild(clone); boardContainer.appendChild(section); + dom.loadCards(board.id); } - //this._appendToElement(document.querySelector('#boards'), outerHtml); }, + loadCards: function (boardId) { - // retrieves cards and makes showCards called + dataHandler.getCardsByBoardId(boardId, function () { + dom.showCards() + }) + + // dom.showCards(board_id); + // }) }, showCards: function (cards) { // shows the cards of a board // it adds necessary event listeners also + console.log(cards) + const section = document.querySelector(`board${id}`); + + for (let card of cards){ + let template_column= document.querySelector('#board_columns'); + let clone_template = document.importNode(template_column.content, true); + clone_template.querySelector('.board-column-title').innerHTML = card.title; + section.appendChild(clone_template) + } + }, // here comes more features }; diff --git a/static/js/main.js b/static/js/main.js index 556afd8c..afff80c3 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -7,7 +7,6 @@ function init() { // loads the boards to the screen dom.loadBoards(); - dom.loadCards(); } diff --git a/templates/index.html b/templates/index.html index 64300681..a90826d2 100644 --- a/templates/index.html +++ b/templates/index.html @@ -17,6 +17,6 @@

    ProMan

    -
    Boards are loading...
    +
    Boards are loading...
    {% include "templates.html" %} \ No newline at end of file diff --git a/templates/templates.html b/templates/templates.html index e140f8c6..f42a880f 100644 --- a/templates/templates.html +++ b/templates/templates.html @@ -11,10 +11,28 @@ {# Board coulumn template parent: div class="board-columns" #} -