vcgit-forge/InventoryApp
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/InventoryApp.git synced 2026-02-10 04:43:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Raghu-Ch
2018-09-10 11:26:50 -04:00
parent 71d21ebb33
commit a8d2d19831
25 changed files with 513 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
angular.json
View File

@@ -23,6 +23,9 @@
"src/assets"
],
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
],
"scripts": []
@@ -72,6 +75,9 @@
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"styles.css"
],
"scripts": [],

174
package-lock.json generated
View File

@@ -11,7 +11,7 @@
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.8",
"rxjs": "6.2.2"
"rxjs": "6.3.2"
}
},
"@angular-devkit/build-angular": {
@@ -54,7 +54,7 @@
"postcss-url": "7.3.2",
"raw-loader": "0.5.1",
"resolve": "1.8.1",
"rxjs": "6.2.2",
"rxjs": "6.3.2",
"sass-loader": "7.1.0",
"silent-error": "1.1.0",
"source-map-support": "0.5.9",
@@ -101,18 +101,32 @@
"requires": {
"ajv": "6.4.0",
"chokidar": "2.0.4",
"rxjs": "6.2.2",
"rxjs": "6.3.2",
"source-map": "0.5.7"
}
},
"@angular-devkit/schematics": {
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.6.8.tgz",
"integrity": "sha512-R4YqAUdo62wtrhX/5HSRGSKXNTWqfQb66ZE6m8jj6GEJNFKdNXMdxOchxr07LCiKTxfh1w6G3nGzxIsu/+D4KA==",
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.7.5.tgz",
"integrity": "sha512-E7HkQeJawUskf2gPnogMc+cTdjJ2Iv3QEZOgprh/ExEmBYByWkGDRX5fQOuy8wME8VZqUBvQACZaVkEredn5EA==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.8",
"rxjs": "6.2.2"
"@angular-devkit/core": "0.7.5",
"rxjs": "6.3.2"
},
"dependencies": {
"@angular-devkit/core": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.7.5.tgz",
"integrity": "sha512-r99BZvvuNAqSRm05jXfx0sb3Ip0zvHPtAM6NReXzWPoqaVFpjVUdj/CKA+9HWG/Zt9meG9pEQt/HKK8UXaZDVA==",
"dev": true,
"requires": {
"ajv": "6.4.0",
"chokidar": "2.0.4",
"rxjs": "6.3.2",
"source-map": "0.5.7"
}
}
}
},
"@angular/animations": {
@@ -123,26 +137,54 @@
"tslib": "1.9.3"
}
},
"@angular/cdk": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.4.1.tgz",
"integrity": "sha512-d06pqvYiibYwNFGGZFMGjXyfS2DwxLC4LOoiYGibkVpoX669Reb1+OhUX2icqCRtEpw9kOKHpcOz4M6du0eejQ==",
"requires": {
"tslib": "1.9.3"
}
},
"@angular/cli": {
"version": "6.0.8",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.8.tgz",
"integrity": "sha512-DhH1Zq5Yonthw6zh6W07fhf+9XrAZbD1fcQ0MrmbxlieCfLlTAdBqyK2LavFCKwSZkUMLF6UHM3+jiNRVZSSIg==",
"version": "6.1.5",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.1.5.tgz",
"integrity": "sha512-QNVUSC8mPdiaxubneqNZISy+wec3gwbKoXjcaQ9/45baOnp662j2iJXwiMh6Atn0YUM4u1iUsz1uHyARMtgZmw==",
"dev": true,
"requires": {
"@angular-devkit/architect": "0.6.8",
"@angular-devkit/core": "0.6.8",
"@angular-devkit/schematics": "0.6.8",
"@schematics/angular": "0.6.8",
"@schematics/update": "0.6.8",
"@angular-devkit/architect": "0.7.5",
"@angular-devkit/core": "0.7.5",
"@angular-devkit/schematics": "0.7.5",
"@schematics/angular": "0.7.5",
"@schematics/update": "0.7.5",
"opn": "5.3.0",
"resolve": "1.8.1",
"rxjs": "6.2.2",
"rxjs": "6.3.2",
"semver": "5.5.1",
"silent-error": "1.1.0",
"symbol-observable": "1.2.0",
"yargs-parser": "10.1.0"
},
"dependencies": {
"@angular-devkit/architect": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.7.5.tgz",
"integrity": "sha512-zwCpGdx3JDE+Y+LiWh9ErRX+fpFPTRHtEd2PDJmfQsdlIWfjxSR5U9vi3+bSRW2n6IFiH2GCYMS31R64rfMwbg==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.7.5",
"rxjs": "6.3.2"
}
},
"@angular-devkit/core": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.7.5.tgz",
"integrity": "sha512-r99BZvvuNAqSRm05jXfx0sb3Ip0zvHPtAM6NReXzWPoqaVFpjVUdj/CKA+9HWG/Zt9meG9pEQt/HKK8UXaZDVA==",
"dev": true,
"requires": {
"ajv": "6.4.0",
"chokidar": "2.0.4",
"rxjs": "6.3.2",
"source-map": "0.5.7"
}
},
"camelcase": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
@@ -329,6 +371,14 @@
"tslib": "1.9.3"
}
},
"@angular/flex-layout": {
"version": "6.0.0-beta.18",
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-6.0.0-beta.18.tgz",
"integrity": "sha512-1Alv3YSIZYp0CTUIESIaSQLoSVyLzuNKPa5bGM/RzOmeSrndm5plVgI9wopGfJUDiwM18R97rq/4XjDvNT/+ig==",
"requires": {
"tslib": "1.9.3"
}
},
"@angular/forms": {
"version": "6.1.4",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.1.4.tgz",
@@ -351,6 +401,23 @@
"integrity": "sha512-kvnAphJ7VrKJpm1gN3sFjGp/5gQxu/FAw03yD1f1z+C+aHrNKoxaS9pp9NdOIT/DWlxR/BcEDF4gzMNMTJ9/wA==",
"dev": true
},
"@angular/material": {
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.4.1.tgz",
"integrity": "sha512-07HcMv2JNs2c88qZLg0M90dQ7K8LAF4qR9qhdxQ+FPkAymahvq3rKxUWfRifjkHkh6QpG0+hLdNwnAa514Z08g==",
"requires": {
"parse5": "5.1.0",
"tslib": "1.9.3"
},
"dependencies": {
"parse5": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
"integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
"optional": true
}
}
},
"@angular/platform-browser": {
"version": "6.1.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.1.4.tgz",
@@ -387,28 +454,56 @@
}
},
"@schematics/angular": {
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.6.8.tgz",
"integrity": "sha512-9kRphqTYG5Df/I8fvnT1zMsw0YNDPO9tl18tQZXj4am4raT7l9UCr+WkwJdlBoA5pwG6baWE9sL0iGWV/bzF/g==",
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.7.5.tgz",
"integrity": "sha512-NrtvFwHCoWon8KInsvA1jdPu4pVJGa8GAWM/jqnE7HpwPwM7hMML08lV0P8r3NX5t2/i0CKvfp4AAEr5MXorEQ==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.8",
"@angular-devkit/schematics": "0.6.8",
"typescript": "2.7.2"
"@angular-devkit/core": "0.7.5",
"@angular-devkit/schematics": "0.7.5",
"typescript": "2.9.2"
},
"dependencies": {
"@angular-devkit/core": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.7.5.tgz",
"integrity": "sha512-r99BZvvuNAqSRm05jXfx0sb3Ip0zvHPtAM6NReXzWPoqaVFpjVUdj/CKA+9HWG/Zt9meG9pEQt/HKK8UXaZDVA==",
"dev": true,
"requires": {
"ajv": "6.4.0",
"chokidar": "2.0.4",
"rxjs": "6.3.2",
"source-map": "0.5.7"
}
}
}
},
"@schematics/update": {
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.6.8.tgz",
"integrity": "sha512-1Uq7LYnwL2wBwGVCgNz76QAR13ghAk+2vDDHOi+VX5+usHManxydrpoMGeX66OBPd+y5D3D2MFb+8mYHE7mygg==",
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.7.5.tgz",
"integrity": "sha512-pwNkXGtlzyCV6tsTPe8AgUuMCkmubcz94zgL6pSMdEe122yXBcKnr/PKqG9QzD/gGwmOcHUE9EWcuRtU5kdFpA==",
"dev": true,
"requires": {
"@angular-devkit/core": "0.6.8",
"@angular-devkit/schematics": "0.6.8",
"@angular-devkit/core": "0.7.5",
"@angular-devkit/schematics": "0.7.5",
"npm-registry-client": "8.6.0",
"rxjs": "6.2.2",
"rxjs": "6.3.2",
"semver": "5.5.1",
"semver-intersect": "1.4.0"
},
"dependencies": {
"@angular-devkit/core": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.7.5.tgz",
"integrity": "sha512-r99BZvvuNAqSRm05jXfx0sb3Ip0zvHPtAM6NReXzWPoqaVFpjVUdj/CKA+9HWG/Zt9meG9pEQt/HKK8UXaZDVA==",
"dev": true,
"requires": {
"ajv": "6.4.0",
"chokidar": "2.0.4",
"rxjs": "6.3.2",
"source-map": "0.5.7"
}
}
}
},
"@types/jasmine": {
@@ -4285,6 +4380,11 @@
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
"dev": true
},
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
@@ -8081,9 +8181,9 @@
}
},
"rxjs": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
"integrity": "sha512-0MI8+mkKAXZUF9vMrEoPnaoHkfzBPP4IGwUYRJhIRJF6/w3uByO1e91bEHn8zd43RdkTMKiooYKmwz7RH6zfOQ==",
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.2.tgz",
"integrity": "sha512-hV7criqbR0pe7EeL3O66UYVg92IR0XsA97+9y+BWTePK9SKmEI5Qd3Zj6uPnGkNzXsBywBQWTvujPl+1Kn9Zjw==",
"requires": {
"tslib": "1.9.3"
}
@@ -9451,9 +9551,9 @@
"dev": true
},
"typescript": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
"integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw==",
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
"dev": true
},
"uglify-js": {

10
package.json
View File

@@ -12,23 +12,27 @@
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/cdk": "^6.2.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.4.1",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"hammerjs": "^2.0.8",
"rxjs": "^6.3.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.0",
"typescript": "~2.9.0",
"@angular/cli": "~6.1.5",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",

30
src/app/app.component.css
View File

@@ -0,0 +1,30 @@
.mat-toolbar {
background: #02b3e4;
/* background: linear-gradient(160deg, #02b3e4, #02ccba); */
}
.spacer {
flex: auto;
}
a {
text-decoration: none;
color: white;
padding: 12px 16px;
margin: 2px;
letter-spacing: 1px;
}
a:hover,
.active {
background: whitesmoke;
border-radius: 4px;
color: #02ccba !important;
box-shadow: 8px 10px 20px 0 rgba(46, 61, 73, .15);
}
.title {
letter-spacing: 1px;
font-style: oblique;
color: whitesmoke;
}

37
src/app/app.component.html
View File

@@ -1,20 +1,21 @@
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<main fxLayout="column">
<header>
<mat-toolbar class="mat-elevation-z6">
<span class="title">DREAM Inventory Management Solutions</span>
<span class="spacer"></span>
<nav>
<a [routerLink]="['/home']" routerLinkActive="active">Home</a>
<a [routerLink]="['/product']" routerLinkActive="active">Products</a>
<a [routerLink]="['/product/add']" routerLinkActive="active">Add Product</a>
<a [routerLink]="['/hotdeals']" routerLinkActive="active">Sale</a>
</nav>
<span class="spacer"></span>
<button mat-raised-button>Login</button>
</mat-toolbar>
</header>
<section>
<router-outlet></router-outlet>
</section>
</main>

41
src/app/app.module.ts
View File

@@ -1,14 +1,51 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ProductModule } from '../app/product/product.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';
import { MatTooltipModule } from '@angular/material/tooltip';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'product', component: ProductComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
declarations: [
AppComponent
AppComponent,
HomeComponent,
PageNotFoundComponent
],
imports: [
BrowserModule
BrowserModule,
BrowserAnimationsModule,
FlexLayoutModule,
ProductModule,
HttpClientModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatTableModule,
MatButtonModule,
MatBadgeModule,
MatTooltipModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]

42
src/app/home/home.component.css Normal file
View File

@@ -0,0 +1,42 @@
.viewer {
padding: 20px 0;
max-width: 80%;
margin: auto;
}
.view-wrapper {
margin: 4px;
border: 4px solid rgb(1, 179, 228);
/* border: 1px solid rgba(0, 0, 0, .03);
box-shadow: 0 2px 2px rgba(0, 0, 0, .24),
0 0 2px rgba(0, 0, 0, .12); */
}
.viewer-title {
padding: 8px 20px;
display: flex;
justify-content: center;
align-content: center;
/* color: rgba(0, 0, 0, .54);
background: rgba(0, 0, 0, .03); */
/* variant: */
color: rgb(255, 255, 255);
background: rgb(1, 179, 228);
}
.viewer-section {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.social {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
h3>i {
letter-spacing: 8px;
}

19
src/app/home/home.component.html Normal file
View File

@@ -0,0 +1,19 @@
<div class="viewer" fxLayout="column">
<div class="view-wrapper">
<div class="viewer-title">
<h3><i>Awesome - Your dream's come true !!</i></h3>
</div>
<div class="viwer-body" fxLayout="row">
<img fxFlex=50 src="../../assets/images/wood-3157395_640.jpg" alt="Photo of a Shiba Inu">
<div fxFlex=50 class="viewer-section">
<span>
Developed By: @Raghu Chagarlamudi
<div class="social" fxLayout="row">
<mat-icon class="viewer-section" fxFlex=50>code</mat-icon>
<mat-icon class="viewer-section" fxFlex=50>code</mat-icon>
</div>
</span>
</div>
</div>
</div>
</div>

25
src/app/home/home.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/home/home.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

18
src/app/page-not-found/page-not-found.component.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-page-not-found',
template: `
<div class="center">
<mat-card fxFlex=50 fxLayout="column" class="center">
<i class="material-icons">error</i>
<p> 404! </p>
<p>
page-not-found!
</p>
</mat-card>
</div>
`,
styles: ['p,i {color: red;}', 'i {font-size: 60px;}', '.center {align-items: center; justify-content: center;}']
})
export class PageNotFoundComponent { }

4
src/app/product/product.component.css Normal file
View File

@@ -0,0 +1,4 @@
table {
width: 75%;
margin: 20px auto 0 auto;
}

3
src/app/product/product.component.html Normal file
View File

@@ -0,0 +1,3 @@
<section fxFlex=50 class="aligner">
<mat-card *ngFor="let product of products">{{product.productName}}</mat-card>
</section>

30
src/app/product/product.component.ts Normal file
View File

@@ -0,0 +1,30 @@
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';
import { ProductService } from '../product/product.service';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
products = [];
displayedColumns = ['productName', 'brand', 'category', 'price'];
// dataSource = new MatTableDataSource(this.productService);
// dataSource = this.products;
constructor(private productService: ProductService) { }
ngOnInit() {
this.getAllProducts();
}
getAllProducts(): void {
this.productService.getProducts().subscribe((res: any[]) => {
this.products = res;
console.log(this.products);
});
}
}

13
src/app/product/product.module.spec.ts Normal file
View File

@@ -0,0 +1,13 @@
import { ProductModule } from './product.module';
describe('ProductModule', () => {
let productModule: ProductModule;
beforeEach(() => {
productModule = new ProductModule();
});
it('should create an instance', () => {
expect(productModule).toBeTruthy();
});
});

23
src/app/product/product.module.ts Normal file
View File

@@ -0,0 +1,23 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import {ProductComponent} from '../product/product.component';
@NgModule({
imports: [
CommonModule,
RouterModule,
MatTableModule,
MatCardModule
],
declarations: [
ProductComponent
]
})
export class ProductModule { }

15
src/app/product/product.service.spec.ts Normal file
View File

@@ -0,0 +1,15 @@
import { TestBed, inject } from '@angular/core/testing';
import { ProductService } from './product.service';
describe('ProductService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ProductService]
});
});
it('should be created', inject([ProductService], (service: ProductService) => {
expect(service).toBeTruthy();
}));
});

17
src/app/product/product.service.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ProductService {
url = 'https://fast-ravine-56232.herokuapp.com/api/products';
constructor(private http: HttpClient) { }
getProducts(): Observable<any> {
return this.http.get(this.url);
}
}

BIN
src/assets/images/wood-3157395_1280.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 373 KiB

BIN
src/assets/images/wood-3157395_1920.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 817 KiB

BIN
src/assets/images/wood-3157395_640.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

43
src/assets/login.svg Normal file
View File

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<g>
<path d="M131.5,472H60.693c-8.538,0-13.689-4.765-15.999-7.606c-3.988-4.906-5.533-11.29-4.236-17.519 c20.769-99.761,108.809-172.616,210.445-174.98c1.693,0.063,3.39,0.105,5.097,0.105c1.722,0,3.434-0.043,5.142-0.107 c24.853,0.567,49.129,5.24,72.236,13.917c10.34,3.885,21.871-1.352,25.754-11.693c3.883-10.34-1.352-21.871-11.693-25.754 c-3.311-1.244-6.645-2.408-9.995-3.512C370.545,220.021,392,180.469,392,136C392,61.01,330.991,0,256,0 c-74.991,0-136,61.01-136,136c0,44.509,21.492,84.092,54.643,108.918c-30.371,9.998-58.871,25.546-83.813,46.062 c-45.732,37.617-77.529,90.086-89.532,147.743c-3.762,18.066,0.744,36.622,12.363,50.908C25.221,503.847,42.364,512,60.693,512 H131.5c11.046,0,20-8.954,20-20C151.5,480.954,142.546,472,131.5,472z M160,136c0-52.935,43.065-96,96-96s96,43.065,96,96 c0,51.367-40.554,93.438-91.326,95.885c-1.557-0.028-3.114-0.052-4.674-0.052c-1.564,0-3.127,0.023-4.689,0.051 C200.546,229.43,160,187.362,160,136z" fill="#006DF0"/>
<path d="M496.689,344.607c-8.561-19.15-27.845-31.558-49.176-31.607h-62.372c-0.045,0-0.087,0-0.133,0 c-22.5,0-42.13,13.26-50.029,33.807c-1.051,2.734-2.336,6.178-3.677,10.193H200.356c-5.407,0-10.583,2.189-14.35,6.068 l-34.356,35.388c-7.567,7.794-7.529,20.203,0.085,27.95l35,35.612c3.76,3.826,8.9,5.981,14.264,5.981h65c11.046,0,20-8.954,20-20 c0-11.046-8.954-20-20-20h-56.614l-15.428-15.698L208.814,397h137.491c9.214,0,17.235-6.295,19.426-15.244 c1.618-6.607,3.648-12.959,6.584-20.596c1.936-5.036,6.798-8.16,12.741-8.16c0.013,0,0.026,0,0.039,0h62.371 c5.656,0.013,10.524,3.053,12.705,7.932c5.369,12.012,11.78,30.608,11.828,50.986c0.048,20.529-6.356,39.551-11.739,51.894 c-2.17,4.978-7.079,8.188-12.56,8.188c-0.011,0-0.022,0-0.033,0h-63.125c-5.533-0.013-10.716-3.573-12.896-8.858 c-2.339-5.671-4.366-12.146-6.197-19.797c-2.571-10.742-13.367-17.366-24.105-14.796c-10.743,2.571-17.367,13.364-14.796,24.106 c2.321,9.699,4.978,18.118,8.121,25.738c8.399,20.364,27.939,33.555,49.827,33.606h63.125c0.043,0,0.083,0,0.126,0 c21.351-0.001,40.647-12.63,49.18-32.201c6.912-15.851,15.137-40.511,15.072-67.975 C511.935,384.434,503.638,360.153,496.689,344.607z" fill="#006DF0"/>
<circle cx="431" cy="412" r="20" fill="#006DF0"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

2
src/index.html
View File

@@ -1,6 +1,8 @@
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<meta charset="utf-8">
<title>ZID</title>
<base href="/">

2
src/main.ts
View File

@@ -4,6 +4,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';
if (environment.production) {
enableProdMode();
}

4
src/styles.css
View File

@@ -1 +1,5 @@
/* You can add global styles to this file, and also import other style files */
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
html, body { height: 100%; }
body { margin: 0; font-family: 'Roboto', sans-serif; }