From b8e643c10facdef7852aea3c594ddc87f19cc534 Mon Sep 17 00:00:00 2001
From: Blackwhitebear8 <blackwhitebear8@git@pixelhosting.nl>
Date: Sat, 21 Jun 2025 14:26:45 +0200
Subject: [PATCH] Update templates/bgp-route.html

---
 templates/bgp-route.html | 173 +++++----------------------------------
 1 file changed, 19 insertions(+), 154 deletions(-)
diff --git a/templates/bgp-route.html b/templates/bgp-route.html
index bbc4a63..a74fca6 100644
--- a/templates/bgp-route.html
+++ b/templates/bgp-route.html
@@ -1,156 +1,21 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AS215085 - Router tools | BGP route lookup</title>
-    <link rel="icon" type="image/png" href="../static/img/cropped-Pixelhosting-logo-favicon-32x32.png">
-    <script src="../static/js/bootstrap.bundle.min.js"></script>
-    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
-    <link href="../static/css/style.css" rel="stylesheet">
-</head>
-<body>
-    <header>
-        <div class="header-content">
-            <a href="/"> <img src="../static/img/as215085-logo.png" alt="AS215085 Logo" style="height: 120px; opacity: 1;!important"> </a>
-            <h2><b>core1.doet.pixelhosting.nl</b></h2>
-            <p><b>Proudly delivering the backbone for PixelHosting’s services</b></p>
-        </div>
-    </header>
-    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #07AAF9;">
-        <div class="container-fluid">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav justify-content-center w-100">
-                    <li class="nav-item"><a class="nav-link text-white" href="/">Home</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/bgp">BGP summary</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/bgp-route">BGP route</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/arp">ARP table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/neighbors">Neighbors table</a></li>
-                    <li class="nav-item"><a class="nav-link text-white" href="/interfaces">Interfaces table</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <main>
-        <section id="bgp-route-lookup">
-            <div class="input-group mb-3">
-                <input
-                    type="text"
-                    id="prefixInput"
-                    class="form-control"
-                    placeholder="Type the prefix here, for example, 2606:4700:4700::/48 or 1.1.1.0/24"
-                    aria-label="Enter a prefix"
-                    onkeydown="if(event.key === 'Enter') loadBGPRoute()"
-                />
-                <button class="btn btn-outline-primary" type="button" onclick="loadBGPRoute()">Lookup</button>
-            </div>
-            <pre id="bgpOutput" aria-label="BGP Route Lookup output">Enter a prefix and click Lookup.</pre>
-        </section>
-    </main>
-    <footer class="text-center py-3">
-        <p>&copy; 2020 – <span id="year"></span> AS215085 (PixelHosting). All rights reserved.</p>
-        <script>document.getElementById("year").textContent = new Date().getFullYear();</script>
-    </footer>
-    <script src="../static/js/materialize.min.js"></script>
-    <script>
-    function detectIpVersion(ip) {
-        const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}(\/\d{1,2})?$/;
-        const ipv6Regex = /^([0-9a-fA-F:]+)(\/\d{1,3})?$/;
+{% extends "base.html" %}
 
-        if (ipv4Regex.test(ip)) {
-            return "ipv4";
-        } else if (ipv6Regex.test(ip)) {
-            return "ipv6";
-        } else {
-            return null;
-        }
-    }
+{% block title %}AS215085 - Router tools | BGP route lookup{% endblock %}
 
-    function highlightBGPOutput(text) {
-        text = text.replace(/\b215085\b/g, '<span class="asn215085-highlight">215085</span>');
-
-        text = text.replace(/\b\d{4,6}\b/g, match => {
-            if (match === '215085') return match;
-            return `<span class="asn-highlight">${match}</span>`;
-        });
-
-        text = text.split('\n').map(line => {
-            if (line.toLowerCase().includes('best')) {
-                return `<strong class="best-line">${line}</strong>`;
-            }
-            return line;
-        }).join('\n');
-
-        text = text.split('\n').map(line => {
-            if (line.toLowerCase().includes('table entry')) {
-                return `<strong class="best-line">${line}</strong>`;
-            }
-            return line;
-        }).join('\n');
-
-        text = text.split('\n').map(line => {
-            if (line.toLowerCase().includes('multipath')) {
-                return `<strong class="best-line">${line}</strong>`;
-            }
-            return line;
-        }).join('\n');
-
-        return text.replace(/\n/g, '<br>');
-    }
-
-    function displayBGPRoute(data) {
-        const outputElem = document.getElementById("bgpOutput");
-        const rawText = data.data || JSON.stringify(data, null, 2);
-        const highlighted = highlightBGPOutput(rawText);
-        outputElem.innerHTML = highlighted;
-    }
-
-    async function loadBGPRoute() {
-        const outputElem = document.getElementById("bgpOutput");
-        const prefix = document.getElementById("prefixInput").value.trim();
-
-        if (!prefix) {
-            outputElem.textContent = "Voer eerst een geldig prefix in.";
-            return;
-        }
-
-        const ip_version = detectIpVersion(prefix);
-        if (!ip_version) {
-            outputElem.textContent = "Ongeldig IP-adres of prefix.";
-            return;
-        }
-
-        outputElem.textContent = "Loading...";
-
-        const postData = {
-            ip_version: ip_version,
-            bgprouteprefix: prefix
-        };
-
-        try {
-            const response = await fetch("/bgp-route/lookup", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(postData),
-            });
-            if (!response.ok) throw new Error("Network response was not ok");
-            const data = await response.json();
-
-            if (data.error) {
-                outputElem.textContent = "Error: " + data.error;
-                return;
-            }
-
-            displayBGPRoute(data);
-        } catch (error) {
-            outputElem.textContent = "Fout bij ophalen van data: " + error.message;
-        }
-    }
-    </script>
-</body>
-</html>
+{% block content %}
+    <script src="../static/js/pages/bgp-route.js"></script>
+	<section id="bgp-route-lookup">
+		<div class="input-group mb-3">
+			<input
+				type="text"
+				id="prefixInput"
+				class="form-control"
+				placeholder="Type the prefix here, for example, 2606:4700:4700::/48 or 1.1.1.0/24"
+				aria-label="Enter a prefix"
+				onkeydown="if(event.key === 'Enter') loadBGPRoute()"
+			/>
+			<button class="btn btn-outline-primary" type="button" onclick="loadBGPRoute()">Lookup</button>
+		</div>
+		<pre id="bgpOutput" aria-label="BGP Route Lookup output">Enter a prefix and click Lookup.</pre>
+	</section>
+{% endblock %}
\ No newline at end of file
