PRO150-Group/Project
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actually have A UI for the first time in 21 weeks #5

Merged
nspackman merged 8 commits from backend into main 2025-11-24 18:24:57 -08:00
Conversation 0 Commits 8 Files Changed 10 +80 -3
3 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a5fceda42f - Show all commits

49
public/app.js Normal file
View File

@@ -0,0 +1,49 @@
const map = L.map("map").setView([40.7608, -111.8910], 12);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
const API_URL = "http://localhost:7653/api/v0/";
const trainEmojiIcon = L.divIcon({ html: "🔵", className: "", iconSize: [64,64], iconAnchor: [16,32], popupAnchor: [0,-32] });
const stopsEmojiIcon = L.divIcon({ html: "🫃", className: "", iconSize: [64,64], iconAnchor: [16,32], popupAnchor: [0,-32] });
function addMarker(lat, lon, content, icon) {
if (!isNaN(lat) && !isNaN(lon)) {
const marker = L.marker([lat, lon], { icon: icon }).addTo(map);
if (content) marker.bindPopup(content);
} else {
console.warn("Invalid coordinates:", latitude, longitude);
}
}
function getTrainsByRoute(route) {
fetch(API_URL + 'vehicles')
.then(res => res.json())
.then(data => {
const trains = data.data;
const filtered = route ? trains.filter(t => t.routeId == route) : trains;
filtered.forEach(t => {
addMarker(t.location.latitude, t.location.longitude, t.routeName + ": Vehicle " + t.vehicleId, trainEmojiIcon);
});
})
.catch(err => console.error("Error fetching trains:", err));
}
function getStopsByRoute(route) {
fetch(API_URL + 'stops/' + route)
.then(res => res.json())
.then(data => {
const stops = data.data;
stops.forEach(s => {
const lat = parseFloat(s.stop_lat);
const lon = parseFloat(s.stop_lon);
addMarker(lat,lon, s.stop_name + " - " + s.stop_desc, stopsEmojiIcon);
});
})
.catch(err => console.error("Error fetching stops:", err));
}
getStopsByRoute("701");
getTrainsByRoute();

24
public/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traxer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
crossorigin=""
></script>
</head>
<body>
<div id="map" class="w-full h-screen"></div>
</body>
<script src="app.js"></script>
</html>

10
start.js
View File

@@ -1,8 +1,12 @@
//Starts
import express from "express";
import app from "./app.js";
const PORT = process.env.PORT || 7653;
// Serve static files from "public" folder
app.use(express.static('public'));
// Start the server
app.listen(PORT, () => {
console.log(`Transit API http://localhost:${PORT}`);
console.log(`Transit API running at http://localhost:${PORT}`);
});