From d388e8b73dbdcf210c1cad0c439d1de9654dae99 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 1 Jan 2019 22:11:03 -0500
Subject: [PATCH] Added placeholder security screen

---
 src/app/security/security.component.html | 32 +++++++++++++++++++++++-
 src/app/security/security.component.ts   | 22 ++++++++++------
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/app/security/security.component.html b/src/app/security/security.component.html
index 14742dc..575038f 100644
--- a/src/app/security/security.component.html
+++ b/src/app/security/security.component.html
@@ -1 +1,31 @@
-<h3 class="mt-3 text-center">Coming Soon</h3>
+<div class="desktop-height p-3">
+    <div style="max-width: 1000px">
+        <mat-card>
+            <mat-card-content>
+                <div class="d-flex align-items-center">
+                    <div class="mr-2">
+                        <button mat-icon-button (click)="toggle()">
+                            <mat-icon style="font-size: 36px" [ngClass]="{'text-primary': armed}">power_settings_new</mat-icon>
+                        </button>
+                    </div>
+                    <div>
+                        <h1 *ngIf="armed" class="d-inline mb-0">Armed</h1>
+                        <h1 *ngIf="!armed" class="d-inline mb-0">Standby</h1>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+        <mat-card class="mt-3">
+            <mat-card-content>
+                <h3>Log</h3>
+                <mat-divider></mat-divider>
+                <div class="pt-2">
+                    <div *ngFor="let l of log">
+                        <span class="text-muted">{{l.timestamp | date: 'short'}}:</span>
+                        <span class="ml-2">{{l.message}}</span>
+                    </div>
+                </div>
+            </mat-card-content>
+        </mat-card>
+    </div>
+</div>
diff --git a/src/app/security/security.component.ts b/src/app/security/security.component.ts
index ce61cb5..9c65ec7 100644
--- a/src/app/security/security.component.ts
+++ b/src/app/security/security.component.ts
@@ -1,14 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-security',
-  templateUrl: './security.component.html'
+    selector: 'app-security',
+    templateUrl: './security.component.html'
 })
-export class SecurityComponent implements OnInit {
+export class SecurityComponent {
+    armed: boolean = false;
+    log = [
+        {timestamp: new Date(), message: 'Currently under construction'},
+        {timestamp: new Date(), message: 'Give the power button a flick!'},
+    ];
 
-  constructor() { }
-
-  ngOnInit() {
-  }
+    constructor() { }
 
+    toggle() {
+        this.armed = !this.armed;
+        this.log = [{timestamp: new Date(), message: this.armed ? 'Arming Security' : 'Disengaged'}].concat(this.log);
+    }
 }