CU-868a3neq0 fixed signalr issue fixed ui bug on call list

Resgrid · Oct 9, 2024 · eb4adb6 · eb4adb6
1 parent e7a480c
commit eb4adb6
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 16 deletions.
diff --git a/src/app/components/call-card/call-card.component.html b/src/app/components/call-card/call-card.component.html
@@ -1,7 +1,7 @@
 <ion-card [ngStyle]="{'background-color': getColor() }">
   <ion-item lines="none" class="user_data" [ngStyle]="{'background-color': getColor() }">
     <ion-label>
-     <p [style.color]="invertColor(getColor(), true)">{{ call?.Name }}</p> 
+     <p [style.color]="invertColor(getColor(), true)"><b>{{ call?.Name }}</b></p> 
     </ion-label>
     <ion-label slot="end" class="ion-no-margin ion-text-right">
       <span [style.color]="invertColor(getColor(), true)">{{ call?.LoggedOnUtc | rgTimeAgoUtc }}</span>
@@ -11,19 +11,17 @@
     <ion-card-subtitle [style.color]="invertColor(getColor(), true)" [innerHtml]="call?.Nature"></ion-card-subtitle>
   </ion-card-header>
   <ion-card-content>
-    <div class="icon-container ion-text-left">
-      <ul>
-        <li>
+      <ul style="width: 100%;">
+        <li style="width: 100%;">
           <ion-item lines="none" [ngStyle]="{'background-color': getColor() }">
             <ion-label [style.color]="invertColor(getColor(), true)">{{ call?.Address }}</ion-label>
           </ion-item>
         </li>
-        <li>
+        <li style="width: 100%;">
           <ion-item lines="none" [ngStyle]="{'background-color': getColor() }">
             <ion-label [style.color]="invertColor(getColor(), true)">{{ call?.Number }}</ion-label>
           </ion-item>
         </li>
       </ul>
-    </div>
   </ion-card-content>
 </ion-card>
diff --git a/src/app/components/call-info/call-info.component.html b/src/app/components/call-info/call-info.component.html
@@ -0,0 +1,28 @@
+<div class="bookings">
+  <ion-row>
+    <ion-col size="2">
+      <ion-label class="call-number">
+        {{ call?.Number }}
+      </ion-label>
+    </ion-col>
+    <ion-col size="10">
+      <ion-label class="call-name">{{ call?.Name }}</ion-label>
+    </ion-col>
+  </ion-row>
+  <ion-row style="padding-bottom: 10px; border-bottom: 1px solid lightgray;">
+    <ion-col size="11">
+      <ion-label class="call-nature" [innerHtml]="call?.Nature">
+      </ion-label>
+    </ion-col>
+  </ion-row>
+  <ion-row style="padding: 10px; border-bottom: 1px solid lightgray;">
+    <ion-col size="6">
+      <ion-label class="call-priority" [style.color]="getColor()">{{getPriorityName()}}</ion-label>
+      <ion-label class="call-date-time">{{ getDate(call?.LoggedOn) }}</ion-label>
+      <ion-label class="call-date-time">{{ call?.LoggedOnUtc | rgTimeAgoUtc }}</ion-label>
+    </ion-col>
+    <ion-col size="6">
+      <ion-label class="call-address">{{ call?.Address }}</ion-label>
+    </ion-col>
+  </ion-row>
+</div>
diff --git a/src/app/components/call-info/call-info.component.scss b/src/app/components/call-info/call-info.component.scss
@@ -0,0 +1,55 @@
+.bookings {
+  width: 94%;
+  margin-top: 20px;
+  margin-left: 10px;
+  margin-right: 10px;
+  box-shadow: 0px 0px 10px 0px grey;
+  border-radius: 5px;
+  overflow: hidden;
+
+  .call-name {
+    display: block;
+    font-size: 16px;
+    text-align: right;
+    overflow: hidden;
+  }
+
+  .call-nature {
+    display: block;
+    font-size: 12px;
+    color: gray;
+    text-align: left;
+  }
+
+  .call-number {
+    font-size: 12px;
+    white-space: nowrap;
+    color: gray;
+    text-align: left;
+  }
+
+  .call-address {
+    font-size: 12px;
+    text-align: left;
+  }
+
+  .call-priority {
+    display: block;
+    font-size: 16px;
+    text-align: left;
+    overflow: hidden;
+  }
+
+  .person-group {
+    display: block;
+    font-size: 14px;
+    text-align: left;
+  }
+
+  .call-date-time {
+    font-size: 12px;
+    display: block;
+    text-align: left;
+    color: var(--ion-color-primary);
+  }
+}
diff --git a/src/app/components/call-info/call-info.component.ts b/src/app/components/call-info/call-info.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+import { CallPriorityResultData, CallResultData, UtilsService } from '@resgrid/ngx-resgridlib';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-call-card-info',
+  templateUrl: './call-info.component.html',
+  styleUrls: ['./call-info.component.scss'],
+})
+export class CallInfoComponent implements OnInit {
+  @Input() call: CallResultData;
+  @Input() priority: CallPriorityResultData;
+  @Input() color: string;
+
+  constructor(private utilsProvider: UtilsService) {}
+
+  ngOnInit() {}
+
+  getColor() {
+    if (!this.call) {
+      return 'gray';
+    } else if (this.call.CallId === '0') {
+      return 'gray';
+    } else if (this.priority) {
+      return this.priority.Color;
+    }
+  }
+
+  getPriorityName() {
+    if (!this.call) {
+      return 'Normal';
+    } else if (this.call.CallId === '0') {
+      return 'Normal';
+    } else if (this.priority) {
+      return this.priority.Name;
+    }
+
+    return 'Normal';
+  }
+
+  public getDate(date) {
+		return this.utilsProvider.getDate(date);
+	}
+}
diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
@@ -7,6 +7,7 @@ import { NgxResgridLibModule } from '@resgrid/ngx-resgridlib';
 import { CTAPanelComponent } from './cta-panel/cta-panel';
 import { NoteCardComponent } from './note-card/note-card.component';
 import { ProtocolCardComponent } from './protocol-card/protocol-card.component';
+import { CallInfoComponent } from './call-info/call-info.component';
 
 @NgModule({
     imports: [
@@ -20,13 +21,15 @@ import { ProtocolCardComponent } from './protocol-card/protocol-card.component';
         CallCardComponent,
         CTAPanelComponent,
         NoteCardComponent,
-        ProtocolCardComponent
+        ProtocolCardComponent,
+        CallInfoComponent
     ],
     exports: [
         CallCardComponent,
         CTAPanelComponent,
         NoteCardComponent,
-        ProtocolCardComponent
+        ProtocolCardComponent,
+        CallInfoComponent
     ]
 })
 export class ComponentsModule {}
diff --git a/src/app/features/home/pages/settings/settings.page.html b/src/app/features/home/pages/settings/settings.page.html
@@ -75,19 +75,19 @@ <h2>{{'settingsPage.keepActiveLabel' | translate}}</h2>
             </ion-label>
             <ion-toggle item-end color="primary" [checked]="keepAlive$ | async" (ionChange)="setKeepAlive($event)"></ion-toggle>
           </ion-item>
-          <ion-item lines="none" *ngIf="(homeState$ | async).isMobileApp">
+          <!--<ion-item lines="none">
             <ion-avatar slot="start" class="blue-bg">
-              <ion-icon name="tv-outline"></ion-icon>
+              <ion-icon name="pin-outline"></ion-icon>
             </ion-avatar>
             <ion-label>
               <h2>{{'settingsPage.showAllOnMapLabel' | translate}}</h2>
               <p>{{'settingsPage.showAllOnMapLabelText' | translate}}</p>
             </ion-label>
             <ion-toggle item-end color="primary" [checked]="showAll$ | async" (ionChange)="setShowAll($event)"></ion-toggle>
-          </ion-item>
+          </ion-item>-->
           <ion-item lines="none" *ngIf="(homeState$ | async).isMobileApp">
             <ion-avatar slot="start" class="gray-bg">
-              <ion-icon name="pin-outline"></ion-icon>
+              <ion-icon name="compass-outline"></ion-icon>
             </ion-avatar>
             <ion-label>
               <h2>{{'settingsPage.backgroundGeolocationLabel' | translate}}</h2>

diff --git a/src/app/features/home/providers/home.ts b/src/app/features/home/providers/home.ts
@@ -145,19 +145,37 @@ export class HomeProvider {
       }
     );
     this.events.subscribe(
-      this.consts.SIGNALR_EVENTS.PERSONNEL_STAFFING_UPDATED,
+      this.consts.SIGNALR_EVENTS.UNIT_STATUS_UPDATED,
       (data: any) => {
-        //this.homeStore.dispatch(new HomeActions.RefreshMapData());
+        this.homeStore.dispatch(new HomeActions.RefreshMapData());
       }
     );
     this.events.subscribe(
-      this.consts.SIGNALR_EVENTS.UNIT_STATUS_UPDATED,
+      this.consts.SIGNALR_EVENTS.CALLS_UPDATED,
       (data: any) => {
         this.homeStore.dispatch(new HomeActions.RefreshMapData());
       }
     );
     this.events.subscribe(
-      this.consts.SIGNALR_EVENTS.CALLS_UPDATED,
+      this.consts.SIGNALR_EVENTS.CALL_ADDED,
+      (data: any) => {
+        this.homeStore.dispatch(new HomeActions.RefreshMapData());
+      }
+    );
+    this.events.subscribe(
+      this.consts.SIGNALR_EVENTS.CALL_CLOSED,
+      (data: any) => {
+        this.homeStore.dispatch(new HomeActions.RefreshMapData());
+      }
+    );
+    this.events.subscribe(
+      this.consts.SIGNALR_EVENTS.PERSONNEL_LOCATION_UPDATED,
+      (data: any) => {
+        this.homeStore.dispatch(new HomeActions.RefreshMapData());
+      }
+    );
+    this.events.subscribe(
+      this.consts.SIGNALR_EVENTS.UNIT_LOCATION_UPDATED,
       (data: any) => {
         this.homeStore.dispatch(new HomeActions.RefreshMapData());
       }