feat: add start time and station in order

src/app/api/models/order.ts

@@ -15,8 +15,6 @@ export interface Order {
   schedule: {
     segments: Segment[];
   };
-  stationStart: number;
-  stationEnd: number;
 }
 
 export interface User extends Profile {

src/app/api/ordersService/orders.data.ts

@@ -0,0 +1,86 @@
+import { Order } from '@/app/api/models/order';
+
+export const ordersDummyData: Order[] = [
+  {
+    id: 64,
+    rideId: 45,
+    routeId: 18,
+    seatId: 33,
+    userId: 3,
+    status: 'active',
+    path: [33, 5, 62, 11, 48, 34],
+    carriages: [
+      'carriage_type_2',
+      'carriage_type_2',
+      'carriage_type_2',
+      'carriage_type_2',
+      'carriage_type_7',
+      'carriage_type_7',
+      'carriage_type_7',
+      'carriage_type_7',
+    ],
+    schedule: {
+      segments: [
+        {
+          time: ['2021-08-10T08:00:00', '2021-08-10T08:30:00'],
+          price: {
+            adult: 1000,
+            child: 500,
+            student: 700,
+          },
+          occupiedSeats: [32],
+        },
+        {
+          time: ['2021-08-10T08:30:00', '2021-08-10T09:00:00'],
+          price: {
+            adult: 1000,
+            child: 500,
+            student: 700,
+          },
+          occupiedSeats: [32],
+        },
+      ],
+    },
+  },
+  {
+    id: 65,
+    rideId: 46,
+    routeId: 19,
+    seatId: 34,
+    userId: 3,
+    status: 'active',
+    path: [33, 5, 62, 11, 48, 34],
+    carriages: [
+      'carriage_type_2',
+      'carriage_type_2',
+      'carriage_type_2',
+      'carriage_type_2',
+      'carriage_type_7',
+      'carriage_type_7',
+      'carriage_type_7',
+      'carriage_type_7',
+    ],
+    schedule: {
+      segments: [
+        {
+          time: ['2021-08-11T08:00:00', '2021-08-11T08:30:00'],
+          price: {
+            adult: 1000,
+            child: 500,
+            student: 700,
+          },
+          occupiedSeats: [33],
+        },
+        {
+          time: ['2021-08-11T08:30:00', '2021-08-11T09:00:00'],
+          price: {
+            adult: 1000,
+            child: 500,
+            student: 700,
+          },
+          occupiedSeats: [33],
+        },
+      ],
+    },
+  },
+];

src/app/api/ordersService/orders.service.ts

@@ -1,19 +1,26 @@
 import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
+import { inject, Injectable, signal } from '@angular/core';
 
-import { Observable } from 'rxjs';
+import { Observable, shareReplay, tap } from 'rxjs';
 
 import ENDPOINTS from '../constants/constants';
 import { Order, OrderId, OrderRequest, User } from '../models/order';
+import { ordersDummyData } from './orders.data';
 
 @Injectable({
   providedIn: 'root',
 })
 export class OrdersService {
   private httpClient = inject(HttpClient);
+  public allOrders = signal<Order[]>([]);
 
-  public getAllOrders(): Observable<Order[]> {
-    return this.httpClient.get<Order[]>(ENDPOINTS.ORDER);
+  public getOrders(): Observable<Order[]> {
+    return this.httpClient.get<Order[]>(ENDPOINTS.ORDER).pipe(
+      shareReplay(1),
+      // Temporar solution with hardcoded data
+      // tap((orders) => this.allOrders.set(orders)),
+      tap(() => this.allOrders.set(ordersDummyData)),
+    );
   }
 
   public makeOrder(order: OrderRequest): Observable<OrderId> {

src/app/orders/components/order/order.component.html

@@ -0,0 +1,13 @@
+<hr />
+<div class="wrapper">
+  <p>Order ID: {{ order.id }}</p>
+  <p>
+    Start Time: <b>{{ order.schedule.segments[0].time[0] | date: 'MMMM dd HH:mm' }}</b>
+  </p>
+  <p>
+    Start Station:
+    @if (stationsService.findStationById(order.path[0]); as startStation) {
+      <b>{{ startStation.city }}</b>
+    }
+  </p>
+</div>

src/app/orders/components/order/order.component.ts

@@ -0,0 +1,27 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, Input, OnDestroy } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+import { RippleModule } from 'primeng/ripple';
+import { Subscription } from 'rxjs';
+
+import { Order } from '@/app/api/models/order';
+import { StationsService } from '@/app/api/stationsService/stations.service';
+
+@Component({
+  selector: 'app-order',
+  standalone: true,
+  imports: [ButtonModule, RippleModule, DatePipe],
+  templateUrl: './order.component.html',
+  styleUrl: './order.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrderComponent implements OnDestroy {
+  @Input() public order!: Order;
+  public stationsService = inject(StationsService);
+  private subsciption = new Subscription();
+
+  public ngOnDestroy(): void {
+    this.subsciption.unsubscribe();
+  }
+}

src/app/orders/components/orders-list/orders-list.component.html

@@ -0,0 +1,8 @@
+<div>
+  orders-list works!
+  <div>
+    @for (order of orders; track order.id) {
+      <app-order [order]="order"></app-order>
+    }
+  </div>
+</div>

src/app/orders/components/orders-list/orders-list.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { Order } from '@/app/api/models/order';
+
+import { OrderComponent } from '../order/order.component';
+
+@Component({
+  selector: 'app-orders-list',
+  standalone: true,
+  imports: [OrderComponent],
+  templateUrl: './orders-list.component.html',
+  styleUrl: './orders-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrdersListComponent {
+  @Input() public orders!: Order[];
+}

src/app/orders/pages/orders/orders.component.html

@@ -1 +1,8 @@
 <p>orders works!</p>
+
+<div class="wrapper">
+  @let orders = ordersService.allOrders();
+  @if (orders.length) {
+    <app-orders-list [orders]="orders"></app-orders-list>
+  }
+</div>

src/app/orders/pages/orders/orders.component.ts

@@ -1,11 +1,33 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from '@angular/core';
+
+import { Subscription } from 'rxjs';
+
+import { OrdersService } from '@/app/api/ordersService/orders.service';
+import { StationsService } from '@/app/api/stationsService/stations.service';
+
+import { OrdersListComponent } from '../../components/orders-list/orders-list.component';
 
 @Component({
   selector: 'app-orders',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, OrdersListComponent],
   templateUrl: './orders.component.html',
   styleUrl: './orders.component.scss',
+  providers: [DatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OrdersComponent {}
+export class OrdersComponent implements OnInit, OnDestroy {
+  public ordersService = inject(OrdersService);
+  public stationsService = inject(StationsService);
+  private subsciption = new Subscription();
+
+  public ngOnInit(): void {
+    this.subsciption.add(this.ordersService.getOrders().subscribe());
+    this.subsciption.add(this.stationsService.getStations().subscribe());
+  }
+
+  public ngOnDestroy(): void {
+    this.subsciption.unsubscribe();
+  }
+}