@aggdirect/coolmap 0.0.1

package/src/lib/component/job-code/job-code.component.scss

@@ -0,0 +1,427 @@
+@import "../../../assets/variable.scss";
+
+.jobcode_detailprt {
+  position: absolute;
+  left: 300px;
+  bottom: 10px;
+  background: $white;
+  padding: 15px 20px;
+  border-radius: 20px;
+  max-width: 350px;
+  z-index: 999;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+  .close {
+    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: #fff;
+    position: absolute;
+    top: -11px;
+    left: -11px;
+  }
+  @keyframes autoslide {
+    100% {
+      transform: translateX(calc(90vw - 100%));
+    }
+    0% {
+      transform: translateX(0%);
+    }
+  }
+  
+}
+.route_listprt {
+  .listing_toggle {
+    background: $white;
+    border-radius: 15px;
+    padding: 5px 5px;
+    position: absolute;
+    right: 10px;
+    top: 20px;
+    cursor: pointer;
+    img {
+      width: 28px;
+    }
+  }
+  .listing_box {
+    background: #282828;
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1111;
+    box-shadow: -3px 0px 5px 0px rgba(255, 255, 255, 0.08);
+    transition: 0.5s;
+    -webkit-transition: 0.5s;
+    transition: 0.5s;
+    -webkit-transition: 0.5s;
+    -moz-transition: 0.5s;
+    width: 0;
+    border-radius: 40px 0px 0px 0px;
+    opacity: 0;
+    .closebtn {
+      display: none;
+    }
+    ul {
+      padding: 0 20px 0 0;
+      li {
+        background: #4a4a4a;
+        padding: 10px 15px;
+        border-radius: 15px;
+        display: flex;
+        margin-bottom: 10px;
+        position: relative;
+        height:inherit;
+        @media (min-width:1600px) {
+          padding: 6px 15px;
+          margin-bottom: 5px;
+        }
+        .iconprt{
+          display: flex;
+          flex-direction: column;
+          span {
+            display: flex;
+            align-items: center;
+            margin-bottom: 32px;
+            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 {
+                background: url("../../../assets/images/fill-check.png") 16px 15px no-repeat;
+              }
+            }
+            label {
+              background: url("../../../assets/images/blank-check.png") 16px 15px no-repeat;
+              width: 100%;
+              position: relative;
+              z-index: 2;
+              font-size: 12px;
+              color: #878787;
+              height: 100%;
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+            .border {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              left: 0px;
+              right: 0;
+              top: 0;
+              border-radius: 15px;
+            }
+            input {
+              &:checked~.border {
+                border-left: 1px solid $white;
+                border-right: 1px solid $white;
+                border-top: 1px solid $white;
+                border-bottom: 1px solid $white;
+              }
+            }
+            h2 {
+              margin-left: 10px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              max-width: 150px;
+              padding-left: 16px;
+              font-size: 0.9rem;
+              margin-bottom: 0;
+              font-weight: normal;
+              margin-top: 0;
+            }
+          }
+          .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;
+            margin-bottom: 7px;
+            &::first-letter{
+              font-size: 0.8rem;
+            }
+            &.Ton {
+              background: #ff7272;
+            }
+            &.Load {
+              background: #a3c52e;
+            }
+            &.Hourly {
+              background: #ae23d1;
+            }
+            @media (min-width:1600px) {
+              line-height: 21px;
+            }
+          }
+          .infoicon{
+            z-index: 5;
+            cursor: pointer;
+            img{
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+        .pickprtbox{
+          margin-left: 10px;
+          h2{
+            font-size: 0.9rem;
+            margin: 3px 0 5px 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            max-width: 195px;
+            overflow: hidden;
+          }
+        }
+
+
+        h3 {
+          font-size: 0.8rem;
+          color: #979797;
+          font-weight: 600;
+          margin-top: 0;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: 195px;
+          overflow: hidden;
+          margin-bottom: 5px;
+        }
+        .pickdropprt {
+          font-size: 0.75rem;
+          .pickprt {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding-bottom: 10px;
+            span {
+              padding-left: 0;
+              padding-right: 20px;
+              display: block;
+            }
+            b {
+              position: relative;
+              &:after {
+                background: #bcbcbc;
+                width: 1px;
+                height: 100%;
+                left: 3px;
+                content: "";
+                position: absolute;
+                top: 10px;
+              }
+            }
+            h4 {
+              position: relative;
+              padding-left: 15px;
+              margin: 0px 0 0 0;
+              line-height: 18px;
+              color: #bcbcbc;
+              font-weight: normal;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              &:before {
+                background: #bcbcbc;
+                top: 4px;
+                left: 0px;
+                position: absolute;
+                content: "";
+                width: 7px;
+                height: 7px;
+                border-radius: 100%;
+              }
+            }
+          }
+          .dropprt {
+            position: relative;
+            padding-bottom: 10px;
+            display: flex;
+            align-items: center;
+            span {
+              padding-left: 0;
+              padding-right: 20px;
+              display: block;
+            }
+            b {
+              position: relative;
+              &:after {
+                background: #bcbcbc;
+                width: 1px;
+                height: 12px;
+                left: 3px;
+                content: "";
+                position: absolute;
+                top: -7px;
+              }
+            }
+            h4 {
+              position: relative;
+              padding-left: 15px;
+              margin: 0;
+              line-height: 18px;
+              color: #bcbcbc;
+              font-weight: normal;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              &:before {
+                background: #bcbcbc;
+                top: 4px;
+                left: 0px;
+                position: absolute;
+                content: "";
+                width: 7px;
+                height: 7px;
+                border-radius: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &.show {
+    .listing_box {
+      width: 300px;
+      max-width: 300px;
+      -webkit-box-flex: 0;
+      flex: 0 0 350px;
+      transition: 0.5s;
+      -webkit-transition: 0.5s;
+      transition: 0.5s;
+      -webkit-transition: 0.5s;
+      -moz-transition: 0.5s;
+      padding: 40px 0px 40px 20px;
+      opacity: 1;
+      h2 {
+        color: $white;
+        white-space: nowrap;
+      }
+      .closebtn {
+        position: absolute;
+        left: -33px;
+        top: 50px;
+        background: #282828;
+        color: $white;
+        padding: 8px;
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+        cursor: pointer;
+        box-shadow: -4px 2px 5px 0px rgba(255, 255, 255, 0.08);
+        display: block;
+      }
+    }
+  }
+}
+
+.btnprt{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 20px;
+  h2{
+    margin: 0;
+  }
+  button{
+    font-size: 15px;
+    padding: 8px 20px;
+    border-radius: 5%;
+    background-color: $blue;
+    color: $white;
+    border: none;
+    border-radius: 10px;
+    box-shadow: none;
+    outline: none;
+  }
+}
+.hidden {
+  display: none;
+}
+.route_detail{
+  background: #282828;
+  position: absolute;
+  width: 260px;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 310px;
+  border-radius: 20px;
+  padding: 10px;
+  box-shadow: 0px 0px 5px 0px rgba(255,255,255,0.21);
+
+  .destination{
+    .duration{
+      background: #444343;
+      border: 1px solid #918e8e;
+      padding: 10px;
+      color:#fff;
+      b{
+        color: #fff;
+      }
+    }
+    .pickprt, .dropprt {
+      &:before {
+        background: #fff;
+      }
+      b{
+        &:before {
+          background: #fff;
+        }
+      }
+    }
+    span{
+      line-height: 20px;
+      color: #fff;
+      padding: 3px 0;
+      b{
+        color: #fff;
+      }
+      &.notes{
+        max-height: 200px;
+        overflow: auto;
+      }
+    }
+  }
+}
+.createTxt{
+  small{
+    color: #fff;
+    font-size: 0.7rem;
+  }
+}
+.closebtnroutedetail{
+  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;
+  position: absolute;
+  top: -7px;
+  left: -11px;
+}
+

package/src/lib/component/job-code/job-code.component.ts

@@ -0,0 +1,94 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { map, Observable, startWith, Subject, takeUntil } from 'rxjs';
+
+import { FormControl, FormGroup } from '@angular/forms';
+import { CoolmapService, Route, UtilsService } from 'coolmap-services';
+
+@Component({
+  selector: 'app-job-code',
+  templateUrl: './job-code.component.html',
+  styleUrls: ['./job-code.component.scss']
+})
+export class JobCodeComponent implements OnInit, OnDestroy {
+  @Input() jobdetail!: any;
+  isVisible: boolean = false;
+  routes: Route[] = [];
+  public selectedRoute = new SelectionModel<any>(true, [])
+  @Output() clearJobDetails = new EventEmitter(); isOverlapRouteSection = false;
+  private destroyer$ = new Subject<boolean>();
+  detailsCardEnable: boolean | string;
+  preventMouseout: boolean = false;
+  routeCardDetail: Route;
+  preventListUpdate: boolean;
+  masterRoutes: any;
+
+  constructor(private utils: UtilsService, private coolMap: CoolmapService) {
+    this.utils.clearViewRouteforJobCodeObserve.pipe(takeUntil(this.destroyer$)).subscribe(res => {
+      if (res) this.coolMap.removeJobFromMap(this.selectedRoute.selected); this.selectedRoute.clear();
+    });
+  }
+
+  ngOnInit(): void { this.getRouteList() }
+  getRouteList() {
+    this.utils.getData('coolmap/routes/all').pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+      if (res) {
+        this.routes = res.data;
+        this.masterRoutes = res.data;
+        this.preventListUpdate = false;
+        this.utils.clearOptions();
+        this.routes.forEach((ele: Route) => { this.utils.makeOptions(ele) });
+      }
+    })
+  }
+  toggleSidemenu() { this.isVisible = !this.isVisible }
+  clearJob() { this.clearJobDetails.emit(true); this.utils.preVentJobdetailclose.next(false) }
+  selectRoute(event: Route) {
+    const i = this.selectedRoute.selected.findIndex(ele => ele['order_number'] === event['order_number']);
+    this.selectedRoute.toggle(event);
+    if (!this.selectedRoute.isSelected(event) && event['route_id']) {
+      this.coolMap.removeRouteAndMarker(event['route_id']).then((res: any) => {
+        this.coolMap.extendReBound();
+      });
+    } else {
+      this.coolMap.plotRoute(event, event['route_id'], 'jobrouteList', false, true);
+    }
+  }
+  masterToggle() {
+    if (this.routes.length === this.selectedRoute.selected.length) {
+      this.selectedRoute.clear();
+      this.routes.forEach(row => {
+        this.coolMap.removeRouteAndMarker(row['route_id']).then((res: any) => { this.coolMap.extendReBound() })
+      });
+    } else {
+      this.routes.forEach(row => {
+        this.selectedRoute.select(row);
+        this.coolMap.plotRoute(row, row['route_id'], 'jobrouteList', false, true);
+      });
+    }
+  }
+  togglerouteDetails(eventType: string | boolean, route: Route, mouseOut?: boolean) {
+    if (typeof (eventType) === 'string') {
+      this.preventMouseout = true; this.utils.setdictValue('route-details', JSON.stringify(route));
+    }
+    if (typeof (eventType) === 'boolean' && eventType && !this.preventMouseout) { this.detailsCardEnable = eventType };
+    if (typeof (eventType) === 'boolean' && !eventType && !this.preventMouseout) { this.detailsCardEnable = eventType };
+    if (this.preventMouseout && !this.detailsCardEnable) this.preventMouseout = false;
+    if (mouseOut) {
+      if (this.preventMouseout) {
+        route = this.utils.getdictValue('route-details');
+        this.routeCardDetail = route;
+      }
+      if (!this.preventMouseout) {
+        this.routeCardDetail = route
+      }
+    } else {
+      this.routeCardDetail = route
+    }
+    this.routeCardDetail['created_at'] = this.utils.getDateFormat(new Date(this.routeCardDetail['created_at']), '/');
+  }
+  ngOnDestroy(): void {
+    this.destroyer$.next(true);
+    this.destroyer$.unsubscribe();
+  }
+}

package/src/lib/component/map/map.component.html

@@ -0,0 +1,5 @@
+<div >
+    <!-- <mat-progress-bar *ngIf="enableProgress" mode="indeterminate"></mat-progress-bar> -->
+     <div #map class="coolmap" style="height: 100vh;"></div>
+  </div>
+  

package/src/lib/component/map/map.component.spec.ts

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

package/src/lib/component/map/map.component.ts

@@ -0,0 +1,33 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CoolmapService } from 'coolmap-services';
+import { Subject, takeUntil } from 'rxjs';
+
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.css']
+})
+export class MapComponent implements OnDestroy {
+  @ViewChild('map', { static: true }) mapDiv!: ElementRef;
+  enableProgress: boolean = true;
+  private destroyer$ = new Subject<boolean>();
+
+  constructor( private coolmapService: CoolmapService ) { }
+
+  ngAfterViewInit() {
+    this.coolmapService.reintiatecoolmap.pipe(takeUntil(this.destroyer$)).subscribe((res: any) => {
+      this.enableProgress = true;
+      if (res) {
+        this.coolmapService.initiateMapForAddRoute(this.mapDiv.nativeElement).then((res) => {
+          this.enableProgress = false;
+        })
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroyer$.next(true);
+    this.destroyer$.unsubscribe();
+  }
+}

package/src/lib/component/nav/layout/add-route-nav/add-route-nav.component.html

@@ -0,0 +1,44 @@
+<div class="nav_body">
+  <div class="logo">
+    <img src="assets/images/logo.png" alt="logo" />
+  </div>
+  <div class="heading m-20">
+    <h1>View Route</h1>
+    <button mat-raised-button color="primary" (click)="showAddForm()">
+      <mat-icon>add_circle_outline</mat-icon> Add route
+    </button>
+  </div>
+
+  <div class="search-panel">
+    <div class="w-100">
+      <form [formGroup]="filterForm">
+        <mat-form-field class="full-width" [class.disabled]="loaderVal">
+          <input matInput [matChipInputFor]="chipList" formControlName="search" [matAutocomplete]="auto"
+            [disabled]="loaderVal" placeholder="Search">
+          <mat-icon matSuffix *ngIf="!utils.conveySearchIcon(filterForm.value.search)">search</mat-icon>
+          <button mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="utils.conveySearchIcon(filterForm.value.search)"
+            (click)="filterForm.reset()">
+            <mat-icon>close</mat-icon>
+          </button>
+          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+            <mat-option *ngFor="let option of filteredOptions | async" (onSelectionChange)="filterSearch($event)"
+              [value]="option">
+              {{option.type | titlecase }}: {{option['label']}}
+            </mat-option>
+          </mat-autocomplete>
+        </mat-form-field>
+      </form>
+      <div class="chip-list">
+        <mat-chip-list #chipList aria-label="Filter selection">
+          <mat-chip *ngFor="let filter of filters" (removed)="removeFromFilter(filter)">
+            {{filter.type | titlecase }}: {{filter.name}}
+            <button matChipRemove>
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip>
+        </mat-chip-list>
+      </div>
+    </div>
+  </div>
+  <app-route-jobcode-list [type]="'addroute'" [currentNav]="navValue" [searchTerm]="filters" [data]="routes" [loader]="loaderVal" (emitroute)="getRoute($event)"></app-route-jobcode-list>
+</div>

package/src/lib/component/nav/layout/add-route-nav/add-route-nav.component.spec.ts

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