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

Display images, links and attachments

Browse Source
This commit is contained in:
Zakary Timson 2018-08-08 01:15:29 -04:00
parent 58c2f936d1
commit 5d3aadd177
7 changed files with 69 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -33,6 +33,7 @@
"firebase": "^5.1.0",
"firebase-tools": "^3.19.0",
"hammerjs": "^2.0.8",
"ng-simple-slideshow": "^1.2.3",
"ngx-electron": "^1.0.4",
"rxjs": "^6.0.0",
"webstorage-decorators": "^1.0.3",

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

@ -29,6 +29,7 @@ import {NewComponentComponent} from './formulaManager/newComponent/newComponent.
import {HttpModule} from '@angular/http';
import {NewFormulaComponent} from './formulaManager/newFormula/newFormula.component';
import {AppStore} from './app.store';
import {SlideshowModule} from 'ng-simple-slideshow';
@NgModule({
declarations: [
@ -71,7 +72,8 @@ import {AppStore} from './app.store';
{path: 'store', component: CategoriesComponent},
{path: '**', component: HomeComponent}
]),
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
SlideshowModule
],
providers: [AppStore],
entryComponents: [

1
src/app/app.store.ts
View File

@ -73,6 +73,7 @@ export class AppStore {
map(rows =>
rows.map((row: any) => {
let temp = Object.assign({id: row.payload.doc.id, ref: row.payload.doc.ref}, row.payload.doc.data());
temp.originalImage = temp.image;
temp.image = this.domSanitizer.bypassSecurityTrustUrl(temp.image);
temp.originalDescription = temp.description;
temp.description = this.domSanitizer.bypassSecurityTrustHtml(

4
src/app/store/product.ts
View File

@ -5,10 +5,12 @@ export interface Product {
category: string;
currency: 'CAD' | 'USD';
description: SafeHtml;
files: {link: string; type: string}[];
files: {name: string; link: string; type: string}[];
id: string;
image: SafeUrl;
name: string;
originalDescription: string;
originalImage: string;
price: number;
ref: DocumentReference;
weight: number;

43
src/app/store/products/products.component.html
View File

@ -2,12 +2,43 @@
<div class="container">
<div class="row">
<div class="col-12 py-4">
<img [src]="product.image" class="float-left img-fluid mb-4 mr-4">
<h2 class="roboto">{{product.name}}</h2>
<h5 *ngIf="product.price" class="text-muted">{{product.currency}} {{product.price | currency}}</h5>
<h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
<hr class="ml-4" />
<p [innerHtml]="product.description"></p>
<div class="row">
<div class="col-12 col-md-3">
<slideshow [autoPlay]="true" [imageUrls]="preview"></slideshow>
<div *ngIf="links.length">
<h5 class="mt-3 mb-0 pl-3">Links</h5>
<mat-list>
<mat-list-item *ngFor="let l of links">
<a [href]="l.link">{{l.name}}</a>
</mat-list-item>
</mat-list>
</div>
</div>
<div class="col-12 col-md-9">
<h2 class="roboto">{{product.name}}</h2>
<h5 *ngIf="product.price" class="text-muted">{{product.currency}} {{product.price | currency}}</h5>
<h5 *ngIf="!product.price" class="text-muted">Contact For Price</h5>
<mat-divider class="my-3"></mat-divider>
<p [innerHtml]="product.description"></p>
<mat-divider class="my-3"></mat-divider>
<div *ngIf="attachments.length">
<h5 class="ml-3">
<mat-icon style="vertical-align: bottom;">cloud_download</mat-icon> Downloads
</h5>
<mat-list>
<mat-list-item *ngFor="let a of attachments">
<mat-icon mat-list-icon>insert_drive_file</mat-icon>
<h6 mat-line>{{a.name}}</h6>
<div mat-line>
<a class="mr-2" [href]="a.link" target="_blank">View</a>
|
<a class="ml-2" [href]="a.link" download>Download</a>
</div>
</mat-list-item>
</mat-list>
</div>
</div>
</div>
<div class="float-right">
<mat-form-field class="mr-1" style="width: 40px">
<input #quantity matInput type="number" value="1" min="1">

22
src/app/store/products/products.component.ts
View File

@ -3,20 +3,38 @@ import {ActivatedRoute} from '@angular/router';
import {AppComponent} from '../../app.component';
import {map} from 'rxjs/operators';
import {AppStore} from '../../app.store';
import {Product} from '../product';
import {SafeUrl, DomSanitizer} from '../../../../node_modules/@angular/platform-browser';
@Component({
selector: 'products',
templateUrl: 'products.component.html'
})
export class ProductsComponent {
product;
product: Product;
preview: SafeUrl[];
links: {name: string; link: string; type: string}[];
attachments: {name: string; link: string; type: string}[];
constructor(private store: AppStore, private route: ActivatedRoute, public app: AppComponent) {}
constructor(
private store: AppStore,
private route: ActivatedRoute,
private domSanitizer: DomSanitizer,
public app: AppComponent
) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.store.products.pipe(map(rows => rows.filter(row => row.name == params['product']))).subscribe(data => {
this.product = data[0];
this.preview = [this.product.originalImage];
this.preview = this.preview.concat(
this.product.files.filter(row => row.type == 'preview').map(row => row.link)
);
this.links = this.product.files.filter(row => row.type == 'link');
this.attachments = this.product.files.filter(row => row.type == 'other');
});
});
}

4
yarn.lock
View File

@ -5663,6 +5663,10 @@ next-tick@1:
version "1.0.0"
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
ng-simple-slideshow@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/ng-simple-slideshow/-/ng-simple-slideshow-1.2.3.tgz#78938ce2ca936d2a96badd86214dc36cb9ca72bc"
ngx-electron@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/ngx-electron/-/ngx-electron-1.0.4.tgz#2d80b25d74ae4d6226ad8b3bc4ecfa611e48fdca"