refresh graphs instead of whole webpage
This commit is contained in:
parent
550848b4ff
commit
770952ed5e
46
web/app.js
46
web/app.js
@ -76,20 +76,27 @@ 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);
|
||||||
|
}
|
||||||
|
|
||||||
fetch_history().then(async function(data) {
|
|
||||||
items = await fetch_item();
|
function render_graphs(items, history) {
|
||||||
|
|
||||||
// by default, do not show hidden items
|
// by default, do not show hidden items
|
||||||
var show_hidden = false;
|
var show_hidden = false;
|
||||||
|
|
||||||
// Date domain (width)
|
// Date domain (width)
|
||||||
const x = d3.scaleTime()
|
const x = d3.scaleTime()
|
||||||
.domain(d3.extent(data, d => d.date))
|
.domain(d3.extent(history, d => d.date))
|
||||||
.range([3, width-3]);
|
.range([3, width-3]);
|
||||||
|
|
||||||
// Group the data by (uuid)
|
// Group the data by (uuid)
|
||||||
const nestedData = d3.group(data, d => d.uuid);
|
const nestedData = d3.group(history, d => d.uuid);
|
||||||
// Create a div for each graph
|
// Create a div for each graph
|
||||||
const graphDivs = d3.select("#graphs")
|
const graphDivs = d3.select("#graphs")
|
||||||
.selectAll(".graph-container")
|
.selectAll(".graph-container")
|
||||||
@ -240,7 +247,7 @@ fetch_history().then(async function(data) {
|
|||||||
|
|
||||||
// reset zoom on double click
|
// reset zoom on double click
|
||||||
svg.on("dblclick",function(){
|
svg.on("dblclick",function(){
|
||||||
x.domain(d3.extent(data, function(d) { return d.date; }))
|
x.domain(d3.extent(history, function(d) { return d.date; }))
|
||||||
// Axis
|
// Axis
|
||||||
dict_xAxis[key].transition().call(d3.axisBottom(x))
|
dict_xAxis[key].transition().call(d3.axisBottom(x))
|
||||||
// Lines
|
// Lines
|
||||||
@ -312,8 +319,25 @@ fetch_history().then(async function(data) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
})
|
}
|
||||||
|
|
||||||
|
function render_graphs_wrapper() {
|
||||||
|
get_data().then(function(data){
|
||||||
|
render_graphs(data[0], data[1]);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// refresh render
|
||||||
|
function refresh_graphs() {
|
||||||
|
const node = document.getElementById("graphs");
|
||||||
|
while (node.firstChild) {
|
||||||
|
node.removeChild(node.lastChild);
|
||||||
|
}
|
||||||
|
render_graphs_wrapper();
|
||||||
|
}
|
||||||
|
|
||||||
|
// render graphs
|
||||||
|
render_graphs_wrapper();
|
||||||
|
|
||||||
// add item
|
// add item
|
||||||
document.getElementById("addbutton").addEventListener("click", addItem);
|
document.getElementById("addbutton").addEventListener("click", addItem);
|
||||||
@ -344,8 +368,8 @@ async function addItem() {
|
|||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
// reload window to display new item
|
// refresh graphs to display new item
|
||||||
location.reload();
|
refresh_graphs();
|
||||||
} else {
|
} else {
|
||||||
throw new Error('Error in server response');
|
throw new Error('Error in server response');
|
||||||
}
|
}
|
||||||
@ -372,8 +396,8 @@ const apiUrl = `${currentUrl}app/delete`;
|
|||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
// reload window to stop displaying deleted item
|
// refresh graphs to stop displaying deleted item
|
||||||
location.reload();
|
refresh_graphs();
|
||||||
} else {
|
} else {
|
||||||
throw new Error('Error in server response');
|
throw new Error('Error in server response');
|
||||||
}
|
}
|
||||||
@ -385,12 +409,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
const yesBtn = document.getElementById('yesBtn');
|
const yesBtn = document.getElementById('yesBtn');
|
||||||
const noBtn = document.getElementById('noBtn');
|
const noBtn = document.getElementById('noBtn');
|
||||||
yesBtn.addEventListener('click', function () {
|
yesBtn.addEventListener('click', function () {
|
||||||
// Add your function to execute on 'Yes' click
|
|
||||||
delItem(del_key);
|
delItem(del_key);
|
||||||
confirmationPopup.style.display = 'none';
|
confirmationPopup.style.display = 'none';
|
||||||
});
|
});
|
||||||
noBtn.addEventListener('click', function () {
|
noBtn.addEventListener('click', function () {
|
||||||
// Add your function to execute on 'No' click
|
|
||||||
confirmationPopup.style.display = 'none';
|
confirmationPopup.style.display = 'none';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user