Sreeja Sarkar
4 years ago
commit
40361dc3c7
1074 changed files with 59699 additions and 0 deletions
Split View
Diff Options
-
17angular_frontend/.browserslistrc
-
16angular_frontend/.editorconfig
-
45angular_frontend/.gitignore
-
27angular_frontend/README.md
-
106angular_frontend/angular.json
-
44angular_frontend/karma.conf.js
-
12122angular_frontend/package-lock.json
-
39angular_frontend/package.json
-
18angular_frontend/proxy.conf.json
-
39angular_frontend/src/app/app-routing.module.ts
-
29angular_frontend/src/app/app.component.css
-
45angular_frontend/src/app/app.component.html
-
35angular_frontend/src/app/app.component.spec.ts
-
10angular_frontend/src/app/app.component.ts
-
50angular_frontend/src/app/app.module.ts
-
100angular_frontend/src/app/auth/login/login.component.css
-
19angular_frontend/src/app/auth/login/login.component.html
-
25angular_frontend/src/app/auth/login/login.component.spec.ts
-
63angular_frontend/src/app/auth/login/login.component.ts
-
16angular_frontend/src/app/auth/service/auth-guard.service.spec.ts
-
21angular_frontend/src/app/auth/service/auth-guard.service.ts
-
16angular_frontend/src/app/auth/service/auth.service.spec.ts
-
23angular_frontend/src/app/auth/service/auth.service.ts
-
BINangular_frontend/src/app/banana.jpg
-
24angular_frontend/src/app/components/account/account.component.css
-
18angular_frontend/src/app/components/account/account.component.html
-
25angular_frontend/src/app/components/account/account.component.spec.ts
-
45angular_frontend/src/app/components/account/account.component.ts
-
131angular_frontend/src/app/components/beverages/beverages.component.css
-
8angular_frontend/src/app/components/beverages/beverages.component.html
-
25angular_frontend/src/app/components/beverages/beverages.component.spec.ts
-
37angular_frontend/src/app/components/beverages/beverages.component.ts
-
50angular_frontend/src/app/components/cart/cart.component.css
-
50angular_frontend/src/app/components/cart/cart.component.html
-
25angular_frontend/src/app/components/cart/cart.component.spec.ts
-
159angular_frontend/src/app/components/cart/cart.component.ts
-
100angular_frontend/src/app/components/edit-account/edit-account.component.css
-
51angular_frontend/src/app/components/edit-account/edit-account.component.html
-
25angular_frontend/src/app/components/edit-account/edit-account.component.spec.ts
-
79angular_frontend/src/app/components/edit-account/edit-account.component.ts
-
131angular_frontend/src/app/components/fruits/fruits.component.css
-
9angular_frontend/src/app/components/fruits/fruits.component.html
-
25angular_frontend/src/app/components/fruits/fruits.component.spec.ts
-
39angular_frontend/src/app/components/fruits/fruits.component.ts
-
BINangular_frontend/src/app/components/home/g1.jpg
-
26angular_frontend/src/app/components/home/home.component.css
-
11angular_frontend/src/app/components/home/home.component.html
-
25angular_frontend/src/app/components/home/home.component.spec.ts
-
27angular_frontend/src/app/components/home/home.component.ts
-
131angular_frontend/src/app/components/medicines/medicines.component.css
-
9angular_frontend/src/app/components/medicines/medicines.component.html
-
25angular_frontend/src/app/components/medicines/medicines.component.spec.ts
-
37angular_frontend/src/app/components/medicines/medicines.component.ts
-
51angular_frontend/src/app/components/orders/orders.component.css
-
30angular_frontend/src/app/components/orders/orders.component.html
-
25angular_frontend/src/app/components/orders/orders.component.spec.ts
-
38angular_frontend/src/app/components/orders/orders.component.ts
-
146angular_frontend/src/app/components/product/product.component.css
-
27angular_frontend/src/app/components/product/product.component.html
-
25angular_frontend/src/app/components/product/product.component.spec.ts
-
74angular_frontend/src/app/components/product/product.component.ts
-
171angular_frontend/src/app/components/sign-up/sign-up.component.css
-
65angular_frontend/src/app/components/sign-up/sign-up.component.html
-
25angular_frontend/src/app/components/sign-up/sign-up.component.spec.ts
-
67angular_frontend/src/app/components/sign-up/sign-up.component.ts
-
131angular_frontend/src/app/components/snacks/snacks.component.css
-
9angular_frontend/src/app/components/snacks/snacks.component.html
-
25angular_frontend/src/app/components/snacks/snacks.component.spec.ts
-
38angular_frontend/src/app/components/snacks/snacks.component.ts
-
131angular_frontend/src/app/components/vegetables/vegetables.component.css
-
9angular_frontend/src/app/components/vegetables/vegetables.component.html
-
25angular_frontend/src/app/components/vegetables/vegetables.component.spec.ts
-
36angular_frontend/src/app/components/vegetables/vegetables.component.ts
-
BINangular_frontend/src/app/g1.jpg
-
BINangular_frontend/src/app/g2.jpeg
-
BINangular_frontend/src/app/g3.jpg
-
31angular_frontend/src/app/model/account.model.ts
-
34angular_frontend/src/app/model/cart.model.ts
-
15angular_frontend/src/app/model/cartDto.model.ts
-
15angular_frontend/src/app/model/orderDto.model.ts
-
47angular_frontend/src/app/model/orders.model.ts
-
17angular_frontend/src/app/model/product.model.ts
-
16angular_frontend/src/app/service/account.service.spec.ts
-
64angular_frontend/src/app/service/account.service.ts
-
16angular_frontend/src/app/service/cart.service.spec.ts
-
87angular_frontend/src/app/service/cart.service.ts
-
16angular_frontend/src/app/service/orders.service.spec.ts
-
69angular_frontend/src/app/service/orders.service.ts
-
16angular_frontend/src/app/service/product.service.spec.ts
-
23angular_frontend/src/app/service/product.service.ts
-
8angular_frontend/src/app/shared/filter.pipe.spec.ts
-
21angular_frontend/src/app/shared/filter.pipe.ts
-
0angular_frontend/src/assets/.gitkeep
-
3angular_frontend/src/environments/environment.prod.ts
-
16angular_frontend/src/environments/environment.ts
-
BINangular_frontend/src/favicon.ico
-
13angular_frontend/src/index.html
-
12angular_frontend/src/main.ts
-
65angular_frontend/src/polyfills.ts
-
1angular_frontend/src/styles.css
@ -0,0 +1,17 @@ |
|||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. |
|||
# For additional information regarding the format and rule options, please see: |
|||
# https://github.com/browserslist/browserslist#queries |
|||
|
|||
# For the full list of supported browsers by the Angular framework, please see: |
|||
# https://angular.io/guide/browser-support |
|||
|
|||
# You can see what browsers were selected by your queries by running: |
|||
# npx browserslist |
|||
|
|||
last 1 Chrome version |
|||
last 1 Firefox version |
|||
last 2 Edge major versions |
|||
last 2 Safari major versions |
|||
last 2 iOS major versions |
|||
Firefox ESR |
|||
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. |
|||
@ -0,0 +1,16 @@ |
|||
# Editor configuration, see https://editorconfig.org |
|||
root = true |
|||
|
|||
[*] |
|||
charset = utf-8 |
|||
indent_style = space |
|||
indent_size = 2 |
|||
insert_final_newline = true |
|||
trim_trailing_whitespace = true |
|||
|
|||
[*.ts] |
|||
quote_type = single |
|||
|
|||
[*.md] |
|||
max_line_length = off |
|||
trim_trailing_whitespace = false |
|||
@ -0,0 +1,45 @@ |
|||
# See http://help.github.com/ignore-files/ for more about ignoring files. |
|||
|
|||
# compiled output |
|||
/dist |
|||
/tmp |
|||
/out-tsc |
|||
# Only exists if Bazel was run |
|||
/bazel-out |
|||
|
|||
# dependencies |
|||
/node_modules |
|||
|
|||
# profiling files |
|||
chrome-profiler-events*.json |
|||
|
|||
# IDEs and editors |
|||
/.idea |
|||
.project |
|||
.classpath |
|||
.c9/ |
|||
*.launch |
|||
.settings/ |
|||
*.sublime-workspace |
|||
|
|||
# IDE - VSCode |
|||
.vscode/* |
|||
!.vscode/settings.json |
|||
!.vscode/tasks.json |
|||
!.vscode/launch.json |
|||
!.vscode/extensions.json |
|||
.history/* |
|||
|
|||
# misc |
|||
/.sass-cache |
|||
/connect.lock |
|||
/coverage |
|||
/libpeerconnection.log |
|||
npm-debug.log |
|||
yarn-error.log |
|||
testem.log |
|||
/typings |
|||
|
|||
# System Files |
|||
.DS_Store |
|||
Thumbs.db |
|||
@ -0,0 +1,27 @@ |
|||
# GroceryApp |
|||
|
|||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.1. |
|||
|
|||
## Development server |
|||
|
|||
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. |
|||
|
|||
## Code scaffolding |
|||
|
|||
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`. |
|||
|
|||
## Build |
|||
|
|||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. |
|||
|
|||
## Running unit tests |
|||
|
|||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
|||
|
|||
## Running end-to-end tests |
|||
|
|||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. |
|||
|
|||
## Further help |
|||
|
|||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
|||
@ -0,0 +1,106 @@ |
|||
{ |
|||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", |
|||
"version": 1, |
|||
"newProjectRoot": "projects", |
|||
"projects": { |
|||
"groceryApp": { |
|||
"projectType": "application", |
|||
"schematics": { |
|||
"@schematics/angular:application": { |
|||
"strict": true |
|||
} |
|||
}, |
|||
"root": "", |
|||
"sourceRoot": "src", |
|||
"prefix": "app", |
|||
"architect": { |
|||
"build": { |
|||
"builder": "@angular-devkit/build-angular:browser", |
|||
"options": { |
|||
"outputPath": "dist/groceryApp", |
|||
"index": "src/index.html", |
|||
"main": "src/main.ts", |
|||
"polyfills": "src/polyfills.ts", |
|||
"tsConfig": "tsconfig.app.json", |
|||
"assets": [ |
|||
"src/favicon.ico", |
|||
"src/assets" |
|||
], |
|||
"styles": [ |
|||
"src/styles.css" |
|||
], |
|||
"scripts": [] |
|||
}, |
|||
"configurations": { |
|||
"production": { |
|||
"budgets": [ |
|||
{ |
|||
"type": "initial", |
|||
"maximumWarning": "500kb", |
|||
"maximumError": "1mb" |
|||
}, |
|||
{ |
|||
"type": "anyComponentStyle", |
|||
"maximumWarning": "2kb", |
|||
"maximumError": "4kb" |
|||
} |
|||
], |
|||
"fileReplacements": [ |
|||
{ |
|||
"replace": "src/environments/environment.ts", |
|||
"with": "src/environments/environment.prod.ts" |
|||
} |
|||
], |
|||
"outputHashing": "all" |
|||
}, |
|||
"development": { |
|||
"buildOptimizer": false, |
|||
"optimization": false, |
|||
"vendorChunk": true, |
|||
"extractLicenses": false, |
|||
"sourceMap": true, |
|||
"namedChunks": true |
|||
} |
|||
}, |
|||
"defaultConfiguration": "production" |
|||
}, |
|||
"serve": { |
|||
"builder": "@angular-devkit/build-angular:dev-server", |
|||
"configurations": { |
|||
"production": { |
|||
"browserTarget": "groceryApp:build:production" |
|||
}, |
|||
"development": { |
|||
"browserTarget": "groceryApp:build:development" |
|||
} |
|||
}, |
|||
"defaultConfiguration": "development" |
|||
}, |
|||
"extract-i18n": { |
|||
"builder": "@angular-devkit/build-angular:extract-i18n", |
|||
"options": { |
|||
"browserTarget": "groceryApp:build" |
|||
} |
|||
}, |
|||
"test": { |
|||
"builder": "@angular-devkit/build-angular:karma", |
|||
"options": { |
|||
"main": "src/test.ts", |
|||
"polyfills": "src/polyfills.ts", |
|||
"tsConfig": "tsconfig.spec.json", |
|||
"karmaConfig": "karma.conf.js", |
|||
"assets": [ |
|||
"src/favicon.ico", |
|||
"src/assets" |
|||
], |
|||
"styles": [ |
|||
"src/styles.css" |
|||
], |
|||
"scripts": [] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"defaultProject": "groceryApp" |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
// Karma configuration file, see link for more information
|
|||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
|||
|
|||
module.exports = function (config) { |
|||
config.set({ |
|||
basePath: '', |
|||
frameworks: ['jasmine', '@angular-devkit/build-angular'], |
|||
plugins: [ |
|||
require('karma-jasmine'), |
|||
require('karma-chrome-launcher'), |
|||
require('karma-jasmine-html-reporter'), |
|||
require('karma-coverage'), |
|||
require('@angular-devkit/build-angular/plugins/karma') |
|||
], |
|||
client: { |
|||
jasmine: { |
|||
// you can add configuration options for Jasmine here
|
|||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
|||
// for example, you can disable the random execution with `random: false`
|
|||
// or set a specific seed with `seed: 4321`
|
|||
}, |
|||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
|||
}, |
|||
jasmineHtmlReporter: { |
|||
suppressAll: true // removes the duplicated traces
|
|||
}, |
|||
coverageReporter: { |
|||
dir: require('path').join(__dirname, './coverage/groceryApp'), |
|||
subdir: '.', |
|||
reporters: [ |
|||
{ type: 'html' }, |
|||
{ type: 'text-summary' } |
|||
] |
|||
}, |
|||
reporters: ['progress', 'kjhtml'], |
|||
port: 9876, |
|||
colors: true, |
|||
logLevel: config.LOG_INFO, |
|||
autoWatch: true, |
|||
browsers: ['Chrome'], |
|||
singleRun: false, |
|||
restartOnFileChange: true |
|||
}); |
|||
}; |
|||
12122
angular_frontend/package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,39 @@ |
|||
{ |
|||
"name": "grocery-app", |
|||
"version": "0.0.0", |
|||
"scripts": { |
|||
"ng": "ng", |
|||
"start": "ng serve --proxy-config proxy.conf.json --port 17599", |
|||
"build": "ng build", |
|||
"watch": "ng build --watch --configuration development", |
|||
"test": "ng test" |
|||
}, |
|||
"private": true, |
|||
"dependencies": { |
|||
"@angular/animations": "~12.1.1", |
|||
"@angular/common": "~12.1.1", |
|||
"@angular/compiler": "~12.1.1", |
|||
"@angular/core": "~12.1.1", |
|||
"@angular/forms": "~12.1.1", |
|||
"@angular/platform-browser": "~12.1.1", |
|||
"@angular/platform-browser-dynamic": "~12.1.1", |
|||
"@angular/router": "~12.1.1", |
|||
"rxjs": "~6.6.0", |
|||
"tslib": "^2.2.0", |
|||
"zone.js": "~0.11.4" |
|||
}, |
|||
"devDependencies": { |
|||
"@angular-devkit/build-angular": "~12.1.1", |
|||
"@angular/cli": "~12.1.1", |
|||
"@angular/compiler-cli": "~12.1.1", |
|||
"@types/jasmine": "~3.6.0", |
|||
"@types/node": "^12.11.1", |
|||
"jasmine-core": "~3.7.0", |
|||
"karma": "~6.3.0", |
|||
"karma-chrome-launcher": "~3.1.0", |
|||
"karma-coverage": "~2.0.3", |
|||
"karma-jasmine": "~4.0.0", |
|||
"karma-jasmine-html-reporter": "^1.5.0", |
|||
"typescript": "~4.3.2" |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
{ |
|||
"/userapi": { |
|||
"target": "http://10.3.117.30:5007", |
|||
"secure": false |
|||
}, |
|||
"/productapi": { |
|||
"target": "http://10.3.117.30:5008", |
|||
"secure": false |
|||
}, |
|||
"/cartapi": { |
|||
"target": "http://10.3.117.30:5006", |
|||
"secure": false |
|||
}, |
|||
"/orderapi": { |
|||
"target": "http://10.3.117.30:5009", |
|||
"secure": false |
|||
} |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { RouterModule, Routes } from '@angular/router'; |
|||
import { LoginComponent } from './auth/login/login.component'; |
|||
import { AuthGuardService } from './auth/service/auth-guard.service'; |
|||
import { AccountComponent } from './components/account/account.component'; |
|||
import { BeveragesComponent } from './components/beverages/beverages.component'; |
|||
import { CartComponent } from './components/cart/cart.component'; |
|||
import { EditAccountComponent } from './components/edit-account/edit-account.component'; |
|||
import { FruitsComponent } from './components/fruits/fruits.component'; |
|||
import { HomeComponent } from './components/home/home.component'; |
|||
import { MedicinesComponent } from './components/medicines/medicines.component'; |
|||
import { OrdersComponent } from './components/orders/orders.component'; |
|||
import { ProductComponent } from './components/product/product.component'; |
|||
import { SignUpComponent } from './components/sign-up/sign-up.component'; |
|||
import { SnacksComponent } from './components/snacks/snacks.component'; |
|||
import { VegetablesComponent } from './components/vegetables/vegetables.component'; |
|||
|
|||
const routes: Routes = [ |
|||
// {path: '', component:HomeComponent},
|
|||
{path: 'account/:uid', component : AccountComponent}, |
|||
{path: 'product', component : ProductComponent}, |
|||
{path : 'account-edit/:aid',component : EditAccountComponent }, |
|||
{path: 'register', component : SignUpComponent}, |
|||
{path: 'home', component : HomeComponent}, |
|||
{path: 'fruits', component : FruitsComponent}, |
|||
{path: 'snacks', component : SnacksComponent}, |
|||
{path: 'medicines', component : MedicinesComponent}, |
|||
{path: 'beverages', component : BeveragesComponent}, |
|||
{path: 'vegetables', component : VegetablesComponent}, |
|||
{path: 'login', component : LoginComponent}, |
|||
{path: 'cart', component : CartComponent}, |
|||
{path: 'order', component : OrdersComponent} |
|||
]; |
|||
|
|||
@NgModule({ |
|||
imports: [RouterModule.forRoot(routes)], |
|||
exports: [RouterModule] |
|||
}) |
|||
export class AppRoutingModule { } |
|||
@ -0,0 +1,29 @@ |
|||
body, html { |
|||
height: 100%; |
|||
} |
|||
|
|||
.bg { |
|||
/* The image used */ |
|||
background-image: url("g1.jpg"); |
|||
|
|||
/* Full height */ |
|||
height: 100%; |
|||
width: 100%; |
|||
/* Center and scale the image nicely */ |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
opacity: 0.9; |
|||
} |
|||
.button { |
|||
font: bold 15px Arial; |
|||
text-decoration: none; |
|||
background-color: #5fe697; |
|||
color: #05151f; |
|||
border-radius: 4px; |
|||
padding: 6px 8px 6px 8px; |
|||
border-top: 1px solid #CCCCCC; |
|||
border-right: 1px solid #333333; |
|||
border-bottom: 1px solid #333333; |
|||
border-left: 1px solid #CCCCCC; |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
<div class="bg"> |
|||
<div> |
|||
<h1 style="text-align:center; opacity: 15; font-size: 50px;" >Express Grocery</h1> |
|||
</div> |
|||
<hr> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<a routerLink="/register" class="button">Register</a> |
|||
|
|||
<a routerLink="/login" class="button">Login</a> |
|||
|
|||
<!-- <a routerLink="/account" class="button">My Account</a> |
|||
|
|||
<a routerLink="/product" class="button">Items Available</a> |
|||
|
|||
<a routerLink="/cart" class="button">My Cart</a> --> |
|||
<hr> |
|||
|
|||
<router-outlet></router-outlet> |
|||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|||
</div> |
|||
@ -0,0 +1,35 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
import { RouterTestingModule } from '@angular/router/testing'; |
|||
import { AppComponent } from './app.component'; |
|||
|
|||
describe('AppComponent', () => { |
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
imports: [ |
|||
RouterTestingModule |
|||
], |
|||
declarations: [ |
|||
AppComponent |
|||
], |
|||
}).compileComponents(); |
|||
}); |
|||
|
|||
it('should create the app', () => { |
|||
const fixture = TestBed.createComponent(AppComponent); |
|||
const app = fixture.componentInstance; |
|||
expect(app).toBeTruthy(); |
|||
}); |
|||
|
|||
it(`should have as title 'groceryApp'`, () => { |
|||
const fixture = TestBed.createComponent(AppComponent); |
|||
const app = fixture.componentInstance; |
|||
expect(app.title).toEqual('groceryApp'); |
|||
}); |
|||
|
|||
it('should render title', () => { |
|||
const fixture = TestBed.createComponent(AppComponent); |
|||
fixture.detectChanges(); |
|||
const compiled = fixture.nativeElement as HTMLElement; |
|||
expect(compiled.querySelector('.content span')?.textContent).toContain('groceryApp app is running!'); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,10 @@ |
|||
import { Component } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'app-root', |
|||
templateUrl: './app.component.html', |
|||
styleUrls: ['./app.component.css'] |
|||
}) |
|||
export class AppComponent { |
|||
|
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
|||
import { BrowserModule } from '@angular/platform-browser'; |
|||
import {HttpClientModule} from '@angular/common/http'; |
|||
import { AppRoutingModule } from './app-routing.module'; |
|||
import { AppComponent } from './app.component'; |
|||
import { AccountComponent } from './components/account/account.component'; |
|||
import { EditAccountComponent } from './components/edit-account/edit-account.component'; |
|||
import { SignUpComponent } from './components/sign-up/sign-up.component'; |
|||
import { LoginComponent } from './auth/login/login.component'; |
|||
import { ProductComponent } from './components/product/product.component'; |
|||
import { CartComponent } from './components/cart/cart.component'; |
|||
import { FilterPipe } from './shared/filter.pipe'; |
|||
import { FruitsComponent } from './components/fruits/fruits.component'; |
|||
import { VegetablesComponent } from './components/vegetables/vegetables.component'; |
|||
import { SnacksComponent } from './components/snacks/snacks.component'; |
|||
import { BeveragesComponent } from './components/beverages/beverages.component'; |
|||
import { MedicinesComponent } from './components/medicines/medicines.component'; |
|||
import { HomeComponent } from './components/home/home.component'; |
|||
import { OrdersComponent } from './components/orders/orders.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [ |
|||
AppComponent, |
|||
AccountComponent, |
|||
EditAccountComponent, |
|||
SignUpComponent, |
|||
LoginComponent, |
|||
ProductComponent, |
|||
CartComponent, |
|||
FilterPipe, |
|||
FruitsComponent, |
|||
VegetablesComponent, |
|||
SnacksComponent, |
|||
BeveragesComponent, |
|||
MedicinesComponent, |
|||
HomeComponent, |
|||
OrdersComponent |
|||
], |
|||
imports: [ |
|||
BrowserModule, |
|||
AppRoutingModule, |
|||
ReactiveFormsModule, |
|||
HttpClientModule, |
|||
FormsModule |
|||
], |
|||
providers: [], |
|||
bootstrap: [AppComponent] |
|||
}) |
|||
export class AppModule { } |
|||
@ -0,0 +1,100 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 360px; |
|||
padding: 8% 0 0; |
|||
margin: auto; |
|||
} |
|||
.form { |
|||
position: relative; |
|||
z-index: 1; |
|||
background: #FFFFFF; |
|||
max-width: 360px; |
|||
margin: 0 auto 100px; |
|||
padding: 45px; |
|||
text-align: center; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 15px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
<div class="login-page"> |
|||
<div class="form"> |
|||
<p>Please Login</p> |
|||
<hr> |
|||
|
|||
{{msg}} |
|||
<form class="login-form" [formGroup]='loginForm' (submit)='OnLoginFormSubmit()' style="border:1px solid #ccc"> |
|||
Username: <input type="text" formControlName="username"> |
|||
<div *ngIf="loginForm.controls['username'].invalid &&(loginForm.controls['username'].touched || |
|||
loginForm.controls['username'].dirty)">Invalid username</div> |
|||
<br><br> |
|||
Password: <input type="password" formControlName="password"> |
|||
<div *ngIf="loginForm.controls['password'].invalid &&(loginForm.controls['password'].touched || |
|||
loginForm.controls['password'].dirty)">Invalid password</div> |
|||
<br><br> |
|||
|
|||
<button [disabled]="!loginForm.valid">login</button> |
|||
</form> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { LoginComponent } from './login.component'; |
|||
|
|||
describe('LoginComponent', () => { |
|||
let component: LoginComponent; |
|||
let fixture: ComponentFixture<LoginComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ LoginComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(LoginComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,63 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { FormControl, FormGroup, Validators } from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { Account } from 'src/app/model/account.model'; |
|||
|
|||
import { AccountService } from 'src/app/service/account.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-login', |
|||
templateUrl: './login.component.html', |
|||
styleUrls: ['./login.component.css'] |
|||
}) |
|||
export class LoginComponent implements OnInit { |
|||
|
|||
loginForm: any; |
|||
user : Account = new Account(); |
|||
msg: string; |
|||
constructor(private route: Router, private accountService : AccountService) { |
|||
this.msg = ''; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.loginForm = new FormGroup({ |
|||
username : new FormControl('',Validators.required), |
|||
password : new FormControl('',Validators.required) |
|||
|
|||
}); |
|||
} |
|||
OnLoginFormSubmit(){ |
|||
|
|||
// this.accountService.getAccounts().subscribe(res=>{
|
|||
// const user = res.find((a:any)=>{
|
|||
// return a.username == this.loginForm.value.username && a.password == this.loginForm.value.password;
|
|||
|
|||
// });
|
|||
// if(user){
|
|||
// alert("Login Success");
|
|||
// this.loginForm.reset();
|
|||
// this.route.navigateByUrl('/home');
|
|||
// }else{
|
|||
// alert("user not found");
|
|||
// }
|
|||
// },err=>{
|
|||
// alert("Something went wrong!!");
|
|||
// })
|
|||
this.user = { |
|||
username :this.loginForm.value.username, |
|||
password :this.loginForm.value.password |
|||
} |
|||
this.accountService.login(this.user).subscribe((data: any)=>{ |
|||
window.sessionStorage.setItem("username",this.user.username); |
|||
window.sessionStorage.setItem("isLoggedIn","true"); |
|||
this.route.navigateByUrl('/home'); |
|||
}), |
|||
(err: any)=>{ |
|||
this.msg='Invalid credentials'; |
|||
window.sessionStorage.removeItem('username'); |
|||
window.sessionStorage.removeItem('isLoggedIn'); |
|||
}; |
|||
|
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { AuthGuardService } from './auth-guard.service'; |
|||
|
|||
describe('AuthGuardService', () => { |
|||
let service: AuthGuardService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(AuthGuardService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,21 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; |
|||
import { AuthService } from './auth.service'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class AuthGuardService implements CanActivate { |
|||
|
|||
status : boolean; |
|||
constructor(private authService : AuthService,private route : Router) { } |
|||
|
|||
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{ |
|||
this.status = this.authService.isAuthenticated(); |
|||
if(this.status == false){ |
|||
this.route.navigateByUrl('/login'); |
|||
} |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { AuthService } from './auth.service'; |
|||
|
|||
describe('AuthService', () => { |
|||
let service: AuthService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(AuthService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,23 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import { Account } from 'src/app/model/account.model'; |
|||
|
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class AuthService { |
|||
|
|||
user: Account = new Account(); |
|||
|
|||
constructor() { |
|||
|
|||
} |
|||
isAuthenticated() : boolean { |
|||
this.user.username = window.sessionStorage.getItem('username'); |
|||
let isLoggedIn = window.sessionStorage.getItem('isLoggedIn'); |
|||
if(isLoggedIn == 'true') |
|||
return true; |
|||
return false; |
|||
} |
|||
} |
|||
|
|||
| Before | After |
|---|---|
|
|
| Width: 700 | Height: 467 | Size: 24 KiB |
@ -0,0 +1,24 @@ |
|||
.button { |
|||
font: bold 15px Arial; |
|||
text-decoration: none; |
|||
background-color: #5fe697; |
|||
color: #05151f; |
|||
border-radius: 4px; |
|||
padding: 6px 8px 6px 8px; |
|||
border-top: 1px solid #CCCCCC; |
|||
border-right: 1px solid #333333; |
|||
border-bottom: 1px solid #333333; |
|||
border-left: 1px solid #CCCCCC; |
|||
cursor: pointer; |
|||
} |
|||
.form { |
|||
display: block; |
|||
background: #FFFFFF; |
|||
max-width: 300px; |
|||
margin: 10px 30px; |
|||
margin-bottom: 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: center; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
<span class="button" (click)='back()'>BACK TO HOME</span> |
|||
<h2 style="margin-left: 430px;font-size: 30px;">My Account Details</h2> |
|||
<BR>{{msg}}<BR> |
|||
|
|||
<!-- <div *ngFor="let a of accounts" style="margin-left: 400px;" class="form" > --> |
|||
<div style="margin-left: 400px;" class="form"> |
|||
<b style="font-size: 20px;">Representative Details</b><br><br><b>Username:</b> {{accounts.username}} <br> <b>Name:</b> {{accounts.fullname}} <br> <b>Gender:</b> {{accounts.gender}} <br> <b>Phone no.:</b> {{accounts.phone}} <br> <b>Email:</b> {{accounts.email}} <br><br><b style="font-size: 20px;">Building Details</b><br><br> <b>Building Address:</b> {{accounts.address}} <br> <b>City:</b> {{accounts.city}} <br> <b>State:</b> {{accounts.state}} <br> <b>Pincode:</b> {{accounts.pincode}} <br> <b>Apartments:</b> {{accounts.apartments}} |
|||
<br><br> |
|||
<br><br> |
|||
|
|||
|
|||
|
|||
<a href='javascript:void(0)' class="button" (click)='onAccountEdit(accounts.id!)'>UPDATE</a> |
|||
<br><br> |
|||
<br><br> |
|||
</div> |
|||
|
|||
|
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { AccountComponent } from './account.component'; |
|||
|
|||
describe('AccountComponent', () => { |
|||
let component: AccountComponent; |
|||
let fixture: ComponentFixture<AccountComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ AccountComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(AccountComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,45 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { ActivatedRoute, Router } from '@angular/router'; |
|||
import { Account } from 'src/app/model/account.model'; |
|||
import { AccountService } from 'src/app/service/account.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-account', |
|||
templateUrl: './account.component.html', |
|||
styleUrls: ['./account.component.css'] |
|||
}) |
|||
export class AccountComponent implements OnInit { |
|||
|
|||
|
|||
accounts : any; |
|||
msg:string; |
|||
uid: any ; |
|||
username: any; |
|||
constructor(private actRoute: ActivatedRoute,private accountService : AccountService, private route: Router){ |
|||
this.accounts = []; |
|||
this.msg =''; |
|||
|
|||
} |
|||
ngOnInit(): void { |
|||
this.actRoute.paramMap.subscribe(params =>{ |
|||
this.uid = params.get('uid'); |
|||
}); |
|||
this.accountService.getOneAccount(this.uid).subscribe(data =>{ |
|||
this.accounts = data; |
|||
console.log(data) |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
onAccountEdit(id: number){ |
|||
this.route.navigateByUrl('/account-edit/' +id); |
|||
} |
|||
|
|||
back(){ |
|||
this.route.navigateByUrl("/home"); |
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,131 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 260px; |
|||
padding: 8% 0 0; |
|||
align-items: left; |
|||
margin: 0 20px; |
|||
} |
|||
.form { |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
max-width: 165px; |
|||
margin: 50px 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: left; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
margin: 10px 0; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.form-control{ |
|||
border-radius: 3px; |
|||
width: 600px; |
|||
height: 30px; |
|||
margin-left: 23px; |
|||
} |
|||
.search-icon { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 50%; |
|||
top: 20px; |
|||
color: black; |
|||
} |
|||
button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #62a7c2; |
|||
margin: 30px 20px; |
|||
width: 100px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
<div *ngFor="let p of products" class="form"> |
|||
|
|||
|
|||
<img src={{p.imag}} width="150px" height="100px"><br> <b>Item Name:</b> {{p.name}} <br> <b>Price:</b> {{p.price}} <br><b>Category:</b> {{p.category}} |
|||
|
|||
<br> |
|||
<button (click)=addtocart1(p.id!)>Add to cart</button> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { BeveragesComponent } from './beverages.component'; |
|||
|
|||
describe('BeveragesComponent', () => { |
|||
let component: BeveragesComponent; |
|||
let fixture: ComponentFixture<BeveragesComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ BeveragesComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(BeveragesComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,37 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { Product } from 'src/app/model/product.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { ProductService } from 'src/app/service/product.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-beverages', |
|||
templateUrl: './beverages.component.html', |
|||
styleUrls: ['./beverages.component.css'] |
|||
}) |
|||
export class BeveragesComponent implements OnInit { |
|||
|
|||
products:Product[]; |
|||
name:string; |
|||
uid!:any; |
|||
constructor(private productService:ProductService, private route:Router,private cartService:CartService) { |
|||
this.products=[]; |
|||
this.name='Beverages'; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.productService.getProductsByCategory(this.name).subscribe(data=>{ |
|||
this.products=data; |
|||
}) |
|||
} |
|||
addtocart(p:any){ |
|||
this.cartService.addtoCart(p); |
|||
} |
|||
addtocart1(pid:any){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.postCart(this.uid, pid).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
.card{ |
|||
height: 60vh; |
|||
width: 25px; |
|||
padding: 25px; |
|||
} |
|||
.center{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
} |
|||
#customers { |
|||
font-family: Arial, Helvetica, sans-serif; |
|||
border-collapse: collapse; |
|||
width: 100%; |
|||
} |
|||
|
|||
#customers td, #customers th { |
|||
border: 1px solid #ddd; |
|||
padding: 8px; |
|||
} |
|||
|
|||
#customers tr:nth-child(even){background-color: #f2f2f2;} |
|||
|
|||
#customers tr:hover {background-color: #ddd;} |
|||
|
|||
#customers th { |
|||
padding-top: 12px; |
|||
padding-bottom: 12px; |
|||
text-align: left; |
|||
background-color: #04AA6D; |
|||
color: white; |
|||
} |
|||
.button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #e48ac6; |
|||
margin: 10px 20px; |
|||
width: 130px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
<ng-container *ngIf="product.length !=0"> |
|||
<div class="card-table"> |
|||
<div class="card-product"> |
|||
<table class="table table-responsive" id="customers"> |
|||
<thead> |
|||
<tr> |
|||
<th>Sr.No</th> |
|||
<th>Product Name</th> |
|||
<th>Price</th> |
|||
<th>Quantity</th> |
|||
<th>Total</th> |
|||
<th>Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr *ngFor="let p of cartdto; let i = index"> |
|||
<td>{{i+1}}</td> |
|||
<td>{{p.name}}</td> |
|||
<td>{{p.price}}</td> |
|||
<td><button (click)="dec(p,p.cid!)">-</button>{{p.quantity}}<button (click)="inc(p,p.cid!)">+</button></td> |
|||
<!-- <td>{{p.quantity * p.price | number}}</td> --> |
|||
<td>{{p.price*p.quantity}}</td> |
|||
<td> |
|||
<button class="button" (click)="removeItem(p.cid!)">Delete</button> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="4"></td> |
|||
<td><button class="button" (click)="emptycart()">Empty Cart</button></td> |
|||
<td><button class="button" routerLink="/product">Buy More</button></td> |
|||
<td><button class="button" (click)=onCheckout() routerLink="/order">Checkout</button></td> |
|||
<td><strong>Grand Total : Rs.{{grandTotal1}}</strong></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
<ng-container *ngIf="product.length ==0"> |
|||
<div class="container"> |
|||
<div class="card"> |
|||
|
|||
</div> |
|||
<div class="center"> |
|||
<img src="" alt=""> |
|||
<h3>Your cart is empty!</h3> |
|||
<button class="button" routerLink="/product">Want to Buy!!</button> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { CartComponent } from './cart.component'; |
|||
|
|||
describe('CartComponent', () => { |
|||
let component: CartComponent; |
|||
let fixture: ComponentFixture<CartComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ CartComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(CartComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,159 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Cart } from 'src/app/model/cart.model'; |
|||
import { CartDto } from 'src/app/model/cartDto.model'; |
|||
import { OrderDto } from 'src/app/model/orderDto.model'; |
|||
import { Orders } from 'src/app/model/orders.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { OrdersService } from 'src/app/service/orders.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-cart', |
|||
templateUrl: './cart.component.html', |
|||
styleUrls: ['./cart.component.css'] |
|||
}) |
|||
export class CartComponent implements OnInit { |
|||
|
|||
public product : any=[]; |
|||
cartItem!:Cart[]; |
|||
cartdto!: CartDto[]; |
|||
orderdto!: OrderDto[]; |
|||
uid!:any; |
|||
msg: string=''; |
|||
public grandTotal : number = 0; |
|||
public grandTotal1 : any; |
|||
constructor(private cartService : CartService,private orderService:OrdersService) { |
|||
|
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.cartService.getProducts().subscribe(res=>{ |
|||
this.product = res; |
|||
// this.grandTotal = this.cartService.getTotalPrice();
|
|||
}) |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.getCartdto(this.uid).subscribe(res=>{ |
|||
this.cartdto = res; |
|||
}) |
|||
// this.uid = window.sessionStorage.getItem('userid');
|
|||
// this.orderService.getOrderdto(this.uid).subscribe(res=>{
|
|||
// this.orderdto = res;
|
|||
// })
|
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.CartSum(this.uid).subscribe(res=>{ |
|||
this.grandTotal1 = res; |
|||
}) |
|||
|
|||
} |
|||
|
|||
checkout(){ |
|||
this.orderService.checkout(); |
|||
} |
|||
onCheckout(){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.getCartdto(this.uid).subscribe(res=>{ |
|||
this.orderdto = res; |
|||
console.log(this.orderdto); |
|||
}) |
|||
this.orderService.addOrder(this.uid).subscribe(data=>{ |
|||
console.log('added to order'); |
|||
}) |
|||
} |
|||
removeItem(cid: number){ |
|||
// this.cartService.removeCartItem(item);
|
|||
this.cartService.deleteCartItem(cid).subscribe(data=>{ |
|||
this.cartdto.forEach((i,index)=>{ |
|||
if(i.cid == cid){ |
|||
this.cartdto.splice(index,1); |
|||
|
|||
} |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.CartSum(this.uid).subscribe(res=>{ |
|||
this.grandTotal1 = res; |
|||
console.log("deleted"); |
|||
}) |
|||
}) |
|||
}, |
|||
(err:any)=>{ |
|||
this.msg = 'unable to delete record'; |
|||
} |
|||
) |
|||
|
|||
} |
|||
removeOrder(oid: number){ |
|||
this.orderService.deleteOrderItem(oid).subscribe(data=>{ |
|||
this.orderdto.forEach((i,index)=>{ |
|||
if(i.cid == oid){ |
|||
this.orderdto.splice(index,1); |
|||
|
|||
} |
|||
|
|||
}) |
|||
}, |
|||
(err:any)=>{ |
|||
this.msg = 'unable to delete record'; |
|||
} |
|||
) |
|||
} |
|||
// onCartItemDelete(id: number){
|
|||
// this.cartService.deleteCartItem(id).subscribe(data=>{
|
|||
// this.cartdto.forEach((i,index)=>{
|
|||
// if(i.cid == id){
|
|||
// this.product.splice(index,1);
|
|||
|
|||
// }
|
|||
// })
|
|||
// },
|
|||
// (err:any)=>{
|
|||
// this.msg = 'unable to delete record';
|
|||
// }
|
|||
// )
|
|||
// }
|
|||
emptycart(){ |
|||
this.cartService.removeAllCart(); |
|||
} |
|||
inc(prod:any, cid: number){ |
|||
|
|||
if(prod.quantity != 5){ |
|||
prod.quantity = prod.quantity + 1; |
|||
this.cartService.postQuantity(cid, prod.quantity).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
|
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.CartSum(this.uid).subscribe(res=>{ |
|||
this.grandTotal1 = res; |
|||
}) |
|||
} |
|||
|
|||
} |
|||
dec(prod:any, cid: number){ |
|||
|
|||
if(prod.quantity != 1){ |
|||
|
|||
prod.quantity = prod.quantity - 1; |
|||
this.cartService.postQuantity(cid, prod.quantity).subscribe(data=>{ |
|||
console.log('deleted from cart'); |
|||
}) |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.CartSum(this.uid).subscribe(res=>{ |
|||
this.grandTotal1 = res; |
|||
}) |
|||
} |
|||
|
|||
} |
|||
// OnCheckout(){
|
|||
// let orders : Orders = {
|
|||
// name : this.accountForm.value.username,
|
|||
// fullname : this.accountForm.value.fullname,
|
|||
// gender : this.accountForm.value.gender,
|
|||
// phone : this.accountForm.value.phone,
|
|||
// email : this.accountForm.value.email,
|
|||
// address : this.accountForm.value.address,
|
|||
// city : this.accountForm.value.city,
|
|||
// state : this.accountForm.value.state,
|
|||
// pincode : this.accountForm.value.pincode,
|
|||
// apartments : this.accountForm.value.apartments,
|
|||
|
|||
|
|||
// }
|
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 700px; |
|||
padding: 8% 0 0; |
|||
margin: auto; |
|||
} |
|||
.form { |
|||
position: relative; |
|||
z-index: 1; |
|||
background: #FFFFFF; |
|||
max-width: 700px; |
|||
margin: 0 auto 100px; |
|||
padding: 45px; |
|||
text-align: center; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 50%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 10px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 15px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
<div class="login-page"> |
|||
<div class="form"> |
|||
<h2>Update Account</h2> |
|||
<br><br> |
|||
|
|||
<form [formGroup]='accountForm' (submit)='OnAccountFormSubmit()'> |
|||
|
|||
Username: <input type="text" formControlName="username"> |
|||
<div *ngIf="accountForm.controls['username'].invalid &&(accountForm.controls['username'].touched || |
|||
accountForm.controls['username'].dirty)">Invalid username</div> |
|||
<br><br> |
|||
Name: <input type="text" formControlName="fullname"> |
|||
<div *ngIf="accountForm.controls['fullname'].invalid &&(accountForm.controls['fullname'].touched || |
|||
accountForm.controls['fullname'].dirty)">Invalid full name</div> |
|||
<br><br> |
|||
Gender: <input type="text" formControlName="gender"> |
|||
<div *ngIf="accountForm.controls['gender'].invalid &&(accountForm.controls['gender'].touched || |
|||
accountForm.controls['gender'].dirty)">Invalid gender</div> |
|||
<br><br> |
|||
Phone no: <input type="number" formControlName="phone"> |
|||
<div *ngIf="accountForm.controls['phone'].invalid &&(accountForm.controls['phone'].touched || |
|||
accountForm.controls['phone'].dirty)">Invalid phone number</div> |
|||
<br><br> |
|||
Email: <input type="text" formControlName="email"> |
|||
<div *ngIf="accountForm.controls['email'].invalid &&(accountForm.controls['email'].touched || |
|||
accountForm.controls['email'].dirty)">Invalid email</div> |
|||
<br><br> |
|||
Building Address: <input type="text" formControlName="address"> |
|||
<div *ngIf="accountForm.controls['address'].invalid &&(accountForm.controls['address'].touched || |
|||
accountForm.controls['address'].dirty)">Invalid building address</div> |
|||
<br><br> |
|||
City: <input type="text" formControlName="city"> |
|||
<div *ngIf="accountForm.controls['city'].invalid &&(accountForm.controls['city'].touched || |
|||
accountForm.controls['city'].dirty)">Invalid city</div> |
|||
<br><br> |
|||
State: <input type="text" formControlName="state"> |
|||
<div *ngIf="accountForm.controls['state'].invalid &&(accountForm.controls['state'].touched || |
|||
accountForm.controls['state'].dirty)">Invalid state</div> |
|||
<br><br> |
|||
Pincode: <input type="text" formControlName="pincode"> |
|||
<div *ngIf="accountForm.controls['pincode'].invalid &&(accountForm.controls['pincode'].touched || |
|||
accountForm.controls['pincode'].dirty)">Invalid pincode</div> |
|||
<br><br> |
|||
Apartments: <input type="text" formControlName="apartments"> |
|||
<div *ngIf="accountForm.controls['apartments'].invalid &&(accountForm.controls['apartments'].touched || |
|||
accountForm.controls['apartments'].dirty)">Invalid no. of apartments</div> |
|||
<br><br> |
|||
<button [disabled]="!accountForm.valid">Update</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { EditAccountComponent } from './edit-account.component'; |
|||
|
|||
describe('EditAccountComponent', () => { |
|||
let component: EditAccountComponent; |
|||
let fixture: ComponentFixture<EditAccountComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ EditAccountComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(EditAccountComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,79 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { FormControl, FormGroup, Validators } from '@angular/forms'; |
|||
import { ActivatedRoute, Router } from '@angular/router'; |
|||
import { Account } from 'src/app/model/account.model'; |
|||
import { AccountService } from 'src/app/service/account.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-edit-account', |
|||
templateUrl: './edit-account.component.html', |
|||
styleUrls: ['./edit-account.component.css'] |
|||
}) |
|||
export class EditAccountComponent implements OnInit { |
|||
|
|||
aid: any ; |
|||
account: any; |
|||
accountForm: FormGroup; |
|||
|
|||
constructor(private actRoute: ActivatedRoute,private route : Router, private accountService : AccountService) { |
|||
this.accountForm = new FormGroup({ |
|||
username : new FormControl(''), |
|||
fullname: new FormControl(''), |
|||
gender: new FormControl(''), |
|||
phone: new FormControl(''), |
|||
email: new FormControl(''), |
|||
address: new FormControl(''), |
|||
city: new FormControl(''), |
|||
state: new FormControl(''), |
|||
pincode: new FormControl(''), |
|||
apartments: new FormControl('') |
|||
}); |
|||
} |
|||
|
|||
|
|||
ngOnInit(): void { |
|||
this.actRoute.paramMap.subscribe(params =>{ |
|||
this.aid = params.get('aid'); |
|||
}); |
|||
this.accountService.getOneAccount(this.aid).subscribe(data=>{ |
|||
this.account = data; |
|||
this.accountForm = new FormGroup({ |
|||
username : new FormControl(this.account.username,Validators.required), |
|||
fullname: new FormControl(this.account.fullname,Validators.required), |
|||
gender: new FormControl(this.account.gender,Validators.required), |
|||
phone: new FormControl(this.account.phone,Validators.required), |
|||
email: new FormControl(this.account.email,Validators.required), |
|||
address: new FormControl(this.account.address,Validators.required), |
|||
city: new FormControl(this.account.city,Validators.required), |
|||
state: new FormControl(this.account.state,Validators.required), |
|||
pincode: new FormControl(this.account.pincode,Validators.required), |
|||
apartments: new FormControl(this.account.apartments,Validators.required) |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
OnAccountFormSubmit(){ |
|||
let acc : Account = { |
|||
id : +this.aid, |
|||
username : this.accountForm.value.username, |
|||
fullname : this.accountForm.value.fullname, |
|||
gender : this.accountForm.value.gender, |
|||
phone : this.accountForm.value.phone, |
|||
email : this.accountForm.value.email, |
|||
address : this.accountForm.value.address, |
|||
city : this.accountForm.value.city, |
|||
state : this.accountForm.value.state, |
|||
pincode : this.accountForm.value.pincode, |
|||
apartments : this.accountForm.value.apartments, |
|||
|
|||
|
|||
} |
|||
this.accountService.editAccount(this.aid,acc).subscribe(data=>{ |
|||
this.route.navigateByUrl("/account/"+this.aid); |
|||
}, |
|||
(err: any) =>{ |
|||
console.log(err); |
|||
}); |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,131 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 260px; |
|||
padding: 8% 0 0; |
|||
align-items: left; |
|||
margin: 0 20px; |
|||
} |
|||
.form { |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
max-width: 165px; |
|||
margin: 50px 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: left; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
margin: 10px 0; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.form-control{ |
|||
border-radius: 3px; |
|||
width: 600px; |
|||
height: 30px; |
|||
margin-left: 23px; |
|||
} |
|||
.search-icon { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 50%; |
|||
top: 20px; |
|||
color: black; |
|||
} |
|||
button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #62a7c2; |
|||
margin: 30px 20px; |
|||
width: 100px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
|
|||
<div *ngFor="let p of products" class="form"> |
|||
|
|||
|
|||
<img src={{p.imag}} width="150px" height="100px"><br> <b>Item Name:</b> {{p.name}} <br> <b>Price:</b> {{p.price}} <br><b>Category:</b> {{p.category}} |
|||
|
|||
<br> |
|||
<button (click)=addtocart1(p.id!)>Add to cart</button> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { FruitsComponent } from './fruits.component'; |
|||
|
|||
describe('FruitsComponent', () => { |
|||
let component: FruitsComponent; |
|||
let fixture: ComponentFixture<FruitsComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ FruitsComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(FruitsComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,39 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { Product } from 'src/app/model/product.model'; |
|||
import { ProductService } from 'src/app/service/product.service'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
|
|||
|
|||
|
|||
|
|||
@Component({ |
|||
selector: 'app-fruits', |
|||
templateUrl: './fruits.component.html', |
|||
styleUrls: ['./fruits.component.css'] |
|||
}) |
|||
export class FruitsComponent implements OnInit { |
|||
|
|||
products:Product[]; |
|||
name:string; |
|||
uid!:any; |
|||
constructor(private productService:ProductService, private route:Router,private cartService:CartService) { |
|||
this.products=[]; |
|||
this.name='Fruits'; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.productService.getProductsByCategory(this.name).subscribe(data=>{ |
|||
this.products=data; |
|||
}) |
|||
} |
|||
addtocart(p:any){ |
|||
this.cartService.addtoCart(p); |
|||
} |
|||
addtocart1(pid:any){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.postCart(this.uid, pid).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
} |
|||
} |
|||
| Before | After |
|---|---|
|
|
| Width: 343 | Height: 147 | Size: 6.3 KiB |
@ -0,0 +1,26 @@ |
|||
.button { |
|||
font: bold 15px Arial; |
|||
text-decoration: none; |
|||
background-color: #5fe697; |
|||
color: #05151f; |
|||
border-radius: 4px; |
|||
padding: 6px 8px 6px 8px; |
|||
border-top: 1px solid #CCCCCC; |
|||
border-right: 1px solid #333333; |
|||
border-bottom: 1px solid #333333; |
|||
border-left: 1px solid #CCCCCC; |
|||
cursor: pointer; |
|||
} |
|||
.bg { |
|||
/* The image used */ |
|||
background-image: url("g1.jpg"); |
|||
|
|||
/* Full height */ |
|||
height: 100%; |
|||
width: 100%; |
|||
/* Center and scale the image nicely */ |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
opacity: 0.9; |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
<!-- <div class="bg"> --> |
|||
<a (click)="onAccount()" class="button">My Account</a> |
|||
|
|||
<a routerLink="/product" class="button">Items Available</a> |
|||
|
|||
<a routerLink="/cart" class="button">My Cart</a> |
|||
|
|||
<a routerLink="/order" class="button">My Order</a> |
|||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|||
<router-outlet></router-outlet> |
|||
<!-- </div> --> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { HomeComponent } from './home.component'; |
|||
|
|||
describe('HomeComponent', () => { |
|||
let component: HomeComponent; |
|||
let fixture: ComponentFixture<HomeComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ HomeComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(HomeComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,27 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { AccountService } from 'src/app/service/account.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-home', |
|||
templateUrl: './home.component.html', |
|||
styleUrls: ['./home.component.css'] |
|||
}) |
|||
export class HomeComponent implements OnInit { |
|||
uid!:any; |
|||
constructor(private accountService : AccountService, private route: Router) { } |
|||
|
|||
ngOnInit(): void { |
|||
this.accountService.getDetails(window.sessionStorage.getItem("username")).subscribe(data =>{ |
|||
window.sessionStorage.setItem('userid',String(data.id)); |
|||
console.log("home") |
|||
}); |
|||
} |
|||
|
|||
onAccount(){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.route.navigateByUrl('/account/'+this.uid); |
|||
console.log("get by id") |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,131 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 260px; |
|||
padding: 8% 0 0; |
|||
align-items: left; |
|||
margin: 0 20px; |
|||
} |
|||
.form { |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
max-width: 165px; |
|||
margin: 50px 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: left; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
margin: 10px 0; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.form-control{ |
|||
border-radius: 3px; |
|||
width: 600px; |
|||
height: 30px; |
|||
margin-left: 23px; |
|||
} |
|||
.search-icon { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 50%; |
|||
top: 20px; |
|||
color: black; |
|||
} |
|||
button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #62a7c2; |
|||
margin: 30px 20px; |
|||
width: 100px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
|
|||
<div *ngFor="let p of products" class="form"> |
|||
|
|||
|
|||
<img src={{p.imag}} width="150px" height="100px"><br> <b>Item Name:</b> {{p.name}} <br> <b>Price:</b> {{p.price}} <br><b>Category:</b> {{p.category}} |
|||
|
|||
<br> |
|||
<button (click)=addtocart1(p.id!)>Add to cart</button> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { MedicinesComponent } from './medicines.component'; |
|||
|
|||
describe('MedicinesComponent', () => { |
|||
let component: MedicinesComponent; |
|||
let fixture: ComponentFixture<MedicinesComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ MedicinesComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(MedicinesComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,37 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { Product } from 'src/app/model/product.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { ProductService } from 'src/app/service/product.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-medicines', |
|||
templateUrl: './medicines.component.html', |
|||
styleUrls: ['./medicines.component.css'] |
|||
}) |
|||
export class MedicinesComponent implements OnInit { |
|||
|
|||
products:Product[]; |
|||
name:string; |
|||
uid!:any; |
|||
constructor(private productService:ProductService, private route:Router,private cartService:CartService) { |
|||
this.products=[]; |
|||
this.name='Medicines'; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.productService.getProductsByCategory(this.name).subscribe(data=>{ |
|||
this.products=data; |
|||
}) |
|||
} |
|||
addtocart(p:any){ |
|||
this.cartService.addtoCart(p); |
|||
} |
|||
addtocart1(pid:any){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.postCart(this.uid, pid).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
.card{ |
|||
height: 60vh; |
|||
width: 25px; |
|||
padding: 25px; |
|||
} |
|||
.center{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
text-align: center; |
|||
} |
|||
#customers { |
|||
font-family: Arial, Helvetica, sans-serif; |
|||
border-collapse: collapse; |
|||
width: 60%; |
|||
align-self: center; |
|||
} |
|||
|
|||
#customers td, #customers th { |
|||
border: 3px solid #ddd; |
|||
padding: 8px; |
|||
} |
|||
|
|||
#customers tr:nth-child(even){background-color: #f2f2f2;} |
|||
|
|||
#customers tr:hover {background-color: #ddd;} |
|||
|
|||
#customers th { |
|||
padding-top: 12px; |
|||
padding-bottom: 12px; |
|||
text-align: left; |
|||
background-color: #04AA6D; |
|||
color: white; |
|||
} |
|||
button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #e48ac6; |
|||
margin: 10px 20px; |
|||
width: 130px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
|
|||
<div class="card-table"> |
|||
<div class="card-product"> |
|||
<table class="table table-responsive" id="customers" class="center"> |
|||
<thead> |
|||
<tr> |
|||
<th>Order.No</th> |
|||
<th>Product Details</th> |
|||
<th>Final Price</th> |
|||
<th>Delivery Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<!-- <tr *ngFor="let p of product; let i = index"> --> |
|||
<td>OODR1</td> |
|||
<tbody> |
|||
<tr *ngFor="let p of orderdto; let i = index"> |
|||
<td>{{p.name}} Rs.{{p.totalPrice}}</td> |
|||
</tr> |
|||
</tbody> |
|||
<td> Rs.{{grandTotal1}}</td> |
|||
<td>To be delivered by tomorrow 8:30 A.M</td> |
|||
|
|||
</tr> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { OrdersComponent } from './orders.component'; |
|||
|
|||
describe('OrdersComponent', () => { |
|||
let component: OrdersComponent; |
|||
let fixture: ComponentFixture<OrdersComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ OrdersComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(OrdersComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,38 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { OrderDto } from 'src/app/model/orderDto.model'; |
|||
import { Orders } from 'src/app/model/orders.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { OrdersService } from 'src/app/service/orders.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-orders', |
|||
templateUrl: './orders.component.html', |
|||
styleUrls: ['./orders.component.css'] |
|||
}) |
|||
export class OrdersComponent implements OnInit { |
|||
|
|||
public product : any=[]; |
|||
cartItem!:Orders[]; |
|||
orderdto!: OrderDto[]; |
|||
public grandTotal1 : any; |
|||
uid!:any; |
|||
public grandTotal : number = 0; |
|||
constructor(private cartService : CartService, private orderService:OrdersService) { } |
|||
|
|||
ngOnInit(): void { |
|||
// this.cartService.getProducts().subscribe(res=>{
|
|||
// this.product = res;
|
|||
// // this.grandTotal = this.cartService.getTotalPrice();
|
|||
// })
|
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.getCartdto(this.uid).subscribe(res=>{ |
|||
this.orderdto = res; |
|||
console.log(this.orderdto); |
|||
}) |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.CartSum(this.uid).subscribe(res=>{ |
|||
this.grandTotal1 = res; |
|||
}) |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,146 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 260px; |
|||
padding: 8% 0 0; |
|||
align-items: left; |
|||
margin: 0 20px; |
|||
} |
|||
.form { |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
max-width: 165px; |
|||
margin: 50px 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: left; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
margin: 10px 0; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.form-control{ |
|||
border-radius: 3px; |
|||
width: 600px; |
|||
height: 30px; |
|||
margin-left: 23px; |
|||
} |
|||
.search-icon { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 50%; |
|||
top: 20px; |
|||
color: black; |
|||
} |
|||
.button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
text-decoration: none; |
|||
background: #62a7c2; |
|||
/* /* margin-top: 70px; */ |
|||
margin: 0 20px; |
|||
width: 100px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
#button { |
|||
font: bold 15px Arial; |
|||
text-decoration: none; |
|||
background-color: #5fe697; |
|||
color: #05151f; |
|||
border-radius: 4px; |
|||
padding: 6px 8px 6px 8px; |
|||
border-top: 1px solid #CCCCCC; |
|||
border-right: 1px solid #333333; |
|||
border-bottom: 1px solid #333333; |
|||
border-left: 1px solid #CCCCCC; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
|
|||
<br><br> |
|||
<div class="form-group"> |
|||
<input type="text" class="form-control" [(ngModel)]="searchTerm" (keyup)="search($event)" placeholder="search products"> |
|||
|
|||
<span id="button" (click)='back()'>GO TO CART</span> |
|||
</div> |
|||
<br><br> |
|||
<br><br> |
|||
<!-- <button (click)="filter('')">All Items</button> --> |
|||
<!-- --> |
|||
<a routerLink="/fruits" class="button">Fruits</a> |
|||
<a routerLink="/vegetables" class="button">Vegetables</a> |
|||
<a routerLink="/snacks" class="button">Snacks</a> |
|||
<a routerLink="/medicines" class="button">Medicines</a> |
|||
<a routerLink="/beverages" class="button">Beverages</a> |
|||
|
|||
<br><br> |
|||
<div *ngFor="let p of products | filter:searchKey:'name'" class="form"> |
|||
<span class="fas fa-search search-icon"></span> |
|||
|
|||
<img src={{p.imag}} width="150px" height="100px"><br> <b>Item Name:</b> {{p.name}} <br> <b>Price:</b> {{p.price}} <br><b>Category:</b> {{p.category}} |
|||
|
|||
<br> |
|||
<button (click)=addtocart1(p.id!) (click)=addtocart(p) >Add to cart</button> |
|||
</div> |
|||
<!-- (click)=onCheckout(p.id!) --> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { ProductComponent } from './product.component'; |
|||
|
|||
describe('ProductComponent', () => { |
|||
let component: ProductComponent; |
|||
let fixture: ComponentFixture<ProductComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ ProductComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(ProductComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,74 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
|
|||
import { Product } from 'src/app/model/product.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { OrdersService } from 'src/app/service/orders.service'; |
|||
import { ProductService } from 'src/app/service/product.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-product', |
|||
templateUrl: './product.component.html', |
|||
styleUrls: ['./product.component.css'] |
|||
}) |
|||
export class ProductComponent implements OnInit { |
|||
|
|||
products : Product[]; |
|||
uid! : any; |
|||
public filterCategory : any; |
|||
searchKey:string=""; |
|||
public searchTerm !:string; |
|||
msg:string; |
|||
constructor(private productService : ProductService, private route: Router,private cartService:CartService, private orderService:OrdersService){ |
|||
this.products = []; |
|||
this.msg =''; |
|||
|
|||
} |
|||
ngOnInit(): void { |
|||
this.productService.getProducts().subscribe(data =>{ |
|||
this.products = data; |
|||
this.filterCategory = data; |
|||
this.products.forEach((a:any)=>{ |
|||
Object.assign(a,{quantity:1,total:a.price}); |
|||
}); |
|||
}); |
|||
this.cartService.search.subscribe((val:any)=>{ |
|||
this.searchKey = val; |
|||
}) |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
addtocart(p:any){ |
|||
this.cartService.addtoCart(p); |
|||
} |
|||
addtocart1(pid:any){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.postCart(this.uid, pid).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
} |
|||
// onCheckout(pid:any){
|
|||
// this.uid = window.sessionStorage.getItem('userid');
|
|||
// this.orderService.postOrder(this.uid, pid).subscribe(data=>{
|
|||
// console.log('added to order');
|
|||
// })
|
|||
// }
|
|||
filter(category:string){ |
|||
this.filterCategory = this.products.filter((a:any)=>{ |
|||
if(a.category == category || category==''){ |
|||
return a; |
|||
} |
|||
}) |
|||
} |
|||
search(event:any){ |
|||
this.searchTerm = (event.target as HTMLInputElement).value; |
|||
console.log(this.searchTerm); |
|||
this.cartService.search.next(this.searchTerm); |
|||
} |
|||
back(){ |
|||
this.route.navigateByUrl("/cart"); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,171 @@ |
|||
/* * {box-sizing: border-box} |
|||
|
|||
/* Full-width input fields */ |
|||
/* input[type=text], input[type=password], input[type=number] { |
|||
width: 70%; |
|||
padding: 10px; |
|||
margin: 2px 0 22px 0; |
|||
display: inline-block; |
|||
border: none; |
|||
background: #f1f1f1; */ |
|||
/* } |
|||
|
|||
input[type=text]:focus, input[type=password]:focus { |
|||
background-color: #ddd; |
|||
outline: none; |
|||
} |
|||
|
|||
hr { |
|||
border: 1px solid #f1f1f1; |
|||
margin-bottom: 25px; |
|||
} |
|||
|
|||
/* Set a style for all buttons */ |
|||
/* button { |
|||
background-color: #04AA6D; |
|||
color: white; |
|||
padding: 14px 20px; |
|||
margin: 8px 0; |
|||
border: none; |
|||
cursor: pointer; |
|||
width: 100%; |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
button:hover { |
|||
opacity:1; |
|||
} */ |
|||
|
|||
/* Extra styles for the cancel button */ |
|||
/* .cancelbtn { |
|||
padding: 14px 20px; |
|||
background-color: #f44336; |
|||
} */ |
|||
|
|||
/* Float cancel and signup buttons and add an equal width */ |
|||
/* .cancelbtn, .signupbtn { |
|||
float: left; |
|||
width: 50%; |
|||
} */ |
|||
|
|||
/* Add padding to container elements */ |
|||
/* .container { |
|||
padding: 50px; |
|||
width: 500px; |
|||
align-self: center; |
|||
margin-left: 400px; |
|||
} */ |
|||
|
|||
/* Clear floats */ |
|||
/* .clearfix::after { |
|||
content: ""; |
|||
clear: both; |
|||
display: table; |
|||
} */ |
|||
|
|||
/* Change styles for cancel button and signup button on extra small screens */ |
|||
/* @media screen and (max-width: 300px) { |
|||
.cancelbtn, .signupbtn { |
|||
width: 100%; |
|||
} |
|||
} */ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 700px; |
|||
padding: 8% 0 0; |
|||
margin: auto; |
|||
} |
|||
.form { |
|||
position: relative; |
|||
z-index: 1; |
|||
background: #FFFFFF; |
|||
max-width: 700px; |
|||
margin: 0 auto 100px; |
|||
padding: 45px; |
|||
text-align: center; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 50%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 10px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 15px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
@ -0,0 +1,65 @@ |
|||
|
|||
<div class="login-page"> |
|||
<div class="form"> |
|||
<!-- <div class="container"> --> |
|||
<h1>Register Yourself</h1> |
|||
<p>Please fill in this form to create an account.</p> |
|||
<hr> |
|||
|
|||
<form [formGroup]='accountForm' (submit)='OnAccountFormSubmit()'> |
|||
|
|||
Username: <input type="text" formControlName="username"> |
|||
<div *ngIf="accountForm.controls['username'].invalid &&(accountForm.controls['username'].touched || |
|||
accountForm.controls['username'].dirty)">Invalid username</div> |
|||
<br><br> |
|||
Password: <input type="password" formControlName="password"> |
|||
<div *ngIf="accountForm.controls['password'].invalid &&(accountForm.controls['password'].touched || |
|||
accountForm.controls['password'].dirty)">Invalid password</div> |
|||
<br><br> |
|||
Name: <input type="text" formControlName="fullname"> |
|||
<div *ngIf="accountForm.controls['fullname'].invalid &&(accountForm.controls['fullname'].touched || |
|||
accountForm.controls['fullname'].dirty)">Invalid full name</div> |
|||
<br><br> |
|||
Gender: <input type="text" formControlName="gender"> |
|||
<div *ngIf="accountForm.controls['gender'].invalid &&(accountForm.controls['gender'].touched || |
|||
accountForm.controls['gender'].dirty)">Invalid gender</div> |
|||
<br><br> |
|||
Phone no: <input type="number" formControlName="phone"> |
|||
<div *ngIf="accountForm.controls['phone'].invalid &&(accountForm.controls['phone'].touched || |
|||
accountForm.controls['phone'].dirty)">Invalid phone number</div> |
|||
<br><br> |
|||
Email: <input type="text" formControlName="email"> |
|||
<div *ngIf="accountForm.controls['email'].invalid &&(accountForm.controls['email'].touched || |
|||
accountForm.controls['email'].dirty)">Invalid email</div> |
|||
<br><br> |
|||
Building Address: <input type="text" formControlName="address"> |
|||
<div *ngIf="accountForm.controls['address'].invalid &&(accountForm.controls['address'].touched || |
|||
accountForm.controls['address'].dirty)">Invalid building address</div> |
|||
<br><br> |
|||
City: <input type="text" formControlName="city"> |
|||
<div *ngIf="accountForm.controls['city'].invalid &&(accountForm.controls['city'].touched || |
|||
accountForm.controls['city'].dirty)">Invalid city</div> |
|||
<br><br> |
|||
State: <input type="text" formControlName="state"> |
|||
<div *ngIf="accountForm.controls['state'].invalid &&(accountForm.controls['state'].touched || |
|||
accountForm.controls['state'].dirty)">Invalid state</div> |
|||
<br><br> |
|||
Pincode: <input type="text" formControlName="pincode"> |
|||
<div *ngIf="accountForm.controls['pincode'].invalid &&(accountForm.controls['pincode'].touched || |
|||
accountForm.controls['pincode'].dirty)">Invalid pincode</div> |
|||
<br><br> |
|||
Apartments: <input type="text" formControlName="apartments"> |
|||
<div *ngIf="accountForm.controls['apartments'].invalid &&(accountForm.controls['apartments'].touched || |
|||
accountForm.controls['apartments'].dirty)">Invalid no. of apartments</div> |
|||
<br><br> |
|||
<div class="clearfix"> |
|||
<button [disabled]="!accountForm.valid">Register</button> |
|||
</div> |
|||
</form> |
|||
|
|||
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p> |
|||
|
|||
|
|||
<!-- </div> --> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { SignUpComponent } from './sign-up.component'; |
|||
|
|||
describe('SignUpComponent', () => { |
|||
let component: SignUpComponent; |
|||
let fixture: ComponentFixture<SignUpComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ SignUpComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(SignUpComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,67 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { FormControl, FormGroup, Validators } from '@angular/forms'; |
|||
import { ActivatedRoute, Router } from '@angular/router'; |
|||
import { Account } from 'src/app/model/account.model'; |
|||
import { AccountService } from 'src/app/service/account.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-sign-up', |
|||
templateUrl: './sign-up.component.html', |
|||
styleUrls: ['./sign-up.component.css'] |
|||
}) |
|||
export class SignUpComponent implements OnInit { |
|||
|
|||
|
|||
accountForm: FormGroup; |
|||
|
|||
constructor(private route : Router, private accountService : AccountService) { |
|||
|
|||
} |
|||
|
|||
|
|||
ngOnInit(): void { |
|||
|
|||
this.accountForm = new FormGroup({ |
|||
username : new FormControl('',Validators.required), |
|||
password : new FormControl('',Validators.required), |
|||
fullname: new FormControl('',Validators.required), |
|||
gender: new FormControl('',Validators.required), |
|||
phone: new FormControl('',Validators.required), |
|||
email: new FormControl('',Validators.required), |
|||
address: new FormControl('',Validators.required), |
|||
city: new FormControl('',Validators.required), |
|||
state: new FormControl('',Validators.required), |
|||
pincode: new FormControl('',Validators.required), |
|||
apartments: new FormControl('',Validators.required) |
|||
}); |
|||
|
|||
} |
|||
|
|||
OnAccountFormSubmit(){ |
|||
let acc : Account = { |
|||
username : this.accountForm.value.username, |
|||
password : this.accountForm.value.password, |
|||
fullname : this.accountForm.value.fullname, |
|||
gender : this.accountForm.value.gender, |
|||
phone : this.accountForm.value.phone, |
|||
email : this.accountForm.value.email, |
|||
address : this.accountForm.value.address, |
|||
city : this.accountForm.value.city, |
|||
state : this.accountForm.value.state, |
|||
pincode : this.accountForm.value.pincode, |
|||
apartments : this.accountForm.value.apartments, |
|||
|
|||
|
|||
} |
|||
this.accountService.postAccount(acc).subscribe(data=>{ |
|||
alert("You are successfully registered"); |
|||
this.route.navigateByUrl("/login"); |
|||
}, |
|||
(err: any) =>{ |
|||
console.log(err); |
|||
alert("Something went wrong!!"); |
|||
}); |
|||
|
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,131 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 260px; |
|||
padding: 8% 0 0; |
|||
align-items: left; |
|||
margin: 0 20px; |
|||
} |
|||
.form { |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
max-width: 165px; |
|||
margin: 50px 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: left; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
margin: 10px 0; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.form-control{ |
|||
border-radius: 3px; |
|||
width: 600px; |
|||
height: 30px; |
|||
margin-left: 23px; |
|||
} |
|||
.search-icon { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 50%; |
|||
top: 20px; |
|||
color: black; |
|||
} |
|||
button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #62a7c2; |
|||
margin: 30px 20px; |
|||
width: 100px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
|
|||
<div *ngFor="let p of products" class="form"> |
|||
|
|||
|
|||
<img src={{p.imag}} width="150px" height="100px"><br> <b>Item Name:</b> {{p.name}} <br> <b>Price:</b> {{p.price}} <br><b>Category:</b> {{p.category}} |
|||
|
|||
<br> |
|||
<button (click)=addtocart1(p.id!)>Add to cart</button> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { SnacksComponent } from './snacks.component'; |
|||
|
|||
describe('SnacksComponent', () => { |
|||
let component: SnacksComponent; |
|||
let fixture: ComponentFixture<SnacksComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ SnacksComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(SnacksComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,38 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { Product } from 'src/app/model/product.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { ProductService } from 'src/app/service/product.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-snacks', |
|||
templateUrl: './snacks.component.html', |
|||
styleUrls: ['./snacks.component.css'] |
|||
}) |
|||
export class SnacksComponent implements OnInit { |
|||
|
|||
products:Product[]; |
|||
name:string; |
|||
uid!:any; |
|||
constructor(private productService:ProductService, private route:Router,private cartService:CartService) { |
|||
this.products=[]; |
|||
this.name='Snacks'; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.productService.getProductsByCategory(this.name).subscribe(data=>{ |
|||
this.products=data; |
|||
}) |
|||
} |
|||
addtocart(p:any){ |
|||
this.cartService.addtoCart(p); |
|||
} |
|||
addtocart1(pid:any){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.postCart(this.uid, pid).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
} |
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,131 @@ |
|||
@import url(https://fonts.googleapis.com/css?family=Roboto:300); |
|||
|
|||
.login-page { |
|||
width: 260px; |
|||
padding: 8% 0 0; |
|||
align-items: left; |
|||
margin: 0 20px; |
|||
} |
|||
.form { |
|||
display: inline-block; |
|||
background: #FFFFFF; |
|||
max-width: 165px; |
|||
margin: 50px 30px; |
|||
padding: 45px; |
|||
text-align: left; |
|||
align-self: left; |
|||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); |
|||
} |
|||
.form input { |
|||
font-family: "Roboto", sans-serif; |
|||
outline: 0; |
|||
background: #f2f2f2; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0 0 15px; |
|||
padding: 15px; |
|||
box-sizing: border-box; |
|||
font-size: 14px; |
|||
} |
|||
.form button { |
|||
font-family: "Roboto", sans-serif; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #4CAF50; |
|||
margin: 10px 0; |
|||
width: 100%; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
.form button:hover,.form button:active,.form button:focus { |
|||
background: #43A047; |
|||
} |
|||
.form .message { |
|||
margin: 15px 0 0; |
|||
color: #b3b3b3; |
|||
font-size: 12px; |
|||
} |
|||
.form .message a { |
|||
color: #4CAF50; |
|||
text-decoration: none; |
|||
} |
|||
.form .register-form { |
|||
display: none; |
|||
} |
|||
.container { |
|||
position: relative; |
|||
z-index: 1; |
|||
max-width: 300px; |
|||
margin: 0 auto; |
|||
} |
|||
.container:before, .container:after { |
|||
content: ""; |
|||
display: block; |
|||
clear: both; |
|||
} |
|||
.container .info { |
|||
margin: 50px auto; |
|||
text-align: center; |
|||
} |
|||
.container .info h1 { |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
font-size: 36px; |
|||
font-weight: 300; |
|||
color: #1a1a1a; |
|||
} |
|||
.container .info span { |
|||
color: #4d4d4d; |
|||
font-size: 12px; |
|||
} |
|||
.container .info span a { |
|||
color: #000000; |
|||
text-decoration: none; |
|||
} |
|||
.container .info span .fa { |
|||
color: #EF3B3A; |
|||
} |
|||
body { |
|||
background: #76b852; /* fallback for old browsers */ |
|||
background: -webkit-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -moz-linear-gradient(right, #76b852, #8DC26F); |
|||
background: -o-linear-gradient(right, #76b852, #8DC26F); |
|||
background: linear-gradient(to left, #76b852, #8DC26F); |
|||
font-family: "Roboto", sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
.form-control{ |
|||
border-radius: 3px; |
|||
width: 600px; |
|||
height: 30px; |
|||
margin-left: 23px; |
|||
} |
|||
.search-icon { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 50%; |
|||
top: 20px; |
|||
color: black; |
|||
} |
|||
button { |
|||
font-family: "Roboto", sans-serif; |
|||
border-radius: 6px; |
|||
text-transform: uppercase; |
|||
outline: 0; |
|||
background: #62a7c2; |
|||
margin: 30px 20px; |
|||
width: 100px; |
|||
border: 0; |
|||
padding: 10px; |
|||
color: #FFFFFF; |
|||
font-size: 14px; |
|||
-webkit-transition: all 0.3 ease; |
|||
transition: all 0.3 ease; |
|||
cursor: pointer; |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
|
|||
<div *ngFor="let p of products" class="form"> |
|||
|
|||
|
|||
<img src={{p.imag}} width="150px" height="100px"><br> <b>Item Name:</b> {{p.name}} <br> <b>Price:</b> {{p.price}} <br><b>Category:</b> {{p.category}} |
|||
|
|||
<br> |
|||
<button (click)=addtocart1(p.id!)>Add to cart</button> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
|
|||
import { VegetablesComponent } from './vegetables.component'; |
|||
|
|||
describe('VegetablesComponent', () => { |
|||
let component: VegetablesComponent; |
|||
let fixture: ComponentFixture<VegetablesComponent>; |
|||
|
|||
beforeEach(async () => { |
|||
await TestBed.configureTestingModule({ |
|||
declarations: [ VegetablesComponent ] |
|||
}) |
|||
.compileComponents(); |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
fixture = TestBed.createComponent(VegetablesComponent); |
|||
component = fixture.componentInstance; |
|||
fixture.detectChanges(); |
|||
}); |
|||
|
|||
it('should create', () => { |
|||
expect(component).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,36 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { Product } from 'src/app/model/product.model'; |
|||
import { CartService } from 'src/app/service/cart.service'; |
|||
import { ProductService } from 'src/app/service/product.service'; |
|||
|
|||
@Component({ |
|||
selector: 'app-vegetables', |
|||
templateUrl: './vegetables.component.html', |
|||
styleUrls: ['./vegetables.component.css'] |
|||
}) |
|||
export class VegetablesComponent implements OnInit { |
|||
|
|||
products:Product[]; |
|||
name:string; |
|||
uid!:any; |
|||
constructor(private productService:ProductService, private route:Router,private cartService:CartService) { |
|||
this.products=[]; |
|||
this.name='Vegetables'; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.productService.getProductsByCategory(this.name).subscribe(data=>{ |
|||
this.products=data; |
|||
}) |
|||
} |
|||
addtocart(p:any){ |
|||
this.cartService.addtoCart(p); |
|||
} |
|||
addtocart1(pid:any){ |
|||
this.uid = window.sessionStorage.getItem('userid'); |
|||
this.cartService.postCart(this.uid, pid).subscribe(data=>{ |
|||
console.log('added to cart'); |
|||
}) |
|||
} |
|||
} |
|||
| Before | After |
|---|---|
|
|
| Width: 343 | Height: 147 | Size: 6.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 1600 | Height: 900 | Size: 236 KiB |
| Before | After |
|---|---|
|
|
| Width: 299 | Height: 168 | Size: 7.6 KiB |
@ -0,0 +1,31 @@ |
|||
export class Account{ |
|||
|
|||
id? : number; |
|||
username? : any ; |
|||
password? : string; |
|||
fullname? : string; |
|||
gender? : string; |
|||
phone? : number; |
|||
email? : string; |
|||
address? : string; |
|||
city? : string; |
|||
state? : string; |
|||
pincode? : number; |
|||
apartments? : string; |
|||
constructor() |
|||
{ |
|||
this.id=0; |
|||
this.username='' ; |
|||
this.password=''; |
|||
this.fullname='' ; |
|||
this.gender=''; |
|||
this.phone=0; |
|||
this.email=''; |
|||
this.address=''; |
|||
this.city=''; |
|||
this.state=''; |
|||
this.pincode=0; |
|||
this.apartments=''; |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,34 @@ |
|||
|
|||
|
|||
|
|||
export class Cart{ |
|||
id? : number; |
|||
quantity? : number ; |
|||
totalPrice? : number; |
|||
product? : Product; |
|||
account? :Account; |
|||
|
|||
} |
|||
export class Product{ |
|||
|
|||
productid? : number; |
|||
name? : string ; |
|||
price? : number; |
|||
category? : string; |
|||
imag? : string; |
|||
} |
|||
export class Account{ |
|||
|
|||
id? : number; |
|||
username? : any ; |
|||
password? : string; |
|||
fullname? : string; |
|||
gender? : string; |
|||
phone? : number; |
|||
email? : string; |
|||
address? : string; |
|||
city? : string; |
|||
state? : string; |
|||
pincode? : number; |
|||
apartments? : string; |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
export class CartDto{ |
|||
cid? : any; |
|||
quantity? : any ; |
|||
totalPrice? : any; |
|||
|
|||
pid? : any; |
|||
imag? : string; |
|||
name? : string; |
|||
price? : any; |
|||
|
|||
uid? : any; |
|||
username? : string; |
|||
apartments? : string; |
|||
|
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
export class OrderDto{ |
|||
cid? : any; |
|||
quantity? : any ; |
|||
totalPrice? : any; |
|||
|
|||
pid? : any; |
|||
imag? : string; |
|||
name? : string; |
|||
price? : any; |
|||
|
|||
uid? : any; |
|||
username? : string; |
|||
apartments? : string; |
|||
|
|||
} |
|||
@ -0,0 +1,47 @@ |
|||
// export class Orders{
|
|||
// id? : number;
|
|||
// name? : string ;
|
|||
// price? : number;
|
|||
// deliveryStatus? : string;
|
|||
|
|||
// constructor()
|
|||
// {
|
|||
// this.id=0;
|
|||
// this.name='' ;
|
|||
// this.price=0 ;
|
|||
// this.deliveryStatus='';
|
|||
// }
|
|||
// }
|
|||
|
|||
export class Orders{ |
|||
id? : number; |
|||
quantity? : number ; |
|||
totalPrice? : number; |
|||
uid? : number; |
|||
username? :String; |
|||
pid? : number; |
|||
pname? : String; |
|||
} |
|||
// export class Product{
|
|||
|
|||
// productid? : number;
|
|||
// name? : string ;
|
|||
// price? : number;
|
|||
// category? : string;
|
|||
// imag? : string;
|
|||
// }
|
|||
// export class Account{
|
|||
|
|||
// id? : number;
|
|||
// username? : any ;
|
|||
// password? : string;
|
|||
// fullname? : string;
|
|||
// gender? : string;
|
|||
// phone? : number;
|
|||
// email? : string;
|
|||
// address? : string;
|
|||
// city? : string;
|
|||
// state? : string;
|
|||
// pincode? : number;
|
|||
// apartments? : string;
|
|||
// }
|
|||
@ -0,0 +1,17 @@ |
|||
|
|||
|
|||
export class Product{ |
|||
|
|||
id? : number; |
|||
name? : string ; |
|||
price? : number; |
|||
category? : string; |
|||
imag? : string; |
|||
constructor() |
|||
{ |
|||
this.id=0; |
|||
this.name='' ; |
|||
this.price=0 ; |
|||
this.category=''; |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { AccountService } from './account.service'; |
|||
|
|||
describe('AccountService', () => { |
|||
let service: AccountService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(AccountService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,64 @@ |
|||
import { HttpClient, HttpHeaders } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
|
|||
import { Observable } from 'rxjs'; |
|||
import { Account } from '../model/account.model'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class AccountService { |
|||
|
|||
path : string = 'http://localhost:17599/userapi'; |
|||
constructor(private httpClient: HttpClient) { |
|||
|
|||
} |
|||
public getAccounts() : Observable<Account[]>{ |
|||
|
|||
|
|||
let account_get_api= this.path + '/user'; |
|||
return this.httpClient.get<Account[]>(account_get_api); |
|||
} |
|||
public postAccount(account : Account) : Observable<any>{ |
|||
let authCode = btoa(account.username+':'+account.password) |
|||
account.username = authCode; |
|||
account.password = ''; |
|||
let account_get_api= this.path + '/signup'; |
|||
return this.httpClient.post<any>(account_get_api,account); |
|||
|
|||
} |
|||
login(user : any):Observable<Account[]>{ |
|||
let httpOptions = { |
|||
headers : new HttpHeaders({ |
|||
'Content-Type' : 'application/json', |
|||
'Authorization' : 'Basic ' + btoa(user.username + ':' +user.password) |
|||
}) |
|||
} |
|||
window.sessionStorage.setItem("code",btoa(user.username+':'+user.password)); |
|||
let login_api= this.path + '/login'; |
|||
return this.httpClient.get<Account[]>(login_api,httpOptions); |
|||
} |
|||
public getDetails(user:any):Observable<Account>{ |
|||
console.log("j",user) |
|||
let user_api=this.path+'/username/'+user; |
|||
return this.httpClient.get<any>(user_api); |
|||
} |
|||
|
|||
|
|||
|
|||
public deleteAccount(id: number) : Observable<any>{ |
|||
|
|||
let account_delete_url = this.path + '/user/'+id; |
|||
return this.httpClient.delete(account_delete_url); |
|||
} |
|||
|
|||
public editAccount(id: number, account: Account) : Observable<any>{ |
|||
|
|||
let account_edit_api = this.path + '/user/'+id; |
|||
return this.httpClient.put<any>(account_edit_api,account); |
|||
} |
|||
public getOneAccount(id: number) : Observable<Account>{ |
|||
let account_get_url= this.path + '/user/'+id; |
|||
return this.httpClient.get<Account>(account_get_url); |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { CartService } from './cart.service'; |
|||
|
|||
describe('CartService', () => { |
|||
let service: CartService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(CartService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,87 @@ |
|||
|
|||
import { HttpClient } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { BehaviorSubject, Observable } from 'rxjs'; |
|||
import { Cart } from '../model/cart.model'; |
|||
import { CartDto } from '../model/cartDto.model'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class CartService { |
|||
cartItem!:Cart; |
|||
path : string = 'http://localhost:17599/cartapi'; |
|||
public cartItemList : any =[] |
|||
public productList = new BehaviorSubject<any>([]); |
|||
public search = new BehaviorSubject<string>(""); |
|||
constructor(private httpClient: HttpClient){} |
|||
getProducts(){ |
|||
return this.productList.asObservable(); |
|||
} |
|||
setProduct(product : any){ |
|||
this.cartItemList.push(...product); |
|||
this.productList.next(product); |
|||
} |
|||
addtoCart(product : any){ |
|||
this.cartItemList.push(product); |
|||
this.productList.next(this.cartItemList); |
|||
this.getTotalPrice(); |
|||
console.log(this.cartItemList) |
|||
} |
|||
getTotalPrice() : number{ |
|||
let grandTotal = 0; |
|||
this.cartItemList.map((a:any)=>{ |
|||
a.total= a.price*a.quantity; |
|||
grandTotal+=a.total; |
|||
}) |
|||
return grandTotal; |
|||
} |
|||
removeCartItem(product: any){ |
|||
this.cartItemList.map((a:any,index:any)=>{ |
|||
if(product.id==a.id){ |
|||
this.cartItemList.splice(index,1); |
|||
} |
|||
}) |
|||
} |
|||
removeAllCart(){ |
|||
this.cartItemList = [] |
|||
this.productList.next(this.cartItemList); |
|||
} |
|||
|
|||
public postCart(uid:number, pid:number) : Observable<Cart[]>{ |
|||
|
|||
let cart_get_api= this.path + '/cart/'+uid+'/'+pid; |
|||
this.cartItem={}; |
|||
|
|||
return this.httpClient.post<any>(cart_get_api, this.cartItem); |
|||
|
|||
} |
|||
public CartSum(uid:number) : Observable<Cart[]>{ |
|||
|
|||
let cart_get_api= this.path + '/cartsum/'+uid; |
|||
this.cartItem={}; |
|||
|
|||
return this.httpClient.post<any>(cart_get_api, this.cartItem); |
|||
|
|||
} |
|||
public postQuantity(cid:number, quant:number) : Observable<Cart[]>{ |
|||
|
|||
let cart_get_api= this.path + '/cartquant/'+cid+'/'+quant; |
|||
this.cartItem={}; |
|||
|
|||
return this.httpClient.post<any>(cart_get_api, this.cartItem); |
|||
|
|||
} |
|||
|
|||
public getCartdto(uid:number):Observable<CartDto[]>{ |
|||
let cart_get_api= this.path + '/cartdto/'+uid; |
|||
this.cartItem= {}; |
|||
return this.httpClient.get<CartDto[]>(cart_get_api); |
|||
} |
|||
|
|||
public deleteCartItem(id: number) : Observable<any>{ |
|||
|
|||
let cart_delete_url = this.path + '/cart/'+id; |
|||
return this.httpClient.delete(cart_delete_url); |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { OrdersService } from './orders.service'; |
|||
|
|||
describe('OrdersService', () => { |
|||
let service: OrdersService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(OrdersService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,69 @@ |
|||
import { HttpClient } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { BehaviorSubject, Observable } from 'rxjs'; |
|||
import { Cart } from '../model/cart.model'; |
|||
import { CartDto } from '../model/cartDto.model'; |
|||
import { OrderDto } from '../model/orderDto.model'; |
|||
import { Orders } from '../model/orders.model'; |
|||
import { CartService } from './cart.service'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class OrdersService { |
|||
|
|||
public orderItemList : any =[] |
|||
path : string = 'http://localhost:17599/orderapi'; |
|||
orderItem!:Orders; |
|||
public productList = new BehaviorSubject<any>([]); |
|||
public cartItemList : any =[] |
|||
cartItem!:Cart; |
|||
constructor(private cartService:CartService,private httpClient: HttpClient){} |
|||
getProducts(){ |
|||
return this.productList.asObservable(); |
|||
} |
|||
setProduct(product : any){ |
|||
this.orderItemList.push(...product); |
|||
this.productList.next(product); |
|||
} |
|||
checkout(){ |
|||
this.orderItemList.push(this.productList); |
|||
this.productList.next(this.orderItemList); |
|||
this.getTotalPrice(); |
|||
console.log(this.orderItemList) |
|||
} |
|||
getTotalPrice() : number{ |
|||
let grandTotal = 0; |
|||
this.orderItemList.map((a:any)=>{ |
|||
grandTotal+=a.total; |
|||
}) |
|||
return grandTotal; |
|||
} |
|||
public postOrder(uid:number, pid:number) : Observable<Orders[]>{ |
|||
|
|||
let order_get_api= this.path + '/order/'+uid+'/'+pid; |
|||
this.orderItem={}; |
|||
|
|||
return this.httpClient.post<any>(order_get_api, this.orderItem); |
|||
|
|||
} |
|||
public addOrder(uid:number) : Observable<any>{ |
|||
|
|||
let order_get_api= this.path + '/addOrder/'+uid; |
|||
this.orderItem={}; |
|||
|
|||
return this.httpClient.post<any>(order_get_api, this.orderItem); |
|||
|
|||
} |
|||
|
|||
// public getOrderdto(uid:number):Observable<OrderDto[]>{
|
|||
// let order_get_api= this.path + '/orderdto/'+uid;
|
|||
// this.orderItem= {};
|
|||
// return this.httpClient.get<OrderDto[]>(order_get_api);
|
|||
// }
|
|||
public deleteOrderItem(id: number) : Observable<any>{ |
|||
|
|||
let order_delete_url = this.path + '/orders/'+id; |
|||
return this.httpClient.delete(order_delete_url); |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
import { TestBed } from '@angular/core/testing'; |
|||
|
|||
import { ProductService } from './product.service'; |
|||
|
|||
describe('ProductService', () => { |
|||
let service: ProductService; |
|||
|
|||
beforeEach(() => { |
|||
TestBed.configureTestingModule({}); |
|||
service = TestBed.inject(ProductService); |
|||
}); |
|||
|
|||
it('should be created', () => { |
|||
expect(service).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,23 @@ |
|||
import { HttpClient } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { Observable } from 'rxjs'; |
|||
import { Product } from '../model/product.model'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class ProductService { |
|||
|
|||
path : string = 'http://localhost:17599/productapi'; |
|||
constructor(private httpClient: HttpClient) { |
|||
|
|||
} |
|||
public getProducts() : Observable<Product[]>{ |
|||
let product_get_api= this.path + '/product'; |
|||
return this.httpClient.get<Product[]>(product_get_api); |
|||
} |
|||
public getProductsByCategory(name:string):Observable<Product[]>{ |
|||
let product_get_api=this.path+'/product/'+name; |
|||
return this.httpClient.get<Product[]>(product_get_api); |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import { FilterPipe } from './filter.pipe'; |
|||
|
|||
describe('FilterPipe', () => { |
|||
it('create an instance', () => { |
|||
const pipe = new FilterPipe(); |
|||
expect(pipe).toBeTruthy(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,21 @@ |
|||
import { Pipe, PipeTransform } from '@angular/core'; |
|||
|
|||
@Pipe({ |
|||
name: 'filter' |
|||
}) |
|||
export class FilterPipe implements PipeTransform { |
|||
|
|||
transform(value : any[], filterString: string, propName:string): any[] { |
|||
const result:any =[]; |
|||
if(!value || filterString=='' || propName==''){ |
|||
return value; |
|||
} |
|||
value.forEach((a:any)=>{ |
|||
if(a[propName].trim().toLowerCase().includes(filterString.toLowerCase())){ |
|||
result.push(a); |
|||
} |
|||
}); |
|||
return result; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
export const environment = { |
|||
production: true |
|||
}; |
|||
@ -0,0 +1,16 @@ |
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
|||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
|||
// The list of file replacements can be found in `angular.json`.
|
|||
|
|||
export const environment = { |
|||
production: false |
|||
}; |
|||
|
|||
/* |
|||
* For easier debugging in development mode, you can import the following file |
|||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. |
|||
* |
|||
* This import should be commented out in production mode because it will have a negative impact |
|||
* on performance if an error is thrown. |
|||
*/ |
|||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
|||
| Before | After |
|---|---|
|
|
|
| Width: 28 | Height: 30 | Size: 948 B |
@ -0,0 +1,13 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>GroceryApp</title> |
|||
<base href="/"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link rel="icon" type="image/x-icon" href="favicon.ico"> |
|||
</head> |
|||
<body> |
|||
<app-root></app-root> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,12 @@ |
|||
import { enableProdMode } from '@angular/core'; |
|||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
|||
|
|||
import { AppModule } from './app/app.module'; |
|||
import { environment } from './environments/environment'; |
|||
|
|||
if (environment.production) { |
|||
enableProdMode(); |
|||
} |
|||
|
|||
platformBrowserDynamic().bootstrapModule(AppModule) |
|||
.catch(err => console.error(err)); |
|||
@ -0,0 +1,65 @@ |
|||
/** |
|||
* This file includes polyfills needed by Angular and is loaded before the app. |
|||
* You can add your own extra polyfills to this file. |
|||
* |
|||
* This file is divided into 2 sections: |
|||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. |
|||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main |
|||
* file. |
|||
* |
|||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that |
|||
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), |
|||
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. |
|||
* |
|||
* Learn more in https://angular.io/guide/browser-support
|
|||
*/ |
|||
|
|||
/*************************************************************************************************** |
|||
* BROWSER POLYFILLS |
|||
*/ |
|||
|
|||
/** |
|||
* IE11 requires the following for NgClass support on SVG elements |
|||
*/ |
|||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
|||
|
|||
/** |
|||
* Web Animations `@angular/platform-browser/animations` |
|||
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. |
|||
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). |
|||
*/ |
|||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
|||
|
|||
/** |
|||
* By default, zone.js will patch all possible macroTask and DomEvents |
|||
* user can disable parts of macroTask/DomEvents patch by setting following flags |
|||
* because those flags need to be set before `zone.js` being loaded, and webpack |
|||
* will put import in the top of bundle, so user need to create a separate file |
|||
* in this directory (for example: zone-flags.ts), and put the following flags |
|||
* into that file, and then add the following code before importing zone.js. |
|||
* import './zone-flags'; |
|||
* |
|||
* The flags allowed in zone-flags.ts are listed here. |
|||
* |
|||
* The following flags will work for all browsers. |
|||
* |
|||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
|||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
|||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
|||
* |
|||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js |
|||
* with the following flag, it will bypass `zone.js` patch for IE/Edge |
|||
* |
|||
* (window as any).__Zone_enable_cross_context_check = true; |
|||
* |
|||
*/ |
|||
|
|||
/*************************************************************************************************** |
|||
* Zone JS is required by default for Angular itself. |
|||
*/ |
|||
import 'zone.js'; // Included with Angular CLI.
|
|||
|
|||
|
|||
/*************************************************************************************************** |
|||
* APPLICATION IMPORTS |
|||
*/ |
|||
@ -0,0 +1 @@ |
|||
/* You can add global styles to this file, and also import other style files */ |
|||
Some files were not shown because too many files changed in this diff
Write
Preview
Loading…
Cancel
Save
Reference in new issue