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

Redesigned FM page

Browse Source
This commit is contained in:
Zakary Timson 2018-07-24 20:13:28 -04:00
parent fab44fd481
commit d6d9fcc854
2 changed files with 72 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/formulaManager/formulaManager.component.html
View File

@ -1,6 +1,6 @@
<div class="container"> <div class="container">
<div *ngIf="store.user" class="row"> <div *ngIf="store.user" class="row mt-3">
<div class="col-12 mt-3"> <div class="col-12">
<div class="float-right"> <div class="float-right">
<button mat-raised-button class="mr-3" (click)="openComponents()"> <button mat-raised-button class="mr-3" (click)="openComponents()">
<mat-icon>list</mat-icon> Components <mat-icon>list</mat-icon> Components
@ -11,22 +11,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div *ngIf="!electron.isElectronApp" class="row mt-3">
<div class="col-12 col-lg-3 h-100 mb-4"> <div class="col-12">
<mat-form-field class="w-100 pt-4"> <div *ngIf="!electron.isElectronApp" class="jumbotron text-white d-none d-lg-block" style="
<input #search matInput placeholder="Search">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-list style="max-height: 250px; overflow: auto;">
<ng-container *ngFor="let f of store.formulas | async; let i = index">
<mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)">{{f.name}}</mat-list-item>
</ng-container>
</mat-list>
</div>
<div class="col-12 d-block d-lg-none w-100 mb-4" style="height: 4px; background:black;"></div>
<div class="col-12 col-lg-9">
<div *ngIf="!electron.isElectronApp" class="jumbotron p-3 mt-3 text-white d-none d-lg-block" style="
background-color: #000; background-color: #000;
background-image: url('../../assets/img/formula.jpg'); background-image: url('../../assets/img/formula.jpg');
background-size: cover; background-size: cover;
@ -44,8 +31,25 @@
<button *ngIf="installPrompt" class="btn btn-primary btn-lg mb-3" (click)="prompt()"> <button *ngIf="installPrompt" class="btn btn-primary btn-lg mb-3" (click)="prompt()">
<i class="fas fa-mobile-alt"></i> Mobile</button> <i class="fas fa-mobile-alt"></i> Mobile</button>
</div> </div>
<div *ngIf="formula"> </div>
<table class="w-100 table"> </div>
<div class="row mt-3 mb-5">
<div class="col-12 col-lg-3" style="height: 500px; overflow: auto">
<mat-form-field class="w-100">
<input #search matInput placeholder="Search">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-list>
<ng-container *ngFor="let f of store.formulas | async; let i = index">
<mat-divider *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1 && i > 0"></mat-divider>
<mat-list-item *ngIf="f.name.toLowerCase().indexOf(search.value.toLowerCase()) != -1" (click)="displayFormula(f)" [ngClass]="{'active': f.id == formula?.id}">{{f.name}}</mat-list-item>
</ng-container>
</mat-list>
</div>
<div *ngIf="formula" class="col-12 col-lg-9">
<h3 class="mb-0">{{formula.name}}</h3>
<span class="text-muted">Created: {{formula.created | date}}</span>
<table class="w-100 mt-4 table">
<thead> <thead>
<tr> <tr>
<th style="width: 80%">Name</th> <th style="width: 80%">Name</th>
@ -87,4 +91,3 @@
</div> </div>
</div> </div>
</div> </div>
</div>

11
src/app/formulaManager/formulaManager.component.ts
View File

@ -1,17 +1,22 @@
import {Component, ElementRef, ViewChildren, HostListener} from '@angular/core'; import {Component, ElementRef, ViewChildren, HostListener} from '@angular/core';
import {AngularFirestore} from 'angularfire2/firestore';
import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe'; import {ConvertFromGPipe, ConvertToGPipe} from './units.pipe';
import {ElectronService} from 'ngx-electron'; import {ElectronService} from 'ngx-electron';
import {LocalStorage} from 'webstorage-decorators'; import {LocalStorage} from 'webstorage-decorators';
import {MatDialog} from '@angular/material'; import {MatDialog} from '@angular/material';
import {ViewComponents} from './viewComponents/viewComponents.component'; import {ViewComponents} from './viewComponents/viewComponents.component';
import {AngularFireAuth} from 'angularfire2/auth';
import {NewFormulaComponent} from './newFormula/newFormula.component'; import {NewFormulaComponent} from './newFormula/newFormula.component';
import {AppStore} from '../app.store'; import {AppStore} from '../app.store';
@Component({ @Component({
selector: 'formula-manager', selector: 'formula-manager',
templateUrl: './formulaManager.component.html' templateUrl: './formulaManager.component.html',
styles: [
`
.active {
background-color: #f0f0f0;
}
`
]
}) })
export class FormulaManagerComponent { export class FormulaManagerComponent {
formula; formula;