Merge branch 'jank/price-list'

src/app/about-us/app.about-us.component.scss

@@ -35,11 +35,6 @@ mat-card-content {
     padding: unset !important;
 
     mat-accordion {
-        mat-panel-title {
-            justify-content: center;
-            margin: unset;
-        }
-
         mat-list-item {
             b {
                 text-decoration: underline;

src/app/app.component.html

@@ -1,9 +1,9 @@
 <mat-sidenav-container>
     <!-- Nav bar -->
-    <app-navigation />
+    <app-navigation id="domov" />
 
     <!-- Content -->
-    <div id="domov">
+    <div>
         <!-- Panorama -->
         <app-panorama />
 

src/app/navigation/app.navigation.html

@@ -12,7 +12,7 @@
         @for (link of items; track link) {
             <button
                 mat-button
-                (click)="goTo(link); sidenav.close()">
+                (click)="link.action(); sidenav.close()">
                 {{ link.title }}
                 @if (link.icon) {
                     <i [class]="'fa-brands ' + link.icon"></i>
@@ -48,7 +48,7 @@
         <a
             tabindex="0"
             mat-tab-link
-            (click)="goTo(link)">
+            (click)="link.action()">
             {{ link.title }}
             @if (link.icon) {
                 <i [class]="'fa-brands ' + link.icon"></i>

src/app/navigation/app.navigation.ts

@@ -1,20 +1,21 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { MatButtonModule } from "@angular/material/button";
 import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatTabsModule } from "@angular/material/tabs";
 import { RouterLink } from "@angular/router";
+import { AppPricesDialogService } from "../prices-dialog/app.prices-dialog.service";
 import { AppThemeToggleComponent } from "./theme-toggle/app.theme-toggle.component";
 
 /**
  * Navigation item definition.
  */
 interface NavigationItem {
+    /** Action. */
+    action: () => void;
+
     /** Icon. */
     icon: string;
 
-    /** Location.*/
-    location: string;
-
     /** Title. */
     title: string;
 }
@@ -36,53 +37,75 @@ interface NavigationItem {
     templateUrl: "./app.navigation.html",
 })
 export class AppNavigationComponent {
+    /** Prices dialog service. */
+    private pricesDialogService: AppPricesDialogService = inject(
+        AppPricesDialogService,
+    );
+
     /** Navigation items. */
     public items: NavigationItem[] = [
         {
+            action: (): void => {
+                this.scrollTo("domov");
+            },
             icon: undefined,
-            location: "domov",
             title: "Domov",
         },
         {
+            action: (): void => {
+                this.scrollTo("o-nas");
+            },
             icon: undefined,
-            location: "o-nas",
             title: "O Nás",
         },
         {
+            action: (): void => {
+                this.scrollTo("sluzby");
+            },
             icon: undefined,
-            location: "sluzby",
             title: "Služby",
         },
         {
+            action: (): void => {
+                this.pricesDialogService.openPricesDialog();
+            },
+            icon: undefined,
+            title: "Cenník",
+        },
+        {
+            action: (): void => {
+                this.scrollTo("kontakt");
+            },
             icon: undefined,
-            location: "kontakt",
             title: "Kontakt",
         },
         {
+            action: (): void => {
+                window.location.href =
+                    "https://www.facebook.com/profile.php?id=100059595616564";
+            },
             icon: "fa-facebook",
-            location: "https://www.facebook.com/profile.php?id=100059595616564",
             title: "",
         },
         {
+            action: (): void => {
+                window.location.href =
+                    "https://www.instagram.com/pojazdnypneuservis/";
+            },
             icon: "fa-instagram",
-            location: "https://www.instagram.com/pojazdnypneuservis/",
             title: "",
         },
     ];
 
     /**
-     * Handler for the navigation links clicks.
-     * @param link Navigation link.
+     * Scrolls to the selected link.
+     * @param elementId Element id.
      */
-    public goTo(link: NavigationItem): void {
-        if (link.icon) {
-            window.location.href = link.location;
-        } else {
-            document.getElementById(link.location).scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-                inline: "center",
-            });
-        }
+    private scrollTo(elementId: string): void {
+        document.getElementById(elementId).scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "center",
+        });
     }
 }

src/app/prices-dialog/app.car-type.enum.ts

@@ -0,0 +1,9 @@
+/**
+ * Car types enum.
+ */
+export enum CarType {
+    Offroad = "Off-road",
+    Basic = "Osobné",
+    Suv = "SUV",
+    Van = "Úžitkové",
+}

src/app/prices-dialog/app.price.pipe.ts

@@ -0,0 +1,91 @@
+import type { PipeTransform } from "@angular/core";
+import { Pipe } from "@angular/core";
+import { CarType } from "./app.car-type.enum";
+
+/**
+ * Pipe for price calculation.
+ */
+@Pipe({
+    name: "appPrice",
+    standalone: true,
+})
+export class AppPricePipe implements PipeTransform {
+    /**
+     * Calculates the price based on settings.
+     * @param carType Car type.
+     * @param complete Flag for complete change of tires.
+     * @param diskSize Disk size.
+     * @returns Calculated price.
+     */
+    public transform(
+        carType: CarType,
+        complete: boolean,
+        diskSize: number,
+    ): number {
+        diskSize = Math.min(Math.max(diskSize, 14), 22);
+
+        switch (carType) {
+            case CarType.Basic:
+                switch (diskSize) {
+                    case 14:
+                        return complete ? 34 : 25;
+                    case 15:
+                        return complete ? 35 : 25;
+                    case 16:
+                        return complete ? 37 : 27;
+                    case 17:
+                        return complete ? 39 : 27;
+                    case 18:
+                        return complete ? 41 : 28;
+                    case 19:
+                        return complete ? 45 : 30;
+                    case 20:
+                        return complete ? 51 : 32;
+                    case 21:
+                        return complete ? 56 : 35;
+                    case 22:
+                        return complete ? 63 : 40;
+                    default:
+                        return NaN;
+                }
+
+            case CarType.Offroad:
+                return diskSize <= 15
+                    ? complete
+                        ? 64
+                        : 44
+                    : complete
+                      ? 70
+                      : 46;
+
+            case CarType.Suv:
+                switch (diskSize) {
+                    case 14:
+                    case 15:
+                    case 16:
+                    case 17:
+                        return complete ? 42 : 30;
+                    case 18:
+                    case 19:
+                        return complete ? 50 : 35;
+                    case 20:
+                        return complete ? 58 : 40;
+                    case 21:
+                        return complete ? 65 : 45;
+                    case 22:
+                        return complete ? 72 : 45;
+                    default:
+                        return NaN;
+                }
+
+            case CarType.Van:
+                return diskSize <= 15
+                    ? complete
+                        ? 45
+                        : 31
+                    : complete
+                      ? 48
+                      : 33;
+        }
+    }
+}

src/app/prices-dialog/app.prices-dialog.component.html

@@ -0,0 +1,78 @@
+<div
+    mat-dialog-title
+    class="mat-elevation-z5">
+    <span>Prezutie (4 kolesá)</span>
+</div>
+
+<mat-dialog-content>
+    <!-- Typ auta -->
+    <div class="row">
+        <mat-button-toggle-group
+            [name]="'carType'"
+            [hideSingleSelectionIndicator]="true"
+            [(ngModel)]="carType">
+            @for (t of carTypes; track $index) {
+                <mat-button-toggle [value]="t">
+                    {{ t }}
+                </mat-button-toggle>
+            }
+        </mat-button-toggle-group>
+    </div>
+
+    <!-- Komplet -->
+    <div class="row">
+        <mat-button-toggle-group
+            [name]="'completeChange'"
+            [hideSingleSelectionIndicator]="true"
+            [(ngModel)]="completeChange">
+            <mat-button-toggle [value]="false">
+                Prehodenie kolies
+            </mat-button-toggle>
+            <mat-button-toggle [value]="true">
+                Kompletné prezutie
+            </mat-button-toggle>
+        </mat-button-toggle-group>
+    </div>
+
+    <!-- Disk -->
+    <div class="row">
+        <div class="label-value-container">
+            <span>Veľkosť diskov:</span>
+            <span>{{ diskSize }}''</span>
+        </div>
+        <mat-slider
+            [discrete]="false"
+            [min]="14"
+            [max]="22"
+            [step]="1"
+            [showTickMarks]="true">
+            <input
+                matSliderThumb
+                [(ngModel)]="diskSize" />
+        </mat-slider>
+    </div>
+
+    <!-- Cena -->
+    <mat-divider />
+    <div>
+        <div class="label-value-container">
+            <button mat-flat-button>
+                <b>{{ carType | appPrice: completeChange : diskSize }} €</b>
+            </button>
+        </div>
+        <div>
+            <p>*Zahŕňa vyváženie diskov, výmenu a hustenie</p>
+            <mat-divider />
+        </div>
+        <mat-divider />
+
+        <!-- Footer -->
+        <mat-dialog-actions [align]="'center'">
+            <button
+                mat-button
+                mat-dialog-close>
+                Zavrieť
+            </button>
+        </mat-dialog-actions>
+    </div>
+</mat-dialog-content>

src/app/prices-dialog/app.prices-dialog.component.scss

@@ -0,0 +1,39 @@
+p {
+    opacity: 0.8;
+    margin: 0;
+    font-size: 0.8rem;
+}
+
+mat-dialog-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1em !important;
+    font-size: 1rem !important;
+    --mat-checkbox-label-text-size: 1rem;
+    --mat-standard-button-toggle-label-text-size: 1rem;
+
+    .label-value-container {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        font-size: 1rem;
+    }
+
+    .row {
+        display: block;
+        margin-right: auto;
+        margin-left: auto;
+        min-width: 60%;
+        max-width: 90%;
+    }
+
+    mat-slider {
+        margin: unset;
+        width: 100%;
+    }
+
+    mat-dialog-actions {
+        padding: 0;
+    }
+}