From 9214896c75dbfe064f0f0cc67b11f03e87c37025 Mon Sep 17 00:00:00 2001 From: Sam Hadow Date: Tue, 13 Feb 2024 22:53:03 +0100 Subject: [PATCH] create list interactivity --- src/app.py | 14 +++++++++---- src/db.py | 31 ++++++++++++++++++++++------ web/app.html | 1 + web/app.js | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++ web/popups.js | 9 ++------ 5 files changed, 95 insertions(+), 17 deletions(-) diff --git a/src/app.py b/src/app.py index 76c2d9a..d8b0f25 100644 --- a/src/app.py +++ b/src/app.py @@ -11,14 +11,14 @@ CORS(app) def serve_index(): return render_template('app.html') -@app.route('/app/init', methods = ['GET']) +@app.route('/init', methods = ['GET']) def init_db(): status = check_schema() if not status: initialize() return str(status) -@app.route('/app/update', methods = ['GET']) +@app.route('/update', methods = ['GET']) def update_hist(): print("update") update_items() @@ -69,8 +69,14 @@ def createList(): data = request.get_json() name = data.get('name') description = data.get('description') - create_list(name, description) - return jsonify({'created list ': name}), 200 + items = data.get('items') + list_uuid = create_list(name, description) + if list_uuid: + for item in items.split('#'): + add_to_list(list_uuid, item) + return jsonify({'created list ': name}), 200 + else: + return jsonify({'create failed': name}), 400 @app.route('/app/add-to-list', methods=['POST']) def addToList(): diff --git a/src/db.py b/src/db.py index dc4f89d..bc2b7b7 100644 --- a/src/db.py +++ b/src/db.py @@ -164,19 +164,38 @@ def delete_item(uuid): def create_list(name, description): ''' initialize an itemlist in the database + return list uuid + return None if a list with this name already exist ''' if len(name) <= 50: connection = connect_db() cursor = connection.cursor() + cursor.execute(""" - INSERT INTO itemlist (uuid, name, description) - VALUES (nextval('uuid_list_sequence'), %s, %s) - """, (name, description)) + SELECT uuid + FROM itemlist + WHERE name = %s + """, (name,)) + + result = cursor.rowcount + + if result == 0: + cursor.execute(""" + INSERT INTO itemlist (uuid, name, description) + VALUES (nextval('uuid_list_sequence'), %s, %s) + """, (name, description)) + cursor.execute(""" + SELECT uuid + FROM itemlist + WHERE name = %s + """, (name,)) + result = cursor.fetchall()[0][0] + else: + result = None + connection.commit() connection.close() - return 1 - else: - return 0 + return result def add_to_list(list_uuid, item_uuid): ''' diff --git a/web/app.html b/web/app.html index 4ebe10c..7b7d96b 100644 --- a/web/app.html +++ b/web/app.html @@ -28,6 +28,7 @@

Create new list

+

Include items

diff --git a/web/app.js b/web/app.js index 1fcf407..26136c6 100644 --- a/web/app.js +++ b/web/app.js @@ -141,3 +141,60 @@ async function delItem(uuid) { throw new Error('Error in server response'); } } + +// function to create a list +document.getElementById("create_list_add").addEventListener("click", addList); +async function addList() { + + const checked = getCheckedCheckboxIds('.checkbox-itemlist'); + const items_uuid = checked.map(str => str.substring(9)).join('#'); + + const listname = document.getElementById("listName").value; + + if (listname.length !== 0) { + const apiUrl = `${currentUrl}app/create-list`; + const postData = { + name: listname, + description: document.getElementById("listDescription").value, + items: items_uuid + }; + + // clear input fields + document.getElementById("listName").value=''; + document.getElementById("listDescription").value=''; + + const requestOptions = { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(postData) + }; + + const response = await fetch(apiUrl, requestOptions) + .catch(error => { + console.error('Error during POST request:', error); + }); + + if (response.ok) { + createListPopup.style.display = 'none'; + console.log(response); + } else { + throw new Error('Error in server response'); + } + } else { + console.log("cannot create list without a name") + } + +} + +// get an array of id of checked checkboxes of a specific class name +function getCheckedCheckboxIds(classname) { + const checkboxes = d3.selectAll(classname); + const checkedIds = checkboxes.filter(function() { + return this.checked; + }).nodes().map(function(checkbox) { + return checkbox.id; + }); + return checkedIds; +} diff --git a/web/popups.js b/web/popups.js index 158f0a1..a35be99 100644 --- a/web/popups.js +++ b/web/popups.js @@ -9,15 +9,12 @@ document.addEventListener("keydown", (event) => { // create new list document.getElementById("create_list").addEventListener("click", function () { - - // remove div content const node = document.getElementById("checkbox-container"); while (node.firstChild) { node.removeChild(node.lastChild); } - // generate new checkboxes const checkboxContainer = d3.select("#checkbox-container"); fetch_item().then(function(data){ @@ -27,10 +24,8 @@ document.getElementById("create_list").addEventListener("click", function () { const checkbox = div.append("input") .attr("type", "checkbox") - .attr("id", `checkbox-${uuid}`) - .on("change", function() { - console.log(this.checked ? uuid : null); - }); + .attr("class", "checkbox-itemlist") + .attr("id", `checkbox-${uuid}`); const link = `https://fr.aliexpress.com/item/${item.itemid}.html`; const image = div.append("img")