ztimson/homefront
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Some bitchin animations

Browse Source
This commit is contained in:
Zakary Timson
2018-11-14 19:04:43 -05:00
parent 44fc493f37
commit 1bf46d16c8
11 changed files with 102 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/animations.ts
View File

@@ -8,8 +8,8 @@ import {
export const expandDown = trigger('expandDown', [
transition('void => *', [
style({transform: 'translateY(-100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateY(0%)'}))
style({opacity: 0, transform: 'translateY(-100%)'}),
animate('0.5s ease-in-out', style({opacity: 1, transform: 'translateY(0%)'}))
])
]);

2
src/app/app-routing.module.ts
View File

@@ -11,7 +11,7 @@ import {LoginGuard} from './login/login.guard';
const routes: Routes = [
{path: 'battery', component: BatteryComponent, canActivate: [LoginGuard]},
{path: 'dashboard', component: DashboardComponent, canActivate: [LoginGuard]},
{path: 'login', component: LoginComponent, data: {hide: true}},
{path: 'login', component: LoginComponent, data: {hide: true, noAnimation: true}},
{path: 'security', component: SecurityComponent, canActivate: [LoginGuard]},
{path: 'settings', component: SettingsComponent, canActivate: [LoginGuard]},
{path: 'weather', component: WeatherComponent, canActivate: [LoginGuard]},

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

@@ -20,10 +20,12 @@
<mat-divider></mat-divider>
<a mat-list-item routerLink="settings" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">settings</mat-icon> Settings</span></a>
<mat-divider></mat-divider>
<a mat-list-item (click)="logout()"><span class="p-3 pl-0 mr-5" style="color: darkred"><mat-icon class="mr-2">logout</mat-icon> Logout</span></a>
<mat-divider></mat-divider>
</mat-nav-list>
</mat-drawer>
<mat-drawer-content class="bg-secondary text-white p-4" (click)="open = (mobile && open) ? false : open">
<main [@routerTransition]="o.isActivated ? o.activatedRoute : ''">
<mat-drawer-content class="bg-secondary text-white" [ngClass]="{'p-4': !hide}" (click)="open = (mobile && open) ? false : open" style="position: relative">
<main class="d-flex flex-column justify-content-center h-100" [@routerTransition]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</main>
</mat-drawer-content>

13
src/app/app.component.ts
View File

@@ -6,6 +6,7 @@ import {expandDown, routerTransition} from './animations';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {filter} from 'rxjs/operators';
import {WeatherService} from './weather/weather.service';
import {firebaseApp} from './app.module';
@Component({
selector: 'app-root',
@@ -18,7 +19,7 @@ export class AppComponent {
open = false;
environment = environment;
constructor(public batteryService: BatteryService, public weatherService: WeatherService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
constructor(private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
this.hide = !!route.root.firstChild.snapshot.data.hide;
this.open = !this.hide && !this.mobile;
@@ -29,4 +30,14 @@ export class AppComponent {
this.open = !this.mobile;
})
}
async logout() {
await firebaseApp.auth().signOut();
return this.router.navigate(['/login'])
}
getState(outlet) {
if(!outlet.isActivated) return '';
return outlet.activatedRouteData.noAnimation ? '' : outlet.activatedRoute;
}
}

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

@@ -10,7 +10,7 @@ import {
MatCardModule,
MatDividerModule, MatFormFieldModule,
MatIconModule, MatInputModule,
MatListModule,
MatListModule, MatProgressBarModule,
MatSidenavModule,
MatToolbarModule
} from '@angular/material';
@@ -50,6 +50,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
MatIconModule,
MatInputModule,
MatListModule,
MatProgressBarModule,
MatSidenavModule,
MatToolbarModule,
ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),

31
src/app/login/login.component.html
View File

@@ -1,10 +1,27 @@
<div class="my-5 text-center">
<div>
<h1 class="d-inline mr-2">Home Front</h1>
<span style="color: #b7b7b7">v{{environment.version}}</span>
<!--
<div class="align-self-center">
<div class="text-center">
<div>
<h1 class="d-inline text-white">Home Front</h1>
<div [@growX]="true" class="d-inline">
<span class="pl-2" style="color: #b7b7b7">v{{environment.version}}</span>
</div>
</div>
</div>
<img src="assets/icon-white.png" class="mt-4" width="275px" height="auto">
<div class="mt-5 text-center">
<img src="assets/icon-white.png" width="275px" height="auto">
</div>
<button mat-stroked-button class="mt-5" (click)="login()" [disabled]="loading">Login With Google</button>
</div>
<div class="text-center pt-5">
<button mat-stroked-button class="mt-5" (click)="login()">Login With Google</button>
-->
<div class="center">
<div class="text-center">
<h1 class="d-inline text-white">Home Front</h1>
</div>
<div class="mt-5">
<img src="assets/icon-white.png" width="275px" height="auto">
</div>
</div>
<div class="off-center" [@expandDown]="animate">
<button mat-stroked-button class="mt-5" style="width: 150px" (click)="login()" [disabled]="loading">Login With Google</button>
</div>

13
src/app/login/login.component.ts
View File

@@ -3,12 +3,15 @@ import {environment} from '../../environments/environment';
import {firebaseApp} from '../app.module';
import {Router} from '@angular/router';
import * as firebase from 'firebase';
import {expandDown} from '../animations';
@Component({
selector: 'app-login',
templateUrl: './login.component.html'
templateUrl: './login.component.html',
animations: [expandDown]
})
export class LoginComponent implements OnInit {
animate = false;
environment = environment;
constructor(private router: Router, private ngZone: NgZone) { }
@@ -16,12 +19,16 @@ export class LoginComponent implements OnInit {
ngOnInit() {
firebaseApp.auth().onAuthStateChanged(user => {
if(!!user) this.ngZone.run(() => this.router.navigate(['/dashboard']));
})
});
setTimeout(this.ngZone.run(() => this.animate = true), 1000);
}
async login() {
await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
await firebaseApp.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
return this.router.navigate(['/dashboard']);
this.ngZone.run(() => {
return this.router.navigate(['/dashboard']);
});
}
}

10
src/app/weather/weather.component.html
View File

@@ -1,5 +1,5 @@
<div>
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center flex-grow-1">
<i [class]="'wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
<div class="ml-0 ml-md-3">
<h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
@@ -7,19 +7,19 @@
</div>
</div>
<div class="my-4 d-flex mx-auto" style="max-width: 450px">
<div class="text-center" style="flex-grow: 1">
<div class="text-center flex-grow-1">
<i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} %
</div>
<div class="text-center" style="flex-grow: 1">
<div class="text-center flex-grow-1">
<i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
</div>
<div class="text-center" style="flex-grow: 1">
<div class="text-center flex-grow-1">
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
</div>
</div>
<mat-divider></mat-divider>
<div class="my-4 d-flex justify-content-center">
<div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1">
<div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
{{w.day}}
<i [class]="'my-2 wi wi-fw ' + w.icon" style="font-size: 2rem"></i>
{{w.temp}} °C

13
src/index.html
View File

@@ -13,7 +13,16 @@
<link rel="manifest" href="manifest.json">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
<app-root>
<div class="center">
<div class="text-center">
<h1 class="d-inline text-white">Home Front</h1>
</div>
<div class="mt-5">
<img src="assets/icon-white.png" width="275px" height="auto">
</div>
</div>
</app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

3
src/main.ts
View File

@@ -8,5 +8,4 @@ if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

31
src/styles.scss
View File

@@ -29,6 +29,19 @@ html, body {
background-color: #2F323A;
}
.center {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.off-center {
position: fixed;
left: calc(50% - 75px);
top: 75%;
}
.mat-list-item {
height: auto !important;
color: #9CA4B6 !important;
@@ -74,10 +87,26 @@ html, body {
vertical-align: middle;
}
.mat-stroked-button {
.mat-stroked-button:not([disabled]) {
border-color: #ffffff !important;
}
.mat-form-field label {
color: #ffffff !important;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-grow-2 {
flex-grow: 2;
}
.flex-grow-3 {
flex-grow: 3;
}