@aggdirect/coolmap 0.0.1

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

@@ -0,0 +1,172 @@
+@import "../../../../assets/variable.scss";
+.routebox{
+  span {
+      display: flex;
+      align-items: center;
+      h2 {
+        margin-left: 5px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 180px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        font-size: 0.95rem;
+      }
+    }
+    h3 {
+      font-size: 0.85rem;
+      color: $softgrey;
+      font-weight: 400;
+      margin-top: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 325px;
+      margin-bottom: 10px;
+    }
+    .pickdropprt {
+      font-size: 0.8125rem;
+      .pickprt {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding-bottom: 6px;
+        span {
+          padding-left: 0;
+          padding-right: 20px;
+          display: block;
+        }
+        b {
+          position: relative;
+          font-weight: normal;
+          &:after {
+            background: $black;
+            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;
+          font-weight: normal;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          max-width: 215px;
+          @media (min-width:1600px) {
+            max-width: 265px;
+          }
+          &:before {
+            background: $black;
+            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;
+          font-weight: normal;
+          &:after {
+            background: $black;
+            width: 1px;
+            height: 12px;
+            left: 3px;
+            content: "";
+            position: absolute;
+            top: -7px;
+          }
+        }
+        h4 {
+          position: relative;
+          padding-left: 15px;
+          margin: 0;
+          line-height: 18px;
+          font-weight: normal;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          max-width: 215px;
+          &:before {
+            background: $black;
+            top: 4px;
+            left: 0px;
+            position: absolute;
+            content: "";
+            width: 7px;
+            height: 7px;
+            border-radius: 100%;
+          }
+        }
+      }
+    }
+    .infoicon{
+      position: absolute;
+      right:10px;
+      bottom: 10px;
+      img{
+        width: 20px;
+        height: 20px;
+       }
+    }
+    .status {
+        position: absolute;
+        border-radius: 30px;
+        top: 12px;
+        right: 40px;
+        font-size: 0;
+        color: $white;
+        text-transform: capitalize;
+        font-weight: 500;
+        padding: 3px 10px;
+        &.routestatus{
+          right: 10px;
+          width: 20px;
+          height: 20px;
+          text-align: center;
+          line-height: 20px;
+          padding: 0 0 0 1px;
+          &::first-letter{
+            font-size: 0.8rem;
+          }
+          @media (min-width:1600px) {
+            padding: 0px;
+            line-height: 22px;
+          }
+        }
+        &.Ton {
+          background: #ff7272;
+        }
+        &.Load {
+          background: #a3c52e;
+        }
+        &.Hourly {
+          background: #ae23d1;
+        }
+    }
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { Route, UtilsService } from 'coolmap-services';
+
+@Component({
+  selector: 'app-view-route-list-card',
+  templateUrl: './view-route-list-card.component.html',
+  styleUrls: ['./view-route-list-card.component.scss']
+})
+export class ViewRouteListCardComponent {
+  @Input() route!: Route;
+  @Input() emitrouteevent: any;
+  constructor(private utils: UtilsService) { }
+
+  detailsDict(event: boolean | string, route: Route) {
+    if(event === 'click') this.utils.setdictValue('route-detailsv2', JSON.stringify(route));
+    route['type'] = 'editroute'; route['prevent'] = true; this.emitrouteevent.emit(route);
+    this.utils.routeDetailsUtility.next({ event, route });
+  }
+}

package/src/lib/component/shared/dialog/dialog.component.html

@@ -0,0 +1,7 @@
+<div class="dialogbox">
+  <h2>{{body}}</h2>
+  <div class="twobtnprt">
+    <button class="delbtn" (click)="onClose(true)">{{positive}}</button>
+    <button class="closebtn" (click)="onClose(false)">{{negative}}</button>
+  </div>
+</div>

package/src/lib/component/shared/dialog/dialog.component.scss

@@ -0,0 +1,30 @@
+@import "../../../../assets/variable.scss";
+
+.dialogbox{
+    display: flex;
+    flex-direction: column;
+    h2{
+        font-size: 1.5rem;
+    }
+    .twobtnprt{
+        display: flex;
+        justify-content: center;
+        margin-top: 10px;
+    }
+}
+.closebtn{
+    background: $black;
+    color: $white;
+    border-radius: 30px;
+    padding: 10px 18px 10px 18px;
+    margin: 0 10px;
+    font-size: 1rem;
+  }
+  .delbtn{
+    background:red;
+    color: $white;
+    border-radius: 30px;
+    padding: 10px 18px 10px 18px;
+    margin: 0 10px;
+    font-size: 1rem;
+  }

package/src/lib/component/shared/dialog/dialog.component.ts

@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+@Component({
+  selector: 'app-dialog',
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss']
+})
+export class DialogComponent {
+  body = 'Are you sure you want to delete?';
+  positive = 'Delete';
+  negative = 'Cancel';
+  constructor(public dialogRef: MatDialogRef<DialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
+    ['body', 'positive', 'negative'].map(elem => {
+      if (this.data[elem] !== undefined) { this[elem] = this.data[elem] }
+    });
+  }
+  onClose(result: boolean) { this.dialogRef.close(result) }
+}

package/src/lib/component/shared/job-route-list/job-route-list.component.html

@@ -0,0 +1,27 @@
+<div class="searchprt">
+  <form [formGroup]="filterForm">
+  <mat-form-field class="full-width">
+    <input matInput [matChipInputFor]="chipList" formControlName="search" [matAutocomplete]="auto" placeholder="Search">
+      <mat-icon matSuffix *ngIf="!utils.conveySearchIcon(filterForm.value.search)">search</mat-icon>
+      <button mat-button matSuffix mat-icon-button aria-label="Clear" (click)="filterForm.reset()" *ngIf="utils.conveySearchIcon(filterForm.value.search)">
+        <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>
+<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>

package/src/lib/component/shared/job-route-list/job-route-list.component.scss

@@ -0,0 +1,3 @@
+.searchprt{
+    padding-right: 20px;
+  }

package/src/lib/component/shared/job-route-list/job-route-list.component.spec.ts

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

package/src/lib/component/shared/job-route-list/job-route-list.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { CoolmapService, Route, UtilsService } from 'coolmap-services';
+import { map, Observable, startWith } from 'rxjs';
+
+@Component({
+  selector: 'app-job-route-list',
+  templateUrl: './job-route-list.component.html',
+  styleUrls: ['./job-route-list.component.scss']
+})
+export class JobRouteListComponent {
+  @Output() changeNav = new EventEmitter<string | any>();
+  filteredOptions!: Observable<any[]> | undefined;
+  preventListUpdate: boolean;
+  filterForm = new FormGroup({ search: new FormControl() });
+  filters: any[];
+  @Input() routes: Route[];
+  @Input() selectedRoute;
+  @Output() changeRoutes = new EventEmitter<string | any>();
+  @Output() changeSelectedRoute = new EventEmitter<string | any>();
+  @Input() masterRoutes: Route[];
+
+  constructor(public utils: UtilsService, private coolMap: CoolmapService) {
+    this.filters = [];
+    this.filteredOptions = this.filterForm.get('search')?.valueChanges.pipe(startWith(''),
+      map(value => this.utils.filter(value, this.filters)));
+  }
+
+  filterSearch(e: any): void {
+    this.changeNav.emit({ type: 'Addroute' });
+    this.preventListUpdate = true;
+    this.filterForm.controls.search.setValue(null);
+    this.filters = [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }];
+    const filteredRoutes = this.utils.getSearchResults(this.masterRoutes, [{ name: e.source.value.label, type: e.source.value.type, value: e.source.value }]);
+    this.changeRoutes.emit(filteredRoutes);
+    this.selectedRoute.selected.forEach((item: any) => {
+      const routeData = filteredRoutes.find(x => x.route_id === item.route_id);
+      if (!routeData) {
+        this.selectedRoute.toggle(item);
+        this.changeSelectedRoute.emit(this.selectedRoute);
+        this.coolMap.removeRouteAndMarker(item['route_id']).then((res: any) => {
+          this.coolMap.extendReBound();
+        });
+      }
+    })
+  }
+
+  removeFromFilter(filter: any): void {
+    this.changeNav.emit({ type: 'Addroute' });
+    const index = this.filters.indexOf(filter);
+    if (index >= 0) { this.filters = []; this.changeRoutes.emit(this.masterRoutes); }
+  }
+}
+

package/src/lib/component/shared/jobcode-overview/jobcode-overview.component.html

@@ -0,0 +1,8 @@
+<div class="detail_view m-40">
+  <ng-container *ngFor="let item of label">
+    <span [class.pickprt]="item === 'pickup_location'" [class.dropprt]="item === 'delivery_location'">
+      <label>{{overViewEnum[item]}}</label>
+      <b> {{jobValue[item] ? jobValue[item] : 'N/A'}} </b>
+    </span>
+  </ng-container>
+</div>

package/src/lib/component/shared/jobcode-overview/jobcode-overview.component.scss

@@ -0,0 +1,12 @@
+@import "../../../../assets/variable.scss";
+
+.detail_view{
+    .destination{
+        .duration{
+        padding: 10px;
+        }
+        span{
+        padding: 5px 0;
+        }
+    }
+}

package/src/lib/component/shared/jobcode-overview/jobcode-overview.component.spec.ts

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

package/src/lib/component/shared/jobcode-overview/jobcode-overview.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { JobCodeOverviewData, JobCodeOverviewEnum } from 'coolmap-services';
+
+@Component({
+  selector: 'app-jobcode-overview',
+  templateUrl: './jobcode-overview.component.html',
+  styleUrls: ['./jobcode-overview.component.scss']
+})
+export class JobcodeOverviewComponent {
+  @Input() jobValue: any;
+  label = JobCodeOverviewData;
+  overViewEnum: any = JobCodeOverviewEnum;
+  constructor() { }
+
+}

package/src/lib/component/shared/jobcode-status/jobcode-status.component.html

@@ -0,0 +1,5 @@
+<div class="statusprt">
+  <span class="done"> Done - {{jobValue['values']['Done']}} </span>
+  <span class="ongoing"> Ongoing - {{jobValue['values']['Ongoing']}} </span>
+  <span class="open"> Open - {{jobValue['values']['Open']}} </span>
+</div>

package/src/lib/component/shared/jobcode-status/jobcode-status.component.scss

@@ -0,0 +1,32 @@
+@import "../../../../assets/variable.scss";
+
+.statusprt{
+    span{
+       padding: 10px 10px;
+       font-size: 0.9rem;
+        &.done{
+            border:2px solid #0b843c;
+            color: #0b843c;
+            &:hover{
+                background: #0b843c;
+                color: $white;
+            }
+        }
+        &.ongoing{
+            border:2px solid #eecb27;
+            color: #eecb27;
+            &:hover{
+                background: #eecb27;
+                color: $white;
+            }
+        }
+        &.open{
+            border:2px solid #12afcb;
+            color: #12afcb;
+            &:hover{
+                background: #12afcb;
+                color: $white;
+            }
+        }
+    }
+  }

package/src/lib/component/shared/jobcode-status/jobcode-status.component.spec.ts

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

package/src/lib/component/shared/jobcode-status/jobcode-status.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { Route } from 'coolmap-services';
+
+@Component({
+  selector: 'app-jobcode-status',
+  templateUrl: './jobcode-status.component.html',
+  styleUrls: ['./jobcode-status.component.scss']
+})
+export class JobcodeStatusComponent {
+  @Input() jobValue!: Route
+  constructor() { }
+}

package/src/lib/coolmap.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-coolmap',
+  template: `
+    <p>
+      coolmap works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class CoolmapComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/coolmap.module.ts

@@ -0,0 +1,92 @@
+import { NgModule } from '@angular/core';
+import { CoolmapComponent } from './coolmap.component';
+import { MapComponent } from './component/map/map.component';
+import { NavComponent } from './component/nav/nav.component';
+
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatIconModule } from '@angular/material/icon';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import { AddRouteNavComponent } from './component/nav/layout/add-route-nav/add-route-nav.component';
+import { JobCodeNavComponent } from './component/nav/layout/job-code-nav/job-code-nav.component';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule, MatPseudoCheckboxModule } from '@angular/material/core';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { MatButtonModule } from '@angular/material/button';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import { RouteJobCodeListComponent } from './component/route-jobcode-list/route-jobcode-list.component';
+import { ViewRouteListCardComponent } from './component/route-jobcode-list/view-route-list-card/view-route-list-card.component';
+import { SmsCardDetailsOverviewComponent } from './component/route-jobcode-list/sms-card-details-overview/sms-card-details-overview.component';
+import { JobCodeListCardComponent } from './component/route-jobcode-list/job-code-list-card/job-code-list-card.component';
+import { JobCodeComponent } from './component/job-code/job-code.component';
+import { JobcodeStatusComponent } from './component/shared/jobcode-status/jobcode-status.component';
+import { JobRouteListComponent } from './component/shared/job-route-list/job-route-list.component';
+import { JobcodeOverviewComponent } from './component/shared/jobcode-overview/jobcode-overview.component';
+import { DialogComponent } from './component/shared/dialog/dialog.component';
+
+
+
+@NgModule({
+  declarations: [
+    CoolmapComponent,
+    MapComponent,
+    NavComponent,
+    AddRouteNavComponent,
+    JobCodeNavComponent,
+    RouteJobCodeListComponent,
+    ViewRouteListCardComponent,
+    SmsCardDetailsOverviewComponent,
+    JobCodeListCardComponent,
+    JobCodeComponent,
+    JobRouteListComponent,
+    JobcodeStatusComponent,
+    JobcodeOverviewComponent,
+    DialogComponent
+  ],
+  imports: [
+    CommonModule,
+    MatSnackBarModule,
+    MatSidenavModule,
+    DragDropModule,
+    FormsModule,
+    MatInputModule,
+    MatSelectModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatProgressSpinnerModule,
+    MatChipsModule,
+    MatDialogModule,
+    MatTooltipModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    PerfectScrollbarModule,
+    MatPseudoCheckboxModule,
+    MatButtonModule,
+    MatProgressBarModule,
+  ],
+  exports: [
+    CoolmapComponent,
+    MapComponent,
+    NavComponent,
+    AddRouteNavComponent,
+    JobCodeNavComponent
+  ],
+  entryComponents: [
+    DialogComponent
+  ],
+  providers: [
+  ]
+})
+export class CoolmapModule { }

package/src/public-api.ts

@@ -0,0 +1,10 @@
+/*
+ * Public API Surface of coolmap
+ */
+
+export * from './lib/coolmap.component';
+export * from './lib/coolmap.module';
+export * from './lib/component/map/map.component';
+export * from './lib/component/nav/nav.component';
+export * from './lib/component/nav/layout/add-route-nav/add-route-nav.component';
+export * from './lib/component/nav/layout/job-code-nav/job-code-nav.component';