97 lines
2.8 KiB
HTML
97 lines
2.8 KiB
HTML
<!doctype html>
|
|
|
|
|
|
|
|
<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet"></link>
|
|
<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>
|