PixelHosting/Router-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update static/js/pages/visual-route.js

Browse source
This commit is contained in:
Blackwhitebear8 2025-07-06 17:32:33 +02:00
parent 402edf0784
commit 2765206b94
1 changed files with 65 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

28
static/js/pages/visual-route.js
View file

@ -33,14 +33,19 @@ document.addEventListener('DOMContentLoaded', function() {
network.destroy(); network.destroy();
network = null; network = null;
} }
fetch(graphUrl, { fetch(graphUrl, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ip_address: ipAddress }) body: JSON.stringify({ ip_address: ipAddress })
}) })
.then(response => { .then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json().then(data => {
return response.json(); if (!response.ok) {
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
}
return data;
});
}) })
.then(data => { .then(data => {
loader.style.display = 'none'; loader.style.display = 'none';
@ -56,7 +61,7 @@ document.addEventListener('DOMContentLoaded', function() {
}) })
.catch(error => { .catch(error => {
loader.style.display = 'none'; loader.style.display = 'none';
errorMessageContainer.textContent = `An unexpected error occurred: ${error.message}`; errorMessageContainer.textContent = error.message;
errorMessageContainer.style.display = 'block'; errorMessageContainer.style.display = 'block';
console.error('Error:', error); console.error('Error:', error);
}); });
@ -65,14 +70,10 @@ document.addEventListener('DOMContentLoaded', function() {
function drawGraph(data) { function drawGraph(data) {
const pathCount = data.path_count || 1; const pathCount = data.path_count || 1;
const container = document.getElementById('bgprtv-mynetwork'); const container = document.getElementById('bgprtv-mynetwork');
const baseHeight = 400; const baseHeight = 400;
const heightPerLane = 120; const heightPerLane = 120;
const lanes = Math.ceil((pathCount - 1) / 2); const lanes = Math.ceil((pathCount - 1) / 2);
const newHeight = baseHeight + (lanes * heightPerLane); const newHeight = baseHeight + (lanes * heightPerLane);
container.style.height = `${Math.max(400, newHeight)}px`; container.style.height = `${Math.max(400, newHeight)}px`;
allNodes = new vis.DataSet(data.nodes); allNodes = new vis.DataSet(data.nodes);
@ -96,8 +97,8 @@ function drawGraph(data) {
network = new vis.Network(networkContainer, {}, options); network = new vis.Network(networkContainer, {}, options);
activeCheckbox.checked = false; if(activeCheckbox) activeCheckbox.checked = false;
allCommunitiesCheckbox.checked = true; if(allCommunitiesCheckbox) allCommunitiesCheckbox.checked = true;
filterControls.forEach(cb => { if (cb.value !== 'all' && cb.value !== 'active') cb.checked = false; }); filterControls.forEach(cb => { if (cb.value !== 'all' && cb.value !== 'active') cb.checked = false; });
filterGraph(); filterGraph();
} }
@ -105,17 +106,16 @@ function drawGraph(data) {
function filterGraph() { function filterGraph() {
if (!network) return; if (!network) return;
const showOnlyActive = activeCheckbox.checked; const showOnlyActive = activeCheckbox ? activeCheckbox.checked : false;
const showAllCommunities = allCommunitiesCheckbox ? allCommunitiesCheckbox.checked : true;
const selectedCategories = Array.from(filterControls) const selectedCategories = Array.from(filterControls)
.filter(cb => cb.checked && cb.value !== 'active' && cb.value !== 'all') .filter(cb => cb.checked && cb.value !== 'active' && cb.value !== 'all')
.map(cb => cb.value); .map(cb => cb.value);
const showAllCommunities = allCommunitiesCheckbox.checked;
const itemFilter = (item) => { const itemFilter = (item) => {
const activeFilterPassed = !showOnlyActive || item.is_active; const activeFilterPassed = !showOnlyActive || item.is_active;
const categoryFilterPassed = showAllCommunities || selectedCategories.includes(item.path_category); const categoryFilterPassed = showAllCommunities || selectedCategories.includes(item.path_category);
return item.path_category === 'global' || (activeFilterPassed && categoryFilterPassed); return item.path_category === 'global' || (activeFilterPassed && categoryFilterPassed);
}; };
@ -131,6 +131,7 @@ function drawGraph(data) {
network.setData({ nodes: new vis.DataSet(filteredNodes), edges: new vis.DataSet(filteredEdges) }); network.setData({ nodes: new vis.DataSet(filteredNodes), edges: new vis.DataSet(filteredEdges) });
} }
if(filterControls.length > 0) {
filterControls.forEach(checkbox => { filterControls.forEach(checkbox => {
checkbox.addEventListener('change', function(e) { checkbox.addEventListener('change', function(e) {
const changedValue = e.target.value; const changedValue = e.target.value;
@ -153,4 +154,5 @@ function drawGraph(data) {
filterGraph(); filterGraph();
}); });
}); });
}
}); });