From 2765206b94f01e2affa36fbc15ec25f8c1e162e3 Mon Sep 17 00:00:00 2001 From: Blackwhitebear8 Date: Sun, 6 Jul 2025 17:32:33 +0200 Subject: [PATCH] Update static/js/pages/visual-route.js --- static/js/pages/visual-route.js | 128 ++++++++++++++++---------------- 1 file changed, 65 insertions(+), 63 deletions(-) diff --git a/static/js/pages/visual-route.js b/static/js/pages/visual-route.js index e36d386..68348ac 100644 --- a/static/js/pages/visual-route.js +++ b/static/js/pages/visual-route.js @@ -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(); + }); }); - }); + } }); \ No newline at end of file