Spaces:

coolfrxcrazy
/

server_t5_capstone

Sleeping

File size: 13,643 Bytes

a6846e9

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vehicle Dashboard</title>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByFSdw5BlX97jCavPq1-mZySQfqAlFbDs&libraries=geometry"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        /* General styling */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f0f0f0;
        }

        /* Dashboard styling */
        .dashboard {
            background-color: #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            margin-bottom: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Grid background */
        body {
            background-image: linear-gradient(#d3d3d3 1px, transparent 1px),
                linear-gradient(90deg, #d3d3d3 1px, transparent 1px);
            background-size: 40px 40px;
        }

        /* Icon and text styling */
        .dashboard-item {
            display: flex;
            align-items: center;
        }

        .dashboard-item i {
            font-size: 24px;
            margin-right: 10px;
        }

        .dashboard-item .label {
            font-size: 18px;
            font-weight: bold;
        }

        .dashboard-item .cost {
            font-size: 16px;
            color: #666;
        }

        .timestamp {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        /* Map container */
        #map {
            height: 500px;
            width: 100%;
        }

        /* Form buttons */
        #routeForm {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        #routeForm button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4caf50;
            color: white;
            border: none;
            cursor: pointer;
        }

        #routeForm button:hover {
            background-color: #45a049;
        }

        /* Align buttons below the map */
        #routeForm {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <!-- Dashboard Section -->
    <div class="dashboard">
        <div class="dashboard-item">
            <i class="fas fa-truck"></i>
            <div>
                <span class="label">Truck: </span>
                <span class="cost" id="truckCost">{{ truck_cost }} SAR</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-car"></i>
            <div>
                <span class="label">Car: </span>
                <span class="cost" id="carCost">{{ car_cost }} SAR</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-motorcycle"></i>
            <div>
                <span class="label">Motorbike: </span>
                <span class="cost" id="motorbikeCost">{{ motorbike_cost }} SAR</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-tachometer-alt"></i>
            <div>
                <span class="label">Total Vehicles: </span>
                <span class="cost" id="vehicleCounter">{{ total_vehicles }}</span>
            </div>
        </div>
        <div class="dashboard-item">
            <i class="fas fa-clock"></i>
            <div class="timestamp" id="timestamp"></div>
        </div>
    </div>

    <!-- Google Map Section -->
    <div id="map" style="height: 500px; width: 100%"></div>

    <!-- Form Section (Buttons below the map) -->
    <form id="routeForm">
        <input type="hidden" id="startLatLng" />
        <input type="hidden" id="endLatLng" />
        <button type="submit" disabled>Get Route</button>
        <button type="button" id="resetBtn">Reset</button>
    </form>

    <!-- JavaScript for Real-time Timestamp -->
    <script>
        // Initialize variables
        let map, routePath, startMarker, endMarker;
        let startLatLng = null;
        let endLatLng = null;
        let avoidedRoutePaths = []; // Store the avoided route paths

        // Update timestamp every second
        function updateTime() {
            const now = new Date();
            const formattedTime = now.toLocaleString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
            });
            document.getElementById("timestamp").innerText = formattedTime;
        }
        setInterval(updateTime, 1000); // Update time every second

        // Initialize the map
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: { lat: 24.7136, lng: 46.6753 }, // Riyadh coordinates
                zoom: 12,
            });

            // Add click event listener to capture start and end locations
            map.addListener("click", function (event) {
                handleMapClick(event.latLng);
            });

            // Load and display avoided routes
            loadAvoidedRoutes();
        }

        // Load avoided routes from the server and display them on the map
        function loadAvoidedRoutes() {
            $.ajax({
                url: "/get-avoided-routes",
                type: "GET",
                success: function (response) {
                    if (response.status === "success") {
                        drawAvoidedRoutes(response.avoided_routes); // Draw avoided routes in red
                    } else {
                        alert("Failed to load avoided routes.");
                    }
                },
                error: function () {
                    alert("Failed to retrieve the avoided routes.");
                },
            });
        }

        // Draw the avoided routes in red
        function drawAvoidedRoutes(avoidedRoutes) {
            // Remove any existing avoided routes
            avoidedRoutePaths.forEach((path) => path.setMap(null));
            avoidedRoutePaths = [];

            avoidedRoutes.forEach((route) => {
                const decodedPolyline = google.maps.geometry.encoding.decodePath(
                    route.overview_polyline
                );
                const avoidedPath = new google.maps.Polyline({
                    path: decodedPolyline,
                    geodesic: true,
                    strokeColor: "#FF0000", // Red color for avoided routes
                    strokeOpacity: 0.7,
                    strokeWeight: 4,
                });
                avoidedPath.setMap(map);
                avoidedRoutePaths.push(avoidedPath); // Store the avoided route
            });
        }

        // Handle clicks on the map to select start and end points
        function handleMapClick(latLng) {
            if (!startLatLng) {
                // Set the start marker
                startLatLng = latLng;
                placeMarker(latLng, "Start");
                $("#startLatLng").val(latLng.lat() + "," + latLng.lng());

                // Log the start point for debugging
                console.log("Start LatLng set: ", $("#startLatLng").val());
            } else if (!endLatLng) {
                // Set the end marker
                endLatLng = latLng;
                placeMarker(latLng, "End");
                $("#endLatLng").val(latLng.lat() + "," + latLng.lng());

                // Log the end point for debugging
                console.log("End LatLng set: ", $("#endLatLng").val());

                // Enable the "Get Route" button after both points are selected
                $("button[type=submit]").prop("disabled", false);
            }
        }

        // Place marker for the selected location (start or end)
        function placeMarker(latLng, label) {
            let marker = new google.maps.Marker({
                position: latLng,
                map: map,
                label: label,
                draggable: false,
            });

            if (label === "Start") {
                if (startMarker) startMarker.setMap(null); // Remove old marker
                startMarker = marker;
            } else if (label === "End") {
                if (endMarker) endMarker.setMap(null); // Remove old marker
                endMarker = marker;
            }
        }

        // Form submission handler to  and draw the route
        $("#routeForm").on("submit", function (e) {
            e.preventDefault();

            const start = $("#startLatLng").val();
            const end = $("#endLatLng").val();

            // Debugging: Log the start and end values before sending
            console.log("Submitting Start: ", start);
            console.log("Submitting End: ", end);

            if (!start || !end) {
                alert("Start and End points are required.");
                return;
            }

            $.ajax({
                url: "/calculate-route",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ start, end }),
                success: function (response) {
                    if (response.status === "success") {
                        drawMainRoute(response.route.overview_polyline); // Draw the main route in blue
                    } else {
                        alert(response.message); // Show the error message
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error: ", error);
                    alert("Failed to retrieve the route. Please try again.");
                },
            });
        });

        // Draw the main route in blue
        function drawMainRoute(polyline) {
            const decodedPolyline =
                google.maps.geometry.encoding.decodePath(polyline);
            if (routePath) {
                routePath.setMap(null); // Remove the old route
            }

            routePath = new google.maps.Polyline({
                path: decodedPolyline,
                geodesic: true,
                strokeColor: "#0000FF", // Blue color for main route
                strokeOpacity: 1.0,
                strokeWeight: 4,
            });

            routePath.setMap(map);
            map.fitBounds(getBounds(decodedPolyline)); // Adjust the map to fit the route
        }

        // Get the bounds for the polyline
        function getBounds(decodedPolyline) {
            const bounds = new google.maps.LatLngBounds();
            decodedPolyline.forEach((point) => {
                bounds.extend(point);
            });
            return bounds;
        }

        // Reset button handler: clear markers, route, and form
        $("#resetBtn").on("click", function () {
            // Remove markers and route from the map
            if (startMarker) startMarker.setMap(null);
            if (endMarker) endMarker.setMap(null);
            if (routePath) routePath.setMap(null);

            // Remove avoided routes
            avoidedRoutePaths.forEach((path) => path.setMap(null));
            avoidedRoutePaths = [];

            // Clear stored start/end points
            startLatLng = null;
            endLatLng = null;

            // Clear hidden input fields and disable "Get Route" button
            $("#startLatLng").val("");
            $("#endLatLng").val("");
            $("button[type=submit]").prop("disabled", true);

            // Reload avoided routes
            loadAvoidedRoutes();
        });

        // Initialize the map
        initMap();

        // Update timestamp every second
        function updateTime() {
            const now = new Date();
            const formattedTime = now.toLocaleString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
                hour: "2-digit",
                minute: "2-digit",
                second: "2-digit",
            });
            document.getElementById("timestamp").innerText = formattedTime;
        }
        setInterval(updateTime, 1000); // Update time every second

        // Function to fetch updated vehicle information from the server
        function fetchVehicleInfo() {
            $.ajax({
                url: "/get-vehicle-info",
                type: "GET",
                success: function (response) {
                    // Update the dashboard values with the latest info
                    $("#truckCost").text(response.truck_cost + " SAR");
                    $("#carCost").text(response.car_cost + " SAR");
                    $("#motorbikeCost").text(response.motorbike_cost + " SAR");
                    $("#vehicleCounter").text(response.total_vehicles);
                },
                error: function (xhr, status, error) {
                    console.error("Error fetching vehicle info:", error);
                },
            });
        }

        // Fetch the vehicle info every second
        setInterval(fetchVehicleInfo, 1000); // Update the dashboard every second
    </script>
</body>

</html>