filters interactivity + fix in fetch, flask and SQL requests

web/app.html

@@ -33,9 +33,7 @@
           <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
           filters
           </button>
-          <div class="dropdown-menu">
-              <input type="checkbox" name="myCheckBox" value="loremipsum">loremipsum<br>
-              <input type="checkbox" name="myCheckBox" value="loremipsum">loremipsum<br>
+          <div id="filters_checkboxes" class="dropdown-menu">
           </div>
       </div>
       <div class="btn-group mr-2" role="group" aria-label="Toggle show group">

web/app.js

@@ -32,7 +32,9 @@ window.onresize = function(){ location.reload(); }
 
 
 function render_graphs_wrapper() {
-    get_data().then(function(data){
+    const checked = getCheckedCheckboxIds('.checkbox-filters');
+    const id_array = checked.map(str => str.substring(9));
+    get_data_filtered(id_array).then(function(data){
         render_graphs(data[0], data[1], show_hidden);
     })
 }
@@ -49,6 +51,35 @@ function refresh_graphs() {
 // render graphs
 render_graphs_wrapper();
 
+// filters checkboxes
+function filters_checkboxes() {
+    fetch_list().then(function(data){
+        const node = d3.select("#filters_checkboxes");
+        for (const itemlist of data) {
+            var label = node.append("label");
+            var input = label.append("input")
+                            .attr("type", "checkbox")
+                            .attr("class", "checkbox-filters")
+                            .attr("id", `checkbox-${itemlist.uuid}`);
+            label.append("span")
+                .text(`${itemlist.name}`);
+            node.append("br");
+        }
+    })
+}
+filters_checkboxes()
+// listen to filters changes
+$(document).ready(function(){
+    $('#filters').on('show.bs.dropdown', function () {
+        console.log("Opening dropdown");
+    });
+
+    $('#filters').on('hidden.bs.dropdown', function () {
+        // console.log("Dropdown hidden");
+        refresh_graphs();
+    });
+});
+
 // add item
 document.getElementById("addbutton").addEventListener("click", addItem);
 

web/fetch.js

@@ -53,12 +53,104 @@ async function fetch_item() {
   }
 }
 
-async function get_data() {
-    items_data = await fetch_item();
-    history_data = await fetch_history();
-    // console.log(items_data)
-    // console.log(history_data)
-    return Array(items_data, history_data);
+async function fetch_history_filtered(id_array) {
+  try {
+    // SELECT uuid, itemid, skuid, choice, attributes, image, show
+    const apiUrl = `${currentUrl}app/datahistory-filtered`;
+    filters_string = id_array.join('#');
+    const postData = {
+        filters: filters_string
+    };
+
+    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) {
+        const rawData = await response.json();
+        var dateFormat = d3.timeParse("%a, %d %b %Y %H:%M:%S GMT");
+        // SELECT uuid, quantity, discount_percentage, price, currency, h_timestamp
+        let historyData = rawData.map(d => ({
+            uuid: d[0],
+            value: parseFloat(d[3].replace('$', '')),
+            currency: d[4],
+            date: dateFormat(d[5]),
+        }));
+        return historyData;
+    } else {
+        throw new Error('Error in server response');
+    }
+  } catch (error) {
+    console.error('Error fetching data item: ', error);
+    throw error;
+  }
+}
+
+async function fetch_item_filtered(id_array) {
+  try {
+    // SELECT uuid, itemid, skuid, choice, attributes, image, show
+    const apiUrl = `${currentUrl}app/dataitem-filtered`;
+    filters_string = id_array.join('#');
+    const postData = {
+        filters: filters_string
+    };
+
+    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) {
+        const rawData = await response.json();
+        const items = rawData.reduce((item, row) => {
+          const uuid = row[0];
+
+          const itemid = row[1];
+          const skuid = row[2];
+          const choice = row[3];
+          const attributes = row[4];
+          const image = row[5];
+          const show = row[6];
+
+          const values = {
+            itemid: itemid,
+            skuid: skuid,
+            choice: choice,
+            attributes: attributes,
+            image: image,
+            show: show,
+          };
+
+          item[uuid] = values;
+
+          return item;
+        }, {});
+
+        return items;
+    } else {
+        throw new Error('Error in server response');
+    }
+  } catch (error) {
+    console.error('Error fetching data item: ', error);
+    throw error;
+  }
 }
 
 async function fetch_list() {
@@ -77,3 +169,15 @@ async function fetch_list() {
       throw error;
     }
 }
+
+async function get_data() {
+    items_data = await fetch_item();
+    history_data = await fetch_history();
+    return Array(items_data, history_data);
+}
+
+async function get_data_filtered(id_array) {
+    items_data = await fetch_item_filtered(id_array);
+    history_data = await fetch_history_filtered(id_array);
+    return Array(items_data, history_data);
+}