2 |
8 |
--------------------------------------------------------------------------------
/src/material/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/petshop/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/material/src/app/components/card/card.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-card',
5 | templateUrl: './card.component.html',
6 | styleUrls: ['./card.component.css']
7 | })
8 | export class CardComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/material/src/app/components/sidenav/sidenav.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-sidenav',
5 | templateUrl: './sidenav.component.html',
6 | styleUrls: ['./sidenav.component.css']
7 | })
8 | export class SidenavComponent implements OnInit {
9 |
10 | constructor() {
11 | }
12 |
13 | ngOnInit() {
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/src/petshop/src/app/components/shared/loading/loading.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-loading',
5 | templateUrl: './loading.component.html',
6 | styleUrls: ['./loading.component.css']
7 | })
8 | export class LoadingComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/pets-page/pets-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-pets-page',
5 | templateUrl: './pets-page.component.html',
6 | styleUrls: ['./pets-page.component.css']
7 | })
8 | export class PetsPageComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/material/src/app/components/sidenav/sidenav.component.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: absolute;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | right: 0;
7 | }
8 |
9 | mat-sidenav {
10 | width: 280px;
11 | }
12 |
13 | .example-fill-remaining-space {
14 | /* This fills the remaining space, by using flexbox.
15 | Every toolbar row uses a flexbox row layout. */
16 | flex: 1 1 auto;
17 | }
18 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/master/frame-page/frame-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-frame-page',
5 | templateUrl: './frame-page.component.html',
6 | styleUrls: ['./frame-page.component.css']
7 | })
8 | export class FramePageComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/petshop/src/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/store/checkout-page/checkout-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-checkout-page',
5 | templateUrl: './checkout-page.component.html',
6 | styleUrls: ['./checkout-page.component.css']
7 | })
8 | export class CheckoutPageComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/material/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/src/petshop/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/src/material/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | #
5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
6 |
7 | > 0.5%
8 | last 2 versions
9 | Firefox ESR
10 | not dead
11 | not IE 9-11
--------------------------------------------------------------------------------
/src/petshop/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | #
5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
6 |
7 | > 0.5%
8 | last 2 versions
9 | Firefox ESR
10 | not dead
11 | not IE 9-11
--------------------------------------------------------------------------------
/src/material/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
3 |
7 |
4 |
6 |
2 |
16 |
--------------------------------------------------------------------------------
/src/material/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/petshop/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/petshop/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 | import { browser, logging } from 'protractor';
3 |
4 | describe('workspace-project App', () => {
5 | let page: AppPage;
6 |
7 | beforeEach(() => {
8 | page = new AppPage();
9 | });
10 |
11 | it('should display welcome message', () => {
12 | page.navigateTo();
13 | expect(page.getTitleText()).toEqual('Welcome to petshop!');
14 | });
15 |
16 | afterEach(async () => {
17 | // Assert that there are no errors emitted from the browser
18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 | expect(logs).not.toContain(jasmine.objectContaining({
20 | level: logging.Level.SEVERE,
21 | }));
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/material/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/src/petshop/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/src/material/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 | import { browser, logging } from 'protractor';
3 |
4 | describe('workspace-project App', () => {
5 | let page: AppPage;
6 |
7 | beforeEach(() => {
8 | page = new AppPage();
9 | });
10 |
11 | it('should display welcome message', () => {
12 | page.navigateTo();
13 | expect(page.getTitleText()).toEqual('Welcome to material!');
14 | });
15 |
16 | afterEach(async () => {
17 | // Assert that there are no errors emitted from the browser
18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 | expect(logs).not.toContain(jasmine.objectContaining({
20 | level: logging.Level.SEVERE,
21 | } as logging.Entry));
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/material/src/app/components/card/card.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CardComponent } from './card.component';
4 |
5 | describe('CardComponent', () => {
6 | let component: CardComponent;
7 | let fixture: ComponentFixture
3 | 
4 |
5 |
6 |
15 | {{ product.price/100 | currency: 'BRL' }}
7 |8 | {{ product.title }} 9 |
10 | 14 |{{tile.text}}
13 |Básico
2 |5 | 6 |
Selecionando Valor
7 | 8 |11 | 12 |
Orientação
13 | 14 |17 | 18 |
Inversão
19 | 20 |23 | 24 |
Thumb Label
25 | 26 |29 | 30 |
Formatando Thumb Label
31 | 32 |35 | 36 |
Thick Marks
37 | 38 |
2 | Simple card
3 |
4 |
5 | 6 | 7 |
8 |
9 | 
10 |
11 |
12 | Título
13 | Subtítulo
14 | 
15 |
16 |
17 |
18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra commodo aliquet. Maecenas vitae ipsum et
19 | ipsum gravida varius. Aenean dignissim tempor scelerisque. Aenean sollicitudin luctus lectus. Aliquam hendrerit
20 | vestibulum sapien.
21 |
22 |
23 |
24 |
25 |
26 |
27 | Rodapé
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/petshop/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage/petshop'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/src/material/README.md:
--------------------------------------------------------------------------------
1 | # Material
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.9.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/src/petshop/README.md:
--------------------------------------------------------------------------------
1 | # Petshop
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.0.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 |
--------------------------------------------------------------------------------
/src/material/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage/material'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/store/cart-page/cart-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Cart } from 'src/app/models/cart.model';
3 | import { CartUtil } from 'src/app/utils/cart.util';
4 | import { Router } from '@angular/router';
5 |
6 | @Component({
7 | selector: 'app-cart-page',
8 | templateUrl: './cart-page.component.html',
9 | styleUrls: ['./cart-page.component.css']
10 | })
11 | export class CartPageComponent implements OnInit {
12 | public cart: Cart = new Cart();
13 |
14 | constructor(
15 | private router: Router,
16 | ) { }
17 |
18 | ngOnInit() {
19 | this.loadCart();
20 | }
21 |
22 | public loadCart() {
23 | this.cart = CartUtil.get();
24 | }
25 |
26 | public total() {
27 | let total = 0;
28 | this.cart.items.forEach((item) => {
29 | total += (item.price * item.quantity);
30 | });
31 | return total;
32 | }
33 |
34 | public remove(item) {
35 | let index = this.cart.items.indexOf(item);
36 | this.cart.items.splice(index, 1);
37 | CartUtil.update(this.cart);
38 | }
39 |
40 | public clear() {
41 | CartUtil.clear();
42 | this.loadCart();
43 | }
44 |
45 | }
46 |
--------------------------------------------------------------------------------
/src/material/src/app/components/auto-complete/auto-complete.component.html:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/src/material/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async(() => {
7 | TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | }));
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.debugElement.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'material'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.debugElement.componentInstance;
26 | expect(app.title).toEqual('material');
27 | });
28 |
29 | it('should render title in a h1 tag', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.debugElement.nativeElement;
33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to material!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/profile-page/profile-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
26 |
--------------------------------------------------------------------------------
/src/petshop/src/app/utils/cart.util.ts:
--------------------------------------------------------------------------------
1 | import { CartItem } from '../models/cart-item';
2 | import { Cart } from '../models/cart.model';
3 |
4 | export class CartUtil {
5 | public static get(): Cart {
6 | // Recupera os dados do LocalStorage
7 | const data = localStorage.getItem('petshopcart');
8 |
9 | // Caso não haja dados, retorna um novo carrinho
10 | if (!data)
11 | return new Cart();
12 |
13 | // Caso haja dados, retorna o carrinho
14 | return JSON.parse(data);
15 | }
16 |
17 | public static add(id: string, product: string, quantity: number, price: number, image: string) {
18 | // Obtém o carrinho
19 | let cart = this.get();
20 |
21 | // Gera o novo item
22 | const item = new CartItem(id, product, quantity, price, image);
23 |
24 | // Adiciona ao carrinho
25 | cart.items.push(item);
26 |
27 | // Salva no localStorage
28 | localStorage.setItem('petshopcart', JSON.stringify(cart));
29 | }
30 |
31 | public static update(cart: Cart) {
32 | // Salva no localStorage
33 | localStorage.setItem('petshopcart', JSON.stringify(cart));
34 | }
35 |
36 | public static clear() {
37 | localStorage.removeItem('petshopcart');
38 | }
39 | }
--------------------------------------------------------------------------------
/src/material/src/app/components/check-input-radio-slide/check-input-radio-slide.component.html:
--------------------------------------------------------------------------------
1 |
34 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/reset-password-page/reset-password-page.component.html:
--------------------------------------------------------------------------------
1 |
3 |
25 |
2 |
27 |
28 |
--------------------------------------------------------------------------------
/src/material/src/app/components/auto-complete/auto-complete.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormGroup, FormBuilder } from '@angular/forms';
3 | import { Observable } from 'rxjs';
4 | import { map, startWith } from 'rxjs/operators';
5 |
6 | @Component({
7 | selector: 'app-auto-complete',
8 | templateUrl: './auto-complete.component.html',
9 | styleUrls: ['./auto-complete.component.css']
10 | })
11 | export class AutoCompleteComponent implements OnInit {
12 | form: FormGroup;
13 | cities: string[] = [];
14 | filteredCities: Observable
2 |
36 |
--------------------------------------------------------------------------------
/src/petshop/src/app/utils/security.util.ts:
--------------------------------------------------------------------------------
1 | import { User } from "../models/user.model";
2 |
3 | export class Security {
4 | public static set(user: User, token: string) {
5 | const data = JSON.stringify(user);
6 |
7 | localStorage.setItem('petshopuser', btoa(data));
8 | localStorage.setItem('petshoptoken', token);
9 | }
10 |
11 | public static setUser(user: User) {
12 | const data = JSON.stringify(user);
13 | localStorage.setItem('petshopuser', btoa(data));
14 | }
15 |
16 | public static setToken(token: string) {
17 | localStorage.setItem('petshoptoken', token);
18 | }
19 |
20 | public static getUser(): User {
21 | const data = localStorage.getItem('petshopuser');
22 | if (data) {
23 | return JSON.parse(atob(data));
24 | } else {
25 | return null;
26 | }
27 | }
28 |
29 | public static getToken(): string {
30 | const data = localStorage.getItem('petshoptoken');
31 | if (data) {
32 | return data;
33 | } else {
34 | return null;
35 | }
36 | }
37 |
38 | public static hasToken(): boolean {
39 | if (this.getToken())
40 | return true;
41 | else
42 | return false;
43 | }
44 |
45 | public static clear() {
46 | localStorage.removeItem('petshopuser');
47 | localStorage.removeItem('petshoptoken');
48 | }
49 | }
--------------------------------------------------------------------------------
/src/petshop/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "petshop",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "^7.2.14",
15 | "@angular/common": "~7.2.0",
16 | "@angular/compiler": "~7.2.0",
17 | "@angular/core": "~7.2.0",
18 | "@angular/forms": "~7.2.0",
19 | "@angular/platform-browser": "~7.2.0",
20 | "@angular/platform-browser-dynamic": "~7.2.0",
21 | "@angular/router": "~7.2.0",
22 | "core-js": "^2.5.4",
23 | "ngx-toastr": "^10.0.2",
24 | "rxjs": "~6.3.3",
25 | "tslib": "^1.9.0",
26 | "zone.js": "~0.8.26"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "~0.13.0",
30 | "@angular/cli": "~7.3.0",
31 | "@angular/compiler-cli": "~7.2.0",
32 | "@angular/language-service": "~7.2.0",
33 | "@types/node": "~8.9.4",
34 | "@types/jasmine": "~2.8.8",
35 | "@types/jasminewd2": "~2.0.3",
36 | "codelyzer": "~4.5.0",
37 | "jasmine-core": "~2.99.1",
38 | "jasmine-spec-reporter": "~4.2.1",
39 | "karma": "~3.1.1",
40 | "karma-chrome-launcher": "~2.2.0",
41 | "karma-coverage-istanbul-reporter": "~2.0.1",
42 | "karma-jasmine": "~1.1.2",
43 | "karma-jasmine-html-reporter": "^0.2.2",
44 | "protractor": "~5.4.0",
45 | "ts-node": "~7.0.0",
46 | "tslint": "~5.11.0",
47 | "typescript": "~3.2.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/petshop/src/app/services/data.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
3 | import { Product } from '../models/product.model';
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class DataService {
9 |
10 | public url = 'http://localhost:3000/v1';
11 |
12 | constructor(private http: HttpClient) { }
13 |
14 | public composeHeaders() {
15 | const token = localStorage.getItem('petshop.token');
16 | const headers = new HttpHeaders().set('Authorization', `bearer ${token}`);
17 | return headers;
18 | }
19 |
20 | getProducts() {
21 | return this.http.get
3 |
34 |
35 |
2 |
36 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/reset-password-page/reset-password-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { DataService } from 'src/app/services/data.service';
5 | import { CustomValidator } from 'src/app/validators/custom.validator';
6 | import { ToastrService } from 'ngx-toastr';
7 |
8 | @Component({
9 | selector: 'app-reset-password-page',
10 | templateUrl: './reset-password-page.component.html',
11 | styleUrls: ['./reset-password-page.component.css']
12 | })
13 | export class ResetPasswordPageComponent implements OnInit {
14 | public form: FormGroup;
15 | public busy = false;
16 |
17 | constructor(
18 | private router: Router,
19 | private service: DataService,
20 | private fb: FormBuilder,
21 | private toastr: ToastrService
22 | ) {
23 | this.form = this.fb.group({
24 | document: ['', Validators.compose([
25 | Validators.minLength(14),
26 | Validators.maxLength(14),
27 | Validators.required,
28 | CustomValidator.isCpf()
29 | ])]
30 | });
31 | }
32 |
33 | ngOnInit() {
34 | }
35 |
36 | submit() {
37 | this.busy = true;
38 | this
39 | .service
40 | .resetPassword(this.form.value)
41 | .subscribe(
42 | (data: any) => {
43 | this.busy = false;
44 | this.toastr.success(data.message, 'Senha Restaurada');
45 | this.router.navigate(['/login']);
46 | },
47 | (err) => {
48 | console.log(err);
49 | this.busy = false;
50 | }
51 | );
52 | }
53 |
54 | }
55 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/store/cart-page/cart-page.component.html:
--------------------------------------------------------------------------------
1 |
3 |
35 | 4 | 5 |
6 | 7 |
29 | Quero me
30 | Cadastrar
31 |
32 | Esqueci minha senha
33 |
2 |
19 |
20 |
45 |
46 | 20 |
21 |
26 |
34 |
35 |
36 |
27 |
28 | {{ item.price/100 | currency: 'BRL' }} 29 | 30 | 31 | 32 |
33 | 28 | {{ item.price/100 | currency: 'BRL' }} 29 | 30 | 31 | 32 |
37 |
44 | 38 | {{ total()/100 | currency: 'BRL' }} 39 |
40 | 41 | FINALIZAR COMPRA 42 | 43 |
47 |
48 |
49 |
50 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/src/petshop/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { LoginPageComponent } from './pages/account/login-page/login-page.component';
4 | import { SignupPageComponent } from './pages/account/signup-page/signup-page.component';
5 | import { ResetPasswordPageComponent } from './pages/account/reset-password-page/reset-password-page.component';
6 | import { FramePageComponent } from './pages/master/frame-page/frame-page.component';
7 | import { ProductsPageComponent } from './pages/store/products-page/products-page.component';
8 | import { CartPageComponent } from './pages/store/cart-page/cart-page.component';
9 | import { CheckoutPageComponent } from './pages/store/checkout-page/checkout-page.component';
10 | import { PetsPageComponent } from './pages/account/pets-page/pets-page.component';
11 | import { AuthService } from './services/auth.service';
12 | import { ProfilePageComponent } from './pages/account/profile-page/profile-page.component';
13 |
14 | const routes: Routes = [
15 | {
16 | path: '',
17 | component: FramePageComponent,
18 | canActivate: [AuthService],
19 | children: [
20 | { path: '', component: ProductsPageComponent },
21 | { path: 'cart', component: CartPageComponent },
22 | { path: 'checkout', component: CheckoutPageComponent }
23 | ]
24 | },
25 | {
26 | path: 'account',
27 | component: FramePageComponent,
28 | children: [
29 | { path: '', component: ProfilePageComponent },
30 | { path: 'pets', component: PetsPageComponent },
31 | ]
32 | },
33 | { path: 'login', component: LoginPageComponent },
34 | { path: 'signup', component: SignupPageComponent },
35 | { path: 'reset-password', component: ResetPasswordPageComponent },
36 | ];
37 |
38 | @NgModule({
39 | imports: [RouterModule.forRoot(routes)],
40 | exports: [RouterModule]
41 | })
42 | export class AppRoutingModule { }
43 |
--------------------------------------------------------------------------------
/src/material/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "array-type": false,
8 | "arrow-parens": false,
9 | "deprecation": {
10 | "severity": "warn"
11 | },
12 | "import-blacklist": [
13 | true,
14 | "rxjs/Rx"
15 | ],
16 | "interface-name": false,
17 | "max-classes-per-file": false,
18 | "max-line-length": [
19 | true,
20 | 140
21 | ],
22 | "member-access": false,
23 | "member-ordering": [
24 | true,
25 | {
26 | "order": [
27 | "static-field",
28 | "instance-field",
29 | "static-method",
30 | "instance-method"
31 | ]
32 | }
33 | ],
34 | "no-consecutive-blank-lines": false,
35 | "no-console": [
36 | true,
37 | "debug",
38 | "info",
39 | "time",
40 | "timeEnd",
41 | "trace"
42 | ],
43 | "no-empty": false,
44 | "no-inferrable-types": [
45 | true,
46 | "ignore-params"
47 | ],
48 | "no-non-null-assertion": true,
49 | "no-redundant-jsdoc": true,
50 | "no-switch-case-fall-through": true,
51 | "no-use-before-declare": true,
52 | "no-var-requires": false,
53 | "object-literal-key-quotes": [
54 | true,
55 | "as-needed"
56 | ],
57 | "object-literal-sort-keys": false,
58 | "ordered-imports": false,
59 | "quotemark": [
60 | true,
61 | "single"
62 | ],
63 | "trailing-comma": false,
64 | "no-output-on-prefix": true,
65 | "use-input-property-decorator": true,
66 | "use-output-property-decorator": true,
67 | "use-host-property-decorator": true,
68 | "no-input-rename": true,
69 | "no-output-rename": true,
70 | "use-life-cycle-interface": true,
71 | "use-pipe-transform-interface": true,
72 | "component-class-suffix": true,
73 | "directive-class-suffix": true
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/petshop/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "array-type": false,
8 | "arrow-parens": false,
9 | "deprecation": {
10 | "severity": "warn"
11 | },
12 | "import-blacklist": [
13 | true,
14 | "rxjs/Rx"
15 | ],
16 | "interface-name": false,
17 | "max-classes-per-file": false,
18 | "max-line-length": [
19 | true,
20 | 140
21 | ],
22 | "member-access": false,
23 | "member-ordering": [
24 | true,
25 | {
26 | "order": [
27 | "static-field",
28 | "instance-field",
29 | "static-method",
30 | "instance-method"
31 | ]
32 | }
33 | ],
34 | "no-consecutive-blank-lines": false,
35 | "no-console": [
36 | true,
37 | "debug",
38 | "info",
39 | "time",
40 | "timeEnd",
41 | "trace"
42 | ],
43 | "no-empty": false,
44 | "no-inferrable-types": [
45 | true,
46 | "ignore-params"
47 | ],
48 | "no-non-null-assertion": true,
49 | "no-redundant-jsdoc": true,
50 | "no-switch-case-fall-through": true,
51 | "no-use-before-declare": true,
52 | "no-var-requires": false,
53 | "object-literal-key-quotes": [
54 | true,
55 | "as-needed"
56 | ],
57 | "object-literal-sort-keys": false,
58 | "ordered-imports": false,
59 | "quotemark": [
60 | true,
61 | "single"
62 | ],
63 | "trailing-comma": false,
64 | "no-output-on-prefix": true,
65 | "use-input-property-decorator": true,
66 | "use-output-property-decorator": true,
67 | "use-host-property-decorator": true,
68 | "no-input-rename": true,
69 | "no-output-rename": true,
70 | "use-life-cycle-interface": true,
71 | "use-pipe-transform-interface": true,
72 | "component-class-suffix": true,
73 | "directive-class-suffix": true
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/petshop/src/assets/js/components/countdown.min.js:
--------------------------------------------------------------------------------
1 | /*! UIkit 3.0.3 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
2 |
3 | !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitcountdown",["uikit-util"],n):(t=t||self).UIkitCountdown=n(t.UIkit.util)}(this,function(r){"use strict";var t={mixins:[{connected:function(){!r.hasClass(this.$el,this.$name)&&r.addClass(this.$el,this.$name)}}],props:{date:String,clsWrapper:String},data:{date:"",clsWrapper:".uk-countdown-%unit%"},computed:{date:function(t){var n=t.date;return Date.parse(n)},days:function(t,n){var e=t.clsWrapper;return r.$(e.replace("%unit%","days"),n)},hours:function(t,n){var e=t.clsWrapper;return r.$(e.replace("%unit%","hours"),n)},minutes:function(t,n){var e=t.clsWrapper;return r.$(e.replace("%unit%","minutes"),n)},seconds:function(t,n){var e=t.clsWrapper;return r.$(e.replace("%unit%","seconds"),n)},units:function(){var n=this;return["days","hours","minutes","seconds"].filter(function(t){return n[t]})}},connected:function(){this.start()},disconnected:function(){var n=this;this.stop(),this.units.forEach(function(t){return r.empty(n[t])})},events:[{name:"visibilitychange",el:document,handler:function(){document.hidden?this.stop():this.start()}}],update:{write:function(){var t,n,i=this,s=(t=this.date,{total:n=t-Date.now(),seconds:n/1e3%60,minutes:n/1e3/60%60,hours:n/1e3/60/60%24,days:n/1e3/60/60/24});s.total<=0&&(this.stop(),s.days=s.hours=s.minutes=s.seconds=0),this.units.forEach(function(t){var n=String(Math.floor(s[t]));n=n.length<2?"0"+n:n;var e=i[t];e.textContent!==n&&((n=n.split("")).length!==e.children.length&&r.html(e,n.map(function(){return""}).join("")),n.forEach(function(t,n){return e.children[n].textContent=t}))})}},methods:{start:function(){var t=this;this.stop(),this.date&&this.units.length&&(this.$emit(),this.timer=setInterval(function(){return t.$emit()},1e3))},stop:function(){this.timer&&(clearInterval(this.timer),this.timer=null)}}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("countdown",t),t});
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/signup-page/signup-page.component.html:
--------------------------------------------------------------------------------
1 | 48 |
49 |
50 |
Seu carrinho está vazio
51 |52 |
53 |
54 |
2 |
41 |
42 |
--------------------------------------------------------------------------------
/src/petshop/src/assets/js/components/notification.min.js:
--------------------------------------------------------------------------------
1 | /*! UIkit 3.0.3 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
2 |
3 | !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitnotification",["uikit-util"],i):(t=t||self).UIkitNotification=i(t.UIkit.util)}(this,function(n){"use strict";var t,o={},i={functional:!0,args:["message","status"],data:{message:"",status:"",timeout:5e3,group:null,pos:"top-center",clsClose:"uk-notification-close",clsMsg:"uk-notification-message"},install:function(e){e.notification.closeAll=function(s,o){n.apply(document.body,function(t){var i=e.getComponent(t,"notification");!i||s&&s!==i.group||i.close(o)})}},computed:{marginProp:function(t){var i=t.pos;return"margin"+(n.startsWith(i,"top")?"Top":"Bottom")},startProps:function(){var t;return(t={opacity:0})[this.marginProp]=-this.$el.offsetHeight,t}},created:function(){o[this.pos]||(o[this.pos]=n.append(this.$container,''));var t=n.css(o[this.pos],"display","block");this.$mount(n.append(t,'"))},connected:function(){var t,i=this,s=n.toFloat(n.css(this.$el,this.marginProp));n.Transition.start(n.css(this.$el,this.startProps),(t={opacity:1},t[this.marginProp]=s,t)).then(function(){i.timeout&&(i.timer=setTimeout(i.close,i.timeout))})},events:(t={click:function(t){n.closest(t.target,'a[href="#"],a[href=""]')&&t.preventDefault(),this.close()}},t[n.pointerEnter]=function(){this.timer&&clearTimeout(this.timer)},t[n.pointerLeave]=function(){this.timeout&&(this.timer=setTimeout(this.close,this.timeout))},t),methods:{close:function(t){var i=this,s=function(){n.trigger(i.$el,"close",[i]),n.remove(i.$el),o[i.pos].children.length||n.css(o[i.pos],"display","none")};this.timer&&clearTimeout(this.timer),t?s():n.Transition.start(this.$el,this.startProps).then(s)}}};return"undefined"!=typeof window&&window.UIkit&&window.UIkit.component("notification",i),i});
--------------------------------------------------------------------------------
/src/petshop/src/app/directives/mask.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef, HostListener, Input } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[mask]',
5 | })
6 | export class MaskDirective {
7 | @Input('mask') mask: string;
8 |
9 | constructor(private element: ElementRef) {
10 |
11 | }
12 |
13 | @HostListener('input', ['$event']) onInputChange(event) {
14 | if (event.inputType == 'deleteContentBackward')
15 | return;
16 |
17 | const initalValue = this.element.nativeElement.value;
18 | initalValue.replace(/[^0-9]*/g, '');
19 | if (initalValue !== this.element.nativeElement.value) {
20 | event.stopPropagation();
21 | }
22 |
23 | this.element.nativeElement.value = this.format(this.mask, initalValue);
24 | }
25 |
26 | format(mask: string, value: any): string {
27 | let text = '';
28 | let data = value;
29 | let c, m, i, x;
30 |
31 | for (i = 0, x = 1; x && i < mask.length; ++i) {
32 | c = data.charAt(i);
33 | m = mask.charAt(i);
34 |
35 | switch (mask.charAt(i)) {
36 | case '#':
37 | if (/\d/.test(c)) {
38 | text += c;
39 | } else {
40 | x = 0;
41 | }
42 | break;
43 |
44 | case 'A':
45 | if (/[a-z]/i.test(c)) {
46 | text += c;
47 | } else {
48 | x = 0;
49 |
50 | }
51 | break;
52 |
53 | case 'N':
54 | if (/[a-z0-9]/i.test(c)) {
55 | text += c;
56 | } else {
57 | x = 0;
58 | }
59 | break;
60 |
61 | case 'X':
62 | text += c;
63 | break;
64 |
65 | default:
66 | text += m;
67 | break;
68 | }
69 | }
70 | return text;
71 | }
72 | }
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/signup-page/signup-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { DataService } from 'src/app/services/data.service';
5 | import { CustomValidator } from 'src/app/validators/custom.validator';
6 | import { ToastrService } from 'ngx-toastr';
7 |
8 | @Component({
9 | selector: 'app-signup-page',
10 | templateUrl: './signup-page.component.html',
11 | styleUrls: ['./signup-page.component.css']
12 | })
13 | export class SignupPageComponent implements OnInit {
14 | public form: FormGroup;
15 | public busy = false;
16 |
17 | constructor(
18 | private router: Router,
19 | private service: DataService,
20 | private fb: FormBuilder,
21 | private toastr: ToastrService
22 | ) {
23 | this.form = this.fb.group({
24 | name: ['', Validators.compose([
25 | Validators.minLength(3),
26 | Validators.maxLength(80),
27 | Validators.required
28 | ])],
29 | document: ['', Validators.compose([
30 | Validators.minLength(14),
31 | Validators.maxLength(14),
32 | Validators.required,
33 | CustomValidator.isCpf()
34 | ])],
35 | email: ['', Validators.compose([
36 | Validators.minLength(5),
37 | Validators.maxLength(120),
38 | Validators.required,
39 | CustomValidator.EmailValidator
40 | ])],
41 | password: ['', Validators.compose([
42 | Validators.minLength(6),
43 | Validators.maxLength(20),
44 | Validators.required
45 | ])]
46 | });
47 | }
48 |
49 | ngOnInit() {
50 | }
51 |
52 | submit() {
53 | this.busy = true;
54 | this
55 | .service
56 | .create(this.form.value)
57 | .subscribe(
58 | (data: any) => {
59 | this.busy = false;
60 | this.toastr.success(data.message, 'Bem-vindo!');
61 | this.router.navigate(['/login']);
62 | },
63 | (err) => {
64 | console.log(err);
65 | this.busy = false;
66 | }
67 | );
68 | }
69 |
70 | }
71 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/pets-page/pets-page.component.html:
--------------------------------------------------------------------------------
1 |
2 |
15 |
16 |
17 |
56 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/login-page/login-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { DataService } from 'src/app/services/data.service';
3 | import { FormGroup, FormBuilder, Validators } from '@angular/forms';
4 | import { CustomValidator } from 'src/app/validators/custom.validator';
5 | import { Security } from 'src/app/utils/security.util';
6 | import { Router } from '@angular/router';
7 |
8 | @Component({
9 | selector: 'app-login-page',
10 | templateUrl: './login-page.component.html',
11 | styleUrls: ['./login-page.component.css']
12 | })
13 | export class LoginPageComponent implements OnInit {
14 | public form: FormGroup;
15 | public busy = false;
16 |
17 | constructor(
18 | private router: Router,
19 | private service: DataService,
20 | private fb: FormBuilder
21 | ) {
22 | this.form = this.fb.group({
23 | username: ['', Validators.compose([
24 | Validators.minLength(14),
25 | Validators.maxLength(14),
26 | Validators.required,
27 | CustomValidator.isCpf()
28 | ])],
29 | password: ['', Validators.compose([
30 | Validators.minLength(6),
31 | Validators.maxLength(20),
32 | Validators.required
33 | ])]
34 | });
35 | }
36 |
37 | ngOnInit() {
38 | const token = Security.getToken();
39 | if (token) {
40 | this.busy = true;
41 | this
42 | .service
43 | .refreshToken()
44 | .subscribe(
45 | (data: any) => {
46 | this.busy = false;
47 | this.setUser(data.customer, data.token);
48 | },
49 | (err) => {
50 | localStorage.clear();
51 | this.busy = false;
52 | }
53 | );
54 | }
55 | }
56 |
57 | submit() {
58 | this.busy = true;
59 | this
60 | .service
61 | .authenticate(this.form.value)
62 | .subscribe(
63 | (data: any) => {
64 | this.busy = false;
65 | this.setUser(data.customer, data.token);
66 | },
67 | (err) => {
68 | console.log(err);
69 | this.busy = false;
70 | }
71 | );
72 | }
73 |
74 | setUser(user, token) {
75 | Security.set(user, token);
76 | this.router.navigate(['/']);
77 | }
78 |
79 | }
80 |
--------------------------------------------------------------------------------
/src/petshop/src/app/pages/account/profile-page/profile-page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 | import { DataService } from 'src/app/services/data.service';
5 | import { ToastrService } from 'ngx-toastr';
6 | import { CustomValidator } from 'src/app/validators/custom.validator';
7 |
8 | @Component({
9 | selector: 'app-profile-page',
10 | templateUrl: './profile-page.component.html',
11 | styleUrls: ['./profile-page.component.css']
12 | })
13 | export class ProfilePageComponent implements OnInit {
14 | public form: FormGroup;
15 | public busy = false;
16 |
17 | constructor(
18 | private router: Router,
19 | private service: DataService,
20 | private fb: FormBuilder,
21 | private toastr: ToastrService
22 | ) {
23 | this.form = this.fb.group({
24 | name: ['', Validators.compose([
25 | Validators.minLength(3),
26 | Validators.maxLength(80),
27 | Validators.required
28 | ])],
29 | document: [{ value: '', disabled: true }],
30 | email: ['', Validators.compose([
31 | Validators.minLength(5),
32 | Validators.maxLength(120),
33 | Validators.required,
34 | CustomValidator.EmailValidator
35 | ])],
36 | });
37 | }
38 |
39 | ngOnInit() {
40 | this.busy = true;
41 | this
42 | .service
43 | .getProfile()
44 | .subscribe(
45 | (data: any) => {
46 | this.busy = false;
47 | this.form.controls['name'].setValue(data.name);
48 | this.form.controls['document'].setValue(data.document);
49 | this.form.controls['email'].setValue(data.email);
50 | },
51 | (err) => {
52 | console.log(err);
53 | this.busy = false;
54 | }
55 | );
56 | }
57 |
58 | submit() {
59 | this.busy = true;
60 | this
61 | .service
62 | .updateProfile(this.form.value)
63 | .subscribe(
64 | (data: any) => {
65 | this.busy = false;
66 | this.toastr.success(data.message, 'Atualização Completa!');
67 | },
68 | (err) => {
69 | console.log(err);
70 | this.busy = false;
71 | }
72 | );
73 | }
74 |
75 | }
76 |
--------------------------------------------------------------------------------
/assets/style.txt:
--------------------------------------------------------------------------------
1 | :root {
2 | --ion-color-primary: #ff8429;
3 | --ion-color-primary-rgb: 255,132,41;
4 | --ion-color-primary-contrast: #000000;
5 | --ion-color-primary-contrast-rgb: 0,0,0;
6 | --ion-color-primary-shade: #e07424;
7 | --ion-color-primary-tint: #ff903e;
8 |
9 | --ion-color-secondary: #ffc84d;
10 | --ion-color-secondary-rgb: 255,200,77;
11 | --ion-color-secondary-contrast: #000000;
12 | --ion-color-secondary-contrast-rgb: 0,0,0;
13 | --ion-color-secondary-shade: #e0b044;
14 | --ion-color-secondary-tint: #ffce5f;
15 |
16 | --ion-color-tertiary: #7044ff;
17 | --ion-color-tertiary-rgb: 112,68,255;
18 | --ion-color-tertiary-contrast: #ffffff;
19 | --ion-color-tertiary-contrast-rgb: 255,255,255;
20 | --ion-color-tertiary-shade: #633ce0;
21 | --ion-color-tertiary-tint: #7e57ff;
22 |
23 | --ion-color-success: #43ed7f;
24 | --ion-color-success-rgb: 67,237,127;
25 | --ion-color-success-contrast: #000000;
26 | --ion-color-success-contrast-rgb: 0,0,0;
27 | --ion-color-success-shade: #3bd170;
28 | --ion-color-success-tint: #56ef8c;
29 |
30 | --ion-color-warning: #f9d84b;
31 | --ion-color-warning-rgb: 249,216,75;
32 | --ion-color-warning-contrast: #000000;
33 | --ion-color-warning-contrast-rgb: 0,0,0;
34 | --ion-color-warning-shade: #dbbe42;
35 | --ion-color-warning-tint: #fadc5d;
36 |
37 | --ion-color-danger: #f04141;
38 | --ion-color-danger-rgb: 245,61,61;
39 | --ion-color-danger-contrast: #ffffff;
40 | --ion-color-danger-contrast-rgb: 255,255,255;
41 | --ion-color-danger-shade: #d33939;
42 | --ion-color-danger-tint: #f25454;
43 |
44 | --ion-color-dark: #c9bd97;
45 | --ion-color-dark-rgb: 201,189,151;
46 | --ion-color-dark-contrast: #000000;
47 | --ion-color-dark-contrast-rgb: 0,0,0;
48 | --ion-color-dark-shade: #b1a685;
49 | --ion-color-dark-tint: #cec4a1;
50 |
51 | --ion-color-medium: #e5dfca;
52 | --ion-color-medium-rgb: 229,223,202;
53 | --ion-color-medium-contrast: #000000;
54 | --ion-color-medium-contrast-rgb: 0,0,0;
55 | --ion-color-medium-shade: #cac4b2;
56 | --ion-color-medium-tint: #e8e2cf;
57 |
58 | --ion-color-light: #fcf9ed;
59 | --ion-color-light-rgb: 252,249,237;
60 | --ion-color-light-contrast: #000000;
61 | --ion-color-light-contrast-rgb: 0,0,0;
62 | --ion-color-light-shade: #dedbd1;
63 | --ion-color-light-tint: #fcfaef;
64 | }
--------------------------------------------------------------------------------
/src/petshop/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { ReactiveFormsModule } from '@angular/forms';
4 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
5 | import { ToastrModule } from 'ngx-toastr';
6 |
7 | import { AppRoutingModule } from './app-routing.module';
8 | import { AppComponent } from './app.component';
9 | import { FramePageComponent } from './pages/master/frame-page/frame-page.component';
10 | import { LoginPageComponent } from './pages/account/login-page/login-page.component';
11 | import { SignupPageComponent } from './pages/account/signup-page/signup-page.component';
12 | import { ResetPasswordPageComponent } from './pages/account/reset-password-page/reset-password-page.component';
13 | import { ProductsPageComponent } from './pages/store/products-page/products-page.component';
14 | import { CartPageComponent } from './pages/store/cart-page/cart-page.component';
15 | import { CheckoutPageComponent } from './pages/store/checkout-page/checkout-page.component';
16 | import { ProfilePageComponent } from './pages/account/profile-page/profile-page.component';
17 | import { PetsPageComponent } from './pages/account/pets-page/pets-page.component';
18 | import { DataService } from './services/data.service';
19 | import { HttpClientModule } from '@angular/common/http';
20 | import { ProductCardComponent } from './components/store/product-card/product-card.component';
21 | import { LoadingComponent } from './components/shared/loading/loading.component';
22 | import { MaskDirective } from './directives/mask.directive';
23 | import { NavbarComponent } from './components/shared/navbar/navbar.component';
24 | import { AuthService } from './services/auth.service';
25 |
26 | @NgModule({
27 | declarations: [
28 | MaskDirective,
29 | AppComponent,
30 | FramePageComponent,
31 | LoginPageComponent,
32 | SignupPageComponent,
33 | ResetPasswordPageComponent,
34 | ProductsPageComponent,
35 | CartPageComponent,
36 | CheckoutPageComponent,
37 | ProfilePageComponent,
38 | PetsPageComponent,
39 | ProductCardComponent,
40 | LoadingComponent,
41 | NavbarComponent
42 | ],
43 | imports: [
44 | BrowserModule,
45 | ReactiveFormsModule,
46 | HttpClientModule,
47 | BrowserAnimationsModule, // required animations module
48 | ToastrModule.forRoot(), //https://www.npmjs.com/package/ngx-toastr
49 | AppRoutingModule
50 | ],
51 | providers: [DataService, AuthService],
52 | bootstrap: [AppComponent]
53 | })
54 | export class AppModule { }
55 |
--------------------------------------------------------------------------------
/src/petshop/src/app/validators/custom.validator.ts:
--------------------------------------------------------------------------------
1 | import { AbstractControl, Validators, FormControl } from '@angular/forms';
2 |
3 | export class CustomValidator {
4 | constructor() { }
5 |
6 | static isCpf() {
7 | return (control: AbstractControl): Validators => {
8 | const cpf = control.value.replace(/[^0-9]*/g, '');
9 | if (cpf) {
10 | let numbers;
11 | let digits;
12 | let sum;
13 | let i;
14 | let result;
15 | let equalDigits;
16 | equalDigits = 1;
17 | if (cpf.length < 11) {
18 | return null;
19 | }
20 |
21 | for (i = 0; i < cpf.length - 1; i++) {
22 | if (cpf.charAt(i) !== cpf.charAt(i + 1)) {
23 | equalDigits = 0;
24 | break;
25 | }
26 | }
27 |
28 | if (!equalDigits) {
29 | numbers = cpf.substring(0, 9);
30 | digits = cpf.substring(9);
31 | sum = 0;
32 | for (i = 10; i > 1; i--) {
33 | sum += numbers.charAt(10 - i) * i;
34 | }
35 |
36 | result = sum % 11 < 2 ? 0 : 11 - (sum % 11);
37 |
38 | if (result !== Number(digits.charAt(0))) {
39 | return { cpfNotValid: true };
40 | }
41 | numbers = cpf.substring(0, 10);
42 | sum = 0;
43 |
44 | for (i = 11; i > 1; i--) {
45 | sum += numbers.charAt(11 - i) * i;
46 | }
47 | result = sum % 11 < 2 ? 0 : 11 - (sum % 11);
48 |
49 | if (result !== Number(digits.charAt(1))) {
50 | return { cpfNotValid: true };
51 | }
52 | return null;
53 | } else {
54 | return { cpfNotValid: true };
55 | }
56 | }
57 | return null;
58 | };
59 | }
60 |
61 | static EmailValidator(control: FormControl) {
62 | // tslint:disable-next-line:max-line-length
63 | const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
64 | if (!re.test(control.value)) {
65 | return { 'E-mail inválido': true };
66 | }
67 |
68 | return null;
69 | }
70 | }
--------------------------------------------------------------------------------
/src/material/src/app/components/expansion-panel/expansion-panel.component.html:
--------------------------------------------------------------------------------
1 |
18 |
55 |
19 |
36 |
20 |
35 |
21 |
22 |
24 | 22 |
25 |
34 | Media Top
26 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
27 |28 | 29 | 30 | Editar 31 | 32 |
33 |
37 |
54 |
38 |
53 |
39 |
40 |
42 | 40 |
43 |
52 | Media Top
44 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
45 |46 | 47 | 48 | Editar 49 | 50 |
51 |12 | Conteúdo do Painel 1 13 |
14 |26 | Conteúdo do Painel 2 27 |
28 |32 |
33 |
34 | 35 |
44 | Conteúdo do Painel 45 |
46 | 47 |60 | Conteúdo do Painel 61 |
62 | 63 |77 | Conteúdo do Painel 78 |
79 | 80 |
2 |
3 |
4 |
7 |
9 |
10 |
11 | Application Title
12 |
13 |
14 |
15 |
16 | Right Aligned Text
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Item X
25 | Item X
26 | Item X
27 | Item X
28 | Item X
29 | Item X
30 | Item X
31 | Item X
32 | Item X
33 |
34 |
40 |
41 |
42 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/src/material/src/app/components/date-picker/date-picker.component.html:
--------------------------------------------------------------------------------
1 | Sidenav
8 |35 | 38 |
39 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra commodo aliquet. Maecenas vitae ipsum et
43 | ipsum gravida varius. Aenean dignissim tempor scelerisque. Aenean sollicitudin luctus lectus. Aliquam hendrerit
44 | vestibulum sapien. Proin bibendum ornare eros ac faucibus. Praesent eu scelerisque dolor, sit amet vehicula
45 | massa. Maecenas feugiat dolor at leo luctus bibendum. In malesuada quam ac sem euismod, at gravida turpis porta.
46 | Praesent euismod, quam ac vulputate bibendum, nulla ipsum auctor mauris, id tempor magna magna scelerisque erat.
47 | Aliquam augue nisl, suscipit sed ornare ac, commodo sit amet erat. Suspendisse vehicula est dolor, non rhoncus
48 | metus auctor eu. Cras ullamcorper lacus feugiat sodales laoreet. Proin egestas augue sem, id convallis ante
49 | dictum eget.
50 |
51 | Nam tempus bibendum elementum. Pellentesque vulputate dapibus lacus sit amet sodales. Nullam facilisis lacinia
52 | dui id maximus. Proin a luctus magna. Mauris facilisis urna a libero convallis feugiat. Praesent posuere libero
53 | dui, in venenatis ante interdum non. Nullam ac magna sodales lectus lobortis faucibus eu id risus. Nam et lacus
54 | nec lacus tincidunt lacinia eget in sem. Duis facilisis mi et consectetur eleifend. Integer venenatis erat non
55 | ante malesuada, at ultricies libero blandit. Aenean vel pretium elit. Etiam id mauris non lorem luctus maximus.
56 | Vivamus varius pulvinar fermentum. Maecenas tempus gravida ipsum id bibendum. Duis velit mauris, aliquet sit
57 | amet lacus a, facilisis convallis sapien. Mauris at consectetur sapien.
58 |
59 | Vestibulum in semper felis. Nunc gravida laoreet augue et gravida. Etiam quis arcu nec lacus vestibulum mattis
60 | eget eu nulla. Donec molestie arcu nisl, sit amet dapibus justo posuere sit amet. Quisque a ultricies ex.
61 | Quisque eleifend nisi vitae enim ultricies finibus. Nunc molestie nunc ac enim efficitur tincidunt. Sed at purus
62 | et diam consectetur tincidunt. Aenean ornare, mi nec venenatis accumsan, nisi sem accumsan libero, vel tempus
63 | diam nisi et ante. Fusce id consectetur enim. Pellentesque habitant morbi tristique senectus et netus et
64 | malesuada fames ac turpis egestas. Donec mattis mi vel commodo mollis. Morbi id gravida dolor, in posuere
65 | lectus. Vestibulum at sem semper nibh efficitur feugiat et molestie odio. Aenean et odio ut elit ullamcorper
66 | faucibus vel sed ligula. Nam vulputate sapien libero, a aliquet tellus dignissim sed.
Básico
2 |8 |
Ícone Customizado
9 |17 |
Alterando a Visualização
18 |24 |
Setando a Data
25 |31 |
Alterando as Cores
32 |39 |
46 |
Min/Max Date
47 |53 |
Filtrando Datas
54 |60 |
Desabilitando
61 |
62 |
70 |
78 |
85 |
Touch Mode
86 |92 |
Abertura Manual
93 |99 |
Datas Selecionadas
100 |Básico
2 |12 | 13 |
Nativo
14 |25 | 26 |
2-way binding
27 |You selected: {{selected}}
38 | 39 |40 | 41 |
Selecionando valores
42 | 43 | 66 | 67 |68 | 69 |
Validação
70 | 71 |mat select
72 |native html select
85 |100 | 101 |
Disable
102 | 103 |
104 |
mat-select
108 |native html select
118 |130 | 131 |
Multiple
132 |Básico
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Option
14 |
15 |
16 |
17 |
18 | 7 |
11 |
19 | 20 |
Variando a Aparência
21 |
22 |
30 |
38 |
46 |
55 | 56 |
Floating Label
57 | 58 |
59 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | Label e Placeholder
77 |
78 |
79 |
80 |
81 |
82 | -- Nenhum --
83 | Opções
84 |
85 |
86 | favorite Fancy label
87 |
88 |
89 |
90 |
91 | 71 |
75 |
80 |
92 | 93 |
Hint Label
94 |
95 |
96 |
97 | {{input.value?.length || 0}}/10
98 |
99 |
100 |
101 |
102 | Option
103 |
104 | Here's the dropdown arrow ^
105 |
106 |
107 |
108 | 100 |
109 | 110 |
Error Message
111 |
112 |
113 |
114 | {{getErrorMessage()}}
115 |
116 |
117 |
118 | 119 | 120 |
Prefixo e Sulfixo
121 |
122 |
123 |
124 | {{hide ? 'visibility_off' : 'visibility'}}
125 |
126 |
127 |
128 |
129 | $
130 | .00
131 |
132 |
133 |
--------------------------------------------------------------------------------
/src/petshop/src/assets/js/components/filter.min.js:
--------------------------------------------------------------------------------
1 | /*! UIkit 3.0.3 | http://www.getuikit.com | (c) 2014 - 2018 YOOtheme | MIT License */
2 |
3 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("uikit-util")):"function"==typeof define&&define.amd?define("uikitfilter",["uikit-util"],e):(t=t||self).UIkitFilter=e(t.UIkit.util)}(this,function(h){"use strict";var c,u="uk-animation-target";function f(t,e){var i=h.css(t,"zIndex");return!!h.isVisible(t)&&h.assign({display:"",opacity:e?h.css(t,"opacity"):"0",pointerEvents:"none",position:"absolute",zIndex:"auto"===i?h.index(t):i},d(t))}function l(t){h.css(t.children,{height:"",left:"",opacity:"",pointerEvents:"",position:"",top:"",width:""}),h.removeClass(t,u),h.css(t,"height","")}function d(t){var e=t.getBoundingClientRect(),i=e.height,n=e.width,r=h.position(t),a=r.top,o=r.left;return{top:a+=h.toFloat(h.css(t,"marginTop")),left:o,height:i,width:n}}var t={mixins:[{props:{animation:Number},data:{animation:150},computed:{target:function(){return this.$el}},methods:{animate:function(t){var n=this;c||(c=h.append(document.head,"127 |