diff --git a/src/app/about-us/app.about-us.component.scss b/src/app/about-us/app.about-us.component.scss index 01af82a..9a31376 100644 --- a/src/app/about-us/app.about-us.component.scss +++ b/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; diff --git a/src/app/app.component.html b/src/app/app.component.html index 0657a1f..724c464 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,9 @@ - + -
+
diff --git a/src/app/navigation/app.navigation.html b/src/app/navigation/app.navigation.html index a7566ce..86967eb 100644 --- a/src/app/navigation/app.navigation.html +++ b/src/app/navigation/app.navigation.html @@ -12,7 +12,7 @@ @for (link of items; track link) { +
+
+

*Zahŕňa vyváženie diskov, výmenu a hustenie

+ +
+ + + + + + +
+ diff --git a/src/app/prices-dialog/app.prices-dialog.component.scss b/src/app/prices-dialog/app.prices-dialog.component.scss new file mode 100644 index 0000000..f158a55 --- /dev/null +++ b/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; + } +} diff --git a/src/app/prices-dialog/app.prices-dialog.component.ts b/src/app/prices-dialog/app.prices-dialog.component.ts new file mode 100644 index 0000000..abd8ea4 --- /dev/null +++ b/src/app/prices-dialog/app.prices-dialog.component.ts @@ -0,0 +1,52 @@ +import { Component, inject } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { MatButtonModule } from "@angular/material/button"; +import { MatButtonToggleModule } from "@angular/material/button-toggle"; +import { MatCardModule } from "@angular/material/card"; +import { MatDialogModule, MatDialogRef } from "@angular/material/dialog"; +import { MatDividerModule } from "@angular/material/divider"; +import { MatSliderModule } from "@angular/material/slider"; +import { CarType } from "./app.car-type.enum"; +import { AppPricePipe } from "./app.price.pipe"; + +/** + * Prices dialog component. + */ +@Component({ + imports: [ + AppPricePipe, + FormsModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatDialogModule, + MatDividerModule, + MatSliderModule, + ], + selector: "app-prices-dialog", + standalone: true, + styleUrl: "./app.prices-dialog.component.scss", + templateUrl: "./app.prices-dialog.component.html", +}) +export class AppPricesDialogComponent { + /** Dialog ref. */ + public dialogRef: MatDialogRef = + inject(MatDialogRef); + + /** Car types options. */ + public carTypes: CarType[] = [ + CarType.Basic, + CarType.Suv, + CarType.Van, + CarType.Offroad, + ]; + + /** Selected car type. */ + public carType: CarType = CarType.Basic; + + /** Selected disk size. */ + public diskSize: number = 16; + + /** Flag for complete change of tires. */ + public completeChange: boolean = true; +} diff --git a/src/app/prices-dialog/app.prices-dialog.service.ts b/src/app/prices-dialog/app.prices-dialog.service.ts new file mode 100644 index 0000000..71d9db3 --- /dev/null +++ b/src/app/prices-dialog/app.prices-dialog.service.ts @@ -0,0 +1,30 @@ +import { inject, Injectable } from "@angular/core"; +import { MatDialog } from "@angular/material/dialog"; +import { AppThemeService } from "../app.theme.service"; +import { AppPricesDialogComponent } from "./app.prices-dialog.component"; + +/** + * Prices dialog service. + */ +@Injectable({ providedIn: "root" }) +export class AppPricesDialogService { + /** Angular material dialog service. */ + private dialog: MatDialog = inject(MatDialog); + + /** App's theme service. */ + private appThemeService: AppThemeService = inject(AppThemeService); + + /** + * Opens prices dialog. + */ + public openPricesDialog(): void { + this.dialog.open(AppPricesDialogComponent, { + enterAnimationDuration: 200, + maxWidth: "1000px", + minWidth: "450px", + panelClass: this.appThemeService.lightTheme + ? "light-theme" + : "dark-theme", + }); + } +} diff --git a/src/app/services/app.services.html b/src/app/services/app.services.html index 9d978b8..891b231 100644 --- a/src/app/services/app.services.html +++ b/src/app/services/app.services.html @@ -29,5 +29,23 @@

SLUŽBY

} + +
+ + + + + + + Orientačný cenník služieb + + + @defer (on interaction(priceListToggle)) { + + } @loading { + + } + + diff --git a/src/app/services/app.services.ts b/src/app/services/app.services.ts index d0fdbc3..3708e7f 100644 --- a/src/app/services/app.services.ts +++ b/src/app/services/app.services.ts @@ -1,8 +1,12 @@ import { Component } from "@angular/core"; +import { MatButtonModule } from "@angular/material/button"; import { MatCardModule } from "@angular/material/card"; import { MatDividerModule } from "@angular/material/divider"; +import { MatExpansionModule } from "@angular/material/expansion"; +import { MatProgressBarModule } from "@angular/material/progress-bar"; import { MatTabsModule } from "@angular/material/tabs"; import { AppSwipeDirective, SWIPE_DIRECTION } from "./app.swipe.directive"; +import { AppPricingTableComponent } from "./pricing-table/app.pricing-table.component"; /** * Service item definition. @@ -23,8 +27,12 @@ interface ServiceItem { */ @Component({ imports: [ + AppPricingTableComponent, + MatButtonModule, MatCardModule, MatDividerModule, + MatExpansionModule, + MatProgressBarModule, MatTabsModule, AppSwipeDirective, ], diff --git a/src/app/services/pricing-table/app.pricing-table.component.html b/src/app/services/pricing-table/app.pricing-table.component.html new file mode 100644 index 0000000..635bb2e --- /dev/null +++ b/src/app/services/pricing-table/app.pricing-table.component.html @@ -0,0 +1,42 @@ + +@let columns = ["service", "price"]; + + + + + + + + + + + + + + + + + +
+ Služba + + {{ element.service }} + + Cena + + {{ element.price }} +
diff --git a/src/app/services/pricing-table/app.pricing-table.component.scss b/src/app/services/pricing-table/app.pricing-table.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/services/pricing-table/app.pricing-table.component.ts b/src/app/services/pricing-table/app.pricing-table.component.ts new file mode 100644 index 0000000..2cf105d --- /dev/null +++ b/src/app/services/pricing-table/app.pricing-table.component.ts @@ -0,0 +1,104 @@ +import { Component } from "@angular/core"; +import { MatTableModule } from "@angular/material/table"; + +/** + * Table data definition. + */ +interface TableData { + /** Row color. */ + color: string; + /** Row value. */ + price: string; + /** Row title. */ + service: string; +} + +/** + * Pricing table component. + */ +@Component({ + imports: [ + MatTableModule, + ], + selector: "app-pricing-table", + standalone: true, + styleUrl: "./app.pricing-table.component.scss", + templateUrl: "./app.pricing-table.component.html", +}) +export class AppPricingTableComponent { + /** Table data. */ + public tableData: TableData[] = [ + { + color: undefined, + price: "1,50€", + service: "Príplatok za TPMS Ventil (1ks)", + }, + { + color: undefined, + price: "1,50€", + service: "Príplatok za RUN-FLAT pneumatiku (1ks)", + }, + { + color: undefined, + price: "10,00€", + service: "Oprava defektu knôtom", + }, + { + color: undefined, + price: "15,00€", + service: "Oprava defektu hríbikom", + }, + { + color: undefined, + price: "10,00€", + service: "Utesnenie disku", + }, + { + color: undefined, + price: "od 40,00 €", + service: "Oprava defektu výjazd (24/7) 8:00 - 20:00", + }, + { + color: undefined, + price: "od 60,00 €", + service: "Oprava defektu výjazd (24/7) 20:00 - 8:00", + }, + { + color: undefined, + price: "1,50€ / 2,50€", + service: "Ventil gumený/ Ventil VAN", + }, + { + color: undefined, + price: "10,00€", + service: "Programovanie TPMS snímačov +montáž (1ks)", + }, + { + color: undefined, + price: "25,00€", + service: "Čistenie klimatizácie vozidla", + }, + { + color: undefined, + price: "35,00€", + service: "Uskladnenie sady pneumatík", + }, + { + color: undefined, + price: "0,50€", + service: "Vrecia na pneumatiky (1ks)", + }, + { + color: undefined, + price: "45,00€", + service: + "Minimálna objednávka na kompletné prezutie / výmena sezónnych pneumatík (osobné, Van, SUV) len k jednému vozidlu", + }, + { + color: undefined, + price: "15,00€", + service: + "Vynáška pneumatík / kolies (4ks) z pivnice alebo iných skladových priestorov", + }, + ]; +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 96303b3..99661b8 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,5 +1,3 @@ -@import "@angular/cdk/overlay-prebuilt.css"; - * { box-sizing: border-box; text-align: center; @@ -7,9 +5,10 @@ } h1, -h2 { - font-weight: bold; - letter-spacing: 0.2em; +h2, +.mat-mdc-dialog-title { + font-weight: bold !important; + letter-spacing: 0.2em !important; } p { @@ -51,3 +50,17 @@ app-root { cursor: pointer; } } + +// dialogs +mat-dialog-content { + padding: 1em !important; +} + +mat-card-title-group { + justify-content: center !important; +} + +mat-panel-title { + justify-content: center; + margin: unset; +}