-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added a basic route panel for the online map
- Loading branch information
Showing
21 changed files
with
395 additions
and
98 deletions.
There are no files selected for viewing
36 changes: 20 additions & 16 deletions
36
buildSrc/src/main/resources/website/src/app/app.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,23 @@ | ||
| <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)" (routeClicked)="onClickRoute($event)"/> | ||
| <app-main-panel class="wrapper"/> | ||
| </div> | ||
| <div title>{{ getTitle() }}</div> | ||
| <app-sidenav #sideRoute (closed)="onCloseRoute()"> | ||
| <app-sidenav #sideDirections (closed)="onCloseDirections()"> | ||
| <app-sidenav #sideStation (closed)="onCloseStation()"> | ||
| <app-sidenav #sideMain> | ||
| <app-map (stationClicked)="onClickStation($event, sideMain, sideStation, sideDirections, sideRoute, false)"/> | ||
| <button mat-fab class="button-corner" aria-label="Menu" (click)="onClickMain(sideMain, sideStation, sideDirections, sideRoute)" 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, sideMain, sideStation, sideDirections, sideRoute, true)" (routeClicked)="onClickRoute($event, sideMain, sideStation, sideDirections, sideRoute)"/> | ||
| <app-main-panel class="wrapper"/> | ||
| </div> | ||
| <div title>{{ getTitle() }}</div> | ||
| </app-sidenav> | ||
| <app-station-panel sidenav (stationClicked)="onClickStation($event, sideMain, sideStation, sideDirections, sideRoute, true)" (routeClicked)="onClickRoute($event, sideMain, sideStation, sideDirections, sideRoute)" (directionsOpened)="sideDirections.open()"/> | ||
| <div title>Station Details</div> | ||
| </app-sidenav> | ||
| <app-station-panel sidenav (stationClicked)="onClickStation($event, sideStation, sideDirections, true)" (routeClicked)="onClickRoute($event)" (directionsOpened)="sideDirections.open()"/> | ||
| <div title>Station Details</div> | ||
| <app-directions sidenav/> | ||
| <div title>Directions</div> | ||
| </app-sidenav> | ||
| <app-directions sidenav/> | ||
| <div title>Directions</div> | ||
| <app-route-panel sidenav (stationClicked)="onClickStation($event, sideMain, sideStation, sideDirections, sideRoute, true)" (routeClicked)="onClickRoute($event, sideMain, sideStation, sideDirections, sideRoute)"/> | ||
| <div title>Route Details</div> | ||
| </app-sidenav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
...rc/src/main/resources/website/src/app/component/route-display/route-display.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| .display-container { | ||
| display: flex; | ||
| position: relative; | ||
| min-width: 14px; | ||
| } | ||
|
|
||
| .line { | ||
| left: 4px; | ||
| position: absolute; | ||
| width: 6px; | ||
| } | ||
|
|
||
| .line.middle { | ||
| height: 100%; | ||
| top: 0; | ||
| } | ||
|
|
||
| .line.above { | ||
| height: 50%; | ||
| top: 0; | ||
| } | ||
|
|
||
| .line.below { | ||
| bottom: 0; | ||
| height: 50%; | ||
| } | ||
|
|
||
| .circle { | ||
| background-color: white; | ||
| border: 2px solid black; | ||
| border-radius: 8px; | ||
| box-sizing: border-box; | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translate(0, -50%); | ||
| width: 14px; | ||
| height: 14px; | ||
| } | ||
|
|
||
| .full { | ||
| width: 100%; | ||
| } |
22 changes: 22 additions & 0 deletions
22
...c/src/main/resources/website/src/app/component/route-display/route-display.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <div class="row center"> | ||
| <div class="display-container" [style.height]="(getHeight() + 4) + 'px'"> | ||
| @if (colorAbove === colorBelow) { | ||
| @if (colorAbove !== undefined) { | ||
| <div class="line middle" [style.background-color]="colorAbove | formatColor"></div> | ||
| } | ||
| } @else { | ||
| @if (colorAbove !== undefined) { | ||
| <div class="line above" [style.background-color]="colorAbove | formatColor"></div> | ||
| } | ||
| @if (colorBelow !== undefined) { | ||
| <div class="line below" [style.background-color]="colorBelow | formatColor"></div> | ||
| } | ||
| } | ||
| @if (isStation) { | ||
| <div class="circle"></div> | ||
| } | ||
| </div> | ||
| <div class="full" #text> | ||
| <ng-content/> | ||
| </div> | ||
| </div> |
29 changes: 29 additions & 0 deletions
29
...Src/src/main/resources/website/src/app/component/route-display/route-display.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import {AfterViewInit, Component, ElementRef, Input, ViewChild} from "@angular/core"; | ||
| import {MatSelectModule} from "@angular/material/select"; | ||
| import {FormatColorPipe} from "../../pipe/formatColorPipe"; | ||
|
|
||
| @Component({ | ||
| selector: "app-route-display", | ||
| standalone: true, | ||
| imports: [ | ||
| MatSelectModule, | ||
| FormatColorPipe, | ||
| ], | ||
| templateUrl: "./route-display.component.html", | ||
| styleUrl: "./route-display.component.css", | ||
| }) | ||
| export class RouteDisplayComponent implements AfterViewInit { | ||
| @Input() colorAbove?: number; | ||
| @Input() colorBelow?: number; | ||
| @Input({required: true}) isStation = false; | ||
| @ViewChild("text") private readonly textRef!: ElementRef<HTMLDivElement>; | ||
| private height = 0; | ||
|
|
||
| ngAfterViewInit(): void { | ||
| new ResizeObserver(entries => entries.forEach(entry => this.height = entry.target.clientHeight)).observe(this.textRef.nativeElement); | ||
| } | ||
|
|
||
| getHeight() { | ||
| return this.height; | ||
| } | ||
| } |
10 changes: 10 additions & 0 deletions
10
buildSrc/src/main/resources/website/src/app/component/route-panel/route-panel.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .route-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; | ||
| } | ||
|
|
||
| .route-name.cjk { | ||
| font-size: 3em; | ||
| } |
23 changes: 23 additions & 0 deletions
23
buildSrc/src/main/resources/website/src/app/component/route-panel/route-panel.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <div class="column gap wrapper"> | ||
| <div class="column padding-sides"> | ||
| @for (routeNamePart of getRouteName() | splitName; track $index) { | ||
| <div class="route-name {{routeNamePart.isCjk ? 'cjk' : ''}}">{{ routeNamePart.text }}</div> | ||
| } | ||
| </div> | ||
| <mat-form-field class="padding-sides" subscriptSizing="dynamic"> | ||
| <mat-label>Route Variation</mat-label> | ||
| <mat-select #dropdown (selectionChange)="selectRoute(dropdown.value)" [value]="getRandomSeed()"> | ||
| @for (name of getNames(); track $index) { | ||
| <mat-option [value]="'id_' + $index">{{ name | formatName }}</mat-option> | ||
| } | ||
| </mat-select> | ||
| </mat-form-field> | ||
|
|
||
| <div class="column padding-sides content"> | ||
| @for (station of getStations(); track $index) { | ||
| <app-route-display [colorAbove]="$index > 0 ? getRouteColor() : undefined" [colorBelow]="$index < $count - 1 ? getRouteColor() : undefined" [isStation]="true"> | ||
| <app-data-list-entry [icons]="[]" [title]="[station.name | formatName, '']" [subtitles]="[]" [useLightColor]="false" [clickable]="true" (entryClicked)="stationClicked.emit(station.id)"/> | ||
| </app-route-display> | ||
| } | ||
| </div> | ||
| </div> |
56 changes: 56 additions & 0 deletions
56
buildSrc/src/main/resources/website/src/app/component/route-panel/route-panel.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import {Component, EventEmitter, Output} from "@angular/core"; | ||
| import {MatSelectModule} from "@angular/material/select"; | ||
| import {RouteService} from "../../service/route.service"; | ||
| import {FormatNamePipe} from "../../pipe/formatNamePipe"; | ||
| import {SplitNamePipe} from "../../pipe/splitNamePipe"; | ||
| import {RouteDisplayComponent} from "../route-display/route-display.component"; | ||
| import {DataListEntryComponent} from "../data-list-entry/data-list-entry.component"; | ||
|
|
||
| @Component({ | ||
| selector: "app-route-panel", | ||
| standalone: true, | ||
| imports: [ | ||
| MatSelectModule, | ||
| FormatNamePipe, | ||
| SplitNamePipe, | ||
| RouteDisplayComponent, | ||
| DataListEntryComponent, | ||
| ], | ||
| templateUrl: "./route-panel.component.html", | ||
| styleUrl: "./route-panel.component.css", | ||
| }) | ||
| export class RoutePanelComponent { | ||
| @Output() stationClicked = new EventEmitter<string>(); | ||
| @Output() routeClicked = new EventEmitter<string>(); | ||
| @Output() directionsOpened = new EventEmitter<void>; | ||
|
|
||
| constructor(private readonly routeService: RouteService) { | ||
| } | ||
|
|
||
| getNames() { | ||
| return this.routeService.getNames().map(name => name.split("||")[1] ?? "(Untitled)"); | ||
| } | ||
|
|
||
| getRandomSeed() { | ||
| return this.routeService.getRandomSeed(); | ||
| } | ||
|
|
||
| selectRoute(id: string) { | ||
| this.routeService.selectRoute(parseInt(id.split("_")[1])); | ||
| } | ||
|
|
||
| getRouteName() { | ||
| const route = this.routeService.getSelectedRoute(); | ||
| return route ? route.name.split("||")[0] : ""; | ||
| } | ||
|
|
||
| getRouteColor() { | ||
| const route = this.routeService.getSelectedRoute(); | ||
| return route ? parseInt(route.color, 16) : undefined; | ||
| } | ||
|
|
||
| getStations() { | ||
| const route = this.routeService.getSelectedRoute(); | ||
| return route ? route.stations : []; | ||
| } | ||
| } |
Oops, something went wrong.