2 |
3 |
6 |
7 | 
8 |
9 |
30 |
31 |
32 |
33 |
36 |
37 |
38 |
39 |
41 |
42 |
47 |
48 |
49 |
67 |
68 |
71 |
72 |
75 |
76 |
78 |
--------------------------------------------------------------------------------
/frontend/src/app/features/features.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/shared/_colors';
2 |
3 | mat-sidenav {
4 | width: 300px;
5 | }
6 |
7 | mat-toolbar.header {
8 | .logo-toolbar {
9 | height: 40px;
10 | margin-left: 10px;
11 | margin-right: 10px;
12 | }
13 |
14 | button {
15 | margin-right: 5px;
16 | }
17 | }
18 |
19 | .order-summary {
20 | color: white;
21 | position: absolute;
22 | right: 20px;
23 | bottom: 80px;
24 | }
25 |
26 | .csv-download {
27 | color: white;
28 | position: absolute;
29 | right: 20px;
30 | bottom: 136px;
31 | }
32 |
33 | .csv-download,
34 | .order-summary {
35 | z-index: 1;
36 | }
37 |
38 | .nb-filters-ingredients {
39 | position: absolute;
40 | margin-left: -7px;
41 | margin-top: 3px;
42 | font-size: 12px;
43 | color: mat-color($accent);
44 | }
45 |
46 | .ingredients-selected {
47 | margin-left: 16px;
48 | margin-right: 16px;
49 | padding-top: 10px;
50 | padding-bottom: 3px;
51 | border-bottom: 1px solid mat-color($accent);
52 |
53 | &.border-top {
54 | border-top: 1px solid mat-color($accent);
55 | }
56 |
57 | .title {
58 | margin-bottom: 7px;
59 | font-weight: 600;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/frontend/src/app/features/features.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { CountdownComponent } from 'app/features/countdown/countdown.component';
4 | import { FeaturesRoutingModule } from 'app/features/features-routing.module';
5 | import { FeaturesComponent } from 'app/features/features.component';
6 | import { IdentificationDialogComponent } from 'app/features/identification-dialog/identification-dialog.component';
7 | import { OrderSummaryDialogComponent } from 'app/features/order-summary-dialog/order-summary-dialog.component';
8 | import { OrdersModule } from 'app/features/orders/orders.module';
9 | import { PizzasModule } from 'app/features/pizzas/pizzas.module';
10 | import { SharedModule } from 'app/shared/shared.module';
11 | import { FilterIngredientsComponent } from './filter-ingredients/filter-ingredients.component';
12 | import { FooterComponent } from './footer/footer.component';
13 | import { PizzasSearchComponent } from './pizzas-search/pizzas-search.component';
14 |
15 | @NgModule({
16 | imports: [SharedModule, FeaturesRoutingModule, PizzasModule, OrdersModule],
17 | declarations: [
18 | FeaturesComponent,
19 | IdentificationDialogComponent,
20 | CountdownComponent,
21 | OrderSummaryDialogComponent,
22 | PizzasSearchComponent,
23 | FilterIngredientsComponent,
24 | FooterComponent,
25 | ],
26 | entryComponents: [IdentificationDialogComponent, OrderSummaryDialogComponent],
27 | })
28 | export class FeaturesModule {}
29 |
--------------------------------------------------------------------------------
/frontend/src/app/features/filter-ingredients/filter-ingredients.component.html:
--------------------------------------------------------------------------------
1 |
8 |
9 |
50 |
64 |
65 |
51 |
54 |
59 | {{ ingredient.name }}
60 |
61 |
62 |
63 | Selected ingredient{{ ingredientsSelected.length > 1 ? 's': '' }}:
52 |
53 |
2 |
3 |
10 | {{ ingredient.name }}
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/frontend/src/app/features/filter-ingredients/filter-ingredients.component.scss:
--------------------------------------------------------------------------------
1 | .filter-ingredients {
2 | margin: 16px;
3 | }
4 |
5 | // since beta 12, chips have margin...
6 | .mat-chip {
7 | margin: 0 !important;
8 | margin-right: 3px !important;
9 | margin-bottom: 7px !important;
10 | }
11 |
--------------------------------------------------------------------------------
/frontend/src/app/features/filter-ingredients/filter-ingredients.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ChangeDetectionStrategy,
3 | Component,
4 | EventEmitter,
5 | Input,
6 | Output,
7 | } from '@angular/core';
8 |
9 | import { IIngredientCommon } from 'app/shared/states/ingredients/ingredients.interface';
10 |
11 | @Component({
12 | selector: 'app-filter-ingredients',
13 | templateUrl: './filter-ingredients.component.html',
14 | styleUrls: ['./filter-ingredients.component.scss'],
15 | changeDetection: ChangeDetectionStrategy.OnPush,
16 | })
17 | export class FilterIngredientsComponent {
18 | @Input() ingredients: IIngredientCommon[];
19 |
20 | @Output() onIngredientSelected = new EventEmitter
3 |
17 |
4 | {{ pizzeria.name }}
5 |
6 | |
7 |
8 | phone {{ pizzeria.phone }}
9 |
10 | |
11 |
12 |
13 | public
14 |
15 |
16 |
3 | Easy order view
4 |
5 |
6 | :
7 | 1 pizza only
8 | {{ nbOfPizzas }} pizzas
9 |
10 |
11 |
12 |
13 | {{ pizza.pizzaName }}
15 |{{ howManyPerSize(pizza) }}
16 |{{ (fullOrder$ | async).totalPrice | number:'1.2-2' }}€
2 | 3 |
5 |
7 | 6 | {{ user.username }} - {{ user.totalPrice | number:'1.2-2' }}€ 7 |
8 | 9 |10 | {{ pizza.name }} ({{ pizza.size }}) 11 | X 12 |
13 |
2 |
46 |
--------------------------------------------------------------------------------
/frontend/src/app/features/pizzas/pizzas.component.scss:
--------------------------------------------------------------------------------
1 | .pizzas {
2 | margin: 16px;
3 | }
4 |
5 | button[mat-mini-fab] {
6 | font-size: 12px;
7 | margin-right: 5px;
8 | margin-bottom: 10px;
9 | }
10 |
11 | mat-card {
12 | margin-bottom: 15px;
13 |
14 | mat-card-content {
15 | .pizza-img {
16 | cursor: pointer;
17 | }
18 | }
19 |
20 | mat-card-actions {
21 | padding-left: 16px;
22 | }
23 | }
24 |
25 | .pizza-not-found-404 {
26 | font-size: 25px;
27 | color: grey;
28 | text-align: center;
29 | }
30 |
--------------------------------------------------------------------------------
/frontend/src/app/features/pizzas/pizzas.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Inject, Input, OnInit } from '@angular/core';
2 | import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material';
3 | import { Store } from '@ngrx/store';
4 | import { Observable } from 'rxjs';
5 |
6 | import { IStore } from 'app/shared/interfaces/store.interface';
7 | import * as OrdersActions from 'app/shared/states/orders/orders.actions';
8 | import { IPizzaCategoryWithPizzas } from 'app/shared/states/pizzas-categories/pizzas-categories.interface';
9 | import * as PizzasActions from 'app/shared/states/pizzas/pizzas.actions';
10 | import {
11 | IPizzaCommon,
12 | IPizzaWithIngredients,
13 | } from 'app/shared/states/pizzas/pizzas.interface';
14 | import { tap } from 'rxjs/operators';
15 | import {
16 | getCategoriesAndPizzas,
17 | getPizzaSearch,
18 | } from '../../shared/states/ui/ui.selector';
19 |
20 | @Component({
21 | selector: 'app-pizza-details-dialog',
22 | template: `
23 |
28 | `,
29 | styles: [`div { background-size: cover; }`],
30 | })
31 | export class PizzaDetailsDialogComponent {
32 | constructor(
33 | public dialogRef: MatDialogRef
3 |
37 |
44 |
45 |
4 |
35 |
36 |
5 |
34 | {{ pizzaCategorie.name }}
6 | 7 |
8 |
9 |
10 |
11 |
19 | {{ pizza.name }}
20 |
21 | ![]()
24 |
25 |
26 |
30 |
31 |
32 |
33 | {{ pizza.ingredients | join:'name' }}
22 | 23 |
38 |
39 |
43 | 4
Pizza "{{ search }}" not found
41 | 42 |