diff --git a/src/app.py b/src/app.py index b9d2b71..e53c085 100644 --- a/src/app.py +++ b/src/app.py @@ -53,6 +53,13 @@ def del_item(): delete_item(uuid) return jsonify({'deleted': uuid}), 200 +@app.route('/show', methods=['POST']) +def toggle_item_show(): + data = request.get_json() + uuid = data.get('uuid') + toggle_show(uuid) + return jsonify({'toggled show/hide ': uuid}), 200 + @app.route('/datahistory',methods = ['GET']) def data_history_request(): if request.method == 'GET': diff --git a/src/db.py b/src/db.py index 7ed4ece..7b793d0 100644 --- a/src/db.py +++ b/src/db.py @@ -27,13 +27,16 @@ def connect_db(): return conn def add_item(itemid, skuid, choice, attributes, image): - '''insert a new item in the database''' + ''' + insert a new item in the database + items are shown by default + ''' connection = connect_db() cursor = connection.cursor() cursor.execute(""" - INSERT INTO item (uuid, itemid, skuid, choice, attributes, image) - VALUES (nextval('uuid_sequence'), %s, %s, %s, %s, %s) + INSERT INTO item (uuid, itemid, skuid, choice, attributes, image, show) + VALUES (nextval('uuid_sequence'), %s, %s, %s, %s, %s, true) """, (itemid, skuid, choice, attributes, image)) connection.commit() connection.close() @@ -80,7 +83,7 @@ def get_item(): connection = connect_db() cursor = connection.cursor() cursor.execute(""" - SELECT uuid, itemid, skuid, choice, attributes, image + SELECT uuid, itemid, skuid, choice, attributes, image, show FROM item """) results = cursor.fetchall() @@ -101,6 +104,22 @@ def get_item_keys(): connection.close() return results +def toggle_show(uuid): + ''' + show an item if hidden + hide if shown + ''' + connection = connect_db() + cursor = connection.cursor() + cursor.execute(""" + UPDATE item + SET show = NOT show + WHERE uuid = %s + """, (uuid,)) + cursor.close() + connection.commit() + connection.close() + def check_exist(itemid, skuid): '''check if an item is already in the database''' connection = connect_db() @@ -193,6 +212,7 @@ def initialize(): choice boolean, attributes text[], image text, + show boolean, primary key (uuid) ) """) diff --git a/web/app.html b/web/app.html index e01c577..b5fe336 100644 --- a/web/app.html +++ b/web/app.html @@ -18,6 +18,7 @@ + diff --git a/web/app.js b/web/app.js index f00e7d4..14b96ca 100644 --- a/web/app.js +++ b/web/app.js @@ -14,6 +14,12 @@ const width = window.innerWidth - margin.right - margin.left -10; // url const currentUrl = window.location.href; +// by default, do not show hidden items +var show_hidden = false; +document.getElementById("global_toggleshow").addEventListener("click", function() { + show_hidden = !show_hidden; + refresh_graphs(); +}); // reload page when window is resized // (resizes every elements) @@ -22,7 +28,7 @@ window.onresize = function(){ location.reload(); } function render_graphs_wrapper() { get_data().then(function(data){ - render_graphs(data[0], data[1]); + render_graphs(data[0], data[1], show_hidden); }) } @@ -74,6 +80,35 @@ async function addItem() { } } +async function toggle_hide(uuid) { +const apiUrl = `${currentUrl}app/show`; + const postData = { + uuid: uuid + }; + + 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) { + console.log(response); + // refresh graphs to stop displaying hidden item + // or display shown item + refresh_graphs(); + } else { + throw new Error('Error in server response'); + } +} + async function delItem(uuid) { const apiUrl = `${currentUrl}app/delete`; const postData = { diff --git a/web/fetch.js b/web/fetch.js index 018a6cf..3159562 100644 --- a/web/fetch.js +++ b/web/fetch.js @@ -19,7 +19,7 @@ async function fetch_history() { async function fetch_item() { try { - // SELECT uuid, itemid, skuid, choice, attributes, image + // SELECT uuid, itemid, skuid, choice, attributes, image, show const response = await fetch(`${currentUrl}app/dataitem`); const rawData = await response.json(); const items = rawData.reduce((item, row) => { @@ -30,6 +30,7 @@ async function fetch_item() { const choice = row[3]; const attributes = row[4]; const image = row[5]; + const show = row[6]; const values = { itemid: itemid, @@ -37,7 +38,7 @@ async function fetch_item() { choice: choice, attributes: attributes, image: image, - show: true + show: show, }; item[uuid] = values; diff --git a/web/rendergraphs.js b/web/rendergraphs.js index d862f44..8055e57 100644 --- a/web/rendergraphs.js +++ b/web/rendergraphs.js @@ -1,7 +1,4 @@ -function render_graphs(items, history) { - - // by default, do not show hidden items - var show_hidden = false; +function render_graphs(items, history, show_hidden) { // Date domain (width) const x = d3.scaleTime() @@ -51,10 +48,17 @@ function render_graphs(items, history) { // buttons to hide or show item g_div = this.parentNode.parentNode; const hide_button = document.createElement("button"); - hide_button.innerHTML = "hide"; + if (items[key].show) { + hide_button.innerHTML = "hide"; + } else { + hide_button.innerHTML = "show"; + } hide_button.style.position = "relative"; hide_button.style.top = `-${height+margin.bottom}px`; hide_button.style.left = `${margin.left+20}px`; + hide_button.addEventListener("click", function() { + toggle_hide(key); + }); g_div.append(hide_button); // button to delete item const del_button = document.createElement("button");