show/hide button interactivity

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':

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)
+    INSERT INTO item (uuid, itemid, skuid, choice, attributes, image, show)
-    VALUES (nextval('uuid_sequence'), %s, %s, %s, %s, %s)
+    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)
     )
     """)

web/app.html

@@ -18,6 +18,7 @@
     <input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
     <input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
     <button id="addbutton" type="button">Add</button>
+    <button id="global_toggleshow" type="button">show_hidden</button>
 </div>
 
 <!--popup confirmation window-->

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 = {

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;

web/rendergraphs.js

@@ -1,7 +1,4 @@
-function render_graphs(items, history) {
+function render_graphs(items, history, show_hidden) {
-
-    // by default, do not show hidden items
-    var show_hidden = false;
 
     // 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");