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

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

@ -33,14 +33,19 @@ document.addEventListener('DOMContentLoaded', function() {
network.destroy();
network = null;
}
fetch(graphUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ip_address: ipAddress })
})
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
return response.json().then(data => {
if (!response.ok) {
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
}
return data;
});
})
.then(data => {
loader.style.display = 'none';
@ -56,66 +61,61 @@ document.addEventListener('DOMContentLoaded', function() {
})
.catch(error => {
loader.style.display = 'none';
errorMessageContainer.textContent = `An unexpected error occurred: ${error.message}`;
errorMessageContainer.textContent = error.message;
errorMessageContainer.style.display = 'block';
console.error('Error:', error);
});
});
function drawGraph(data) {
const pathCount = data.path_count || 1;
const container = document.getElementById('bgprtv-mynetwork');
const baseHeight = 400;
const heightPerLane = 120;
const lanes = Math.ceil((pathCount - 1) / 2);
const newHeight = baseHeight + (lanes * heightPerLane);
container.style.height = `${Math.max(400, newHeight)}px`;
function drawGraph(data) {
const pathCount = data.path_count || 1;
const container = document.getElementById('bgprtv-mynetwork');
const baseHeight = 400;
const heightPerLane = 120;
const lanes = Math.ceil((pathCount - 1) / 2);
const newHeight = baseHeight + (lanes * heightPerLane);
container.style.height = `${Math.max(400, newHeight)}px`;
allNodes = new vis.DataSet(data.nodes);
allEdges = new vis.DataSet(data.edges);
const options = {
layout: { hierarchical: false },
edges: {
arrows: { to: { enabled: true, scaleFactor: 0.7 } },
smooth: { enabled: true, type: "cubicBezier", forceDirection: "horizontal", roundness: 0.85 }
},
nodes: {
shape: 'box',
margin: 15,
font: { size: 14, color: '#343a40', multi: 'html', align: 'left' },
borderWidth: 2
},
physics: { enabled: false },
interaction: { dragNodes: true, dragView: true, zoomView: true }
};
network = new vis.Network(networkContainer, {}, options);
activeCheckbox.checked = false;
allCommunitiesCheckbox.checked = true;
filterControls.forEach(cb => { if (cb.value !== 'all' && cb.value !== 'active') cb.checked = false; });
filterGraph();
}
allNodes = new vis.DataSet(data.nodes);
allEdges = new vis.DataSet(data.edges);
const options = {
layout: { hierarchical: false },
edges: {
arrows: { to: { enabled: true, scaleFactor: 0.7 } },
smooth: { enabled: true, type: "cubicBezier", forceDirection: "horizontal", roundness: 0.85 }
},
nodes: {
shape: 'box',
margin: 15,
font: { size: 14, color: '#343a40', multi: 'html', align: 'left' },
borderWidth: 2
},
physics: { enabled: false },
interaction: { dragNodes: true, dragView: true, zoomView: true }
};
network = new vis.Network(networkContainer, {}, options);
if(activeCheckbox) activeCheckbox.checked = false;
if(allCommunitiesCheckbox) allCommunitiesCheckbox.checked = true;
filterControls.forEach(cb => { if (cb.value !== 'all' && cb.value !== 'active') cb.checked = false; });
filterGraph();
}
function filterGraph() {
if (!network) return;
const showOnlyActive = activeCheckbox.checked;
const showOnlyActive = activeCheckbox ? activeCheckbox.checked : false;
const showAllCommunities = allCommunitiesCheckbox ? allCommunitiesCheckbox.checked : true;
const selectedCategories = Array.from(filterControls)
.filter(cb => cb.checked && cb.value !== 'active' && cb.value !== 'all')
.map(cb => cb.value);
const showAllCommunities = allCommunitiesCheckbox.checked;
const itemFilter = (item) => {
const activeFilterPassed = !showOnlyActive || item.is_active;
const categoryFilterPassed = showAllCommunities || selectedCategories.includes(item.path_category);
return item.path_category === 'global' || (activeFilterPassed && categoryFilterPassed);
};
@ -131,26 +131,28 @@ function drawGraph(data) {
network.setData({ nodes: new vis.DataSet(filteredNodes), edges: new vis.DataSet(filteredEdges) });
}
filterControls.forEach(checkbox => {
checkbox.addEventListener('change', function(e) {
const changedValue = e.target.value;
if(filterControls.length > 0) {
filterControls.forEach(checkbox => {
checkbox.addEventListener('change', function(e) {
const changedValue = e.target.value;
if (changedValue === 'all' && e.target.checked) {
filterControls.forEach(cb => {
if (cb.value !== 'all' && cb.value !== 'active') {
cb.checked = false;
}
});
} else if (changedValue !== 'all' && changedValue !== 'active' && e.target.checked) {
allCommunitiesCheckbox.checked = false;
}
if (changedValue === 'all' && e.target.checked) {
filterControls.forEach(cb => {
if (cb.value !== 'all' && cb.value !== 'active') {
cb.checked = false;
}
});
} else if (changedValue !== 'all' && changedValue !== 'active' && e.target.checked) {
allCommunitiesCheckbox.checked = false;
}
const specificCommunityChecked = Array.from(filterControls).some(cb => cb.checked && cb.value !== 'all' && cb.value !== 'active');
if (!specificCommunityChecked) {
allCommunitiesCheckbox.checked = true;
}
const specificCommunityChecked = Array.from(filterControls).some(cb => cb.checked && cb.value !== 'all' && cb.value !== 'active');
if (!specificCommunityChecked) {
allCommunitiesCheckbox.checked = true;
}
filterGraph();
filterGraph();
});
});
});
}
});