Security updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-wallboard",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -39,4 +39,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.7.3"
   }
-}
+}

src/app/footer/footer.component.html

@@ -6,5 +6,6 @@
         <span>Github</span>
       </a>
     </li>
+    <div class="version">App version: {{version}}</div>
   </ul>
 </footer>

src/app/footer/footer.component.scss

@@ -19,3 +19,9 @@ a {
   display: inline-flex;
   align-items: center;
 }
+
+.version {
+  color: white;
+  float: right;
+  margin-right: 1vmin;
+}

src/app/footer/footer.component.ts

@@ -1,15 +1,20 @@
 import { Component, OnInit } from '@angular/core';
 
+import packageJson from '../../../package.json';
+
+
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
 
+  public version: string = packageJson.version;
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
-}
+}

src/app/home/home.component.html

@@ -99,6 +99,7 @@ <h1 class="info-header">Agents at a glance</h1>
                 </mat-grid-tile>
             </mat-grid-list>
         </div>
+
         <mat-grid-tile-header class="tile-header-q">
             <span>
                 <button *ngIf="queuesStateDbcnv" mat-icon-button [matMenuTriggerFor]="menuQ">
@@ -131,24 +132,24 @@ <h1 class="info-header">Agents at a glance</h1>
 
     <!--RIGHT GRID-->
     <!--Agents states-->
-    <mat-grid-tile *ngIf="agentsStateDbcnv" class="agents-tile">
-        <div>
+    <mat-grid-tile *ngIf="agentsStateDbcnv" class="agents">
+        <div *ngIf="!agentShow; else agentDetailDiv">
             <div class="agents">
-                <div *ngFor="let d of agentsStateDbcnv._embedded.items" class="agent-ind">
+                <div *ngFor="let d of agentsStateDbcnv._embedded.items; let i=index" class="agent-ind">
                     <div [ngSwitch]="d.currentState">
                         <!--https://stackoverflow.com/questions/52558611/angular-6-grid-tiles-line-breaks-->
                         <!--https://stackoverflow.com/questions/46639498/style-border-error-in-angular4-->
-                        <img *ngSwitchCase="'LoggedOut'" src="./assets/blank_avatar.png" class="agent-pic agent-loggedout" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'Idle'" src="./assets/blank_avatar.png" class="agent-pic agent-idle" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'MakeBusy'" src="./assets/blank_avatar.png" class="agent-pic agent-makebusy" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'Acd'" src="./assets/blank_avatar.png" class="agent-pic agent-acd" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'NonAcd'" src="./assets/blank_avatar.png" class="agent-pic agent-nonacd" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'WorkTimer'" src="./assets/blank_avatar.png" class="agent-pic agent-worktimer" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'Incoming'" src="./assets/blank_avatar.png" class="agent-pic agent-ringing" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'AcdHold'" src="./assets/blank_avatar.png" class="agent-pic agent-acdhold" matTooltip="{{d.currentState}}">
-                        <img *ngSwitchCase="'Outbound'" src="./assets/blank_avatar.png" class="agent-pic agent-outb" matTooltip="{{d.currentState}}">
+                        <img *ngSwitchCase="'LoggedOut'" src="./assets/blank_avatar.png" class="agent-pic agent-loggedout" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'Idle'" src="./assets/blank_avatar.png" class="agent-pic agent-idle" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'MakeBusy'" src="./assets/blank_avatar.png" class="agent-pic agent-makebusy" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'Acd'" src="./assets/blank_avatar.png" class="agent-pic agent-acd" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'NonAcd'" src="./assets/blank_avatar.png" class="agent-pic agent-nonacd" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'WorkTimer'" src="./assets/blank_avatar.png" class="agent-pic agent-worktimer" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'Incoming'" src="./assets/blank_avatar.png" class="agent-pic agent-ringing" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'AcdHold'" src="./assets/blank_avatar.png" class="agent-pic agent-acdhold" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
+                        <img *ngSwitchCase="'Outbound'" src="./assets/blank_avatar.png" class="agent-pic agent-outb" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
                         <!--Default if state not of the above-->
-                        <img *ngSwitchDefault src="./assets/blank_avatar.png" class="agent-pic" matTooltip="{{d.currentState}}">
+                        <img *ngSwitchDefault src="./assets/blank_avatar.png" class="agent-pic" matTooltip="{{d.currentState}}" (click)="setAgentDetails(i)">
                         <p>
                             {{d.firstName}} {{d.lastName}}
                             <br>
@@ -158,6 +159,30 @@ <h1 class="info-header">Agents at a glance</h1>
                 </div>
             </div>
         </div>
+        <ng-template #agentDetailDiv>
+            <div *ngIf="agentDetails !== null">
+                <button mat-flat-button color="warn" (click)="agentShow = false">Close</button>
+                <br><span class="agent-details-label">Agent ID: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].id}}</span>
+                <br><span class="agent-details-label">Name: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].firstName}}&nbsp;{{agentsStateDbcnv._embedded.items[agentDetails].lastName}}</span>
+                <br><span class="agent-details-label">Current state: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].currentState}}</span>
+                <br><span class="agent-details-label">ACD conversations today: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].acdConversationsToday}}</span>
+                <br><span class="agent-details-label">Average time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].averageTime}}</span>
+                <br><span class="agent-details-label">Current Work timer: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].currentWorktimer}}</span>
+                <br><span class="agent-details-label">DND time for the day: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].doNotDisturbDurationToday}}</span>
+                <br><span class="agent-details-label">External answer time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].externalAnswerDurationToday}}</span>
+                <br><span class="agent-details-label">ACD Hold total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].holdAcdDurationToday}}</span>
+                <br><span class="agent-details-label">Logged in total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].loggedInDurationToday}}</span>
+                <br><span class="agent-details-label">Not present total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].loggedInNotPresentDurationToday}}</span>
+                <br><span class="agent-details-label">Make Busy total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].makeBusyDurationToday}}</span>
+                <br><span class="agent-details-label">Outbound total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].outboundDurationToday}}</span>
+                <br><span class="agent-details-label">Member of Agent Groups: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].presentInAgentGroups}}</span>
+                <br><span class="agent-details-label">Make Busy reason: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].reason}}</span>
+                <br><span class="agent-details-label">ACD total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].totalAcdDuration}}</span>
+                <br><span class="agent-details-label">Work timer total time: </span> <span class="agent-details-data">{{agentsStateDbcnv._embedded.items[agentDetails].workTimerDurationToday}}</span>
+
+            </div>
+
+        </ng-template>
         <mat-grid-tile-header class="tile-header-q">
             <span>Agents</span>
         </mat-grid-tile-header>

src/app/home/home.component.scss

@@ -71,10 +71,11 @@
     flex-flow: row wrap;
     justify-content: space-around;
     align-items: flex-start;
-    max-height: 50%;
+    margin-top: 10%;
     overflow: auto;
 }
 
+//Agent individual element
 .agent-ind {
     /*width: 10vmin;
     height: 10vmin;*/
@@ -138,3 +139,15 @@
     font-weight: lighter;
     font-size: smaller;
 }
+
+.agent-details-label {
+    font-weight: bolder;
+    font-size: 2.5vmin;
+    line-height: 3vmin;
+}
+
+.agent-details-data {
+    font-size: 2.5vmin;
+    font-weight: lighter;
+    line-height: 3vmin;
+}

src/app/home/home.component.ts

@@ -32,87 +32,20 @@ export class HomeComponent implements OnInit {
   //service level color
   slc: string = "#fc0303";
 
+  //View agent test
+  agentDetails: number = 0;
+  agentShow: boolean = false;
+
 
   queuesStateDb: any[] = [];
   queuesStateDbcnv!: QueuesState;
-  q: QItem[];
+  q!: QItem[];
 
 
   constructor(
     private dataService: DataService,
     private config: AppConfig,
-  ) {
-    /*Init default values for q, note [] */
-    this.q = [
-      { 
-      _links: {self: {href: ""}, queue: {href: ""}},
-      id: '',
-      abandonedConversationsAverageDurationToday: '',
-      abandonedConversationsInTheLast15Minutes: 0,
-      abandonedConversationsInTheLastHour: 0,
-      abandonedConversationsPercentageInTheLast15Minutes: 0,
-      abandonedConversationsPercentageInTheLastHour: 0,
-      abandonedConversationsPercentageToday: 0,
-      abandonedConversationsToday: 0,
-      agentLoggedInTotalDurationToday: '',
-      agentsAvailable:  0,
-      agentsIdle: 0,
-      agentsOnAcdConversations: 0,
-      agentsOnNonAcdConversations: 0,
-      agentsOnOutboundConversations: 0,
-      agentsUnavailable: 0,
-      agentsUnavailableInTheLast15Minutes: 0,
-      agentsUnavailableInTheLastHour: 0,
-      answeredConversationsAverageDurationInTheLast15Minutes: '',
-      answeredConversationsAverageDurationInTheLastHour: '',
-      answeredConversationsAverageDurationToday: '',
-      answeredConversationsByAgentGroup1Today: 0,
-      answeredConversationsByAgentGroup2Today: 0,
-      answeredConversationsByAgentGroup3Today: 0,
-      answeredConversationsByAgentGroup4Today: 0,
-      answeredConversationsInTheLast15Minutes: 0,
-      answeredConversationsInTheLastHour: 0,
-      answeredConversationsPercentageByAgentGroup1Today: 0,
-      answeredConversationsPercentageByAgentGroup2Today: 0,
-      answeredConversationsPercentageByAgentGroup3Today: 0,
-      answeredConversationsPercentageByAgentGroup4Today: 0,
-      answeredConversationsPercentageInTheLast15Minutes: 0,
-      answeredConversationsPercentageInTheLastHour: 0,
-      answeredConversationsPercentageToday: 0,
-      answeredConversationsToday: 0,
-      conversationAverageDurationInTheLast15Minutes: '',
-      conversationAverageDurationInTheLastHour: '',
-      conversationAverageDurationToday: '',
-      conversationTotalDurationToday: '',
-      estimatedWaitTimeForNewConversations: '',
-      interflowedConversationsInTheLast15Minutes: 0,
-      interflowedConversationsInTheLastHour: 0,
-      interflowedConversationsToday: 0,
-      isInDoNotDisturb: false,
-      longestWaitingConversationDuration: '',
-      longestWaitingStartedTime: new Date(0),
-      longestWaitingStartedTimeMediaServerId: '',
-      makeBusyTotalDurationToday: '',
-      offeredConversationsInTheLast15Minutes: 0,
-      offeredConversationsInTheLastHour: 0,
-      offeredConversationsToday: 0,
-      name: '',
-      reporting: '',
-      isGroup: false,
-      mediaType: '',
-      requeuedConversationsToday:  0,
-      serviceLevelPercentageInTheLast15Minutes: 0,
-      serviceLevelPercentageInTheLastHour: 0,
-      serviceLevelPercentageToday: 0,
-      serviceLevelGoalPercentage: 0,
-      timeOfLastReceivedUpdate: new Date(0),
-      transfersToUnavailableQueue: 0,
-      transfersToUnavailableQueueTotalToday: 0,
-      waitingConversations: 0,
-      workTimerTotalDurationToday: '',
-      _embedded: {}
-    }]
-  }
+  ) {}
 
   aQ: number = this.config.getConfig().activeQ; //active Queue chosen to view. Default is zero
   answP: boolean = this.config.getConfig().answeredAsPercent || false; //Answered calls as percent (true) or actual number (false)
@@ -237,6 +170,12 @@ export class HomeComponent implements OnInit {
         this.abndP = t;
       }
     }
+
+    //agentDetails
+    setAgentDetails(a: number) {
+      this.agentDetails = a;
+      this.agentShow = true;
+    }      
 
 
 }

src/app/page-not-found/page-not-found.component.html

@@ -1 +1,9 @@
-<p>page-not-found works!</p>
+<div class="main">
+    <div class="content">
+        <h1>Seems like you may be lost...Or something has gone wrong... <span style="font-size:5vmin">🤖</span> <br> The page you requested does not exist</h1>
+        <br>
+        <button mat-flat-button [routerLink]="'../home'" color="primary">Home page</button>
+    </div>
+</div>
+
+