add filter to pay-in

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "broker",
-  "version": "0.0.0",
+  "version": "2.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,9 +1,10 @@
 {
   "name": "broker",
-  "version": "0.0.0",
+  "version": "2.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
+    "prebuild": "npm --no-git-tag-version version patch",
     "build": "ng build ",
     "buildsfm": "ng build --prod --base-href=/broker/ --deploy-url=/broker/ ",
     "test": "ng test",

src/app/app.component.ts

@@ -7,7 +7,7 @@ import {WebSocketService} from './websocket';
 import {Title} from '@angular/platform-browser';
 import {WsLoginEventModel} from './models/websocket/ws.login.event.model';
 import {SessionService} from './service/session.service';
-import {AppConfig} from './app.config';
+import {environment} from '../environments/environment';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +16,8 @@ import {AppConfig} from './app.config';
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit , OnDestroy {
-  title = 'SFM Advanced Loan management';
+  title = 'SFM Web Office';
+  currentApplicationVersion = environment.appVersion;
   private menuItemSub: Subscription;
   @ViewChild('loanEditComponent', {static: true}) loanEdit: LoanEditComponent;
 
@@ -29,8 +30,9 @@ export class AppComponent implements OnInit , OnDestroy {
               private ss: SessionService,
               private wsService: WebSocketService,
               private titleService: Title){
+    this.title = 'SFM Web Office (' + this.currentApplicationVersion + ')';
     this.webSocketSubscription = wsService.subscribe(m => {
-        console.log('websocket server send this :', m);
+        // console.log('websocket server send this :', m);
     });
 
     this.wsLoginSub = this.wsService.LoginEvent.subscribe( m => {

src/app/app.config.model.ts

@@ -1,7 +1,14 @@
+import {environment} from '../environments/environment';
 
 export class AppConfigModel {
-  Server = 'https://c5016.biukop.com.au:8080/api/v1/';
-  Socket = 'ws://c5016.biukop.com.au:8080/api/v1/';
-  SessionStorageKey = 'sk';
-  Version = 2021;
+  public Server = 'https://c5016.biukop.com.au:8080/api/v1/';
+  public Socket = 'ws://c5016.biukop.com.au:8080/api/v1/';
+  public SessionStorageKey = 'sk';
+  public Version ? = environment.appVersion;
+  constructor(payload: Partial<AppConfigModel>) {
+    this.Server = payload.Server || 'https://c5016.biukop.com.au:8080/api/v1/';
+    this.Socket = payload.Socket || 'ws://c5016.biukop.com.au:8080/api/v1/';
+    this.SessionStorageKey = payload.SessionStorageKey || 'sk';
+    this.Version = environment.appVersion;
+  }
 }

src/app/app.config.ts

@@ -1,24 +1,24 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {AppConfigModel} from './app.config.model';
+import {environment} from '../environments/environment';
 
 
 
 @Injectable()
 export class AppConfig {
-  static config: AppConfigModel;
+  static config = new AppConfigModel({});
+  static currentApplicationVersion = environment.appVersion;
   static debugConfig: AppConfigModel = {
     Server: 'https://svr2021.lawipac.com:8080/api/v1/',
     Socket: 'wss://svr2021.lawipac.com:8080/api/v1/ws',
     SessionStorageKey: 'sk',
-    Version: 2021
   };
 
   static productionConfig: AppConfigModel = {
     Server: 'https://c5016.biukop.com.au:8080/api/v1/',
     Socket: 'wss://c5016.biukop.com.au:8080/api/v1/ws',
     SessionStorageKey : 'sk',
-    Version: 2021
   };
 
   constructor(private http: HttpClient) {}
@@ -27,15 +27,16 @@ export class AppConfig {
     return new Promise<void>((resolve, reject) => {
       const el: HTMLElement = document.getElementById('config');
       try {
+        AppConfig.config.Version = AppConfig.currentApplicationVersion;
         if ( location.href.includes('//localhost:4200/') ) {
           AppConfig.config = AppConfig.debugConfig;
           // AppConfig.config.Server = '/api/v1/';
-          console.log('Using Debug Config:', AppConfig.config);
+          // console.log('Using Debug Config:', AppConfig.config);
         }else{
           const json = this.decode(el.innerText);
           AppConfig.config = JSON.parse(json);
           // AppConfig.config.Server = '/api/v1/';
-          console.log('Using Production Config:', AppConfig.config);
+          // console.log('Using Production Config:', AppConfig.config);
         }
         resolve();
       }catch (e){

src/app/app.module.ts

@@ -113,6 +113,8 @@ import { RewardsAllComponent } from './rewards-all/rewards-all.component';
 import { SinglePayoutRewardsListComponent } from './single-payout-rewards-list/single-payout-rewards-list.component';
 import {SessionService} from './service/session.service';
 import { NumberRangeFilterComponent } from './grid-filter/number-range-filter/number-range-filter.component';
+import { StringFilterComponent } from './grid-filter/string-filter/string-filter.component';
+import { DateFilterComponent } from './grid-filter/date-filter/date-filter.component';
 
 
 
@@ -194,6 +196,8 @@ export function initializeApp(appConfig: AppConfig): () => Promise<void> {
     RewardsAllComponent,
     SinglePayoutRewardsListComponent,
     NumberRangeFilterComponent,
+    StringFilterComponent,
+    DateFilterComponent,
   ],
     imports: [
         BrowserModule,

src/app/auth/auth.component.html

@@ -3,7 +3,8 @@
         <img src="../../assets/img/logo.png">
         <form *ngIf='!loading' class="k-form " [formGroup]="userForm" (ngSubmit)="submitForm()">
             <fieldset class="k-form-fieldset">
-                <legend class="k-form-legend">Login to Supercredit</legend>
+                <legend class="k-form-legend">Login to Web Office
+                  <sup>{{currentApplicationVersion}}</sup></legend>
                 <kendo-formfield [showErrors]="'initial'">
                     <kendo-label [for]="email" text="Email"></kendo-label>
                     <input formControlName="email" kendoTextBox #email required/>

src/app/auth/auth.component.ts

@@ -6,6 +6,7 @@ import { Subscription } from 'rxjs';
 import { AuthService } from '../service/auth.service';
 import {ApiV1LoginResponse} from '../models/api-v1-login-response';
 import {SessionService} from '../service/session.service';
+import {environment} from '../../environments/environment';
 
 @Component({
   selector: 'app-auth',
@@ -15,6 +16,7 @@ import {SessionService} from '../service/session.service';
 export class AuthComponent implements OnInit, OnDestroy{
   loading: boolean ; // a state that user is currently loading loggin
   loginSub: Subscription;
+  currentApplicationVersion = environment.appVersion;
 
   public userForm: FormGroup = new FormGroup({
     password: new FormControl('pass', [Validators.minLength(3), Validators.maxLength(20)]),

src/app/grid-filter/date-filter/date-filter.component.html

@@ -0,0 +1,6 @@
+<kendo-dateinput [format]="'dd/MM/yyyy'"  [placeholder]="'dd/mm/yyy'"
+                 [(ngModel)]="date" (valueChange)="onDateChange($event)"></kendo-dateinput>
+<img src="../../../assets/img/signs/plus-minus-sign-small-grey.png">
+<kendo-dropdownlist [data]="rangeData" [(ngModel)]="range" (valueChange)="onRangeChange($event)">
+
+</kendo-dropdownlist>

src/app/grid-filter/date-filter/date-filter.component.scss

@@ -0,0 +1,9 @@
+kendo-dropdownlist {
+  max-width: 50px;
+}
+
+img{
+  width: 16px;
+  height: 16px;
+  margin: 7px 5px 5px;
+}

src/app/grid-filter/date-filter/date-filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateFilterComponent } from './date-filter.component';
+
+describe('DateFilterComponent', () => {
+  let component: DateFilterComponent;
+  let fixture: ComponentFixture<DateFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DateFilterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DateFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/grid-filter/date-filter/date-filter.component.ts

@@ -0,0 +1,114 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {BaseFilterCellComponent, FilterService} from '@progress/kendo-angular-grid';
+import {CompositeFilterDescriptor, FilterDescriptor} from '@progress/kendo-data-query';
+import {debounce} from 'ts-debounce';
+
+@Component({
+  selector: 'app-date-filter',
+  templateUrl: './date-filter.component.html',
+  styleUrls: ['./date-filter.component.scss']
+})
+export class DateFilterComponent extends BaseFilterCellComponent  implements OnInit {
+  @Input() filter: CompositeFilterDescriptor;
+  @Input() data: Date;
+  @Input() fieldName = '';
+  @Input() start = 0;
+  @Input() end = 0;
+
+  public date: Date;
+  @Input() public range = 0;
+  public rangeData = [];
+
+  public debouncedDoFilter = debounce(this.doFilter, 500);
+  constructor(filterService: FilterService) { super(filterService); }
+
+  ngOnInit(): void {
+    this.rangeData = this.rangeBetween(this.start, this.end);
+    if ( this.range < this.start){
+      this.range = this.start;
+    }
+    if ( this.range > this.end ){
+      this.range = this.end;
+    }
+    this.date = new Date();
+  }
+
+  private rangeBetween(start: number, end: number): number[] {
+    let ret = [];
+    if (start > end) {
+      ret = new Array(start - end + 1);
+      for (let i = 0; i < ret.length; i++, start--) {
+        ret[i] = start;
+      }
+      return ret;
+    } else {
+      ret = new Array(end - start + 1);
+      for (let j = 0; j < ret.length; j++, start++){
+        ret[j] = start;
+      }
+      return ret;
+    }
+  }
+
+  public onDateChange(d: Date): void {
+    console.log(this.date);
+    this.debouncedDoFilter().then();
+  }
+  public onRangeChange(r: number): void {
+    console.log(this.date, r);
+    this.debouncedDoFilter().then();
+  }
+
+  private doFilter(): void {
+    if ( this.date === null || this.date.getFullYear() < 1900){
+      this.applyFilter(this.removeFilter(this.fieldName));
+      return;
+    }
+
+    if ( this.range === 0 ){
+      this.buildSingleFilter();
+    }else{
+      this.buildRangeFilter();
+    }
+  }
+
+  private buildSingleFilter(): void {
+    if ( this.date < new Date('1900-01-01') ){
+      this.applyFilter(this.removeFilter(this.fieldName));
+      return;
+    }else{
+      this.applyFilter(this.updateFilter({
+        field: this.fieldName,
+        operator: 'eq',
+        value: this.date
+      }));
+    }
+  }
+
+  private buildRangeFilter(): void {
+    const fs: FilterDescriptor[] = [];
+    const start: Date = new Date(this.date); start.setDate(this.date.getDate() - this.range);
+    const end: Date = new Date(this.date); end.setDate(this.date.getDate() + this.range);
+    console.log(new Date(start), new Date(end));
+    fs.push({
+      field: this.fieldName,
+      operator: 'gte',
+      value: start.getTime()
+    });
+
+    fs.push({
+      field: this.fieldName,
+      operator: 'lte',
+      value: end.getTime()
+    });
+    this.removeFilter(this.fieldName);
+    const root: CompositeFilterDescriptor = this.filter || { logic: 'and',
+      filters: fs,
+    };
+    if (fs.length) {
+      root.filters.push(...fs);
+    }
+    this.filterService.filter(root);
+  }
+
+}

src/app/grid-filter/number-range-filter/number-range-filter.component.ts

@@ -72,7 +72,6 @@ export class NumberRangeFilterComponent extends BaseFilterCellComponent implemen
   }
 
   ngOnInit(): void {
-    console.log(this);
     this.initAvailableOperators();
     this.showOperatorChoice = this.availableOperators.length > 1 ||
       ( this.availableOperators[0].op !== '=' && this.availableOperators[0].op !== ' ');
@@ -86,7 +85,7 @@ export class NumberRangeFilterComponent extends BaseFilterCellComponent implemen
 
   private initAvailableOperators(): void {
     this.availableOperators = this.AllOperatorMap.filter(  v => {
-      console.log(v, this.options.indexOf(v.value), this.options);
+      // console.log(v, this.options.indexOf(v.value), this.options);
       return this.options.indexOf(v.value) !== -1;
     } );
     if ( this.availableOperators.length === 0) {
@@ -219,6 +218,11 @@ export class NumberRangeFilterComponent extends BaseFilterCellComponent implemen
       return;
     }
 
+    if (this.isEmpty(this.valueFrom)){
+      this.applyFilter(this.removeFilter(this.fieldName));
+      return;
+    }
+
     if (this.singleMode) {
       this.buildSingleFilter();
     } else {

src/app/grid-filter/string-filter/string-filter.component.html

@@ -0,0 +1 @@
+<kendo-textbox [(ngModel)]="data" (valueChange)="onValueChange($event)"> </kendo-textbox>

src/app/grid-filter/string-filter/string-filter.component.scss

@@ -0,0 +1,3 @@
+kendo-textbox {
+  border-bottom: 1px solid darkgrey;
+}

src/app/grid-filter/string-filter/string-filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StringFilterComponent } from './string-filter.component';
+
+describe('StringFilterComponent', () => {
+  let component: StringFilterComponent;
+  let fixture: ComponentFixture<StringFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StringFilterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StringFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/grid-filter/string-filter/string-filter.component.ts

@@ -0,0 +1,38 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {BaseFilterCellComponent, FilterService} from '@progress/kendo-angular-grid';
+import {CompositeFilterDescriptor} from '@progress/kendo-data-query';
+import {debounce} from 'ts-debounce';
+
+@Component({
+  selector: 'app-string-filter',
+  templateUrl: './string-filter.component.html',
+  styleUrls: ['./string-filter.component.scss']
+})
+export class StringFilterComponent extends BaseFilterCellComponent implements OnInit {
+  @Input() public filter: CompositeFilterDescriptor;
+  @Input() data = '';
+  @Input() fieldName = '';
+  public debouncedFilter = debounce(this.doFilter, 500);
+  constructor(filterService: FilterService) { super(filterService); }
+
+  ngOnInit(): void {
+  }
+
+  public onValueChange(v: string): void {
+    if ( this.fieldName !== '' ){
+      this.debouncedFilter(v).then();
+    }
+  }
+
+  public doFilter(v: string): void {
+    this.applyFilter(
+      v === '' || v === null ?
+        this.removeFilter(this.fieldName) :
+        this.updateFilter({
+          field: this.fieldName,
+          operator: 'eq',
+          value: v
+        })
+    );
+  }
+}

src/app/pay-in/pay-in.component.html

@@ -5,15 +5,15 @@
             [pageSize]="filter.Take"
             [skip]="filter.Skip"
             [sortable]="sortable"
-            [filterable]="'row'"
+            [filterable]="allowFilter"
             [loading]="loading"
 
             [sort]="filter.Sort"
             [filter]="state.filter"
 
-            [selectable]="true"
+            [selectable]="selectable"
             kendoGridSelectBy
-            [selectedKeys]="gridSelection"
+            [selectedKeys]="Selection"
 
             [rowClass]="rowClassCallbackBind"
 
@@ -38,7 +38,9 @@
       <div [ngStyle]="{'width': allowAddNew? '70%': '100%'}" class="filter-panel-wrapper" >
         <span *ngIf="uploadMeta.Id > 0 " class="badge badge-pill badge-primary specific-upload"> {{uploadMeta.Id}}  </span>
         <span *ngIf="uploadMeta.Id > 0 " class="badge badge-secondary specific-upload"> {{uploadMeta.FileName}} </span>
-        <button kendoButton icon="filter" (click)="showFilter()" >Filter</button>
+        <button *ngIf="false" kendoButton icon="filter" (click)="showFilter()" >Filter</button>
+        <kendo-switch [(ngModel)]="allowFilter"      onLabel="🝖"
+                      offLabel="all"></kendo-switch>
       </div>
     </div>
   </ng-template>
@@ -56,7 +58,7 @@
   <kendo-grid-column field="Id" title="Id" width="100" editable="false">
     <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
         <app-number-range-filter [filter]="filter" [fieldName]="'Id'"
-                                 [min]=1
+                                 [options]="['eq']" [min]=1
         >
         </app-number-range-filter>
     </ng-template>
@@ -72,20 +74,44 @@
         [loading]="lenderNameService.loading">
       </kendo-combobox>
     </ng-template>
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-string-filter [filter]="filter" [fieldName]="'Lender'">
+      </app-string-filter>
+    </ng-template>
+
   </kendo-grid-column>
   <kendo-grid-column field="LoanNumber" title="Lender Loan Id" width="150" editor="string">
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-string-filter [filter]="filter"  [fieldName]="'LoanNumber'">
+      </app-string-filter>
+    </ng-template>
   </kendo-grid-column>
 
   <kendo-grid-column field="IncomeAmount" title="Income" width="150" format="{0:c}" editor="numeric">
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-number-range-filter [filter]="filter" [fieldName]="'IncomeAmount'"
+                               [options]="['eq', 'lte', 'gte', 'range']" [min]=0
+      >
+      </app-number-range-filter>
+    </ng-template>
   </kendo-grid-column>
 
   <kendo-grid-column field="IncomeType" title="Type" width="150"  editor="string">
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-string-filter [filter]="filter" [fieldName]="'IncomeType'">
+      </app-string-filter>
+    </ng-template>
   </kendo-grid-column>
 
-  <kendo-grid-column field="Ts" title="Trail Date" editor="date" width="100">
+  <kendo-grid-column field="Ts" title="Trail Date" editor="date" width="220">
     <ng-template kendoGridCellTemplate let-dataItem>
       {{ dataItem.Ts | date: 'yyyy-MM-dd' }}
     </ng-template>
+
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-date-filter [filter]="filter" [fieldName]="'Ts'" [start]=0 [end]="15" [range]=1 >
+      </app-date-filter>
+    </ng-template>
   </kendo-grid-column>
 
   <kendo-grid-column field="Balance" title="Balance" width="150">
@@ -112,6 +138,12 @@
       </kendo-numerictextbox>
     </ng-template>
 
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-number-range-filter [filter]="filter" [fieldName]="'Balance'"
+                               [options]="['eq', 'lte', 'gte','range']" [min]=0
+      >
+      </app-number-range-filter>
+    </ng-template>
   </kendo-grid-column>
 
   <kendo-grid-column field="OffsetBalance" title="Offset" width="150" >
@@ -137,6 +169,12 @@
                              [min]="-1" [max]="999999999" [autoCorrect]="true" class="balance">
       </kendo-numerictextbox>
     </ng-template>
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-number-range-filter [filter]="filter" [fieldName]="'OffsetBalance'"
+                               [options]="['eq', 'lte', 'gte', 'range']" [min]=0
+      >
+      </app-number-range-filter>
+    </ng-template>
   </kendo-grid-column>
 
   <kendo-grid-column *ngIf="showUploadColumn"
@@ -147,11 +185,17 @@
       </button>
       <p *ngIf="dataItem.UploadId <=0" > - </p>
     </ng-template>
+    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+      <app-number-range-filter [filter]="filter" [fieldName]="'UploadId'"
+                               [options]="['eq']" [min]=0
+      >
+      </app-number-range-filter>
+    </ng-template>
   </kendo-grid-column>
 
   <kendo-grid-column *ngIf="showLoanColumn"
                      field="LoanId" title="Loan" width="210"
-                     [editable]="true "
+                     [editable]="true " [filterable]="false"
                      [sortable]="false">
     <ng-template kendoGridCellTemplate let-dataItem>
       <app-loan-card *ngIf="dataItem.LoanId !== '' " [Loan]="dataItem.Loan"></app-loan-card>

src/app/pay-in/pay-in.component.ts

@@ -6,7 +6,14 @@ import {PayInService} from '../service/pay-in.service';
 import {PayInListResult} from '../models/pay-in-list-result.model';
 import {Router} from '@angular/router';
 import {PopupIncomeFilterComponent} from '../popup-income-filter/popup-income-filter.component';
-import {GridComponent, PageChangeEvent, RowClassArgs, SortSettings, DataStateChangeEvent} from '@progress/kendo-angular-grid';
+import {
+  GridComponent,
+  PageChangeEvent,
+  RowClassArgs,
+  SortSettings,
+  DataStateChangeEvent,
+  SelectableSettings
+} from '@progress/kendo-angular-grid';
 import {CompositeFilterDescriptor, FilterDescriptor, SortDescriptor} from '@progress/kendo-data-query';
 import {UploadMetaModel} from '../models/uploadMetaModel';
 import {debounce} from 'ts-debounce';
@@ -28,8 +35,10 @@ import {GridStateModel} from '../models/grid.state.model';
 export class PayInComponent implements OnInit {
   @Input() allowAddNew = true;
   @Input() allowEdit = true;
+  @Input() allowFilter = false;
   @Input() showLoanColumn = true;
   @Input() showUploadColumn = true;
+  @Input() selectable: SelectableSettings | boolean;
   private filterUploadMeta: UploadMetaModel = new UploadMetaModel({});
   public filterLoan = new LoanModel({});
   @Input() filter: PayInListFilterModel = new PayInListFilterModel({});
@@ -51,7 +60,7 @@ export class PayInComponent implements OnInit {
   @Input() public pageable = true;
   @Input() public pageSize = 15;
 
-  public gridSelection: number[] = [];
+  @Input() public Selection: number[] = [];
   public sortable: SortSettings = {
     mode: 'single'
   };
@@ -369,7 +378,7 @@ export class PayInComponent implements OnInit {
   private ScrollTo(row: number): void {
     this.grid.scrollTo({ row});
     this.grid.focusCell(row + 1, 1 );
-    this.gridSelection = [row];
+    this.Selection = [row];
   }
 
   public selectOrAddPayIn(pi: PayInModel): void{
@@ -384,7 +393,7 @@ export class PayInComponent implements OnInit {
     if ( row >= 0 ) { // we found it
       this.ScrollTo(row);
     } else{
-      this.gridSelection = []; // select none
+      this.Selection = []; // select none
       this.incomeFormGroup = this.createFormGroup(new PayInModelEx(pi));
       this.grid.addRow(this.incomeFormGroup);
     }

src/app/pay-out-details/pay-out-details.component.html

@@ -7,6 +7,7 @@
         <div class="card-header bg-transparent header-elements-inline">
           <app-reward-select></app-reward-select>
           <div class="header-elements">
+            <button> test </button>
             <kendo-chip
               [removable]="true"
               (remove)="onRemoveChip('somelabel', $event)"
@@ -79,7 +80,7 @@
                   <tbody>
                   <tr>
                     <th class="text-left">Subtotal:</th>
-                    <td class="text-right">$1,090</td>
+                    <td class="text-right">{{amount | currency}}</td>
                   </tr>
                   <tr>
                     <th class="text-left">Tax: <span class="font-weight-normal">(25%)</span></th>

src/app/pay-out-details/pay-out-details.component.ts

@@ -9,12 +9,14 @@ import {ChipRemoveEvent} from '@progress/kendo-angular-buttons';
 export class PayOutDetailsComponent implements OnInit {
   sales = [];
 
+  amount = 3218;
   background = 'url(\'https://svr2021.lawipac.com:8080/api/v1/avatar/0\')';
   constructor() { }
 
   ngOnInit(): void {
-
-
+    setInterval(() => {
+      this.amount += 1;
+    }, 1000);
   }
 
   range(start: number, end: number): number[] {
@@ -26,3 +28,4 @@ export class PayOutDetailsComponent implements OnInit {
     console.log(s, e);
   }
 }
+

src/app/websocket.ts

@@ -26,7 +26,7 @@ export class WebSocketService extends Subject<string>{
   }
 
   private startWebsocket(): void {
-    console.log('starting websocket now..', this.url);
+    // console.log('starting websocket now..', this.url);
     this.ws = new WebSocket(this.url);
     this.ws.onopen = this.onOpen.bind(this);
     this.ws.onmessage = this.onMessage.bind(this);

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
+  appVersion: require('../../package.json').version + '-dev',
   production: true
 };

src/environments/environment.ts

@@ -3,6 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
+  appVersion: require('../../package.json').version + '-dev',
   production: false
 };
 

src/index.html

@@ -9,10 +9,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <script id="config" type="text/biukop-config"
-          server="https://sc5016.biukop.com.au:8080/"
-          version="0.9.1"
-  >
+  <script id="config" type="text/biukop-config">
   eyJTZXJ2ZXIiOiJodHRwczpcL1wvYzUwMTYuYml1a29wLmNvbS5hd
   To4MDgwXC9hcGlcL3YxXC8iLCJTb2NrZXQiOiJ3c3M6XC9cL2M1MD
   E2LmJpdWtvcC5jb20uYXU6ODA4MFwvYXBpXC92MVwvd3MiLCJTZXN

tsconfig.app.json

@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "src/main.ts",

tsconfig.spec.json

@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "node"
     ]
   },
   "files": [