Merge remote-tracking branch 'origin/master'

UI/src/app/_components/error-report/error-report.component.html

@@ -0,0 +1,38 @@
+<div class="d-flex justify-content-center mt-5 pt-5" *ngIf="loading">
+    <div class="spinner spinner-border"></div>
+</div>
+<button (click)="this.locationBackService.goBack()" id="backBtn" title="Go back"><i class="fas fa-arrow-left"></i> Back</button>
+<div id="page" *ngIf="validReport">
+    <div id="text">
+        <h1>:(</h1>
+        <h2>There was an unexpected error. Please open a bug report on the project's Github page or contact one of
+            the developers.</h2>
+    </div>
+    <div style="text-align: center">
+        <a id="bugReportButton" class="btn btn-lg btn-custom" [attr.href]="bugReportUrl" target="_blank" role="button">Open a bug report on Github</a>
+    </div>
+    <div class="col">
+        <h3>Stacktrace:</h3>
+        <pre id="stacktrace">{{ currentReport.stacktrace }}</pre>
+    </div>
+    <div class="col">
+        <h3>Error datetime</h3>
+        <h4>{{ currentReport.datetime | date:'YYYY-MM-dd HH:mm:ss' }}</h4>
+    </div>
+    <div id="row">
+        <div class="col">
+            <h3>Logs:</h3>
+            <pre class="limit" id="logs">{{ currentReport.logs }}</pre>
+        </div>
+        <div class="col">
+            <h3>Config file:</h3>
+            <pre class="limit" id="config">{{ currentReport.config | json }}</pre>
+        </div>
+    </div>
+</div>
+<div id="page" *ngIf="!validReport && !loading">
+    <div id="text">
+        <h1>:(</h1>
+        <h2>Error report not found.</h2>
+    </div>
+</div>

UI/src/app/_components/error-report/error-report.component.scss

@@ -0,0 +1,136 @@
+/* Based on https://codepen.io/xontab/pen/JrVaYR */
+#page {
+  height: 100%;
+  margin: 0 auto;
+  width: 80%;
+  font-size: 1.9vw;
+  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
+  color: #fefeff;
+}
+
+@media (min-width: 840px) {
+  #page {
+    font-size: 140%;
+    width: 800px;
+  }
+}
+
+#text {
+  vertical-align: middle;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: normal;
+  padding: 0;
+  margin: 25px 0;
+  margin-top: 0;
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 6.5em;
+  margin-bottom: 10px;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.4em;
+  line-height: 1.5em;
+}
+
+h5 {
+  line-height: 1.1em;
+  font-size: 1.3em;
+}
+
+.limit {
+  overflow-x: scroll;
+  width: 300px;
+}
+
+#row {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  height: 200px;
+}
+
+.col {
+  padding: 1em;
+}
+
+.btn-custom {
+  background-color: white;
+  color: #007bff;
+  border-color: #007bff;
+}
+
+.btn-custom:hover {
+  color: #fff;
+  background-color: #0062cc;
+  border-color: #005cbf;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0px;
+  height: 0px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #e1e1e1;
+  border: 0px none #ffffff;
+  border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #ffffff;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: #ffffff;
+}
+
+::-webkit-scrollbar-track {
+  background: #868686;
+  border: 0px none #ffffff;
+  border-radius: 0px;
+}
+
+::-webkit-scrollbar-track:hover {
+  background: #868686;
+}
+
+::-webkit-scrollbar-track:active {
+  background: #727272;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+#backBtn {
+  position: absolute;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #fbfbfb;
+  color: black;
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 18px;
+  top: 10px;
+  left: 10px;
+}

UI/src/app/_components/error-report/error-report.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit, OnDestroy, AfterViewInit, Renderer2, ElementRef } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { SocketService } from 'src/app/_services/socket.service';
+import { ErrorReport } from 'src/app/_models/ErrorReport';
+import { NavbarVisibilityService } from 'src/app/_services/navbar-visibility.service';
+import { LocationBackService } from 'src/app/_services/locationBack.service';
+
+@Component({
+  selector: 'app-error-report',
+  templateUrl: './error-report.component.html',
+  styleUrls: ['./error-report.component.scss']
+})
+export class ErrorReportComponent implements OnInit, OnDestroy, AfterViewInit {
+  public currentReportId: string = "blank";
+  public currentReport: ErrorReport = {} as ErrorReport;
+  public loading = true;
+  public validReport = false;
+  public bugReportUrl = "";
+
+  constructor(
+    public route: ActivatedRoute,
+    public socketService: SocketService,
+    public navbarVisibilityService: NavbarVisibilityService,
+    public locationBackService: LocationBackService,
+    private renderer: Renderer2,
+    private el: ElementRef
+  ) {
+    navbarVisibilityService.hideNavbar();
+    this.route.params.subscribe((params) => {
+      if (params.errorReportId) {
+        this.currentReportId = params.errorReportId;
+      }
+    });
+  }
+
+  ngAfterViewInit() {
+    this.renderer.setStyle(
+      this.el.nativeElement.ownerDocument.body,
+      'background',
+      '#3973aa'
+    );
+  }
+
+  ngOnInit() {
+    this.socketService.getErrorReportById(this.currentReportId)
+      .then((errorReport) => {
+        this.currentReport = errorReport as ErrorReport;
+        this.loading = false;
+        this.validReport = true;
+        let bugTitle = "[Bug] "+this.currentReport.stacktrace.split("\n")[0];
+        this.bugReportUrl = `https://github.com/josephdadams/TallyArbiter/issues/new?labels=bug&template=bug.yaml&title=${encodeURIComponent(bugTitle)}&version=${this.socketService.version}&config=${encodeURIComponent(JSON.stringify(this.currentReport.config, null, 2))}&logs=${encodeURIComponent(this.currentReport.logs)}&stacktrace=${encodeURIComponent(this.currentReport.stacktrace)}`;
+        console.log("Error report found:");
+        console.log(errorReport);
+      })
+      .catch((response) => {
+        this.loading = false;
+        console.log("Error report not found");
+      });
+  }
+
+  ngOnDestroy() {
+    this.renderer.removeStyle(
+      this.el.nativeElement.ownerDocument.body,
+      'background'
+    );
+    this.navbarVisibilityService.showNavbar();
+  }
+
+}

UI/src/app/_components/error-reports-list/error-reports-list.component.html

@@ -0,0 +1,14 @@
+<div class="d-flex justify-content-center mt-5 pt-5" *ngIf="!socketService.errorReports">
+    <div class="spinner spinner-border"></div>
+</div>
+<div *ngIf="socketService.errorReports">
+    <div class="container mt-5">
+        <div class="form-group" *ngIf="socketService.errorReports.length > 0">
+            <select class='form-control col-xs-6 col-md-3' (change)="selectErrorReport($event)">
+                <option disabled selected>-- Select an error report --</option>
+                <option [value]="errorReport.id" *ngFor="let errorReport of socketService.errorReports">{{errorReport.datetime}}</option>
+            </select>
+        </div>
+    </div>
+    <h2 class="lead mt-5" *ngIf="socketService.errorReports.length == 0">Hurray! No error report detected.</h2>
+</div>

UI/src/app/_components/error-reports-list/error-reports-list.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import { SocketService } from 'src/app/_services/socket.service';
+
+@Component({
+  selector: 'app-error-reports-list',
+  templateUrl: './error-reports-list.component.html',
+  styleUrls: ['./error-reports-list.component.scss']
+})
+export class ErrorReportsListComponent implements OnInit {
+  constructor(
+    private router: Router,
+    public socketService: SocketService,
+  ) {
+    console.log(this.socketService.errorReports);
+
+  }
+
+  public selectErrorReport(id: any) {
+    this.router.navigate(["/", "errors", id.target.value]);
+  }
+
+  ngOnInit(): void {
+  }
+
+}

UI/src/app/_components/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService, LoginResponse } from 'src/app/_services/auth.service';
 
 @Component({
@@ -13,19 +13,50 @@ export class LoginComponent {
   public username = "";
   public password = "";
   private type!: "producer" | "settings";
+  private redirectParam = "";
+  private extraParam = "";
   @ViewChild("inputPassword") public inputPassword!: ElementRef;
 
-  constructor(private router: Router, private authService: AuthService) {
+  constructor(
+    public route: ActivatedRoute,
+    private router: Router,
+    private authService: AuthService
+  ) {
+    this.route.params.subscribe((params) => {
+      if (params.redirect) {
+        this.redirectParam = params.redirect;
+      }
+      if (params.extraParam) {
+        this.extraParam = params.extraParam;
+      }
+    });
+    console.log(this.redirectParam);
+    console.log(this.extraParam);
+    switch (this.redirectParam) {
+      case "producer":
+        this.type = "producer";
+        break;
+
+      case "errors":
+      case "settings":
+        this.type = "settings";
+        break;
+
+      default:
+        this.router.navigate(["/home"]);
+        break;
+    }
   }
 
   login(): void {
     this.loading = true;
-    this.type = this.router.url.endsWith("producer") ? "producer" : "settings";
     this.authService.login(this.type, this.username, this.password).then((response: LoginResponse) => {
       this.loginResponse = response;
       this.loading = false;
       if (response.loginOk === true) {
-        this.router.navigate([this.type]);
+        let navigateParams = [this.redirectParam];
+        if(this.extraParam !== "") navigateParams.push(this.extraParam);
+        this.router.navigate(navigateParams);
       }
     });
   }

UI/src/app/_components/settings/settings.component.ts

@@ -1,4 +1,5 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Confirmable } from 'src/app/_decorators/confirmable.decorator';
 import { CloudClient } from 'src/app/_models/CloudClient';
@@ -66,14 +67,34 @@ export class SettingsComponent {
 
   public newCloudKey = "";
 
-  constructor(private modalService: NgbModal, public socketService: SocketService) {
+  constructor(private modalService: NgbModal, public socketService: SocketService, private router: Router) {
     this.socketService.joinAdmins();
     this.socketService.closeModals.subscribe(() => this.modalService.dismissAll());
     this.socketService.scrollTallyDataSubject.subscribe(() => this.scrollToBottom(this.tallyDataContainer));
     this.socketService.newLogsSubject.subscribe(() => {
       this.filterLogs();
       this.scrollToBottom(this.logsContainer);
     });
+    this.socketService.socket.on('server_error', (id: string) => {
+      this.show_error(id);
+    });
+    this.socketService.socket.on('unreaded_error_reports', (list) => {
+      console.log(list);
+      if(list.length > 0) {
+        this.show_errors_list();
+      }
+    });
+    this.socketService.socket.emit('get_unreaded_error_reports');
+  }
+
+  @Confirmable("There was an unexpected error. Do you want to view the bug report?", false)
+  public show_error(id: string) {
+    this.router.navigate(['/errors', id]);
+  }
+
+  @Confirmable(`There are error reports that you haven't read yet. Do you want to open the list of errors now?`, false)
+  public show_errors_list() {
+    this.router.navigate(['/errors']);
   }
 
   private portInUse(portToCheck: number, sourceId: string) {