show/hide button interactivity

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) {
-
-    // 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");