Merge pull request #28 from nishchayp/frontend

Frontend
nishchayp · Dec 22, 2017 · 5af2e6d · 5af2e6d
2 parents 4a4747d + 0b27bec
commit 5af2e6d
Show file tree

Hide file tree

Showing 65 changed files with 1,132 additions and 110 deletions.
diff --git a/angular-src/gulpfile.js b/angular-src/gulpfile.js
@@ -1,7 +1,9 @@
-var gulp = require('gulp');
-var clean = require('gulp-clean');
+const gulp = require('gulp');
+const clean = require('gulp-clean');
+const runSequence = require('run-sequence');
+const wbBuild = require('workbox-build');
 
-gulp.task('copyTemplates', ['cleanTemplates'], function() {
+gulp.task('copyTemplates', function() {
   gulp.src('../dist/admin-static/admin.html')
     .pipe(clean({ force: true }))
     .pipe(gulp.dest('../templates'));
@@ -16,4 +18,29 @@ gulp.task('cleanTemplates', function() {
     .pipe(clean({ force: true }));
 });
 
-gulp.task('default', ['copyTemplates']);
+gulp.task('bundle-sw', () => {
+  return wbBuild.injectManifest({
+    swSrc: './src/service-worker.js',
+    swDest: '../dist/service-worker.js',
+    globDirectory: '../dist',
+    staticFileGlobs: ['**/*'],
+    globIgnores: [
+    'images/*',
+    'admin-static/admin.html',
+    'service-worker.js',
+    'workbox-sw.prod.v2.1.2.js'
+    ]
+  })
+  .catch((err) => {
+    console.log('[ERROR] This happened: ' + err);
+  });
+});
+
+gulp.task('default', done => {
+  runSequence(
+    'cleanTemplates',
+    'copyTemplates',
+    'bundle-sw',
+    done
+  );
+});
diff --git a/angular-src/package.json b/angular-src/package.json
@@ -46,8 +46,12 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
+    "run-sequence": "^2.2.0",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
-    "typescript": "~2.3.3"
+    "typescript": "~2.3.3",
+    "workbox-background-sync": "^2.0.3",
+    "workbox-build": "^2.1.2",
+    "workbox-sw": "^2.1.2"
   }
 }
diff --git a/angular-src/src/admin.html b/angular-src/src/admin.html
@@ -4,11 +4,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
   <meta name="theme-color" content="#222">
+  <meta name="description" content="Admin app for DAMN"/>
   <title>Admin</title>
   <base href="/">
+  <link rel="manifest" href="/manifest.json">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
   <link rel="icon" type="image/x-icon" href="admin-static/favicon.ico">
+  <noscript>Your browser does not support JavaScript!</noscript>
 </head>
 <body>
   <app-root></app-root>

diff --git a/angular-src/src/app/admin/app.component.html b/angular-src/src/app/admin/app.component.html
@@ -1,3 +1,4 @@
+<admin-indicator></admin-indicator>
 <admin-navbar></admin-navbar>
 <admin-heading></admin-heading>
 <div class="data-container"><router-outlet></router-outlet></div>

diff --git a/angular-src/src/app/admin/app.module.ts b/angular-src/src/app/admin/app.module.ts
@@ -15,8 +15,10 @@ import { AdminRequestsComponent } from './components/admin-requests/admin-reques
 import { ModalComponent } from './components/modal/modal.component';
 import { SnackbarComponent } from './components/snackbar/snackbar.component';
 import { HeadingComponent } from './components/heading/heading.component';
+import { IndicatorComponent } from './components/indicator/indicator.component';
 
 import { AdminDataService } from './services/admin-data.service';
+import { NetworkStatusService } from './services/network-status.service';
 
 @NgModule({
   declarations: [
@@ -28,7 +30,8 @@ import { AdminDataService } from './services/admin-data.service';
     AdminRequestsComponent,
     ModalComponent,
     SnackbarComponent,
-    HeadingComponent
+    HeadingComponent,
+    IndicatorComponent
   ],
   imports: [
   	routing,
@@ -37,7 +40,10 @@ import { AdminDataService } from './services/admin-data.service';
     HttpModule,
     ClipboardModule
   ],
-  providers: [AdminDataService],
+  providers: [
+    AdminDataService,
+    NetworkStatusService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/angular-src/src/app/admin/components/access-requests/access-requests.component.html b/angular-src/src/app/admin/components/access-requests/access-requests.component.html
@@ -1,9 +1,11 @@
-<div class="data-item" *ngFor="let accessRequest of accessRequests; let i = index">
-  <div class="data">{{ accessRequest?.name }}</div>
-  <div class="data">{{ accessRequest?.message }}</div>
-  <div class="items-right">
-    <div class="view-btn" (click)="view(accessRequest, i)">View</div>
+<main>
+  <div class="data-item" *ngFor="let accessRequest of accessRequests; let i = index">
+    <div class="data">{{ accessRequest?.name }}</div>
+    <div class="data">{{ accessRequest?.message }}</div>
+    <div class="items-right">
+      <div class="view-btn" (click)="view(accessRequest, i)">View</div>
+    </div>
   </div>
-</div>
-<div class="no-content" *ngIf="!!accessRequests && !accessRequests.length">Nothing to show</div>
-<div class="no-content" *ngIf="!accessRequests">Loading</div>
+  <div class="no-content" *ngIf="!!accessRequests && !accessRequests.length">Nothing to show</div>
+  <div class="no-content" *ngIf="!accessRequests">Loading</div>
+</main>
diff --git a/angular-src/src/app/admin/components/accesses/accesses.component.html b/angular-src/src/app/admin/components/accesses/accesses.component.html
@@ -1,9 +1,11 @@
-<div class="data-item" *ngFor="let access of accesses; let i = index">
-  <div class="data">{{ access.name }}</div>
-  <div class="data">{{ access.ip }}</div>
-  <div class="items-right">
-    <div class="view-btn" (click)="view(access, i)">View</div>
+<main>
+  <div class="data-item" *ngFor="let access of accesses; let i = index">
+    <div class="data">{{ access.name }}</div>
+    <div class="data">{{ access.ip }}</div>
+    <div class="items-right">
+      <div class="view-btn" (click)="view(access, i)">View</div>
+    </div>
   </div>
-</div>
-<div class="no-content" *ngIf="!!accesses && !accesses.length">Nothing to show</div>
-<div class="no-content" *ngIf="!accesses">Loading</div>
+  <div class="no-content" *ngIf="!!accesses && !accesses.length">Nothing to show</div>
+  <div class="no-content" *ngIf="!accesses">Loading</div>
+</main>
diff --git a/angular-src/src/app/admin/components/admin-requests/admin-requests.component.html b/angular-src/src/app/admin/components/admin-requests/admin-requests.component.html
@@ -1,12 +1,14 @@
-<div class="data-item" *ngFor="let adminRequest of adminRequests; let i = index">
-  <div class="data">{{ adminRequest.name }}</div>
-  <div class="data">{{ adminRequest.email }}</div>
-  <div class="items-right">
-    <div class="data-option-btn">
-      <button (click)="accept(adminRequest.admin_request_id, i)">Accept</button>
-      <button (click)="reject(adminRequest.admin_request_id, i)">Reject</button>
+<main>
+  <div class="data-item" *ngFor="let adminRequest of adminRequests; let i = index">
+    <div class="data">{{ adminRequest.name }}</div>
+    <div class="data">{{ adminRequest.email }}</div>
+    <div class="items-right">
+      <div class="data-option-btn">
+        <button (click)="accept(adminRequest.admin_request_id, i)">Accept</button>
+        <button (click)="reject(adminRequest.admin_request_id, i)">Reject</button>
+      </div>
     </div>
   </div>
-</div>
-<div class="no-content" *ngIf="!!adminRequests && !adminRequests.length">Nothing to show</div>
-<div class="no-content" *ngIf="!adminRequests">Loading</div>
+  <div class="no-content" *ngIf="!!adminRequests && !adminRequests.length">Nothing to show</div>
+  <div class="no-content" *ngIf="!adminRequests">Loading</div>
+</main>
diff --git a/angular-src/src/app/admin/components/admins/admins.component.html b/angular-src/src/app/admin/components/admins/admins.component.html
@@ -1,11 +1,13 @@
-<div class="data-item" *ngFor="let admin of admins; let i = index">
-  <div class="data">{{ admin.name }}</div>
-  <div class="data">{{ admin.email }}</div>
-  <div class="items-right">
-  	<div class="data-option-btn">
-  	  <button (click)="revoke(admin.admin_id, i)">Revoke</button>
-  	</div>
+<main>
+  <div class="data-item" *ngFor="let admin of admins; let i = index">
+    <div class="data">{{ admin.name }}</div>
+    <div class="data">{{ admin.email }}</div>
+    <div class="items-right">
+    	<div class="data-option-btn">
+    	  <button (click)="revoke(admin.admin_id, i)">Revoke</button>
+    	</div>
+    </div>
   </div>
-</div>
-<div class="no-content" *ngIf="!!admins && !admins.length">Nothing to show</div>
-<div class="no-content" *ngIf="!admins">Loading</div>
+  <div class="no-content" *ngIf="!!admins && !admins.length">Nothing to show</div>
+  <div class="no-content" *ngIf="!admins">Loading</div>
+</main>
diff --git a/angular-src/src/app/admin/components/heading/heading.component.html b/angular-src/src/app/admin/components/heading/heading.component.html
@@ -1 +1 @@
-<div class="heading">{{ heading }}</div>
+<h2 class="heading">{{ heading }}</h2>
diff --git a/angular-src/src/app/admin/components/indicator/indicator.component.css b/angular-src/src/app/admin/components/indicator/indicator.component.css
@@ -0,0 +1,5 @@
+.indicator {
+	background-color: #777;
+	color: #fff;
+	padding: 10px;
+}
diff --git a/angular-src/src/app/admin/components/indicator/indicator.component.html b/angular-src/src/app/admin/components/indicator/indicator.component.html
@@ -0,0 +1 @@
+<div class="indicator" *ngIf="online === false">You are working offline</div>
diff --git a/angular-src/src/app/admin/components/indicator/indicator.component.spec.ts b/angular-src/src/app/admin/components/indicator/indicator.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IndicatorComponent } from './indicator.component';
+
+describe('IndicatorComponent', () => {
+  let component: IndicatorComponent;
+  let fixture: ComponentFixture<IndicatorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IndicatorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IndicatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/angular-src/src/app/admin/components/indicator/indicator.component.ts b/angular-src/src/app/admin/components/indicator/indicator.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+
+import { NetworkStatusService } from '../../services/network-status.service';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+  selector: 'admin-indicator',
+  templateUrl: './indicator.component.html',
+  styleUrls: ['./indicator.component.css']
+})
+export class IndicatorComponent implements OnInit {
+
+  online: boolean;
+  subscription: Subscription;
+
+  constructor(
+    private networkStatusService: NetworkStatusService
+  ) { }
+
+  ngOnInit() {
+    this.online = navigator.onLine;
+    window.addEventListener('online',  () => {this.networkStatusService.setStatus(true)});
+    window.addEventListener('offline', () => {this.networkStatusService.setStatus(false)});
+    this.subscription = this.networkStatusService.getStatus().subscribe(() => {
+      this.online = this.networkStatusService.online;
+    });
+  }
+
+}
+
diff --git a/angular-src/src/app/admin/components/navbar/navbar.component.css b/angular-src/src/app/admin/components/navbar/navbar.component.css
@@ -89,6 +89,14 @@
 	margin: 10px 20px 0 0;
 }
 
+.disabled {
+	display: none;
+}
+
+.burger-no-network {
+	top: 70px !important;
+}
+
 @media only screen and (max-width: 1050px) {
 
 	.nav {

diff --git a/angular-src/src/app/admin/components/navbar/navbar.component.html b/angular-src/src/app/admin/components/navbar/navbar.component.html
@@ -1,17 +1,17 @@
-<div [class.open]="navOpen" (click)="toggleNav()" id="burger-container">
+<div [class.open]="navOpen" [class.burger-no-network]="online === false" (click)="toggleNav()" id="burger-container">
   <div id="burger">
     <span>&nbsp;</span>
     <span>&nbsp;</span>
     <span>&nbsp;</span>
   </div>
 </div>
 <nav [class.navClosed]="!navOpen" class="nav">
-	<div (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/accesses']">Accesses</div>
-	<div (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/accessrequests']">Access Requests</div>
-	<div (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/admins']">Admins</div>
-	<div (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/adminrequests']">Admin Requests</div>
+	<h2 (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/accesses']">Accesses</h2>
+	<h2 (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/accessrequests']">Access Requests</h2>
+	<h2 (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/admins']">Admins</h2>
+	<h2 (click)="closeNav()" class="nav-links" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" [routerLink]="['/adminrequests']">Admin Requests</h2>
 	<div (click)="closeNav()" class="logout-container">
 		<div><a href="/"><i class="fa home-icon">&#xf015;</i></a></div>
-		<div><a href="/logout" class="logout-button">Logout</a></div>
+		<div><a href="/logout" class="logout-button" [class.disabled]="online === false">Logout</a></div>
 	</div>
 </nav>
diff --git a/angular-src/src/app/admin/components/navbar/navbar.component.ts b/angular-src/src/app/admin/components/navbar/navbar.component.ts
@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
+import { NetworkStatusService } from '../../services/network-status.service';
+import { Subscription } from 'rxjs/Subscription';
+
 @Component({
   selector: 'admin-navbar',
   templateUrl: './navbar.component.html',
@@ -8,11 +11,19 @@ import { Component, OnInit } from '@angular/core';
 export class NavbarComponent implements OnInit {
 
   navOpen: boolean;
+  online: boolean;
+  subscription: Subscription;
 
-  constructor() { }
+  constructor(
+    private networkStatusService: NetworkStatusService
+  ) { }
 
   ngOnInit() {
+    this.online = navigator.onLine;
     this.navOpen = false;
+    this.subscription = this.networkStatusService.getStatus().subscribe(() => {
+      this.online = this.networkStatusService.online;
+    });
   }
 
   toggleNav() {

diff --git a/angular-src/src/app/admin/services/network-status.service.spec.ts b/angular-src/src/app/admin/services/network-status.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NetworkStatusService } from './network-status.service';
+
+describe('NetworkStatusService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NetworkStatusService]
+    });
+  });
+
+  it('should be created', inject([NetworkStatusService], (service: NetworkStatusService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/angular-src/src/app/admin/services/network-status.service.ts b/angular-src/src/app/admin/services/network-status.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class NetworkStatusService {
+
+  online: boolean;
+  private statusSubject = new Subject<any>();
+
+  constructor() { }
+
+  setStatus(status) {
+  	 this.online = status;
+  	 this.sendStatus();
+  }
+
+  private sendStatus() {
+    this.statusSubject.next();
+  }
+
+  getStatus(): Observable<any> {
+    return this.statusSubject.asObservable();
+  }
+
+}
diff --git a/angular-src/src/app/user/app.component.html b/angular-src/src/app/user/app.component.html
@@ -1,2 +1,3 @@
+<app-indicator></app-indicator>
 <router-outlet></router-outlet>
 <app-snackbar></app-snackbar>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="heading">{{ heading }}</div>
		<h2 class="heading">{{ heading }}</h2>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div class="indicator" *ngIf="online === false">You are working offline</div>