second commit

2024-11-19 11:33:05 -05:00
parent b012a68882
commit c054b893f9
6 changed files with 271 additions and 0 deletions
--- a/pages/checkboxes_demo.html
+++ b/pages/checkboxes_demo.html
@@ -0,0 +1,95 @@
+
+
+<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
+<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
+<html>
+    <div id="example-table"></div>
+
+</html>
+
+
+<script>
+ 
+ /* Function to execute when someone clicks on a cell  */
+ function cell_click_event(event, cell_clicked) {
+     /* get all the values */
+        column_name = cell_clicked.getColumn()
+            .getField()
+        column_value = cell_clicked.getValue()
+        animal_name = cell_clicked.getRow()
+            .getCells()[0].getValue()
+        new_value = !column_value
+
+     /* format the data to send.  Note how this resembles the UpdateRecordFeedSheet class in main.py */
+        let data_to_send = {
+            'animal_name': animal_name,
+            'column_name': column_name,
+            'value_set': new_value
+        }
+
+
+     /* Send the data as a post request.  If the request is done well, then update the cell value */
+        $.post({
+            url: 'update',
+            data: JSON.stringify(data_to_send),
+            dataType: 'json',
+            contentType: "application/json",
+	    success: function(data) {
+		cell_clicked.setValue(new_value)
+		}
+	    
+        })
+
+    }
+
+
+ /* Get data from the data.json endpoint in main.py, and then create a table */
+    $.getJSON("data.json", function(data) {
+        var table_data = data["result"]
+
+        console.log(table_data)
+
+
+	/* Create the table */
+        var table = new Tabulator("#example-table", {
+            columns: [{
+                    title: "Name",
+                    field: "name"
+                },
+                {
+                    title: "Prepped?",
+                    formatter: 'tickCross',
+                    field: 'got_prepped',
+                    sorter: "boolean",
+                    cellClick: cell_click_event
+                },
+
+                {
+                    title: "Fed?",
+                    formatter: 'tickCross',
+                    field: "was_fed",
+                    sorter: "boolean",
+                    cellClick: cell_click_event
+                },
+                {
+                    title: "Cleaned?",
+                    formatter: 'tickCross',
+                    field: "has_cleaned",
+                    sorter: "boolean",
+                    cellClick: cell_click_event
+                },
+                {
+                    title: "Leftovers?",
+                    formatter: 'tickCross',
+                    field: "has_leftovers",
+                    sorter: "boolean",
+                    cellClick: cell_click_event
+                },
+
+            ],
+            data: table_data
+        });
+    })
+</script>