fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

New MSDS page

Browse Source
This commit is contained in:
Zakary Timson
2018-11-06 18:24:54 -05:00
parent 1071310eab
commit 5cc7a09db3
6 changed files with 145 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/index.html
View File

@@ -1,44 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="og:image" content="assets/img/logo.png">
<meta name="description" content="FH & Sons has been in business for 40 years. We have been ISO 9001:2000 certified since May 2000. Our company manufactures
plastisol silk screen inks, plastisols for moulding and dipping applications, as well as bulk pigment dispersions. We also
distribute for several top end equipment and chemical manufacturers. We strive to provide value in everything we sell, coupled
with unmatched customer service and guidance.">
<meta name="theme-color" content="#1976d2">
<title>fh & sons</title>
<base href="./">
<link rel="icon" type="image/png" href="assets/img/logo.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-78788876-2', 'auto');
</script>
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

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

@@ -1,99 +1,101 @@
import { BrowserModule } from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import { AngularFireModule } from 'angularfire2'; import {AngularFireModule} from 'angularfire2';
import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore'; import {AngularFirestoreModule, AngularFirestore} from 'angularfire2/firestore';
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { AppComponent } from './app.component'; import {AppComponent} from './app.component';
import { environment } from '../environments/environment'; import {environment} from '../environments/environment';
import { ConvertFromGPipe, ConvertToGPipe } from './formulaManager/units.pipe'; import {ConvertFromGPipe, ConvertToGPipe} from './formulaManager/units.pipe';
import { ScalePipe } from './formulaManager/scale.pipe'; import {ScalePipe} from './formulaManager/scale.pipe';
import { AngularMaterialModule } from './material.module'; import {AngularMaterialModule} from './material.module';
import { HomeComponent } from './home/home.component'; import {HomeComponent} from './home/home.component';
import { ServiceWorkerModule } from '@angular/service-worker'; import {ServiceWorkerModule} from '@angular/service-worker';
import { FormulaManagerComponent } from './formulaManager/formulaManager.component'; import {FormulaManagerComponent} from './formulaManager/formulaManager.component';
import { NgxElectronModule } from 'ngx-electron'; import {NgxElectronModule} from 'ngx-electron';
import { AboutComponent } from './about/about.component'; import {AboutComponent} from './about/about.component';
import { CategoriesComponent } from './store/categories.component'; import {CategoriesComponent} from './store/categories.component';
import { AngularFireStorageModule } from 'angularfire2/storage'; import {AngularFireStorageModule} from 'angularfire2/storage';
import { LoginComponent } from './login/login.component'; import {LoginComponent} from './login/login.component';
import { AngularFireAuthModule } from 'angularfire2/auth'; import {AngularFireAuthModule} from 'angularfire2/auth';
import { NewCategoryComponent } from './store/newCategory/newCategory.component'; import {NewCategoryComponent} from './store/newCategory/newCategory.component';
import { NewProductComponent } from './store/newProduct/newProduct.component'; import {NewProductComponent} from './store/newProduct/newProduct.component';
import { DeleteComponent } from './delete/delete.component'; import {DeleteComponent} from './delete/delete.component';
import { ProductsComponent } from './store/products/products.component'; import {ProductsComponent} from './store/products/products.component';
import { CartComponent } from './store/cart/cart.component'; import {CartComponent} from './store/cart/cart.component';
import { ViewComponents } from './formulaManager/viewComponents/viewComponents.component'; import {ViewComponents} from './formulaManager/viewComponents/viewComponents.component';
import { NewComponentComponent } from './formulaManager/newComponent/newComponent.component'; import {NewComponentComponent} from './formulaManager/newComponent/newComponent.component';
import { NewFormulaComponent } from './formulaManager/newFormula/newFormula.component'; import {NewFormulaComponent} from './formulaManager/newFormula/newFormula.component';
import { AppStore } from './app.store'; import {AppStore} from './app.store';
import { SlideshowModule } from 'ng-simple-slideshow'; import {SlideshowModule} from 'ng-simple-slideshow';
import {HttpClientModule} from '@angular/common/http'; import {HttpClientModule} from '@angular/common/http';
import {ScrollingModule} from '@angular/cdk/scrolling'; import {ScrollingModule} from '@angular/cdk/scrolling';
import {MSDSComponent} from './msds/msds.component'; import {MSDSComponent} from './msds/msds.component';
import {SizePipe} from './size.pipe';
@NgModule({ @NgModule({
declarations: [ declarations: [
AboutComponent, AboutComponent,
AppComponent, AppComponent,
CategoriesComponent, CategoriesComponent,
CartComponent, CartComponent,
ConvertFromGPipe, ConvertFromGPipe,
ConvertToGPipe, ConvertToGPipe,
DeleteComponent, DeleteComponent,
FormulaManagerComponent, FormulaManagerComponent,
HomeComponent, HomeComponent,
LoginComponent, LoginComponent,
MSDSComponent, MSDSComponent,
NewCategoryComponent, NewCategoryComponent,
NewComponentComponent, NewComponentComponent,
NewFormulaComponent, NewFormulaComponent,
NewProductComponent, NewProductComponent,
ProductsComponent, ProductsComponent,
ScalePipe, ScalePipe,
ViewComponents SizePipe,
], ViewComponents
imports: [ ],
AngularMaterialModule, imports: [
AngularFireAuthModule, AngularMaterialModule,
AngularFireModule.initializeApp(environment.firebase), AngularFireAuthModule,
AngularFirestoreModule, AngularFireModule.initializeApp(environment.firebase),
AngularFireStorageModule, AngularFirestoreModule,
BrowserAnimationsModule, AngularFireStorageModule,
BrowserModule, BrowserAnimationsModule,
FormsModule, BrowserModule,
HttpClientModule, FormsModule,
NgxElectronModule, HttpClientModule,
ReactiveFormsModule, NgxElectronModule,
RouterModule.forRoot([ ReactiveFormsModule,
{ path: 'about', component: AboutComponent }, RouterModule.forRoot([
{ path: 'cart', component: CartComponent }, {path: 'about', component: AboutComponent},
{ path: 'formulaManager', component: FormulaManagerComponent }, {path: 'cart', component: CartComponent},
{ path: 'msds', component: MSDSComponent }, {path: 'formulaManager', component: FormulaManagerComponent},
{ path: 'products/:product', component: ProductsComponent }, {path: 'msds', component: MSDSComponent},
{ path: 'store/:category', component: CategoriesComponent }, {path: 'products/:product', component: ProductsComponent},
{ path: 'store', component: CategoriesComponent }, {path: 'store/:category', component: CategoriesComponent},
{ path: '**', component: HomeComponent } {path: 'store', component: CategoriesComponent},
]), {path: '**', component: HomeComponent}
ScrollingModule, ]),
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }), ScrollingModule,
SlideshowModule ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
], SlideshowModule
providers: [AppStore], ],
entryComponents: [ providers: [AppStore],
DeleteComponent, entryComponents: [
LoginComponent, DeleteComponent,
NewCategoryComponent, LoginComponent,
NewComponentComponent, NewCategoryComponent,
NewFormulaComponent, NewComponentComponent,
NewProductComponent, NewFormulaComponent,
ViewComponents NewProductComponent,
], ViewComponents
bootstrap: [AppComponent] ],
bootstrap: [AppComponent]
}) })
export class AppModule { export class AppModule {
constructor(private db: AngularFirestore) { constructor(private db: AngularFirestore) {
this.db.firestore.enablePersistence(); this.db.firestore.enablePersistence();
} }
} }

25
src/app/msds/msds.component.html
View File

@@ -1,4 +1,5 @@
<div class="bg-white" style="min-height: 450px"> <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<div class="bg-white pt-4" style="min-height: 450px">
<div class="container py-3"> <div class="container py-3">
<div style="overflow: auto"> <div style="overflow: auto">
<h4 class="ml-3 d-inline">MSDS</h4> <h4 class="ml-3 d-inline">MSDS</h4>
@@ -7,9 +8,25 @@
</button> </button>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<mat-list> <table class="table">
<mat-list-item *ngFor="let l of links" (click)="open(l)">{{l.name}}</mat-list-item> <thead>
</mat-list> <tr>
<td>File Name</td>
<td>Size</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let l of links">
<td>{{l.name}}</td>
<td>{{l.size / 1024 | size}}</td>
<td class="text-right">
<button mat-raised-button (click)="open(l)">Download</button>
<button *ngIf="store.user" mat-raised-button class="ml-2" color="warn" (click)="delete(l)">Delete</button>
</td>
</tr>
</tbody>
</table>
<input #file type="file" accept="application/pdf" (change)="upload($event.target)" hidden> <input #file type="file" accept="application/pdf" (change)="upload($event.target)" hidden>
</div> </div>
</div> </div>

22
src/app/msds/msds.component.ts
View File

@@ -9,6 +9,7 @@ import {AppStore} from '../app.store';
export class MSDSComponent implements OnInit { export class MSDSComponent implements OnInit {
firestore; firestore;
links = []; links = [];
loading = false;
storage; storage;
constructor(public store: AppStore) { constructor(public store: AppStore) {
@@ -16,6 +17,18 @@ export class MSDSComponent implements OnInit {
this.storage = firebase.storage(); this.storage = firebase.storage();
} }
async delete(link) {
this.loading = true;
let wait = [
this.storage.ref(`MSDS/${link.name}`).delete(),
this.firestore.collection('msds').doc(link.name).delete()
];
await Promise.all(wait);
this.links.splice(this.links.indexOf(link), 1);
this.loading = false;
}
async ngOnInit() { async ngOnInit() {
let docs = await this.firestore.collection('msds').get(); let docs = await this.firestore.collection('msds').get();
docs.forEach(snap => this.links = this.links.concat([snap.data()]).sort()); docs.forEach(snap => this.links = this.links.concat([snap.data()]).sort());
@@ -26,16 +39,17 @@ export class MSDSComponent implements OnInit {
} }
upload(e) { upload(e) {
this.loading = true;
this.storage.ref(`MSDS/${e.files[0].name}`).put(e.files[0]).then(async e => { this.storage.ref(`MSDS/${e.files[0].name}`).put(e.files[0]).then(async e => {
let data = { let data = {
name: e.metadata.name, name: e.metadata.name,
size: e.metadata.size,
src: await this.storage.ref(e.metadata.fullPath).getDownloadURL() src: await this.storage.ref(e.metadata.fullPath).getDownloadURL()
}; };
console.log(data); await this.firestore.collection('msds').doc(e.metadata.name).set(data);
this.links = this.links.concat([data]).sort();
this.links.concat([data]).sort(); this.loading = false;
this.firestore.collection('msds').doc(e.metadata.name).set(data);
}); });
} }
} }

13
src/app/size.pipe.ts Normal file
View File

@@ -0,0 +1,13 @@
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'size'
})
export class SizePipe implements PipeTransform {
constructor() { }
transform(val, unit) {
return `${Math.round(val)} KB`;
}
}

BIN
src/assets/Chromatex_MSDS.pdf
View File

Binary file not shown.