Socket connection now works

- Pairing a new device works

(I did a lot since the last commit)

frontend/package.json

@@ -11,16 +11,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.1.5",
+    "@angular/animations": "~11.2.13",
     "@angular/cdk": "^10.2.1",
-    "@angular/common": "~10.1.5",
-    "@angular/compiler": "~10.1.5",
-    "@angular/core": "~10.1.5",
-    "@angular/forms": "~10.1.5",
-    "@angular/platform-browser": "~10.1.5",
-    "@angular/platform-browser-dynamic": "~10.1.5",
-    "@angular/router": "~10.1.5",
-    "@angular/service-worker": "~10.1.5",
+    "@angular/common": "~11.2.13",
+    "@angular/compiler": "~11.2.13",
+    "@angular/core": "~11.2.13",
+    "@angular/forms": "~11.2.13",
+    "@angular/platform-browser": "~11.2.13",
+    "@angular/platform-browser-dynamic": "~11.2.13",
+    "@angular/router": "~11.2.13",
+    "@angular/service-worker": "~11.2.13",
     "@fortawesome/angular-fontawesome": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
@@ -31,19 +31,21 @@
     "@types/moment": "^2.13.0",
     "chart.js": "^2.9.4",
     "eva-icons": "^1.1.3",
+    "font-awesome": "^4.7.0",
     "geojson": "^0.5.0",
     "mapbox-gl": "^1.12.0",
     "moment": "^2.29.1",
     "ng2-charts": "^2.4.2",
     "ngx-mapbox-gl": "^4.8.1",
+    "ngx-socket-io": "^4.1.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1001.6",
-    "@angular/cli": "~10.1.6",
-    "@angular/compiler-cli": "~10.1.5",
+    "@angular-devkit/build-angular": "~0.1102.12",
+    "@angular/cli": "~11.2.12",
+    "@angular/compiler-cli": "~11.2.13",
     "@schematics/angular": "~10.1.6",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
@@ -51,7 +53,7 @@
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",

frontend/src/app/_alert/alert.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
+import { IPhone } from '../api.service';
 
 export class Alert {
   id: string;

frontend/src/app/_alert/alert/alert.component.scss

@@ -57,7 +57,13 @@
 
 .alert-warning {
     background-color: #F3CC17 !important;
-    color: #000 !important;
+    color: rgba(53, 92, 74, 0.8) !important;
+}
+
+.alert-pair {
+    height: 5rem !important;
+    background-color: rgba(62, 58, 143, 0.8) !important;
+    backdrop-filter: blur(20px);
 }
 
 .fadeOut {

frontend/src/app/admin/admin.component.ts

@@ -1,5 +1,4 @@
 import { AfterContentInit, Component, OnDestroy, OnInit } from '@angular/core';
-import { resolve } from 'dns';
 import { APIService, UserType } from '../api.service';
 import { AlertService } from '../_alert/alert.service';
 

frontend/src/app/api.service.ts

@@ -2,8 +2,8 @@ import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as moment from 'moment';
-import { error } from 'protractor';
-import { AlertService } from './_alert/alert.service';
+import { AlertService, AlertType } from './_alert/alert.service';
+import { Socket } from 'ngx-socket-io';
 
 /*
  * DEFINITION OF TYPE
@@ -57,6 +57,10 @@ export interface IPhone {
   modelName: string;
   operatingSystem: string;
   architecture: string;
+  approval: {
+    approvedOn?: Date,
+    code: String
+  },
   user: IUser;
   updatedAt?: Date;
   createdAt?: Date;
@@ -125,13 +129,28 @@ export class APIService {
   loginEvent: BehaviorSubject<boolean> = new BehaviorSubject(false);
   fetchingDataEvent: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
-  API_ENDPOINT = 'http://192.168.178.26:8040';
+  API_ENDPOINT = 'http://localhost:8040';
 
-  constructor(private httpClient: HttpClient, private alert: AlertService) { }
+  constructor(private httpClient: HttpClient, private alert: AlertService, private socket: Socket) { }
 
   private socketInit(): void {
-    // Connect with Socket:io after we received our user information
-    
+    // Connect with Socket.io after we received our user information
+    this.socket.connect();
+    this.socket.on('connect', () => {
+      console.log("HERE: " + this.token);
+
+      this.socket.emit('loginFrontend', this.token);
+    });
+
+    this.socket.on('test', data => {
+      this.alert.info(data);
+      console.log('Received test:', data);
+    });
+
+    this.socket.on('approvePhone', (phone: IPhone) => {
+      this.alert.dynamic(`To pair ${phone.displayName}, type in code: ${phone.approval.code}`, AlertType.INFO, 'Pair', { duration: 0 });
+    });
+
     /*this.mqtt.connect({
       hostname: '192.168.178.26',
       port: 15675,
@@ -216,9 +235,9 @@ export class APIService {
 
           resolve(res.setupToken);
         },
-        error => {
-          reject(error);
-        });
+          error => {
+            reject(error);
+          });
     });
   }
 

frontend/src/app/app.component.html

@@ -6,12 +6,12 @@
     <li><a [routerLink]="['/map']" routerLinkActive="router-link-active">Map</a></li>
 
     <li class="navbar-right"><a [routerLink]="['/notifications']">
-      <img src="assets/message.svg">
-    </a></li>
-    <li class="navbar-right"><a [routerLink]="['/user', this.api.user._id]"
-        routerLinkActive="router-link-active">
+        <img src="assets/message.svg">
+      </a></li>
+    <li class="navbar-right"><a [routerLink]="['/user', this.api.user._id]" routerLinkActive="router-link-active">
         <fa-icon [icon]="faUser"></fa-icon>
-        {{this.api.username}}</a></li>
+        {{this.api.username}}
+      </a></li>
 
     <li class="navbar-right"><a [routerLink]="['/admin']" routerLinkActive="router-link-active"
         *ngIf="this.api.user.type == 'admin'">

frontend/src/app/app.component.scss

@@ -12,15 +12,17 @@
 
 #header {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 98vw;
     height: fit-content;
     padding-top: 0.8rem;
     padding-bottom: 0.8rem;
     background-color: #1d1d1dd9;
     backdrop-filter: blur(30px);
     box-shadow: 10px 10px 50px 0px rgba(0, 0, 0, 0.85);
+    border-radius: 8px;
 
     & ul {
         display: inline;
@@ -84,5 +86,5 @@
 }
 
 .header-spacer {
-    height: 3rem;
+    height: 4rem;
 }

frontend/src/app/app.component.ts

@@ -22,7 +22,6 @@ export class AppComponent implements OnInit{
 
   async ngOnInit(): Promise<void> {
     await this.api.login('admin', '$1KDaNCDlyXAOg');
-    this.alert.error('Audio test');
     return;
   }
 }

frontend/src/app/app.module.ts

@@ -20,8 +20,12 @@ import { AdminComponent } from './admin/admin.component';
 import { AlertComponent } from './_alert/alert/alert.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NotificationsComponent } from './notifications/notifications.component';
+import { SocketIoConfig, SocketIoModule } from 'ngx-socket-io';
 
-const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
+const config: SocketIoConfig = { url: 'http://localhost:8040', options: {
+  transports: ['websocket'],
+  autoConnect: false
+}};
 
 @NgModule({
   declarations: [
@@ -48,7 +52,8 @@ const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
     }),
     ChartsModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
-    FontAwesomeModule
+    FontAwesomeModule,
+    SocketIoModule.forRoot(config)
   ],
   providers: [],
   bootstrap: [AppComponent]

frontend/src/app/dashboard-widget/dashboard-widget.component.scss

@@ -8,7 +8,6 @@
 .dwidget {
     line-height: 0.5rem;
     background-color: rgba(0, 0, 0, 0.25);
-    backdrop-filter: blur(30px);
     width: fit-content;
     padding: 1.5rem;
     padding-right: 6rem !important;
@@ -25,8 +24,9 @@
 .bgColor {
     z-index: -1 !important;
     position: absolute;
-    width: 8rem;
+    width: 6rem;
     height: 1rem;
-    margin-left: 5px;
+    margin-left: 20px;
+    filter: blur(20px);
     background-color: transparent !important;
 }

frontend/src/app/map.worker.ts

@@ -25,7 +25,7 @@ addEventListener('message', ({ data }) => {
     progress++;
 
     // Report progress every fifth loop
-    if (Math.trunc(progress / data.length * 100) % 3 === 0) {
+    if (Math.trunc(progress / data.length * 100) % 5 === 0) {
       postMessage({ progress: (progress / data.length) * 100 });
     }
 
@@ -35,7 +35,7 @@ addEventListener('message', ({ data }) => {
         const isNearPoint = isPointInRadius(
           { lat: beat2.coordinate[0], lng: beat2.coordinate[1] },
           { lat: beat.coordinate[0], lng: beat.coordinate[1] },
-          0.025
+          0.005
         );
 
         if (isNearPoint) {

frontend/src/app/user/user.component.html

@@ -6,9 +6,15 @@
 
     <h2 *ngIf="showDevices">Devices</h2>
     <ul class="phoneListing" *ngIf="showDevices">
-        <li *ngFor="let phone of this.api.phones">
-            <h2 [ngClass]="{offline: !phone.active}">{{phone.displayName}} <span class="lastBeat">last beat was {{ this.lastBeats.get(phone._id) }}</span></h2>
-            <p>{{phone.modelName}}</p>
+        <li class="singlePhone" *ngFor="let phone of this.api.phones">
+            <img src="assets/phone.svg">
+            <h2 [ngClass]="{offline: !phone.active}">{{ phone.displayName }} <span class="smaller">last beat was {{ this.lastBeats.get(phone._id) }}</span></h2>
+            <p>{{phone.modelName}} <span class="smaller">| created at: {{ phone.createdAt }}</span></p>
+
+            <div *ngIf="phone.approval != null && phone.approval.approvedOn == null">
+                <small>Code</small>
+                <h3>{{ phone.approval.code }}</h3>
+            </div>
         </li>
     </ul>
 </div>

frontend/src/app/user/user.component.scss

@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@import "../../styles.scss";
 
 #user {
     min-width: 40rem;
@@ -20,16 +20,53 @@
 
 .phoneListing {
     list-style: none;
-    padding: 1.5rem;
+    padding: 1rem;
     border-radius: 10px;
     background-color: $darker;
 }
 
-.offline {
-    color: #ff6464
+.singlePhone {
+    display: grid;
+    grid-template-columns: 64px 1fr 5rem;
+    grid-template-rows: 1fr 1fr;
+    column-gap: 10rem;
+    gap: 0px 0px;
+    width: 100%;
+    height: 100%;
+
+    & img {
+        transform: translateY(50%);
+        width: 100%;
+        grid-area: 1 / 1 / 3 / 2;
+    }
+
+    & h2 {
+        margin-left: 1rem;
+        grid-area: 1 / 2 / 2 / 3;
+    }
+
+    & p {
+        margin-left: 1rem;
+        grid-area: 2 / 2 / 3 / 3;
+    }
+
+    /* Dirty but that's the approval code. */
+    & div {
+        small {
+            grid-area: 1 / 3 / 2 / 4;
+        }
+
+        h3 {
+            grid-area: 2 / 3 / 3 / 4;
+        }
+    }
 }
 
-.lastBeat {
+.offline {
+    color: #ff6464;
+}
+
+.smaller {
     font-weight: lighter;
     font-size: 10pt;
-}
+}

frontend/src/assets/phone.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-mobile" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="#fff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <rect x="7" y="4" width="10" height="16" rx="1"></rect>
+   <line x1="11" y1="5" x2="13" y2="5"></line>
+   <line x1="12" y1="17" x2="12" y2="17.01"></line>
+</svg>