+
-
- {
- const stations = await this.stationLookupService
- .Search(value)
- .toPromise();
-
- const codeMatchedStations = stations.filter(
- (s) => s.code.toUpperCase() === value.toUpperCase()
- );
- if (codeMatchedStations.length > 0) {
- return codeMatchedStations[0];
- }
+ @ViewChild("board", { read: ViewContainerRef, static: true })
+ board: ViewContainerRef;
- const nameMatchedStations = stations.filter(
- (s) => s.name.toLowerCase() === value.toLowerCase()
- );
- if (nameMatchedStations.length > 0) {
- return nameMatchedStations[0];
- }
+ @ViewChild('searchView') searchView: ElementRef;
- return null;
+ ngAfterViewInit(): void {
+ this.startExampleBoard();
}
- readonly stationLookup$ = tuiReplayedValueChangesFrom(
- this.searchForm
- ).pipe(
- debounceTime(200),
- switchMap((value: string) => {
- ToggleConfig.LoadingBar.next(true);
- this.isLoadingStations = true;
-
- return this.stationLookupService
- .Search(value)
- .pipe(map((s) => s.splice(0, 10)))
- .pipe(tap(() => {
- ToggleConfig.LoadingBar.next(false);
- this.isLoadingStations = false;
- }))
- .pipe(catchError((error) => {
- ToggleConfig.LoadingBar.next(false);
- this.isLoadingStations = false;
- throw error;
- }))
- })
- );
-
- getCountryLogo(station: Station): string{
- if(station.country == "GB"){
- return "assets/images/flags/united-kingdom.svg";
- }
-
- if(station.country == "DE") {
- return "assets/images/flags/germany.webp";
- }
-
- return null;
+ startExampleBoard() {
+ this.isHandset$
+ .pipe(
+ switchMap((isHandset) => {
+ return !isHandset
+ ? this.departureService.GetDepartures(
+ "EUS",
+ 1,
+ false,
+ null,
+ "REALTIMETRAINS"
+ )
+ : new Observable(obs => obs.complete());
+ })
+ )
+ ?.subscribe(
+ (data) => {
+ this.hasLoadedExampleBoard = true;
+ if (!data && data.length == 0) {
+ return;
+ }
+
+ this.board.clear();
+ const factory = this.resolver.resolveComponentFactory(Board);
+ const componentRef = this.board.createComponent(factory);
+ componentRef.instance.Initilize(data[0]);
+ },
+ null,
+ () => (this.hasLoadedExampleBoard = true)
+ );
}
isHandset$: Observable = this.breakpointObserver
@@ -111,4 +81,11 @@ export class HomeComponent {
map((result) => result.matches),
shareReplay()
);
+
+ scrollToSearch() {
+ const elementRect = this.searchView.nativeElement.getBoundingClientRect();
+ const absoluteElementTop = elementRect.top + window.pageYOffset;
+ const middle = absoluteElementTop - (elementRect.height / 2);
+ window.scrollTo(0, middle); // have a window object reference in your component
+ }
}
diff --git a/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.old.component.html b/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.old.component.html
deleted file mode 100644
index 32037e89..00000000
--- a/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.old.component.html
+++ /dev/null
@@ -1,193 +0,0 @@
-
- Home
Search
- Examples
+ Contact Us
Status
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/menu-items.ts b/DepartureBoardWeb/ClientApp/src/app/nav-menu/menu-items.ts
new file mode 100644
index 00000000..1afc4f3b
--- /dev/null
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/menu-items.ts
@@ -0,0 +1,20 @@
+export const navItemList: any = [
+ {
+ href: '/', title: 'Home',
+ routerLinkActiveOptions: { exact: true },
+ is_link: true,
+ icon: "fas fa-home"
+ },
+ { href: '/search', title: 'Search', is_link: true, icon: "fas fa-search" },
+ { href: '/examples', title: 'Examples', is_link: true, icon: "far fa-lightbulb" },
+ { href: '', title: 'Boards', is_link: false, children: true, icon: "fas fa-chalkboard", child: [
+ { href: '/custom-departures', title: 'Custom Departures', is_link: true, icon: "fas fa-chalkboard" },
+ { href: '/buses', title: 'Buses', is_link: true, icon: "fas fa-bus", isBeta: true },
+ ] },
+ { href: '', title: 'Learn', is_link: false, children: true, icon: "fas fa-graduation-cap", child: [
+ { href: '/about', title: 'About', is_link: true, icon: "fas fa-info" },
+ { href: 'https://docs.leddepartureboard.com', title: 'Docs', is_link: true, use_href: true, icon: "far fa-file" },
+ ] },
+ { href: '/settings', title: 'Settings', is_link: true, icon: "fas fa-cogs" },
+ { href: 'https://admin.leddepartureboard.com', title: 'Admin', is_link: true, use_href: true, icon: "fas fa-external-link-alt" },
+];
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.css b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.css
new file mode 100644
index 00000000..afc94b4d
--- /dev/null
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.css
@@ -0,0 +1,18 @@
+.sidenav {
+ z-index: 999999;
+ width: 300px;
+ border: 0;
+}
+
+/*Pads Icons*/
+.sidenav .fa,
+.sidenav .fas,
+.sidenav .far {
+ padding-right: 10px;
+}
+
+.bottom-nav-items {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+}
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.html b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.html
new file mode 100644
index 00000000..ec8109d6
--- /dev/null
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.html
@@ -0,0 +1,84 @@
+
+ 
Led Departure Board
+
+
+
+
+
+
+ Login
+ ![]()
+ Log Out
+
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.spec.ts b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.spec.ts
new file mode 100644
index 00000000..5effbcc1
--- /dev/null
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavMenuMobileComponent } from './nav-menu-mobile.component';
+
+describe('NavMenuMobileComponent', () => {
+ let component: NavMenuMobileComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ NavMenuMobileComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavMenuMobileComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.ts b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.ts
new file mode 100644
index 00000000..94fb4980
--- /dev/null
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu-mobile/nav-menu-mobile.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { AuthService } from 'src/app/Services/auth.service';
+import {navItemList} from "../menu-items"
+
+@Component({
+ selector: 'app-nav-menu-mobile',
+ templateUrl: './nav-menu-mobile.component.html',
+ styleUrls: ['./nav-menu-mobile.component.css']
+})
+export class NavMenuMobileComponent implements OnInit {
+
+ menuItems = navItemList;
+
+ @Output() pageClicked = new EventEmitter();
+
+ constructor(public auth: AuthService) { }
+
+ ngOnInit(): void {
+ }
+
+ PageChanged() {
+ this.pageClicked.emit();
+ }
+
+}
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.css b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.css
index 1e0ac76e..c1a52638 100644
--- a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.css
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.css
@@ -1,71 +1,22 @@
-html {
- font-size: 14px;
-}
-@media (min-width: 768px) {
- html {
- font-size: 16px;
- }
-}
-
-.nav-link {
- color: var(--mainColour) !important;
-}
-
-.sidenav-container {
- margin-top: 5px;
-}
-
-.sidenav {
- width: 300px;
- border: 0;
-}
-
-/*Pads Icons*/
-.sidenav .fa,
-.sidenav .fas,
-.sidenav .far {
- padding-right: 10px;
-}
-
-.logo {
- height: 20px;
- margin-right: 10px;
-}
-
-.navbar {
- height: 35px;
-}
-
-.page-selected {
- font-weight: bold;
+.navbar-brand {
+ display: inline-flex;
}
-.dropdown-toggle {
- background-color: black;
- color: var(--mainColour);
- border: 0;
+#header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 99;
+ background-color: rgba(0, 0, 0, 0.8);
}
-.bottom-nav-items {
- position: absolute;
- bottom: 0px;
- width: 100%;
+.main {
+ margin-top: 110px;
}
-.container-fluid {
- padding-right: 0;
- padding-left: 10px;
- background-color: var(--backgroundColour);
+.navbar-toggler {
+ background-color: rgba(0, 0, 0, 0.8) !important;
+ border: 0 !important;
+ color: #fff !important
}
-.mat-drawer-container {
- background-color: var(--backgroundColour);
-}
-
-#nav-hamburger-button {
- z-index: 20;
-}
-
-.scrollbar {
- width: 0 !important;
-}
diff --git a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.html b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.html
index d43bd65e..ab57c1b2 100644
--- a/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.html
+++ b/DepartureBoardWeb/ClientApp/src/app/nav-menu/nav-menu.component.html
@@ -1,228 +1,139 @@
-
-
'),x+=e.sloth,null!=s&&null!=l&&punchgs.TweenLite.set(i.find(".slot").last(),{rotationZ:l});y+=e.slotw}break;case"vertical":case"horizontal":if("horizontal"==a){if(!o)p=0-e.slotw;for(z=0;z
-
diff --git a/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.component.ts b/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.component.ts
index 95ad4ecc..21360f30 100644
--- a/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.component.ts
+++ b/DepartureBoardWeb/ClientApp/src/app/Pages/home/home.component.ts
@@ -1,108 +1,78 @@
import { BreakpointObserver, Breakpoints } from "@angular/cdk/layout";
-import { Component } from "@angular/core";
+import {
+ AfterViewInit,
+ Component,
+ ComponentFactoryResolver,
+ ElementRef,
+ ViewChild,
+ ViewContainerRef,
+} from "@angular/core";
import { FormControl } from "@angular/forms";
-import { Router } from "@angular/router";
-import { tuiReplayedValueChangesFrom } from "@taiga-ui/cdk";
import { Observable } from "rxjs";
-import { catchError, debounceTime, map, shareReplay, switchMap, tap } from "rxjs/operators";
-import { Station } from "src/app/models/station.model";
-import { StationLookupService } from "src/app/Services/station-lookup.service";
-import { ToggleConfig } from "src/app/ToggleConfig";
+import {
+ map,
+ shareReplay,
+ switchMap,
+} from "rxjs/operators";
+import { Departure } from "src/app/models/departure.model";
+import { DepartureService } from "src/app/Services/departure.service";
+import { Board } from "../boards/board/board";
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.css"],
})
-export class HomeComponent {
- constructor(private stationLookupService: StationLookupService, private router: Router, private breakpointObserver: BreakpointObserver) {}
+export class HomeComponent implements AfterViewInit {
+ constructor(
+ private breakpointObserver: BreakpointObserver,
+ private resolver: ComponentFactoryResolver,
+ private departureService: DepartureService
+ ) {}
searchForm = new FormControl();
isLoadingStations = false;
+ hasLoadedExampleBoard = false;
- async Search() {
- const value: string = this.searchForm.value;
- let station = null;
- if(value.split('-').length >= 2) {
- let code = value.trim().split('-').slice(-1)[0]?.trim();
- console.debug("Found Code", code);
- code = code.replace(/\(|\)/g, '');
- station = await this.attemptCalculate(code)
- }
-
- if (!station) {
- station = await this.attemptCalculate(value);
- }
-
- if (!station) {
- alert("Invalid Station");
- return;
- }
-
- let prefixUrl = "";
-
- if (station.country == "DE") {
- prefixUrl = "germany/";
- }
-
- this.router.navigate([prefixUrl, station.code]);
- }
-
- async attemptCalculate(value): PromiseLed Departure Board
- -Led Departure Board
-
-
-
-
-
-
-
- -
-
-
-
-
--
Welcome
-- Led Departure Board is a webapp designed to re-create the platform signs - you get at uk and German train stations. The data is collected live from - network rail and displayed in a custom panel. -
-
- The main use case for this app is to set it up on a permanent screen which
- constantly shows the next trains at a specific station.
- The boards refresh every 16 seconds with the most up to
- date data, so there is no need to manually refresh.
-
How to Use
--
-
- - To change the station just modify the url. E.g - www.leddepartureboard.com/EUS will show - euston station times - -
- - To change the amount of boards on the screen just add a number to the - end. E.g - www.leddepartureboard.com/EUS/12 - -
- - To view a single platform style board just modify the url with a prefix - of 'singleboard'. E.g - www.leddepartureboard.com/singleboard/EUS - -
-
- To specify a specific platform just add the platform parameter. E.g
- www.leddepartureboard.com/EUS?platform=5
- will show euston station times on platform 5 only
(You can also - click on the platform number on the display to filter to that platform - only) -
-
- If you do not know the station code of your station then just use the - helpful search feature or go directly to - www.leddepartureboard.com/search -
-Arrivals
--
-
- - To view the arrivals instead of departures prefix the page with - 'arrivals'. E.g - www.leddepartureboard.com/arrivals/BHM - -
- - You can do the same for the singleboard view as well. E.g - www.leddepartureboard.com/singleboard/arrivals/BHM - -
Tips
--
-
- - When on the departure board page if you click on any of the destinations - or stops along the way, it will change the board to that station. - -
- - If you click the platform number is will filter the board to only show - departures from that platform - -
- If you click the clock it will take you back to the home page -
- - If you want to add multiple query parameters to the url use the - & imbetween each one. e.g - www.leddepartureboard.com/EUS?hideClock=true&platform=5 - -
Data Sources
--
-
- - Departure Data is provided by the - Realtime Trains API. This api then talks to network rail to get the data back. This means - we receive the most up to date data from network rail. - -
- - The search functionality is powered by the national rail data feed - (NRE). For more information visit, - https://www.nationalrail.co.uk/100296.aspx - -
- - Departure Data can also be fetched from national rail (Including train - car length for certain services) by changing the data source in - settings. This is fetched using the darwin api - -
Project Info
-- This is an open source project so is free to used under the Apache-2.0 - Liscense. For more info or for the source code of the project then visit - the - github page -
- -Contact Me
-- To contact me for more information feel free to send an email to - info@leddepartureboard.com -
-
-
+
+
diff --git a/DepartureBoardWeb/ClientApp/src/app/app.component.ts b/DepartureBoardWeb/ClientApp/src/app/app.component.ts
index bae51c09..54a15343 100644
--- a/DepartureBoardWeb/ClientApp/src/app/app.component.ts
+++ b/DepartureBoardWeb/ClientApp/src/app/app.component.ts
@@ -68,6 +68,17 @@ export class AppComponent implements AfterViewChecked {
90
);
window.location.reload();
+ } else if (
+ params.acceptCookies == "false" &&
+ !cookieService.check("CookieScriptConsent")
+ ) {
+ console.log("Auto Rejected Cookie Policy");
+ this.setCookie(
+ "CookieScriptConsent",
+ `{"action":"reject","categories":"[]"}`,
+ 90
+ );
+ window.location.reload();
}
if (params.token) {
@@ -154,6 +165,7 @@ export class AppComponent implements AfterViewChecked {
"/buses",
"/settings",
"/search",
+ "/contact",
];
this.showSplashScreen = splashUrls.includes(location.pathname);
diff --git a/DepartureBoardWeb/ClientApp/src/app/app.module.ts b/DepartureBoardWeb/ClientApp/src/app/app.module.ts
index 0682850f..49f35b30 100644
--- a/DepartureBoardWeb/ClientApp/src/app/app.module.ts
+++ b/DepartureBoardWeb/ClientApp/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { AngularFireStorageModule } from "@angular/fire/storage";
import { AngularFireAuthModule } from "@angular/fire/auth";
import { FlexLayoutModule } from "@angular/flex-layout";
import { NotifierModule } from "angular-notifier";
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { AppComponent } from "./app.component";
import { NavMenuComponent } from "./nav-menu/nav-menu.component";
@@ -50,9 +51,14 @@ import {
EditCustomDepartureComponent,
} from "./Components/edit-custom-departure/edit-custom-departure.component";
import { SplashScreenComponent } from "./Components/splash-screen/splash-screen.component";
-import { TuiModule } from "./external/tui.module";
import { FeaturesComponent } from './widgets/features/features.component';
import { ROUTES } from "./routes";
+import { BoardSkeletonComponent } from './Components/board-skeleton/board-skeleton.component';
+import { BlackCardStyle1Component } from "./Components/cards/black-card-style1/black-card-style1.component";
+import { BlackSectionTitleComponent } from "./Components/black-section-title/black-section-title.component";
+import { BlackCardStyle2Component } from './Components/black-card-style2/black-card-style2.component';
+import { NavMenuMobileComponent } from './nav-menu/nav-menu-mobile/nav-menu-mobile.component';
+import { ContactUsComponent } from './Components/contact-us/contact-us.component';
const firebaseConfig = {
apiKey: "AIzaSyBCYNEHPUwXR2UnqhJMdR5goqbq0fy1vdo",
@@ -88,6 +94,12 @@ const firebaseConfig = {
DepartureStopDialog,
SplashScreenComponent,
FeaturesComponent,
+ BoardSkeletonComponent,
+ BlackCardStyle1Component,
+ BlackSectionTitleComponent,
+ BlackCardStyle2Component,
+ NavMenuMobileComponent,
+ ContactUsComponent
],
imports: [
BrowserModule.withServerTransition({ appId: "ng-cli-universal" }),
@@ -100,8 +112,8 @@ const firebaseConfig = {
AngularFireAuthModule,
AngularFireStorageModule,
FlexLayoutModule,
- TuiModule,
SettingsModule,
+ NgxSkeletonLoaderModule,
NotifierModule.withConfig({
position: {
horizontal: {
@@ -116,7 +128,7 @@ const firebaseConfig = {
autoHide: 3500,
},
}),
- RouterModule.forRoot(ROUTES, { relativeLinkResolution: 'legacy' }),
+ RouterModule.forRoot(ROUTES, { relativeLinkResolution: 'legacy', anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }),
BrowserAnimationsModule,
DeviceDetectorModule.forRoot(),
ServiceWorkerModule.register("ngsw-worker.js", {
diff --git a/DepartureBoardWeb/ClientApp/src/app/app.server.module.ts b/DepartureBoardWeb/ClientApp/src/app/app.server.module.ts
deleted file mode 100644
index cfb0e021..00000000
--- a/DepartureBoardWeb/ClientApp/src/app/app.server.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ServerModule } from '@angular/platform-server';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
-import { AppComponent } from './app.component';
-import { AppModule } from './app.module';
-
-@NgModule({
- imports: [AppModule, ServerModule, ModuleMapLoaderModule],
- bootstrap: [AppComponent]
-})
-export class AppServerModule { }
diff --git a/DepartureBoardWeb/ClientApp/src/app/external/tui.module.ts b/DepartureBoardWeb/ClientApp/src/app/external/tui.module.ts
deleted file mode 100644
index b58e6d2f..00000000
--- a/DepartureBoardWeb/ClientApp/src/app/external/tui.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { TuiRootModule, TuiThemeNightModule, TuiModeModule, TuiButtonModule, TuiDataListModule, TuiLoaderModule } from '@taiga-ui/core';
-import { TuiIslandModule, TuiInputModule, TuiAvatarModule } from '@taiga-ui/kit';
-import {TuiLetModule} from '@taiga-ui/cdk';
-
-
-
-
-
-@NgModule({
- exports: [
- TuiRootModule,
- TuiIslandModule,
- TuiThemeNightModule,
- TuiInputModule,
- TuiModeModule,
- TuiButtonModule,
- TuiLetModule,
- TuiDataListModule,
- TuiAvatarModule,
- TuiLoaderModule
- ]
-})
-export class TuiModule { }
-
-
-/** Copyright 2019 Google LLC. All Rights Reserved.
- Use of this source code is governed by an MIT-style license that
- can be found in the LICENSE file at http://angular.io/license */
diff --git a/DepartureBoardWeb/ClientApp/src/app/footer/footer.component.html b/DepartureBoardWeb/ClientApp/src/app/footer/footer.component.html
index a44f1e8e..e3372459 100644
--- a/DepartureBoardWeb/ClientApp/src/app/footer/footer.component.html
+++ b/DepartureBoardWeb/ClientApp/src/app/footer/footer.component.html
@@ -4,7 +4,7 @@
Led Departure Board