itemlist manipulation functions + bootstrap button bar, TODO: interactivity

src/app.py

@@ -119,5 +119,11 @@ def data_item_request():
         print("fetching data item")
         return jsonify(get_item())
 
+@app.route('/app/datalist',methods = ['GET'])
+def data_list_request():
+    if request.method == 'GET':
+        print("fetching data item")
+        return jsonify(get_lists())
+
 if __name__ == '__main__':
    app.run(debug = True)

src/db.py

@@ -91,6 +91,35 @@ def get_item():
     connection.close()
     return results
 
+def get_item_filtered(lists_uuid):
+    '''
+    return items in a every specified lists (list of itemlist uuid)
+    every items if filter is empty
+    '''
+    n_filters = len(lists_uuid)
+    if n_filters > 0:
+        sql_request = """
+        SELECT uuid, itemid, skuid, choice, attributes, image, show
+        FROM item i
+        """
+        for i in range(n_filters):
+            sql_request += f', content c{str(i)}'
+        sql_request += ' WHERE '
+        for i,uuid in enumerate(lists_uuid):
+            sql_request += f' i.uuid = c{str(i)}.item_uuid and c{str(i)}.list_uuid = {str(uuid)} and'
+
+        sql_request = sql_request[:-3]  # remove last 'and'
+
+        connection = connect_db()
+        cursor = connection.cursor()
+        cursor.execute(sql_request)
+        results = cursor.fetchall()
+        cursor.close()
+        connection.close()
+    else:
+        results = get_item()
+    return results
+
 def get_item_keys():
     '''return items id and attributes from database'''
     connection = connect_db()
@@ -246,6 +275,18 @@ def remove_from_list(list_uuid, item_uuid):
     connection.commit()
     connection.close()
 
+def get_lists():
+    connection = connect_db()
+    cursor = connection.cursor()
+    cursor.execute("""
+    SELECT uuid, name, description
+    FROM itemlist
+    """)
+    results = cursor.fetchall()
+    cursor.close()
+    connection.close()
+    return results
+
 def export_csv():
     '''join item and history data from database and export it in ./output.csv'''
     connection = connect_db()

web/app.html

@@ -11,15 +11,46 @@
 
 <!-- Load d3.js -->
 <script src="https://d3js.org/d3.v6.js"></script>
+<!--load bootstrap-->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
 <!--banner-->
 <div class="banner">
     <p></p>
-    <input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
+    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
-    <input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
+      <div class="btn-group mr-2" role="group" aria-label="Add group">
-    <button id="addbutton" type="button">Add</button>
+        <input id="additemid" type="text" placeholder="item id" pattern="[0-9]*">
-    <button id="create_list" type="button">create list</button>
+        <input id="addattributes" type="text" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
-    <button id="global_toggleshow" class="global_toggleshow" type="button">show hidden</button>
+        <button id="addbutton" type="button">Add</button>
+      </div>
+      <div class="btn-group mr-2" role="group" aria-label="Manage list group">
+        <button id="manage_list" type="button">manage list</button>
+      </div>
+      <div class="dropdown btn-group mr-2" id="filters">
+          <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>
+      </div>
+      <div class="btn-group mr-2" role="group" aria-label="Toggle show group">
+        <button id="global_toggleshow" class="global_toggleshow" type="button">show hidden</button>
+      </div>
+    </div>
+</div>
+
+<!--popup manage list-->
+<div id="manageListPopup" class="popup">
+  <div class="popup-content">
+    <button id="create_list" type="button">create</button>
+    <button id="modify_list" type="button">modify</button>
+    <button id="delete_list" type="button">delete</button>
+  </div>
 </div>
 
 <!--popup create new list-->

web/fetch.js

@@ -60,3 +60,20 @@ async function get_data() {
     // console.log(history_data)
     return Array(items_data, history_data);
 }
+
+async function fetch_list() {
+    try {
+        const response = await fetch(`${currentUrl}app/datalist`);
+        const rawData = await response.json();
+        // SELECT uuid, name, description
+        let listData = rawData.map(d => ({
+            uuid: d[0],
+            name: d[1],
+            description: d[2],
+        }));
+        return listData;
+    } catch (error) {
+      console.error('Error fetching data history: ', error);
+      throw error;
+    }
+}

web/popups.js

@@ -7,6 +7,11 @@ document.addEventListener("keydown", (event) => {
   }
 });
 
+// manage list
+document.getElementById("manage_list").addEventListener("click", function () {
+            manageListPopup.style.display = 'flex';
+        });
+
 // create new list
 document.getElementById("create_list").addEventListener("click", function () {
             // remove div content
@@ -45,6 +50,9 @@ document.getElementById("create_list_cancel").addEventListener("click", function
             createListPopup.style.display = 'none';
         });
 
+// modify list
+
+
 
 // delete item, pop-up confirm
 document.addEventListener('DOMContentLoaded', function () {

web/style.css

@@ -23,11 +23,6 @@ body {
   text-align: center;
 }
 
-.global_toggleshow {
-  float: right;
-  margin-right: 20px;
-}
-
 .graph-container-hidden {
   background: rgba(0, 0, 0, 0.25);
 }