;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ EcommerceComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(EcommerceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/ecommerce/ecommerce.component.ts b/frontend/src/app/ecommerce/ecommerce.component.ts
new file mode 100644
index 0000000..901fdef
--- /dev/null
+++ b/frontend/src/app/ecommerce/ecommerce.component.ts
@@ -0,0 +1,44 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {ProductsComponent} from "./products/products.component";
+import {ShoppingCartComponent} from "./shopping-cart/shopping-cart.component";
+import {OrdersComponent} from "./orders/orders.component";
+
+@Component({
+ selector: 'app-ecommerce',
+ templateUrl: './ecommerce.component.html',
+ styleUrls: ['./ecommerce.component.css']
+})
+export class EcommerceComponent implements OnInit {
+ private collapsed = true;
+ orderFinished = false;
+
+ @ViewChild('productsC')
+ productsC: ProductsComponent;
+
+ @ViewChild('shoppingCartC')
+ shoppingCartC: ShoppingCartComponent;
+
+ @ViewChild('ordersC')
+ ordersC: OrdersComponent;
+
+ constructor() {
+ }
+
+ ngOnInit() {
+ }
+
+ toggleCollapsed(): void {
+ this.collapsed = !this.collapsed;
+ }
+
+ finishOrder(orderFinished: boolean) {
+ this.orderFinished = orderFinished;
+ }
+
+ reset() {
+ this.orderFinished = false;
+ this.productsC.reset();
+ this.shoppingCartC.reset();
+ this.ordersC.paid = false;
+ }
+}
diff --git a/frontend/src/app/ecommerce/models/product-order.model.ts b/frontend/src/app/ecommerce/models/product-order.model.ts
new file mode 100644
index 0000000..0e1d9b0
--- /dev/null
+++ b/frontend/src/app/ecommerce/models/product-order.model.ts
@@ -0,0 +1,11 @@
+import {Product} from "./product.model";
+
+export class ProductOrder {
+ product: Product;
+ quantity: number;
+
+ constructor(product: Product, quantity: number) {
+ this.product = product;
+ this.quantity = quantity;
+ }
+}
diff --git a/frontend/src/app/ecommerce/models/product-orders.model.ts b/frontend/src/app/ecommerce/models/product-orders.model.ts
new file mode 100644
index 0000000..d6b1f32
--- /dev/null
+++ b/frontend/src/app/ecommerce/models/product-orders.model.ts
@@ -0,0 +1,5 @@
+import {ProductOrder} from "./product-order.model";
+
+export class ProductOrders {
+ productOrders: ProductOrder[] = [];
+}
diff --git a/frontend/src/app/ecommerce/models/product.model.ts b/frontend/src/app/ecommerce/models/product.model.ts
new file mode 100644
index 0000000..258753f
--- /dev/null
+++ b/frontend/src/app/ecommerce/models/product.model.ts
@@ -0,0 +1,13 @@
+export class Product {
+ id: number;
+ name: string;
+ price: number;
+ pictureUrl: string;
+
+ constructor(id: number, name: string, price: number, pictureUrl: string) {
+ this.id = id;
+ this.name = name;
+ this.price = price;
+ this.pictureUrl = pictureUrl;
+ }
+}
diff --git a/frontend/src/app/ecommerce/orders/orders.component.css b/frontend/src/app/ecommerce/orders/orders.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/ecommerce/orders/orders.component.html b/frontend/src/app/ecommerce/orders/orders.component.html
new file mode 100644
index 0000000..5a507ca
--- /dev/null
+++ b/frontend/src/app/ecommerce/orders/orders.component.html
@@ -0,0 +1,13 @@
+Оформление заказа
+
+ -
+ {{ order.product.name }} - {{ order.product.price }}₽ x {{ order.quantity}} шт.
+
+
+Общая стоимость: {{ total }}₽
+
+
+
+
+ Отлично! Заказ успешно оформлен.
+
diff --git a/frontend/src/app/ecommerce/orders/orders.component.spec.ts b/frontend/src/app/ecommerce/orders/orders.component.spec.ts
new file mode 100644
index 0000000..b8efbb0
--- /dev/null
+++ b/frontend/src/app/ecommerce/orders/orders.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrdersComponent } from './orders.component';
+
+describe('OrdersComponent', () => {
+ let component: OrdersComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ OrdersComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OrdersComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/frontend/src/app/ecommerce/orders/orders.component.ts b/frontend/src/app/ecommerce/orders/orders.component.ts
new file mode 100644
index 0000000..c3348ed
--- /dev/null
+++ b/frontend/src/app/ecommerce/orders/orders.component.ts
@@ -0,0 +1,39 @@
+import {Component, OnInit} from '@angular/core';
+import {ProductOrders} from "../models/product-orders.model";
+import {Subscription} from "rxjs/internal/Subscription";
+import {EcommerceService} from "../services/EcommerceService";
+
+@Component({
+ selector: 'app-orders',
+ templateUrl: './orders.component.html',
+ styleUrls: ['./orders.component.css']
+})
+export class OrdersComponent implements OnInit {
+ orders: ProductOrders;
+ total: number;
+ paid: boolean;
+ sub: Subscription;
+
+ constructor(private ecommerceService: EcommerceService) {
+ this.orders = this.ecommerceService.ProductOrders;
+ }
+
+ ngOnInit() {
+ this.paid = false;
+ this.sub = this.ecommerceService.OrdersChanged.subscribe(() => {
+ this.orders = this.ecommerceService.ProductOrders;
+ });
+ this.loadTotal();
+ }
+
+ pay() {
+ this.paid = true;
+ this.ecommerceService.saveOrder(this.orders).subscribe();
+ }
+
+ loadTotal() {
+ this.sub = this.ecommerceService.TotalChanged.subscribe(() => {
+ this.total = this.ecommerceService.Total;
+ });
+ }
+}
diff --git a/frontend/src/app/ecommerce/products/products.component.css b/frontend/src/app/ecommerce/products/products.component.css
new file mode 100644
index 0000000..dce4e4c
--- /dev/null
+++ b/frontend/src/app/ecommerce/products/products.component.css
@@ -0,0 +1,4 @@
+.padding-0 {
+ padding-right: 0;
+ padding-left: 1;
+}
diff --git a/frontend/src/app/ecommerce/products/products.component.html b/frontend/src/app/ecommerce/products/products.component.html
new file mode 100644
index 0000000..4039702
--- /dev/null
+++ b/frontend/src/app/ecommerce/products/products.component.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
{{order.product.price}}₽
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Всего: {{total}}₽
+
+
Товары в корзине:
+
+
+ -
+ {{ order.product.name }} - {{ order.quantity}} шт.
+
+
+
+
+
+