Merge pull request #2 from EnessenE/feature/misc-ui-and-errors

Misc UI improvements and errors

package.json

@@ -18,8 +18,9 @@
     "@angular/platform-browser": "^17.2.0",
     "@angular/platform-browser-dynamic": "^17.2.0",
     "@angular/router": "^17.2.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "^5.3.3",
+    "bootstrap": "^5.3.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -36,7 +37,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.2",
-    "prettier": "^3.2.5"
+    "prettier": "^3.2.5",
+    "typescript": "~5.3.2"
   }
-}
+}

src/app/app.component.html

@@ -1,11 +1,11 @@
 <header class="header">
     <div class="container">
         <div class="row">
-            <div class="col-3">
+            <div class="col-3 col-sm-12">
                 <h1>komikaan.nl</h1>
 
             </div>
-            <div class="col-9">
+            <div class="col-9 col-sm-12">
                 <p><small>Geen zorgen, je ziet er geweldig uit.</small> <br>
                     <small>In tegenstelling tot je reis met de trein.</small>
                 </p>

src/app/comps/error/error.component.html

@@ -0,0 +1,16 @@
+<ng-template #errorModal>
+	<div class="modal-header">
+		<h4 class="modal-title" id="modal-basic-title">Iets ging fout...</h4>
+		<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+	</div>
+	<div class="modal-body">
+		<form>
+			<div class="mb-3">
+				<label for="dateOfBirth">We weten niet wat.</label>
+			</div>
+		</form>
+	</div>
+	<div class="modal-footer">
+		<button type="button" class="btn btn-outline-dark" (click)="close()">Save</button>
+	</div>
+</ng-template>

src/app/comps/error/error.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorComponent } from './error.component';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ErrorComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/comps/error/error.component.ts

@@ -0,0 +1,20 @@
+import { AfterContentInit, Component, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-error',
+    standalone: true,
+    imports: [],
+    templateUrl: './error.component.html',
+    styleUrl: './error.component.scss',
+})
+export class ErrorComponent implements AfterContentInit {
+
+    ngAfterContentInit(): void {
+    }
+
+    open() {
+    }
+
+    close() {}
+}

src/app/pages/main/main.component.html

@@ -1,3 +1,12 @@
+@if (error) {
+    <app-error></app-error>
+    <div style="background-color: red">
+        <h1>Iets ging fout!</h1>
+        <p>{{ error.message }}</p>
+        <small>We hebben nog geen mooie error pagina gebouwd</small>
+    </div>
+}
+
 <div class="container">
     <div class="row">
         <div class="col-lg-6 col-sm-12">
@@ -41,7 +50,7 @@
                     type="search"
                     placeholder="Utrecht Centraal"
                     aria-label="Search"
-                    [value]="destinationStop" 
+                    [value]="destinationStop"
                     (input)="onSearchInputChange($event)"
                 />
                 <div>
@@ -64,17 +73,19 @@
             </form>
         </div>
         <div class="col-lg-6 col-sm-12">
+            <h1>Kom ik aan?</h1>
             @if (loadingPossibility) {
                 <div>
                     <div
                         class="spinner-border"
                         role="status"
                     >
+                        ❓
                         <span class="visually-hidden">Loading...</span>
                     </div>
+                    <p>Even kijken...</p>
                 </div>
             } @else if (possibility) {
-                <h1>Kom ik aan?</h1>
                 @switch (possibility.journeyExpectation) {
                     @case ('Full') {
                         <h1 style="color: green">Ja!</h1>
@@ -119,7 +130,16 @@ <h5 class="mb-1">{{ disruption.title }}</h5>
                         Geen problemen op dit traject volgens onze data.
                     }
                 } @else if (loadingPossibility) {
-                    <p>Zoekende voor data over storing op dit traject...</p>
+                    <div>
+                        <div
+                            class="spinner-border"
+                            role="status"
+                        >
+                            🚉
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p>Zoekende voor data over problemen op dit traject...</p>
+                    </div>
                 } @else {
                     <p>Selecteer een traject om problemen onderweg in te zien</p>
                 }
@@ -249,7 +269,16 @@ <h6 class="mb-1">
                     }
                 </div>
             } @else if (loadingPossibility) {
-                <p>Zoekende voor data voor jou reis...</p>
+                <div>
+                    <div
+                        class="spinner-border"
+                        role="status"
+                    >
+                        🚅
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+                <p>Zoekende voor advies voor jou reis...</p>
             } @else {
                 <p>Selecteer een route voor reisadvies.</p>
             }

src/app/pages/main/main.component.ts

@@ -1,13 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, inject } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { JourneyResult } from '../../models/journey-result';
 import { DatePipe } from '@angular/common';
-import { JourneyExpectation } from '../../enums/journey-expectation';
+import { ErrorComponent } from '../../comps/error/error.component';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
     selector: 'app-main',
     standalone: true,
-    imports: [DatePipe],
+    imports: [DatePipe, ErrorComponent],
     templateUrl: './main.component.html',
     styleUrl: './main.component.scss',
 })
@@ -19,6 +20,7 @@ export class MainComponent implements OnInit {
     possibility: JourneyResult | undefined;
     loadingPossibility: boolean = false;
     searchFailed = false;
+    error: HttpErrorResponse | undefined;
 
     constructor(private apiService: ApiService) {}
 
@@ -79,6 +81,7 @@ export class MainComponent implements OnInit {
             this.loadingPossibility = true;
             this.apiService.GetPossibility(this.originStop, this.destinationStop).subscribe({
                 next: (data) => this.setPossibility(data),
+                error: (error) => this.handleError(error),
             });
         }
     }
@@ -97,4 +100,9 @@ export class MainComponent implements OnInit {
             }
         });
     }
+
+    handleError(error: HttpErrorResponse) {
+        this.error = error;
+        console.log(error);
+    }
 }

src/styles.scss

@@ -2,3 +2,6 @@
 
 /* Importing Bootstrap SCSS file. */
 @import 'bootstrap/scss/bootstrap';
+
+/* Importing Bootstrap SCSS file. */
+@import 'bootstrap/scss/bootstrap';