diff --git a/frontend/index.html b/frontend/index.html index 0c589ec..86fa92c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,6 @@ - Vite + React diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 342c51f..66920f7 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "postcss": "^8.5.3", "react": "^19.0.0-rc.1", "react-dom": "^19.0.0-rc.1", + "react-helmet": "^6.1.0", "react-leaflet": "^5.0.0-rc.2", "tailwindcss": "^4.0.9" }, @@ -3292,7 +3293,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -3630,7 +3630,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -3713,7 +3712,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -3988,7 +3986,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -4027,11 +4024,40 @@ "react": "^19.0.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", + "license": "MIT" + }, + "node_modules/react-helmet": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", + "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", + "license": "MIT", + "dependencies": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.1.1", + "react-side-effect": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/react-helmet/node_modules/react-side-effect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/react-leaflet": { diff --git a/frontend/package.json b/frontend/package.json index 246850d..8872d22 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "postcss": "^8.5.3", "react": "^19.0.0-rc.1", "react-dom": "^19.0.0-rc.1", + "react-helmet": "^6.1.0", "react-leaflet": "^5.0.0-rc.2", "tailwindcss": "^4.0.9" }, diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index c728924..4855e3c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -5,6 +5,9 @@ import "leaflet/dist/leaflet.css"; import L from "leaflet"; import { Icon } from "leaflet"; +import trainStationURL from "../src/assets/icons/train-station.png" +import TabTitle from "./components/TabTitle.jsx"; + // Fix marker icon issue with Leaflet delete L.Icon.Default.prototype._getIconUrl; L.Icon.Default.mergeOptions({ @@ -16,39 +19,63 @@ L.Icon.Default.mergeOptions({ "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png", }); -const mapCenter = [53.4494762, -7.5029786]; +let mapCenter = [53.4494762, -7.5029786]; -const trainIcon = new Icon({ - iconUrl: "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.Y1zUQhXp7cOSgg6Hl-C7yAHaHa%26pid%3DApi&f=1&ipt=b8b24d390654184e739b4c462f210b4b18e2f6876f90024ba8ce6ccf8fc761fb&ipo=images", - iconSize: [38,38] -}) +if ("geolocation" in navigator) { + navigator.geolocation.getCurrentPosition( + (position) => { + mapCenter = [position.coords.latitude, position.coords.longitude]; + }, + (error) => { + } + ); +} + +const icons = new Map(); +icons.set( + "train-station", + new Icon({ + iconUrl: trainStationURL, + iconSize: [38,38] + }) +) const markers = [ { coords: [53.4494762, -7.5029786], - popup: "Popup lol" + popup: "Popup lol", + icon: "train-station" } ] function App() { return ( -
- - + <> + +
- {markers.map(marker => ( - - -

Train 2

+ + - - - ))} - -
+ {markers.map(marker => ( + + +

Train 2

+

Train 2

+

Train 2

+

Train 2

+

Train 2

+

Train 2

+ + + + ))} + +
+ ); } diff --git a/frontend/src/assets/icons/bus-station.png b/frontend/src/assets/icons/bus-station.png new file mode 100644 index 0000000..b0c0086 Binary files /dev/null and b/frontend/src/assets/icons/bus-station.png differ diff --git a/frontend/src/assets/icons/bus.png b/frontend/src/assets/icons/bus.png new file mode 100644 index 0000000..ac0fc1e Binary files /dev/null and b/frontend/src/assets/icons/bus.png differ diff --git a/frontend/src/assets/icons/train-station.png b/frontend/src/assets/icons/train-station.png new file mode 100644 index 0000000..77de384 Binary files /dev/null and b/frontend/src/assets/icons/train-station.png differ diff --git a/frontend/src/assets/icons/train.png b/frontend/src/assets/icons/train.png new file mode 100644 index 0000000..8fad16b Binary files /dev/null and b/frontend/src/assets/icons/train.png differ diff --git a/frontend/src/assets/icons/train_late.png b/frontend/src/assets/icons/train_late.png new file mode 100644 index 0000000..788e963 Binary files /dev/null and b/frontend/src/assets/icons/train_late.png differ diff --git a/frontend/src/assets/icons/train_notrunning.png b/frontend/src/assets/icons/train_notrunning.png new file mode 100644 index 0000000..5dc5ba1 Binary files /dev/null and b/frontend/src/assets/icons/train_notrunning.png differ diff --git a/frontend/src/assets/icons/train_ontime.png b/frontend/src/assets/icons/train_ontime.png new file mode 100644 index 0000000..0166f7a Binary files /dev/null and b/frontend/src/assets/icons/train_ontime.png differ diff --git a/frontend/src/assets/icons/tram-station.png b/frontend/src/assets/icons/tram-station.png new file mode 100644 index 0000000..18f1387 Binary files /dev/null and b/frontend/src/assets/icons/tram-station.png differ diff --git a/frontend/src/components/TabTitle.jsx b/frontend/src/components/TabTitle.jsx new file mode 100644 index 0000000..82a3910 --- /dev/null +++ b/frontend/src/components/TabTitle.jsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Helmet } from "react-helmet"; +import favicon from "../../src/assets/icons/train-station.png" + +const TabTitle = () => { + return ( + + Iompar + + + ); +}; + +export default TabTitle; \ No newline at end of file