Updated timeline

Author: Artimatic

src/app/app.module.ts

@@ -81,7 +81,8 @@ import { PasswordModule } from 'primeng/password';
 import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { PickListModule } from 'primeng/picklist';
-import {TimelineModule} from 'primeng/timeline';
+import { TimelineModule } from 'primeng/timeline';
+import { DataViewModule } from 'primeng/dataview';
 
 @NgModule({
   declarations: [
@@ -158,6 +159,7 @@ import {TimelineModule} from 'primeng/timeline';
     InputTextareaModule,
     PickListModule,
     TimelineModule,
+    DataViewModule,
   ],
   providers: [
     BacktestService,

src/app/default-order-lists/default-order-lists.component.ts

@@ -196,6 +196,8 @@ export class DefaultOrderListsComponent implements OnInit, OnChanges, OnDestroy
       .subscribe((data) => {
         this.updatedAmount(data.liquidationValue);
         this.isLoading = false;
+      }, () => {
+        this.isLoading = false;
       });
   }
 
@@ -204,6 +206,8 @@ export class DefaultOrderListsComponent implements OnInit, OnChanges, OnDestroy
     this.machineDaytradingService.getPortfolioBalance().subscribe((data) => {
       this.updatedAmount(data.cashBalance || data.cashAvailableForTrading);
       this.isLoading = false;
+    }, () => {
+      this.isLoading = false;
     });
   }
 

src/app/mini-card/mini-card.component.scss

@@ -22,8 +22,8 @@
 }
 
 .card-content {
-  width: 125px;
-  height: 130px;
+  width: 8em;
+  height: 10em;
 }
 
 .mini-card-button {

src/app/pokerhand/pokerhand.component.html

@@ -1,4 +1,4 @@
-<div class="ui-g">
+<div class="ui-g poker-hand-list">
   <div class="ui-g-2" *ngFor="let order of cartService.otherOrders" class="single-card"
     [class.card-hover]="mouseOver === order.holding.symbol" (mouseover)="onHoverOver(order)" (mouseout)="onHoverAway()">
     <app-mini-card [order]="order" [canEdit]="true" (delete)="delete(order)" (updatedOrder)="updateOrder(order)">

src/app/pokerhand/pokerhand.component.scss

@@ -8,3 +8,8 @@
 .card-hover {
   bottom: 1em;
 }
+
+.poker-hand-list {
+  max-height: 30em;
+  overflow-y: scroll;
+}

src/app/portfolio-info/portfolio-info.component.html

@@ -52,17 +52,16 @@ <h2>Portfolio Management</h2>
 <app-ai-picks></app-ai-picks>
 
 <p-timeline [value]="daytradeEvents" align="alternate">
-  <ng-template pTemplate="marker" let-event>
-      <span class="custom-marker p-shadow-2" [style.backgroundColor]="event.color">
-          <i [ngClass]="event.icon"></i>
-      </span>
+  <ng-template pTemplate="content" let-event>
+    <small class="p-text-secondary">{{event.date}}</small>
   </ng-template>
   <ng-template pTemplate="content" let-event>
-      <p-card [header]="event.status" [subheader]="event.date">
-          <img *ngIf="event.image" [src]="'assets/showcase/images/demo/product/' + event.image" [alt]="event.name" width="200" class="p-shadow-2" />
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-              quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
-          <button pButton label="Read more" class="p-button-text"></button>
-      </p-card>
+    <p-card [header]="event.status" [subheader]="event.date">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam
+        deserunt
+        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+      </p>
+      <button pButton label="Read more" class="p-button-text"></button>
+    </p-card>
   </ng-template>
-</p-timeline>
+</p-timeline>

src/app/portfolio-info/portfolio-info.component.ts

@@ -63,10 +63,10 @@ export class PortfolioInfoComponent implements OnInit, OnDestroy {
 
   init() {
     this.daytradeEvents = [
-      { status: 'Ordered', date: '15/10/2020 10:30', icon: PrimeIcons.SHOPPING_CART, color: '#9C27B0', image: 'game-controller.jpg' },
-      { status: 'Processing', date: '15/10/2020 14:00', icon: PrimeIcons.COG, color: '#673AB7' },
-      { status: 'Shipped', date: '15/10/2020 16:15', icon: PrimeIcons.ENVELOPE, color: '#FF9800' },
-      { status: 'Delivered', date: '16/10/2020 10:00', icon: PrimeIcons.CHECK, color: '#607D8B' }
+      { status: 'Ordered', date: '15/10/2020 10:30' },
+      { status: 'Processing', date: '15/10/2020 14:00' },
+      { status: 'Shipped', date: '15/10/2020 16:15' },
+      { status: 'Delivered', date: '16/10/2020 10:00' }
     ];
 
     this.aiPicksService.mlSellResults