Implement alerts via frontend

frontend/src/app/_components/modal-alert/modal-alert.component.html

@@ -0,0 +1,54 @@
+<div class="modal-header">
+    <h4 class="modal-title pull-left">Stato dell'allerta</h4>
+    <button type="button" class="btn-close close pull-right" [attr.aria-label]="'close'|translate|titlecase" (click)="bsModalRef.hide()">
+        <span aria-hidden="true" class="visually-hidden">&times;</span>
+    </button>
+</div>
+<div class="modal-body" *ngIf="id == 0">
+    <div class="d-flex justify-content-center mt-2 pt-2 mb-3">
+        <div class="spinner spinner-border"></div>
+    </div>
+</div>
+<div class="modal-body" *ngIf="id !== 0">
+    <table class="table table-border table-striped w-100">
+        <thead>
+            <tr>
+                <td>Nome</td>
+                <td colspan="2">Stato risposta</td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let user of users">
+                <td>{{ user.name }}</td>
+                <ng-container *ngIf="user.response == 'waiting'">
+                    <td style="width: 1px;"><i class="fas fa-spinner fa-spin"></i></td>
+                    <td>In attesa di risposta</td>
+                </ng-container>
+                <ng-container *ngIf="user.response == true">
+                    <td style="width: 1px;"><i class="fa fa-check" style="color:green"></i></td>
+                    <td>Presente</td>
+                </ng-container>
+                <ng-container *ngIf="user.response == false">
+                    <td style="width: 1px;"><i class="fa fa-times" style="color:red"></i></td>
+                    <td>Non presente</td>
+                </ng-container>
+            </tr>
+        </tbody>
+    </table>
+    <button type="button" class="btn btn-primary mb-2" (click)="isAdvancedCollapsed = !isAdvancedCollapsed"
+        [attr.aria-expanded]="!isAdvancedCollapsed" aria-controls="collapseBasic">
+        <ng-container *ngIf="isAdvancedCollapsed">Mostra impostazioni avanzate</ng-container>
+        <ng-container *ngIf="!isAdvancedCollapsed">Nascondi impostazioni avanzate</ng-container>
+    </button>
+    <div [collapse]="isAdvancedCollapsed" [isAnimated]="true">
+        <div class="well well-lg card card-block card-header">
+            <label for="details" class="form-label">Dettagli allerta</label>
+            <textarea class="form-control" id="details" rows="3" [(ngModel)]="notes"></textarea>
+            <button class="btn btn-secondary mt-2" (click)="saveAlertSettings()">Salva</button>
+        </div>
+    </div>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="deleteAlert()">Rimuovi allerta corrente <i class="fas fa-exclamation-triangle"></i></button>
+    <button type="button" class="btn btn-secondary" (click)="bsModalRef.hide()">{{ 'close'|translate }}</button>
+</div>

frontend/src/app/_components/modal-alert/modal-alert.component.ts

@@ -0,0 +1,99 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { ApiClientService } from 'src/app/_services/api-client.service';
+import { ToastrService } from 'ngx-toastr';
+import Swal from 'sweetalert2';
+
+@Component({
+  selector: 'modal-alert',
+  templateUrl: './modal-alert.component.html',
+  styleUrls: ['./modal-alert.component.scss']
+})
+export class ModalAlertComponent implements OnInit, OnDestroy {
+  type = "full";
+  id = 0;
+
+  users = [
+    {
+      name: "Nome1",
+      response: "waiting"
+    },
+    {
+      name: "Nome2",
+      response: true
+    },
+    {
+      name: "Nome3",
+      response: false
+    },
+  ];
+
+  isAdvancedCollapsed = true;
+  loadDataInterval: NodeJS.Timer | undefined = undefined;
+
+  notes = "";
+
+  constructor(public bsModalRef: BsModalRef, private api: ApiClientService, private toastr: ToastrService) { }
+
+  loadResponsesData() {
+    this.api.get(`alert/${this.id}`).then((response) => {
+      console.log(response);
+      this.users = response.users;
+    });
+  }
+
+  ngOnInit() {
+    this.loadDataInterval = setInterval(() => {
+      if (typeof (window as any).skipTableReload !== 'undefined' && (window as any).skipTableReload) {
+        return;
+      }
+      console.log("Refreshing responses data...");
+      this.loadResponsesData();
+    }, 2000);
+    this.loadResponsesData();
+  }
+
+  ngOnDestroy() {
+    if (this.loadDataInterval) {
+      console.log("Clearing interval...");
+      clearInterval(this.loadDataInterval);
+    }
+  }
+
+  saveAlertSettings() {
+    this.api.post(`alert/${this.id}/settings`, {
+      notes: this.notes
+    }).then((response) => {
+      this.toastr.success("Impostazioni salvate con successo");
+    });
+  }
+
+  deleteAlert() {
+    Swal.fire({
+      title: "Sei sicuro di voler ritirare l'allarme?",
+      text: "I vigili verranno avvisati dell'azione",
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: "Si, rimuovi",
+      cancelButtonText: "Annulla"
+    }).then((result: any) => {
+      if (result.isConfirmed) {
+        this.api.delete(`alert/${this.id}`).then((response) => {
+          console.log(response);
+          this.bsModalRef.hide();
+        /*
+          this.translate.get('table.service_deleted_successfully').subscribe((res: string) => {
+            this.toastr.success(res);
+          });
+          this.loadTableData();
+        }).catch((e) => {
+          this.translate.get('table.service_deleted_error').subscribe((res: string) => {
+            this.toastr.error(res);
+        */
+        });
+      }
+    });
+  }
+}

frontend/src/app/_routes/list/list.component.html

@@ -18,6 +18,16 @@
     </button>
 </div>
 <owner-image></owner-image>
+<div class="text-center">
+    <div class="btn-group" role="group">
+        <button type="button" class="btn btn-danger" (click)="addAlertFull()">
+            🚒 Richiedi squadra completa
+        </button>
+        <button type="button" class="btn btn-warning" (click)="addAlertSupport()">
+            Richiedi squadra di assistenza 🧯
+        </button>
+    </div>
+</div>
 <app-table [sourceType]="'list'" (changeAvailability)="changeAvailibility($event.newState, $event.user)" #table></app-table>
 <div class="text-center">
     <button (click)="requestTelegramToken()" class="btn btn-md btn-success mt-3">{{ 'list.connect_telegram_bot'|translate }}</button>

frontend/src/app/_routes/list/list.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { TableComponent } from '../../_components/table/table.component';
 import { ModalAvailabilityScheduleComponent } from '../../_components/modal-availability-schedule/modal-availability-schedule.component';
+import { ModalAlertComponent } from 'src/app/_components/modal-alert/modal-alert.component';
 import { ApiClientService } from 'src/app/_services/api-client.service';
 import { ToastrService } from 'ngx-toastr';
-import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+import { BsModalService, BsModalRef, ModalOptions } from 'ngx-bootstrap/modal';
 import { TranslateService } from '@ngx-translate/core';
 import { AuthService } from 'src/app/_services/auth.service';
 
@@ -14,6 +15,7 @@ import { AuthService } from 'src/app/_services/auth.service';
 })
 export class ListComponent implements OnInit {
   scheduleModalRef?: BsModalRef;
+  alertModalRef?: BsModalRef;
   @ViewChild('table') table!: TableComponent;
 
   public loadAvailabilityInterval: NodeJS.Timer | undefined = undefined;
@@ -69,6 +71,32 @@ export class ListComponent implements OnInit {
     this.scheduleModalRef = this.modalService.show(ModalAvailabilityScheduleComponent, Object.assign({}, { class: 'modal-custom' }));
   }
 
+  addAlertFull() {
+    this.api.post("alert", {
+      alert_type: "full"
+    }).then((response) => {
+      this.alertModalRef = this.modalService.show(ModalAlertComponent, {
+        initialState: {
+          type: "full",
+          id: response.id
+        }
+      });
+    });
+  }
+
+  addAlertSupport() {
+    this.api.post("alert", {
+      alert_type: "support"
+    }).then((response) => {
+      this.alertModalRef = this.modalService.show(ModalAlertComponent, {
+        initialState: {
+          type: "support",
+          id: response.id
+        }
+      });
+    });
+  }
+
   ngOnInit(): void {
     this.loadAvailabilityInterval = setInterval(() => {
       console.log("Refreshing availability...");

frontend/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { TranslationModule } from './translation.module';
 import { ToastrModule } from 'ngx-toastr';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -17,6 +18,7 @@ import { environment } from '../environments/environment';
 
 import { TableComponent } from './_components/table/table.component';
 import { ModalAvailabilityScheduleComponent } from './_components/modal-availability-schedule/modal-availability-schedule.component';
+import { ModalAlertComponent } from './_components/modal-alert/modal-alert.component';
 import { OwnerImageComponent } from './_components/owner-image/owner-image.component';
 
 import { LoginComponent } from './_routes/login/login.component';
@@ -34,6 +36,7 @@ import { AuthInterceptor } from './_providers/auth-interceptor.provider';
     //
     TableComponent,
     ModalAvailabilityScheduleComponent,
+    ModalAlertComponent,
     OwnerImageComponent,
     //
     LoginComponent,
@@ -57,6 +60,7 @@ import { AuthInterceptor } from './_providers/auth-interceptor.provider';
     }),
     ModalModule.forRoot(),
     TooltipModule.forRoot(),
+    CollapseModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: false && environment.production,
       // Register the ServiceWorker as soon as the app is stable