fhsons/website
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
Show Stats 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>

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

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

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 style="overflow: auto">
<h4 class="ml-3 d-inline">MSDS</h4>
@ -7,9 +8,25 @@
</button>
</div>
<mat-divider></mat-divider>
<mat-list>
<mat-list-item *ngFor="let l of links" (click)="open(l)">{{l.name}}</mat-list-item>
</mat-list>
<table class="table">
<thead>
<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>
</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 {
firestore;
links = [];
loading = false;
storage;
constructor(public store: AppStore) {
@ -16,6 +17,18 @@ export class MSDSComponent implements OnInit {
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() {
let docs = await this.firestore.collection('msds').get();
docs.forEach(snap => this.links = this.links.concat([snap.data()]).sort());
@ -26,16 +39,17 @@ export class MSDSComponent implements OnInit {
}
upload(e) {
this.loading = true;
this.storage.ref(`MSDS/${e.files[0].name}`).put(e.files[0]).then(async e => {
let data = {
name: e.metadata.name,
size: e.metadata.size,
src: await this.storage.ref(e.metadata.fullPath).getDownloadURL()
};
console.log(data);
this.links.concat([data]).sort();
this.firestore.collection('msds').doc(e.metadata.name).set(data);
await this.firestore.collection('msds').doc(e.metadata.name).set(data);
this.links = this.links.concat([data]).sort();
this.loading = false;
});
}
}

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.