Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/route-instance/route-instance.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/route-instance/route-instance.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/route-instance/route-instance.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,14 @@
+<div class="flex justify-center items-center w-full h-full">
+
+  {{this.routeInstance?.id}}
+  {{routeInstance?.driver?.email}}
+  <div>
+    {{routeInstance?.end}}
+  </div>
+  <div>
+    <button [disabled]="routeInstance?.end" mat-flat-button (click)="endInstance()">
+      End instance
+    </button>
+  </div>
+
+</div>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/route-instance/route-instance.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/route-instance/route-instance.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/route-instance/route-instance.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,41 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {RouteInstanceService} from "../../../services/route-instance/route-instance.service";
+import {RouteInstanceResponse} from "../../../model/responses/RouteInstanceResponse";
+import {MatButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-route-instance',
+  standalone: true,
+  imports: [
+    MatButton
+  ],
+  templateUrl: './route-instance.component.html',
+})
+export class RouteInstanceComponent implements OnInit {
+  routeInstance: RouteInstanceResponse | undefined
+
+  constructor(private route: ActivatedRoute,
+              private routeInstanceService: RouteInstanceService,) {
+  }
+
+  ngOnInit(): void {
+    const routeInstanceId: number = +this.route.snapshot.paramMap.get('id')!
+    this.routeInstanceService.getById(routeInstanceId).subscribe({
+      next: response => {
+        this.routeInstance = response
+      }
+    })
+
+  }
+
+  endInstance() {
+    if (this.routeInstance) {
+      this.routeInstanceService.stop(this.routeInstance.id).subscribe({
+        next: response => {
+          this.routeInstance = response
+        }
+      })
+    }
+  }
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.css
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,3 @@
+::ng-deep .mdc-notched-outline__notch {
+  border-right: none !important;
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,52 @@
+<div class="w-full h-full flex justify-center items-center">
+
+  <div class="flex flex-col">
+
+    @if (isDriverFree) {
+      <form class="flex flex-col">
+
+        <mat-form-field [appearance]="'outline'">
+          <mat-label>Select bus</mat-label>
+          <mat-select (selectionChange)="onBusPick($event)">
+            @for (bus of buses; track bus.id) {
+              <mat-option [value]="bus.id">{{ bus.registracija }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+
+        @if (bus) {
+          <mat-form-field [appearance]="'outline'">
+            <mat-label>Select line</mat-label>
+            <mat-select (selectionChange)="onLinePick($event)">
+              @for (line of lines; track line.id) {
+                <mat-option [value]="line.id">{{ line.ime }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        @if (line) {
+          <mat-form-field [appearance]="'outline'">
+            <mat-label>Select direction</mat-label>
+            <mat-select (selectionChange)="onDirectionPick($event)">
+              @for (direction of directions; track direction.id) {
+                <mat-option [value]="direction.id">{{ direction.pravec }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        <button (click)="onSubmit()" type="button" mat-flat-button>
+          Start
+        </button>
+      </form>
+    } @else {
+      <div>
+        Currently logged in driver is busy!
+      </div>
+
+    }
+  </div>
+
+</div>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,111 @@
+import {Component, OnInit} from '@angular/core';
+import {LineService} from "../../../services/line/line.service";
+import {BusService} from "../../../services/bus/bus.service";
+import {DirectionService} from "../../../services/direction/direction.service";
+import {Bus} from "../../../model/Bus";
+import {MatButton} from "@angular/material/button";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatOption} from "@angular/material/core";
+import {MatSelect, MatSelectChange} from "@angular/material/select";
+import {filter, Subject, switchMap, tap} from "rxjs";
+import {Line} from "../../../model/Line";
+import {Direction} from "../../../model/Direction";
+import {RouteInstanceService} from "../../../services/route-instance/route-instance.service";
+import {Router} from "@angular/router";
+import {AuthService} from "../../../services/auth/auth.service";
+import {log} from "@angular-devkit/build-angular/src/builders/ssr-dev-server";
+
+@Component({
+  selector: 'app-start-route-instnace',
+  standalone: true,
+  imports: [
+    MatButton,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect
+  ],
+  templateUrl: './start-route-instance.component.html',
+  styleUrl: './start-route-instance.component.css'
+})
+export class StartRouteInstanceComponent implements OnInit {
+  buses: Bus[] = []
+  lines: Line[] = []
+  directions: Direction[] = []
+  isDriverFree = false
+
+  bus: Bus | undefined
+  line: Line | undefined
+  direction: Direction | undefined
+
+  private _busSelected$ = new Subject<Bus>();
+  private _lineSelected$ = new Subject<Line>();
+
+  constructor(
+    private _lineService: LineService,
+    private _busService: BusService,
+    private _directionService: DirectionService,
+    private _routeInstanceService: RouteInstanceService,
+    private _router: Router,
+    private _authService: AuthService
+  ) {
+  }
+
+  ngOnInit(): void {
+
+    this._authService.isDriverFree().pipe(
+      tap(x => console.log(x)),
+      tap(isDriverFree => this.isDriverFree = isDriverFree),
+      filter(isDriverFree => isDriverFree === true),
+      switchMap(_ => this._busService.getAllFree())
+    ).subscribe({
+      next: response => {
+        console.log('free buses', response)
+        this.buses = response
+      }
+    })
+
+    this._busSelected$.pipe(
+      switchMap(bus => this._lineService.getAll())
+    ).subscribe({
+      next: response => {
+        this.lines = response
+      }
+    })
+    this._lineSelected$.pipe(
+      switchMap(line => this._lineService.getDirections(line))
+    ).subscribe({
+      next: response => {
+        this.directions = response.map(x => x.pravec)
+        console.log(response)
+      }
+    })
+  }
+
+  onBusPick($event: MatSelectChange) {
+    this.bus = this.buses.find(bus => bus.id === $event.value)
+    if (this.bus) this._busSelected$.next(this.bus)
+  }
+
+  onLinePick($event: MatSelectChange) {
+    this.line = this.lines.find(line => line.id === $event.value)
+    if (this.line) this._lineSelected$.next(this.line)
+  }
+
+  onDirectionPick($event: MatSelectChange) {
+    this.direction = this.directions.find(direction => direction.id === $event.value)
+  }
+
+  onSubmit() {
+    if (this.bus && this.line && this.direction)
+      this._routeInstanceService.start({
+        lineId: this.line.id,
+        busId: this.bus.id,
+        directionId: this.direction.id,
+      }).subscribe({
+        next: response => {
+          this._router.navigate(['/route-instances', response.id])
+        }
+      })
+  }
+}
