@aggdirect/coolmap 2.6.6 → 2.6.8

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.scss

@@ -0,0 +1,168 @@
+@import "../../../../assets/variable.scss";
+.innerbox{
+    display: flex;
+    justify-content: space-between;
+    .inputarea {
+        display: flex;
+        align-items: center;
+        input[type="checkbox"] {
+          width: 100%;
+          height: 100%;
+          margin-right: 10px;
+          opacity: 0;
+          position: absolute;
+          left: 0px;
+          margin-left: 0;
+          top: 0;
+          z-index: 3;
+          cursor: pointer;
+          &:checked+label {
+            // TODO: Fix
+            // background: url("../../../../../assets/images/fill-radio.png") 10px 11px no-repeat;
+          }
+        }
+        label {
+          // TODO: Fix
+          // background: url("../../../../../assets/images/blank-radio.png") 10px 11px no-repeat;
+          width: 100%;
+          position: relative;
+          z-index: 2;
+          font-size: 12px;
+          color: #878787;
+          height: 100%;
+          position: absolute;
+          top: 0px;
+          left: 0;
+        }
+        .border {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0px;
+          right: 0;
+          top: -1px;
+          border-radius: 15px;
+        }
+        input {
+          &:checked~.border {
+            border-left: 3px solid $green;
+            border-right: 1px solid $green;
+            border-top: 1px solid $green;
+            border-bottom: 1px solid $green;
+          }
+        }
+        h2 {
+          margin-left: 10px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 214px;
+          padding-left: 16px;
+          margin-bottom: 5px;
+          margin-top: 0;
+        }
+      }
+      .job_intro{
+        width: 90%;
+        .heading{
+            display: flex;
+            font-size: 0.8rem;
+            h2{
+                margin: 0 4px 0 0;
+                font-size: 0.8rem;
+            }
+            span{
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 100px;
+                padding: 0 3px;
+                display: block;
+            }
+        }
+        .destinationprt{
+            display: flex;
+            margin-top: 10px;
+            font-size: 0.8rem;
+            span{
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 132px;
+                padding: 0 5px;
+                display: block;
+            }
+        }
+        .mat_cat{
+            margin-top: 10px;
+            font-size: 0.8rem;
+        }
+        .statusbar{
+            width: 100%;
+            position: relative;
+            height: 5px;
+            margin-top: 10px;
+            .status_percent{
+                position: absolute;
+                left: 0;
+                display: flex;
+                width: 100%;
+                height: 100%;
+                span{
+                    display: block;
+                }
+                .done{
+                    background: #008000;
+                }
+                .ongoing{
+                    background: #ffcc00;
+                }
+                .open{
+                    background: #bfbfbf;
+                }
+            }
+        }
+     }
+    .statusarea{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 10%;
+        .statusunit{
+            border-radius: 30px;
+            font-size: 0;
+            color: $white;
+            text-transform: capitalize;
+            font-weight: 500;
+            width: 20px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            &::first-letter{
+              font-size: 0.8rem;
+            }
+            &.routestatus{
+            right: 10px;
+            }
+            &.Ton {
+            background: $green;
+            }
+            &.Load {
+            background: $blue;
+            }
+            &.Hourly {
+            background: $orenge;
+            }
+        }
+        .driver_icon, .infoicon{
+            z-index: 9999;
+           img{
+            width: 20px;
+            height: 20px;
+           }
+        }
+        .driver_icon{
+            margin: 5px 0;
+        }
+     }
+}

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.spec.ts

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

package/src/lib/component/route-jobcode-list/job-code-list-card/job-code-list-card.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, Output, Inject } from '@angular/core';
+import { CoolmapConfigModel, Route, UtilsService } from '@aggdirect/coolmap-services';
+
+@Component({
+  selector: 'app-job-code-list-card',
+  templateUrl: './job-code-list-card.component.html',
+  styleUrls: ['./job-code-list-card.component.scss']
+})
+export class JobCodeListCardComponent {
+  @Input() public route!: Route;
+  @Output() public routeSeletion = new EventEmitter();
+  @Output() public toggleDrivermenu = new EventEmitter();
+  @Input() public emitJobdetails: any;
+  @Input() public preventCloseDetails!: boolean;
+  constructor(public utils: UtilsService,
+    @Inject('memberData') public config: CoolmapConfigModel) { }
+
+  selectRoute(route: Route) { this.routeSeletion.emit(route) }
+  toggleDriverlist(mouseevntType: boolean | string, route: Route, isHoverOut?: boolean) {
+    const data = { mouseevntType, route, isHoverOut }
+    this.toggleDrivermenu.emit(data);
+    if (mouseevntType === 'click') this.utils.setdictValue('driver-details', JSON.stringify(this.route));
+  }
+  toggleJobCodeDetails(mouseEventType: boolean, route: Route) {
+    if (mouseEventType) { route['type'] = 'jobcode'; this.emitJobdetails.emitroute.emit(route) }
+    else if(!mouseEventType && this.preventCloseDetails){
+      route = this.utils.getdictValue('route-details');
+      route['type'] = 'jobcode'; this.emitJobdetails.emitroute.emit(route)
+     }
+    else if (!mouseEventType && !this.preventCloseDetails) this.emitJobdetails.clearJobDetailsFromList.emit(true);
+  }
+  calculateStatusPercentage(type: string, route: any) {
+    const total = route['Done'] + route['Ongoing'] + route['Open'];
+    if (type === 'done') { return Math.round((100 * route['Done']) / total) }
+    else if (type === 'ongoing') { return Math.round((100 * route['Ongoing']) / total) }
+    else if (type === 'open') { return Math.round((100 * route['Open']) / total) }
+    else { return null }
+  }
+  setRouteItem(){
+    this.utils.preVentJobdetailclose.next(true);
+    this.utils.setdictValue('route-details', JSON.stringify(this.route));
+  }
+}

package/src/lib/component/route-jobcode-list/route-jobcode-list.component.html

@@ -0,0 +1,66 @@
+<div class="scrollprt addroutelist" [class.viewroute]="visiblesection('addroute')"
+  [class.jobList]="visiblesection('jobcode')">
+  <button (click)="showRoute()" [disabled]="loader" *ngIf="selectedRoute.selected.length" class="show_routebtn">Show all
+    route</button>
+    <cdk-virtual-scroll-viewport itemSize="50" [class.jobscroll]="visiblesection('jobcode')" class="example-viewport">
+      <mat-spinner *ngIf="loader"></mat-spinner>
+      <ul *ngIf="!loader && data.length > 0">
+        <li [class.active]="route['isActive'] && visiblesection('addroute')" *ngFor="let route of data">
+          <app-job-code-list-card *ngIf="visiblesection('jobcode')" (toggleDrivermenu)="toggleDrivermenu($event)"
+            (routeSeletion)="selectRoute($event)" [preventCloseDetails]="preventDetailsClose" [emitJobdetails]="{emitroute, clearJobDetailsFromList}" [route]="checkroutes(route)"></app-job-code-list-card>
+          <app-view-route-list-card [emitrouteevent]="emitroute" *ngIf="visiblesection('addroute')"
+            [route]="route"></app-view-route-list-card>
+        </li>
+      </ul>
+      <p *ngIf="!loader && data.length === 0">{{visiblesection('addroute') ? 'No Route found' : 'No Job code found.'}}</p>
+    </cdk-virtual-scroll-viewport>
+</div>
+
+<div class="driver_list" *ngIf="isDriverList">
+  <div class="driver_headingprt">
+    <h2>Driver List</h2>
+    <button *ngIf="driverList.driver_list?.length > 0" (click)="isSmsList = true">SMS</button>
+    <div class="closebtn" (click)="isDriverList = false; preventMouseout = false; isSmsList = false">
+      <mat-icon>clear</mat-icon>
+    </div>
+  </div>
+  <ul class="driverList" *ngIf="driverList && driverList.driver_list">
+    <li *ngFor="let driver of driverList?.driver_list">
+      <img src="assets/images/driver_icon.png" [alt]="driver['driver_name']" />
+      <div class="driver_detail">
+        <b>{{driver['driver_name']}}</b> <span>{{driver['trucking_company']}}</span>
+        <div class="cont_del">
+          <small>Driver contact: <b>{{driver['driver_phone'] ? driver['driver_phone'] : 'N/A'}}</b></small>
+          <small>Company contact: <b>{{driver['trucking_company_phone'] ? driver['trucking_company_phone'] : 'N/A'}}</b></small>
+        </div>
+      </div>
+    </li>
+    <p *ngIf="driverList.driver_list?.length === 0" style="font-weight:700; text-align:center;">
+      No Driver found
+    </p>
+  </ul>
+  <div class="smslist" *ngIf="isSmsList">
+    <div class="heading">
+      <h2>SMS All Drivers</h2>
+      <div class="closebtn" (click)="isSmsList = false">
+        <mat-icon>clear</mat-icon>
+      </div>
+    </div>
+    <div class="detailprt">
+      <app-sms-card-details-overview [jobValue]="driverList"></app-sms-card-details-overview>
+      <div class="form_input">
+        <mat-form-field class="example-full-width">
+          <textarea matInput placeholder="Text here..." autocomplete="nope" column="10"
+            [formControl]="driverMessage"></textarea>
+          <mat-hint>{{driverMessage.value?.length}} / 256</mat-hint>
+        </mat-form-field>
+        <button *ngIf="!messageLoader" [disabled]="!driverMessage.value || driverMessage.invalid" (click)="sendMessage()">
+          Send SMS
+        </button>
+      </div>
+    </div>
+    <div class="loader">
+      <mat-spinner *ngIf="messageLoader"></mat-spinner>
+    </div>
+  </div>
+</div>

package/src/lib/component/route-jobcode-list/route-jobcode-list.component.scss

@@ -0,0 +1,232 @@
+@import "../../../assets/variable.scss";
+.driver_iconprt{
+    position: absolute;
+    right: 10px;
+    top: 12px;
+    z-index: 9999;
+   img{
+    width: 25px;
+    height: 25px;
+   }
+}
+.driver_list{
+    background: $white;
+    position: fixed;
+    width: 300px;
+    top: 10px;
+    left: 360px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    .driver_headingprt{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 15px;
+        button{
+            background: none;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            padding: 5px 20px;
+            &:hover{
+                background: $blue;
+                color: $white;
+            }
+        }
+    }
+    h2{
+        font-size: 20px;
+    }
+    .driverList{
+        height: 300px;
+        overflow: auto;
+        li{
+            display: flex;
+            padding: 10px;
+            align-items: flex-start;
+            cursor: pointer;
+            border-bottom: 1px solid $white;
+            background: #eee;
+            img{
+                width: 35px;
+                height: 35px;
+                border-radius: 100%;
+                margin-right: 10px;
+            }
+            .driver_detail{
+                width: calc(100% - 45px);
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-start;
+                b{
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 135px;
+                    font-size: 0.9rem;
+                }
+                span{
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    max-width: 150px;
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+
+    &:after{
+        height: 10px;
+        background: $white;
+        border-bottom-right-radius: 20px;
+        border-bottom-left-radius: 20px;
+        content: "";
+        position: absolute;
+        bottom: -9px;
+        width: 100%;
+    }
+}
+.smslist{
+    background: $white;
+    position: absolute;
+    width: 480px;
+    top: 0px;
+    left: 105%;
+    border-radius: 20px;
+    padding-bottom: 20px;
+    .heading{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 15px;
+    }
+    .detailprt{
+        padding: 0 15px;
+        span{
+            display: flex;
+            margin-bottom: 12px;
+            font-size: 0.8rem;
+            align-items: center;
+            label{
+                font-weight: 600;
+                width: 37%;
+            }
+        }
+        .form_input{
+            display: flex;
+            flex-direction: column;
+            font-size: 0.8rem;
+            button{
+                background: $blue;
+                padding: 10px 18px 10px 18px;
+                color: white;
+                font-size: 0.8125rem;
+                border-radius: 30px;
+                display: flex;
+                align-self: flex-end;
+            }
+        }
+    }
+}
+.closebtn{
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.11);
+    border-radius: 100%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background: #f5f5f5;
+}
+.show_routebtn{
+    font-size: 0.9rem;
+    margin-bottom: 20px;
+    padding: 6px 11px;
+    border-radius: 5%;
+    position: absolute;
+    top: 8px;
+    right: 10px;
+    background-color: transparent;
+    color: $buttoncolor;
+    border: 1px solid $buttoncolor;
+    border-radius: 10px;
+    box-shadow: none;
+    &:hover{
+        background-color: $buttoncolor;
+        color: $white;
+    }
+}
+.cont_del{
+    margin-top: 10px;
+    small{
+        display: block;
+    }
+}
+.jobList{
+    ul {
+        margin: 0 0.93em 0 0px;
+        width: 100%;
+        li{
+            position: relative;
+            background: $softwhite;
+            padding: 10px 10px;
+            border-radius: 15px;
+            margin-bottom: 5px;
+            border: 1px solid $softwhite;
+            border-left: 3px solid $softwhite;
+            cursor: pointer;
+            height: inherit;
+            width: 15.62em;
+            @media (min-width:2500px) {
+                height: 7.65vh;
+            }
+            @media (min-width:3300px) {
+                height: 5.61vh;
+            }
+        }
+    }
+}
+.viewroute{
+    ul {
+        // margin: 0 15px 0 15px;
+        width: 100%;
+        li{
+            position: relative;
+            background: $softwhite;
+            padding: 7px 10px;
+            border-radius: 15px;
+            margin-bottom: 5px;
+            border: 1px solid $softwhite;
+            border-left: 3px solid $softwhite;
+            cursor: pointer;
+            height: 16.4vh;
+            width: 15.62em;
+            @media (min-width:1600px) {
+                height: 12.4vh;
+            }
+
+            &.active{
+                border: 1px solid $green;
+                border-left: 3px solid $green;
+            }
+        }
+    }
+}
+.loader{
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+
+
+.example-viewport {
+    height: 900px;
+}
+