Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/commute/commute.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/commute/commute.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/commute/commute.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,1 @@
+<p>commute works!</p>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/commute/commute.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/commute/commute.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/commute/commute.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commute',
+  standalone: true,
+  imports: [],
+  templateUrl: './commute.component.html',
+  styleUrl: './commute.component.css'
+})
+export class CommuteComponent {
+
+}
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.css
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.css	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.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/commutes/start-commute/start-commute.component.html
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.html	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,41 @@
+<div class="w-full h-full flex justify-center items-center">
+
+  <div class="flex flex-col">
+
+
+      <form class="flex flex-col">
+
+        <mat-form-field [appearance]="'outline'">
+          <mat-label>Select ticket</mat-label>
+          <mat-select (selectionChange)="onTicketSelect($event)">
+            @for (t of tickets; track t.id) {
+              <mat-option [value]="t.id">{{ t.tip.ime }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field [appearance]="'outline'">
+          <mat-label>Select station</mat-label>
+          <mat-select (selectionChange)="onStationPick($event)">
+            @for (s of stations; track s.id) {
+              <mat-option [value]="s.id">{{ s.ime }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field [appearance]="'outline'">
+          <mat-label>Select route</mat-label>
+          <mat-select (selectionChange)="onInstancePick($event)">
+            @for (i of routeInstances; track i.id) {
+              <mat-option [value]="i.id">{{ i.line.ime + ' -> ' + i.direction.pravec }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <button mat-flat-button (click)="startCommute()">Start commute</button>
+
+      </form>
+
+  </div>
+
+</div>
Index: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.ts
===================================================================
--- bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
+++ bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/commutes/start-commute/start-commute.component.ts	(revision baf4cc4b66f1d62e9dc9c2e71bcc078c9c3956a3)
@@ -0,0 +1,127 @@
+import {Component, OnInit} from '@angular/core';
+import {RouteInstanceService} from "../../../services/route-instance/route-instance.service";
+import {Station} from "../../../model/Station";
+import {RouteInstanceResponse} from "../../../model/responses/RouteInstanceResponse";
+import {StationService} from "../../../services/station/station.service";
+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 {Subject, switchMap, tap} from "rxjs";
+import {CommuteService} from "../../../services/commute/commute.service";
+import {TicketService} from "../../../services/ticket/ticket.service";
+import {TicketResponse} from "../../../model/responses/TicketResponse";
+import {Router} from "@angular/router";
+import {log} from "@angular-devkit/build-angular/src/builders/ssr-dev-server";
+
+@Component({
+  selector: 'app-start-commute',
+  standalone: true,
+  imports: [
+    MatButton,
+    MatFormField,
+    MatLabel,
+    MatOption,
+    MatSelect
+  ],
+  templateUrl: './start-commute.component.html',
+  styleUrl: './start-commute.component.css'
+})
+export class StartCommuteComponent implements OnInit {
+  tickets: TicketResponse[] = []
+  stations: Station[] = []
+  routeInstances: RouteInstanceResponse[] = []
+
+  station: number | undefined;
+  instance: number | undefined;
+  ticket: number | undefined;
+
+  private _stationSelected$ = new Subject<number>();
+  private _instanceSelected$ = new Subject<number>();
+  private _ticketSelected$ = new Subject<number>();
+  private _startCommute$ = new Subject<void>();
+
+  constructor(private routeInstanceService: RouteInstanceService,
+              private stationService: StationService,
+              private commuteService: CommuteService,
+              private ticketService: TicketService,
+              private _router: Router,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.ticketService.getTickets().subscribe({
+      next: response => {
+        this.tickets = response
+        console.log(this.tickets)
+      }
+    })
+
+    this.stationService.getAllStations().subscribe({
+      next: response => {
+        this.stations = response;
+        console.log(this.stations)
+      }
+    })
+
+    this._stationSelected$.pipe(
+      switchMap(station => this.routeInstanceService.getForStation(station))
+    ).subscribe({
+      next: response => {
+        this.routeInstances = response;
+        console.log(response);
+      }
+    })
+    // todo: finish logic
+    this._startCommute$.pipe(
+      switchMap(() => {
+          console.log('in switch map');
+          return this.commuteService.startCommute({
+            stationId: this.station!!,
+            routeInstanceId: this.instance!!,
+            ticketId: this.ticket!!
+          });
+        }
+      )
+    ).subscribe({
+      next: response => {
+        console.log(response)
+      },
+      error: err => console.log(err)
+    })
+  }
+
+
+  onStationPick(event: MatSelectChange) {
+    this.station = event.value
+    if (this.station) this._stationSelected$.next(this.station)
+  }
+
+  onInstancePick(event: MatSelectChange) {
+    this.instance = event.value
+    if (this.instance) this._instanceSelected$.next(this.instance)
+  }
+
+  startCommute() {
+    console.log('starting commute');
+    console.log('ticket', this.ticket);
+    console.log('instance', this.instance);
+    console.log('station', this.station);
+    if (this.station && this.ticket && this.instance)
+      this.commuteService.startCommute({
+        stationId: this.station!!,
+        routeInstanceId: this.instance!!,
+        ticketId: this.ticket!!
+      }).pipe(
+        tap(res => console.log(res))
+      ).subscribe(res => {
+        console.log(res)
+        this._router.navigate(['/commutes', res.id])
+      })
+  }
+
+  onTicketSelect(event: MatSelectChange) {
+    this.ticket = event.value
+    if (this.ticket) this._ticketSelected$.next(this.ticket)
+  }
+}
