Added station route and connection info for the online map

buildSrc/src/main/resources/website/src/app/app.component.html

@@ -1,19 +1,19 @@
-<app-side #sideDirections (closed)="onCloseDirections()">
-	<app-side #sideStation (closed)="onCloseStation()">
-		<app-side #sideMain>
+<app-sidenav #sideDirections (closed)="onCloseDirections()">
+	<app-sidenav #sideStation (closed)="onCloseStation()">
+		<app-sidenav #sideMain>
 			<app-map (stationClicked)="onClickStation($event, sideStation, sideDirections, false)"/>
 			<button mat-fab class="button-corner" aria-label="Menu" (click)="sideMain.open()" matTooltip="Menu">
 				<mat-icon>menu</mat-icon>
 			</button>
 			<div sidenav class="column gap wrapper">
-				<app-search label="Search for anything..." [includeRoutes]="true" (stationClicked)="onClickStation($event, sideStation, sideDirections, true)"/>
-				<app-panel class="wrapper"/>
+				<app-search label="Search for anything..." [includeRoutes]="true" (stationClicked)="onClickStation($event, sideStation, sideDirections, true)" (routeClicked)="onClickRoute($event)"/>
+				<app-main-panel class="wrapper"/>
 			</div>
 			<div title>{{ getTitle() }}</div>
-		</app-side>
-		<app-station sidenav (directionsOpened)="sideDirections.open()"/>
+		</app-sidenav>
+		<app-station-panel sidenav (stationClicked)="onClickStation($event, sideStation, sideDirections, true)" (routeClicked)="onClickRoute($event)" (directionsOpened)="sideDirections.open()"/>
 		<div title>Station Details</div>
-	</app-side>
+	</app-sidenav>
 	<app-directions sidenav/>
 	<div title>Directions</div>
-</app-side>
+</app-sidenav>

buildSrc/src/main/resources/website/src/app/app.component.ts

@@ -1,63 +1,50 @@
 import {Component} from "@angular/core";
 import {MapComponent} from "./component/map/map.component";
-import {PanelComponent} from "./component/panel/panel.component";
 import {MatButtonModule} from "@angular/material/button";
 import {SearchComponent} from "./component/search/search.component";
-import {StationComponent} from "./component/station/station.component";
+import {StationPanelComponent} from "./component/station-panel/station-panel.component";
 import {StationService} from "./service/station.service";
-import {FormatNamePipe} from "./pipe/formatNamePipe";
-import {SideComponent} from "./component/side/side.component";
-import {DataService} from "./service/data.service";
+import {SidenavComponent} from "./component/sidenav/sidenav.component";
 import {DirectionsComponent} from "./component/directions/directions.component";
 import {DirectionsService} from "./service/directions.service";
 import {MatTooltipModule} from "@angular/material/tooltip";
 import {MatIconModule} from "@angular/material/icon";
+import {MainPanelComponent} from "./component/panel/main-panel.component";
 
 @Component({
 	selector: "app-root",
 	standalone: true,
 	imports: [
 		MapComponent,
-		PanelComponent,
 		MatButtonModule,
 		MatIconModule,
 		SearchComponent,
-		StationComponent,
-		SideComponent,
+		StationPanelComponent,
+		SidenavComponent,
 		DirectionsComponent,
 		MatTooltipModule,
+		MainPanelComponent,
 	],
 	templateUrl: "./app.component.html",
 	styleUrls: ["./app.component.css"],
 })
 export class AppComponent {
 
-	constructor(private readonly dataService: DataService, private readonly stationService: StationService, private readonly directionsService: DirectionsService, private readonly formatNamePipe: FormatNamePipe) {
+	constructor(private readonly stationService: StationService, private readonly directionsService: DirectionsService) {
 	}
 
 	getTitle() {
 		return document.title;
 	}
 
-	getSelectedStationName() {
-		const station = this.stationService.getSelectedStation();
-		return station == undefined ? "" : this.formatNamePipe.transform(station.name);
-	}
-
-	onClickStation(stationId: string, sideStation: SideComponent, sideDirections: SideComponent, zoomToStation: boolean) {
-		this.stationService.setStation(stationId);
+	onClickStation(stationId: string, sideStation: SidenavComponent, sideDirections: SidenavComponent, zoomToStation: boolean) {
+		this.stationService.setStation(stationId, zoomToStation);
 		sideStation.open();
 		sideDirections.close();
-		const station = this.dataService.getAllStations().filter(station => station.id === stationId)[0];
-		if (station) {
-			if (station.types.every(routeType => this.dataService.getRouteTypes()[routeType] === 0)) {
-				station.types.forEach(routeType => this.dataService.getRouteTypes()[routeType] = 1);
-				this.dataService.updateData();
-			}
-			if (zoomToStation) {
-				this.dataService.animateCenter(station.x, station.z);
-			}
-		}
+	}
+
+	onClickRoute(routeColor: string) {
+		console.log(routeColor);
 	}
 
 	onCloseStation() {

buildSrc/src/main/resources/website/src/app/component/data-list-entry/data-list-entry.component.css

@@ -0,0 +1,33 @@
+.clickable {
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.clickable:hover {
+	background-color: rgba(127, 127, 127, 10%);
+}
+
+.arrival {
+	padding: 0.4em 0;
+}
+
+.title {
+	font-weight: bold;
+}
+
+.subtitle {
+	font-size: 0.6em;
+}
+
+.light-color {
+	color: rgba(127, 127, 127, 50%);
+}
+
+.arrival-color {
+	border-left: 4px solid;
+	padding-left: 4px;
+}
+
+.align-right {
+	text-align: right;
+}

buildSrc/src/main/resources/website/src/app/component/data-list-entry/data-list-entry.component.html

@@ -0,0 +1,21 @@
+<div matRipple class="column arrival clickable {{useLightColor ? 'light-color' : ''}}" (click)="entryClicked.emit()">
+	<div class="row gap center title arrival-color" [style.border-left-color]="color">
+		<div class="row center">
+			@for (icon of icons; track $index) {
+				@if (icon) {
+					<mat-icon>{{ icon }}</mat-icon>
+				}
+			}
+			<div>{{ title[0] }}</div>
+		</div>
+		<div class="spacing"></div>
+		<div class="align-right">{{ title[1] }}</div>
+	</div>
+	@for (subtitle of subtitles; track $index) {
+		<div class="row gap center subtitle arrival-color" [style.border-left-color]="color">
+			<div>{{ subtitle[0] }}</div>
+			<div class="spacing"></div>
+			<div class="align-right">{{ subtitle[1] }}</div>
+		</div>
+	}
+</div>

buildSrc/src/main/resources/website/src/app/component/data-list-entry/data-list-entry.component.ts

@@ -0,0 +1,22 @@
+import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {MatIconModule} from "@angular/material/icon";
+import {MatRipple} from "@angular/material/core";
+
+@Component({
+	selector: "app-data-list-entry",
+	standalone: true,
+	imports: [
+		MatIconModule,
+		MatRipple,
+	],
+	templateUrl: "./data-list-entry.component.html",
+	styleUrl: "./data-list-entry.component.css",
+})
+export class DataListEntryComponent {
+	@Input({required: true}) icons: string[] = [];
+	@Input({required: true}) title: [string, string] = ["", ""];
+	@Input({required: true}) subtitles: [string, string][] = [];
+	@Input({required: true}) color = "";
+	@Input({required: true}) useLightColor = false;
+	@Output() entryClicked = new EventEmitter<void>;
+}

buildSrc/src/main/resources/website/src/app/component/map/map.component.ts

@@ -4,7 +4,6 @@ import SETTINGS from "../../utility/settings";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {DataService} from "../../service/data.service";
 import {MatIcon} from "@angular/material/icon";
-import {StationService} from "../../service/station.service";
 import {connectStations, connectWith45} from "../../utility/drawing";
 import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
 import {LineMaterial} from "three/examples/jsm/lines/LineMaterial.js";
@@ -23,6 +22,7 @@ const lineMaterialStationConnectionThin = new LineMaterial({color: 0xFFFFFF, lin
 const lineMaterialStationConnectionThick = new LineMaterial({color: 0xFFFFFF, linewidth: 8 * SETTINGS.scale, vertexColors: true});
 const lineMaterialNormal = new LineMaterial({color: 0xFFFFFF, linewidth: 6 * SETTINGS.scale, vertexColors: true});
 const lineMaterialThin = new LineMaterial({color: 0xFFFFFF, linewidth: 3 * SETTINGS.scale, vertexColors: true});
+const animationDuration = 2000;
 
 @Component({
 	selector: "app-map",
@@ -52,7 +52,7 @@ export class MapComponent implements AfterViewInit {
 	private lineGeometryNormal: LineGeometry | undefined;
 	private lineGeometryThin: LineGeometry | undefined;
 
-	constructor(private readonly dataService: DataService, private readonly stationService: StationService) {
+	constructor(private readonly dataService: DataService) {
 		this.canvas = () => this.canvasRef.nativeElement;
 	}
 
@@ -65,6 +65,11 @@ export class MapComponent implements AfterViewInit {
 		let previousZoom = 1;
 		let hasUpdate = false;
 		let needsCenter = true;
+		let animationStartX = 0;
+		let animationStartY = 0;
+		let animationTargetX = 0;
+		let animationTargetY = 0;
+		let animationStartTime = 0;
 
 		const draw = () => {
 			hasUpdate = true;
@@ -76,6 +81,12 @@ export class MapComponent implements AfterViewInit {
 		};
 
 		const animate = () => {
+			const animationProgress = Date.now() - animationStartTime;
+			if (animationProgress < animationDuration) {
+				const animationPercentage = (1 - Math.cos(Math.PI * animationProgress / animationDuration)) / 2;
+				this.moveMap(animationStartX + (animationTargetX - animationStartX) * animationPercentage, animationStartY + (animationTargetY - animationStartY) * animationPercentage);
+			}
+
 			if (hasUpdate) {
 				previousZoom = this.camera.zoom;
 				const {clientWidth, clientHeight} = this.canvas();
@@ -180,6 +191,13 @@ export class MapComponent implements AfterViewInit {
 			this.updateLabels();
 			draw();
 		};
+		this.dataService.animateCenter = (x, z) => {
+			animationStartX = this.camera.position.x;
+			animationStartY = this.camera.position.y;
+			animationTargetX = x;
+			animationTargetY = -z;
+			animationStartTime = Date.now();
+		};
 	}
 
 	private createStationBlobs() {
@@ -374,9 +392,13 @@ export class MapComponent implements AfterViewInit {
 	}
 
 	private centerMap() {
+		this.moveMap(-this.dataService.getCenterX(), this.dataService.getCenterY());
+	}
+
+	private moveMap(x: number, y: number) {
 		if (this.controls) {
-			this.camera.position.x = -this.dataService.getCenterX();
-			this.camera.position.y = this.dataService.getCenterY();
+			this.camera.position.x = x;
+			this.camera.position.y = y;
 			this.controls.target.set(this.camera.position.x, this.camera.position.y, 0);
 			this.controls.update();
 		}

buildSrc/src/main/resources/website/src/app/component/panel/panel.component.ts → buildSrc/src/main/resources/website/src/app/component/panel/main-panel.component.ts

@@ -6,24 +6,23 @@ import {ReactiveFormsModule} from "@angular/forms";
 import {MatIconModule} from "@angular/material/icon";
 import {MatSelectModule} from "@angular/material/select";
 import {DimensionService} from "../../service/dimension.service";
-import {SearchComponent} from "../search/search.component";
 import {MatTooltipModule} from "@angular/material/tooltip";
 
 @Component({
-	selector: "app-panel",
+	selector: "app-main-panel",
 	standalone: true,
 	imports: [
 		MatButtonToggleModule,
 		ReactiveFormsModule,
 		MatIconModule,
 		MatSelectModule,
 		MatTooltipModule,
-		SearchComponent,
+
 	],
-	templateUrl: "./panel.component.html",
-	styleUrl: "./panel.component.css",
+	templateUrl: "./main-panel.component.html",
+	styleUrl: "./main-panel.component.css",
 })
-export class PanelComponent {
+export class MainPanelComponent {
 
 	readonly routeTypes: [string, RouteType][] = Object.entries(ROUTE_TYPES).map(([routeTypeKey, routeType]) => [routeTypeKey, routeType]);
 

buildSrc/src/main/resources/website/src/app/component/search/search.component.ts

@@ -10,7 +10,6 @@ import {DataService} from "../../service/data.service";
 import {SimplifyStationsPipe} from "../../pipe/simplifyStationsPipe";
 import {SimplifyRoutesPipe} from "../../pipe/simplifyRoutesPipe";
 import {FormatNamePipe} from "../../pipe/formatNamePipe";
-import {StationService} from "../../service/station.service";
 
 @Component({
 	selector: "app-search",
@@ -41,7 +40,7 @@ export class SearchComponent implements OnInit {
 	hasStations = false;
 	hasRoutes = false;
 
-	constructor(private readonly dataService: DataService, private readonly stationService: StationService, private readonly simplifyStationsPipe: SimplifyStationsPipe, private readonly simplifyRoutesPipe: SimplifyRoutesPipe) {
+	constructor(private readonly dataService: DataService, private readonly simplifyStationsPipe: SimplifyStationsPipe, private readonly simplifyRoutesPipe: SimplifyRoutesPipe) {
 	}
 
 	ngOnInit() {

buildSrc/src/main/resources/website/src/app/component/side/side.component.html → buildSrc/src/main/resources/website/src/app/component/sidenav/sidenav.component.html

@@ -2,7 +2,7 @@
 	<mat-sidenav position="end">
 		<div class="column-reverse wrapper">
 			<div class="spacing"></div>
-			<div class="wrapper padding-top-bottom">
+			<div class="wrapper">
 				<ng-content select="[sidenav]"/>
 			</div>
 			<mat-toolbar>

buildSrc/src/main/resources/website/src/app/component/side/side.component.ts → buildSrc/src/main/resources/website/src/app/component/sidenav/sidenav.component.ts

@@ -1,34 +1,27 @@
 import {Component, EventEmitter, Output, ViewChild} from "@angular/core";
-import {MapComponent} from "../map/map.component";
 import {MatButtonModule} from "@angular/material/button";
 import {MatIconModule} from "@angular/material/icon";
 import {MatSidenav, MatSidenavModule} from "@angular/material/sidenav";
 import {MatToolbarModule} from "@angular/material/toolbar";
-import {StationService} from "../../service/station.service";
-import {DirectionsService} from "../../service/directions.service";
 import {MatTooltipModule} from "@angular/material/tooltip";
 
 @Component({
-	selector: "app-side",
+	selector: "app-sidenav",
 	standalone: true,
 	imports: [
-		MapComponent,
 		MatIconModule,
 		MatButtonModule,
 		MatSidenavModule,
 		MatToolbarModule,
 		MatTooltipModule,
 	],
-	templateUrl: "./side.component.html",
-	styleUrl: "./side.component.css",
+	templateUrl: "./sidenav.component.html",
+	styleUrl: "./sidenav.component.css",
 })
-export class SideComponent {
+export class SidenavComponent {
 	@ViewChild(MatSidenav) private readonly sidenav!: MatSidenav;
 	@Output() closed = new EventEmitter<void>;
 
-	constructor(private readonly stationService: StationService, private readonly directionsService: DirectionsService) {
-	}
-
 	open() {
 		this.sidenav.open().then();
 	}

buildSrc/src/main/resources/website/src/app/component/station-panel/station-panel.component.css

@@ -0,0 +1,24 @@
+.station-name {
+	font-family: "Noto Sans", "Noto Serif TC", "Noto Serif SC", "Noto Serif JP", "Noto Serif KR", sans-serif;
+	font-size: 1.5em;
+	font-weight: 600;
+	text-align: center;
+}
+
+.station-name.cjk {
+	font-size: 3em;
+}
+
+.station-color-bar {
+	border-radius: 0.2em;
+	height: 0.4em;
+}
+
+.chip {
+	--mdc-chip-outline-color: transparent;
+}
+
+.chip-text {
+	font-size: 0.8em;
+	line-height: 1.2em;
+}