Skip to content

Commit 7636082

Browse files
AndrewJBatemanAndrewJBateman
committed
chore: linting, self-closing modules
1 parent 687a43c commit 7636082

File tree

6 files changed

+213
-210
lines changed

6 files changed

+213
-210
lines changed

‎src/app/app.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Component } from '@angular/core';
1+
import { Component } from "@angular/core";
22

3-
import { Platform } from '@ionic/angular';
4-
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
5-
import { StatusBar } from '@ionic-native/status-bar/ngx';
3+
import { Platform } from "@ionic/angular";
4+
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
5+
import { StatusBar } from "@ionic-native/status-bar/ngx";
66

77
@Component({
8-
selector: 'app-root',
8+
selector: "app-root",
99
template: `<ion-app>
10-
<ion-router-outlet></ion-router-outlet>
11-
</ion-app>`
10+
<ion-router-outlet />
11+
</ion-app>`,
1212
})
1313
export class AppComponent {
1414
constructor(

‎src/app/home/home.page.html‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,38 @@
11
<ion-header>
2-
<ion-toolbar color="primary">
3-
<ion-title>
4-
Ionic Shopping
5-
</ion-title>
6-
</ion-toolbar>
2+
<ion-toolbar color="primary">
3+
<ion-title> Ionic Shopping </ion-title>
4+
</ion-toolbar>
75
</ion-header>
86

97
<ion-content>
10-
<!--fab button at top right that opens shopping cart-->
11-
<ion-fab vertical="top" horizontal="end" slot="fixed">
12-
<ion-fab-button (click)="openCart()" #cart>
13-
<div class="cart-length">{{ cartItemCount | async }}</div>
14-
<ion-icon name="cart" class="cart-icon"></ion-icon>
15-
</ion-fab-button>
16-
</ion-fab>
8+
<!--fab button at top right that opens shopping cart-->
9+
<ion-fab vertical="top" horizontal="end" slot="fixed">
10+
<ion-fab-button (click)="openCart()" #cart>
11+
<div class="cart-length">{{ cartItemCount | async }}</div>
12+
<ion-icon name="cart" class="cart-icon"></ion-icon>
13+
</ion-fab-button>
14+
</ion-fab>
1715

18-
<!--list of products in 2 columns: product name and price, add icon-->
19-
<ion-list>
20-
<ion-card *ngFor="let p of products">
21-
<ion-card-header>
22-
<ion-card-title>{{ p.name }}</ion-card-title>
23-
</ion-card-header>
24-
<ion-card-content>
25-
<ion-row class="ion-align-items-center">
26-
<ion-col size="8">
27-
<ion-label color="secondary">
28-
<b>{{ p.price | currency:'EUR' }}</b>
29-
</ion-label>
30-
</ion-col>
31-
<ion-col size="4" class="ion-text-right">
32-
<ion-button fill="clear" (click)="addToCart(p)">
33-
<ion-icon name="add"></ion-icon>
34-
</ion-button>
35-
</ion-col>
36-
</ion-row>
37-
</ion-card-content>
38-
</ion-card>
39-
</ion-list>
16+
<!--list of products in 2 columns: product name and price, add icon-->
17+
<ion-list>
18+
<ion-card *ngFor="let p of products">
19+
<ion-card-header>
20+
<ion-card-title>{{ p.name }}</ion-card-title>
21+
</ion-card-header>
22+
<ion-card-content>
23+
<ion-row class="ion-align-items-center">
24+
<ion-col size="8">
25+
<ion-label color="secondary">
26+
<b>{{ p.price | currency:'EUR' }}</b>
27+
</ion-label>
28+
</ion-col>
29+
<ion-col size="4" class="ion-text-right">
30+
<ion-button fill="clear" (click)="addToCart(p)">
31+
<ion-icon name="add"></ion-icon>
32+
</ion-button>
33+
</ion-col>
34+
</ion-row>
35+
</ion-card-content>
36+
</ion-card>
37+
</ion-list>
4038
</ion-content>

‎src/app/home/home.page.ts‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,63 @@
1-
import { CartService, Product } from './../services/cart.service';
2-
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
3-
import { ModalController } from '@ionic/angular';
4-
import { BehaviorSubject } from 'rxjs';
5-
import { CartModalPage } from '../pages/cart-modal/cart-modal.page';
1+
import { CartService, Product } from "./../services/cart.service";
2+
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
3+
import { ModalController } from "@ionic/angular";
4+
import { BehaviorSubject } from "rxjs";
5+
import { CartModalPage } from "../pages/cart-modal/cart-modal.page";
66

77
@Component({
8-
selector: 'app-home',
9-
templateUrl: 'home.page.html',
10-
styleUrls: ['home.page.scss'],
8+
selector: "app-home",
9+
templateUrl: "home.page.html",
10+
styleUrls: ["home.page.scss"],
1111
})
1212
export class HomePage implements OnInit {
13-
cart = [];
14-
products = [];
15-
cartItemCount: BehaviorSubject<number>;
16-
17-
@ViewChild('cart', {static: false, read: ElementRef})fab: ElementRef;
18-
19-
constructor(private cartService: CartService, private modalCtrl: ModalController) {}
20-
21-
ngOnInit() {
22-
this.products = this.cartService.getProducts();
23-
this.cart = this.cartService.getCart();
24-
this.cartItemCount = this.cartService.getCartItemCount();
25-
}
26-
27-
addToCart(product: Product) {
28-
console.log(`add ${product.name} to cart`)
29-
this.animateCSS('jello');
30-
this.cartService.addProduct(product);
31-
}
32-
33-
async openCart() {
34-
this.animateCSS('bounceOutLeft', true);
35-
36-
const modal = await this.modalCtrl.create({
37-
component: CartModalPage,
38-
cssClass: 'cart-modal'
39-
});
40-
modal.onWillDismiss().then(() => {
41-
this.fab.nativeElement.classList.remove('animated', 'bounceOutLeft');
42-
this.animateCSS('bounceInLeft');
43-
});
44-
modal.present();
45-
}
46-
47-
// copied from animate.css github page: https://github.com/daneden/animate.css
48-
animateCSS(animationName, keepAnimated = false) {
49-
const node = this.fab.nativeElement;
50-
node.classList.add('animated', animationName);
51-
52-
53-
function handleAnimationEnd() {
54-
if (!keepAnimated) {
55-
node.classList.remove('animated', animationName);
56-
}
57-
node.removeEventListener('animationend', handleAnimationEnd);
58-
}
59-
node.addEventListener('animationend', handleAnimationEnd);
60-
}
61-
13+
cart = [];
14+
products = [];
15+
cartItemCount: BehaviorSubject<number>;
16+
17+
@ViewChild("cart", { static: false, read: ElementRef }) fab: ElementRef;
18+
19+
constructor(
20+
private cartService: CartService,
21+
private modalCtrl: ModalController
22+
) {}
23+
24+
ngOnInit() {
25+
this.products = this.cartService.getProducts();
26+
this.cart = this.cartService.getCart();
27+
this.cartItemCount = this.cartService.getCartItemCount();
28+
}
29+
30+
addToCart(product: Product) {
31+
console.log(`add ${product.name} to cart`);
32+
this.animateCSS("jello");
33+
this.cartService.addProduct(product);
34+
}
35+
36+
async openCart() {
37+
this.animateCSS("bounceOutLeft", true);
38+
39+
const modal = await this.modalCtrl.create({
40+
component: CartModalPage,
41+
cssClass: "cart-modal",
42+
});
43+
modal.onWillDismiss().then(() => {
44+
this.fab.nativeElement.classList.remove("animated", "bounceOutLeft");
45+
this.animateCSS("bounceInLeft");
46+
});
47+
modal.present();
48+
}
49+
50+
// copied from animate.css github page: https://github.com/daneden/animate.css
51+
animateCSS(animationName: string, keepAnimated = false) {
52+
const node = this.fab.nativeElement;
53+
node.classList.add("animated", animationName);
54+
55+
function handleAnimationEnd() {
56+
if (!keepAnimated) {
57+
node.classList.remove("animated", animationName);
58+
}
59+
node.removeEventListener("animationend", handleAnimationEnd);
60+
}
61+
node.addEventListener("animationend", handleAnimationEnd);
62+
}
6263
}

‎src/app/pages/cart-modal/cart-modal.page.html‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,77 @@
11
<ion-content fullscreen>
2-
<!--button to close modal-->
3-
<div class="ion-text-end">
4-
<ion-button (click)="close()" fill="clear" color="dark">
5-
<ion-icon name="close" slot="start"></ion-icon>
6-
</ion-button>
7-
</div>
2+
<!--button to close modal-->
3+
<div class="ion-text-end">
4+
<ion-button (click)="close()" fill="clear" color="dark">
5+
<ion-icon name="close" slot="start"></ion-icon>
6+
</ion-button>
7+
</div>
88

9-
<div class="ion-padding">
10-
<ion-list>
11-
<ion-item *ngFor="let product of cart" class="ion-text-wrap">
12-
<ion-grid>
13-
<!--row with 4 columns: - amount + close -->
14-
<ion-row class="ion-align-items-center">
15-
<ion-col size="2" class="ion-align-self-center">
16-
<ion-button
17-
color="medium"
18-
fill="clear"
19-
(click)="decreaseCartItem(product)"
20-
>
21-
<ion-icon name="remove-circle" slot="icon-only"></ion-icon>
22-
</ion-button>
23-
</ion-col>
9+
<div class="ion-padding">
10+
<ion-list>
11+
<ion-item *ngFor="let product of cart; trackBy: trackByFn" class="ion-text-wrap">
12+
<ion-grid>
13+
<!--row with 4 columns: - amount + close -->
14+
<ion-row class="ion-align-items-center">
15+
<ion-col size="2" class="ion-align-self-center">
16+
<ion-button
17+
color="medium"
18+
fill="clear"
19+
(click)="decreaseCartItem(product)"
20+
>
21+
<ion-icon name="remove-circle" slot="icon-only"></ion-icon>
22+
</ion-button>
23+
</ion-col>
2424

25-
<ion-col size="1" class="ion-align-self-center">
26-
{{ product.amount }}
27-
</ion-col>
25+
<ion-col size="1" class="ion-align-self-center">
26+
{{ product.amount }}
27+
</ion-col>
2828

29-
<ion-col size="2" class="ion-align-self-center">
30-
<ion-button
31-
color="medium"
32-
fill="clear"
33-
(click)="increaseCartItem(product)"
34-
>
35-
<ion-icon name="add-circle" slot="icon-only"></ion-icon>
36-
</ion-button>
37-
</ion-col>
29+
<ion-col size="2" class="ion-align-self-center">
30+
<ion-button
31+
color="medium"
32+
fill="clear"
33+
(click)="increaseCartItem(product)"
34+
>
35+
<ion-icon name="add-circle" slot="icon-only"></ion-icon>
36+
</ion-button>
37+
</ion-col>
3838

39-
<ion-col size="2" offset="5">
40-
<ion-button
41-
color="medium"
42-
fill="clear"
43-
(click)="removeCartItem(product)"
44-
>
45-
<ion-icon name="close-circle" slot="icon-only"></ion-icon>
46-
</ion-button>
47-
</ion-col>
48-
</ion-row>
39+
<ion-col size="2" offset="5">
40+
<ion-button
41+
color="medium"
42+
fill="clear"
43+
(click)="removeCartItem(product)"
44+
>
45+
<ion-icon name="close-circle" slot="icon-only"></ion-icon>
46+
</ion-button>
47+
</ion-col>
48+
</ion-row>
4949

50-
<!--row with 2 columns - product name and amount-->
51-
<ion-row>
52-
<ion-col size="9">
53-
<b>{{ product.name }}</b>
54-
</ion-col>
55-
<ion-col size="3" class="ion-text-end">
56-
{{ product.amount * product.price | currency:'USD' }}
57-
</ion-col>
58-
</ion-row>
59-
</ion-grid>
60-
</ion-item>
61-
<ion-item>
62-
<ion-grid>
63-
<!--row with 2 columns: 'Total' total calculated by getTotal function with currency pipe-->
64-
<ion-row>
65-
<ion-col size="9"> Total: </ion-col>
66-
<ion-col size="3" class="ion-text-end">
67-
{{ getTotal() | currency:'USD' }}
68-
</ion-col>
69-
</ion-row>
70-
</ion-grid>
71-
</ion-item>
72-
</ion-list>
50+
<!--row with 2 columns - product name and amount-->
51+
<ion-row>
52+
<ion-col size="9">
53+
<b>{{ product.name }}</b>
54+
</ion-col>
55+
<ion-col size="3" class="ion-text-end">
56+
{{ product.amount * product.price | currency:'USD' }}
57+
</ion-col>
58+
</ion-row>
59+
</ion-grid>
60+
</ion-item>
61+
<ion-item>
62+
<ion-grid>
63+
<!--row with 2 columns: 'Total' total calculated by getTotal function with currency pipe-->
64+
<ion-row>
65+
<ion-col size="9"> Total: </ion-col>
66+
<ion-col size="3" class="ion-text-end">
67+
{{ getTotal() | currency:'USD' }}
68+
</ion-col>
69+
</ion-row>
70+
</ion-grid>
71+
</ion-item>
72+
</ion-list>
7373

74-
<!--button to go to checkout (non-working - code not added)-->
75-
<ion-button expand="full" (click)="checkout()"> Checkout </ion-button>
76-
</div>
74+
<!--button to go to checkout (non-working - code not added)-->
75+
<ion-button expand="full" (click)="checkout()"> Checkout </ion-button>
76+
</div>
7777
</ion-content>

0 commit comments

Comments
 (0)