@aggdirect/coolmap 0.0.1

package/README.md

@@ -0,0 +1,56 @@
+# Coolmap
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.
+
+
+## Installation
+
+To Install the library
+Run npm install @aggdirect/coolmap
+
+## Usage
+
+Providing the global configuration is optional and when used you should only provide the configuration in your root module.
+
+`import { CoolmapModule } from 'coolmap';`
+
+Following we can use for coolmap.
+
+    <app-nav (drawer)="boolean" (changeNav)="$event"></app-nav>
+
+        <app-add-route-nav [navValue]="navalue"
+          (changeNav)="$event" 
+          (addemit)="$event" 
+          [updateRouteList]="boolean"></app-add-route-nav>
+
+          <app-map></app-map>
+
+          <app-job-code 
+           [jobdetail]="jobcodeData" 
+           (clearJobDetails)="$event"></app-job-code>
+
+          <app-add-route 
+          (changeNav)="$event" 
+          [routeData]="boolean" 
+          (updateRouteList)="$event"></app-add-route>
+
+## Code scaffolding
+
+Run `ng generate component component-name --project coolmap` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project coolmap`.
+> Note: Don't forget to add `--project coolmap` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build coolmap` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build coolmap`, go to the dist folder `cd dist/coolmap` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test coolmap` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/coolmap'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/coolmap",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@aggdirect/coolmap",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.2.0",
+    "@angular/core": "^14.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "allowedNonPeerDependencies": {
+    "mapbox-gl": "^2.10.0",
+    "@types/mapbox-gl": "^2.7.5",
+    "@turf/turf": "^6.5.0",
+    "deck.gl": "^8.4.16"
+  },
+  "description": "This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.",
+  "main": "karma.conf.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Navin Vishwakarma <navin@ogmaconceptions.com>",
+  "contributors": [
+    "Santanu Das <santanu.das@ogmaconceptions.com>"
+  ],
+  "license": "ISC"
+}

package/src/assets/mixin.scss

@@ -0,0 +1,28 @@
+@mixin ul{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+@mixin img{
+    max-width: 100%;
+    vertical-align: middle;
+}
+@mixin justify-start{
+    display:flex;
+    justify-content: flex-start;
+}
+@mixin justify-center{
+    display:flex;
+    justify-content: center;
+}
+@mixin justify-space-between{
+    display:flex;
+    justify-content: space-between;
+}
+@mixin justify-end{
+    display:flex;
+    justify-content: flex-start;
+}
+@mixin align-center{
+   align-items: center;
+}

package/src/assets/palette.scss

@@ -0,0 +1,24 @@
+$color-key:'base' !default;
+$colors:( 
+
+'primary':(50: #000, 100: #fff, 200: #326ad3, 300: #ffad56, 400: #39c471, 500: #e8e8e8, 600: #767676, 700: #fbfbfb, 800: #3f51b5),
+
+);
+
+
+@function palette(
+  $name: 'primary',
+  $variant: $color-key,
+  $opacity: 1) {
+  $color: null;
+  $color-spectrum: map-get($colors, $name);
+  @if $color-spectrum {
+    $color: map-get($color-spectrum, $variant);
+  }
+  $alpha: if(type-of($opacity) == 'number', $opacity, map-get($color-opacity, $opacity));
+  @if $alpha {
+    $color: rgba($color, $alpha);
+  }
+  @return $color;
+}
+

package/src/assets/variable.scss

@@ -0,0 +1,15 @@
+@import './palette.scss';
+@import './mixin.scss';
+
+$black: palette('primary', 50);
+$white: palette('primary', 100);
+$blue: palette('primary', 200);
+$orenge: palette('primary', 300);
+$green: palette('primary', 400);
+$grey: palette('primary', 500);
+$softgrey: palette('primary', 600);
+$softwhite: palette('primary', 700);
+$buttoncolor: palette('primary', 800);
+
+
+

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

@@ -0,0 +1,140 @@
+<div class="addroutebox">
+  <div class="routedetailbox" *ngIf="enablePopUp">
+    <div class="closebtnroutedetail">
+      <mat-icon (click)="prevantPopupClose = false; enablePopUp = false;">clear</mat-icon>
+    </div>
+    <div class="destination">
+      <div class="duration">
+        <p class="pickprt"><b>Pickup:</b>{{popupDetails['pickup_location']}}</p>
+        <p class="dropprt"><b>Delivery:</b>{{popupDetails['delivery_location']}}</p>
+      </div>
+      <span><b>Name:</b> {{popupDetails['route_name']}}</span>
+      <span><b>Customer:</b> {{popupDetails['customer_name']}}</span>
+      <span><b>Material:</b> {{popupDetails['material']}}</span>
+      <span><b>Type:</b> {{popupDetails['unit']}}</span>
+      <span><b>Distance:</b> {{popupDetails['estimated_distance']}}</span>
+      <span><b>Travel Time:</b> {{popupDetails['estimated_time']}}</span>
+
+      <span class="routenotes"><b>Notes:</b> {{popupDetails['note']}}</span>
+    </div>
+    <div class="createTxt">
+      <small>
+        Created by {{popupDetails['created_by_name']}} on {{popupDetails['created_at']}}
+      </small>
+      <button class="editbtn" (click)="editEvent()">Edit</button>
+    </div>
+  </div>
+  <div class="add_add_route_box" cdkDrag [style.visibility]="!enableForm ? 'hidden' : 'visible'">
+    <div class="topheadingprt">
+      <h2> {{routeId? 'EDIT' : 'ADD'}} ROUTE </h2>
+      <div class="buttonprt">
+        <button class="delbtn" (click)="openDialog()">Delete</button>
+        <button mat-raised-button type="submit" class="closebtn" (click)="changeNav.next('Addroute')">Close</button>
+      </div>
+    </div>
+    <form [formGroup]="addRouteForm">
+      <div class="route_form_area">
+        <div class="col-6">
+          <mat-form-field>
+            <mat-label>Route Name</mat-label>
+            <input matInput formControlName="route_name" autocomplete="nope" (mousedown)="$event.stopPropagation()">
+            <mat-error *ngIf="addRouteForm.controls['route_name'].hasError('required')">
+              Route Name is required
+            </mat-error>
+          </mat-form-field>
+        </div>
+        <div class="col-6">
+          <mat-form-field>
+            <input type="text" placeholder="Customer Name" matInput formControlName="customer_name" [matAutocomplete]="auto" (mousedown)="$event.stopPropagation()">
+            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+              <mat-option *ngFor="let customer of customersList$ | async" [value]="customer['customer_name']">
+                {{customer['customer_name']}}
+              </mat-option>
+            </mat-autocomplete>
+            <mat-error *ngIf="addRouteForm.controls['customer_name'].hasError('required')">
+              Customer name is required.
+            </mat-error>
+          </mat-form-field>
+        </div>
+        <div class="col-6">
+          <mat-form-field>
+            <mat-label>Pickup</mat-label>
+            <input type="text" placeholder="Search..." matInput #filterPickup [matAutocomplete]="pickupAutocomplete"
+              formControlName="pickup_location" (mousedown)="$event.stopPropagation()">
+
+            <mat-autocomplete #pickupAutocomplete="matAutocomplete">
+              <mat-option (click)="selectedLongLat('pickup', option)" *ngFor="let option of pickupOptions"
+                [value]="option?.place_name">
+                {{option?.place_name}}
+              </mat-option>
+            </mat-autocomplete>
+          </mat-form-field>
+          <mat-error *ngIf="addRouteForm.controls['pickup_lat_lng'].touched && addRouteForm.controls['pickup_lat_lng'].hasError('required')">
+            Please select pickup location from the list.
+          </mat-error>
+        </div>
+        <div class="col-6">
+          <mat-form-field>
+            <mat-label>Delivery</mat-label>
+            <input type="text" placeholder="Search..." matInput #filterDelivery [matAutocomplete]="deliveryAutocomplete"
+              formControlName="delivery_location" (mousedown)="$event.stopPropagation()">
+            <mat-autocomplete #deliveryAutocomplete="matAutocomplete">
+              <mat-option (click)="selectedLongLat('delivery', option)" *ngFor="let option of deliveryOptions"
+                [value]="option?.place_name">
+                {{option?.place_name}}
+              </mat-option>
+            </mat-autocomplete>
+          </mat-form-field>
+          <mat-error *ngIf="addRouteForm.controls['delivery_lat_lng'].touched && addRouteForm.controls['delivery_lat_lng'].hasError('required')">
+            Please select delivery location from the list.
+          </mat-error>
+        </div>
+        <div class="col-6">
+          <mat-form-field>
+            <mat-label>Notes</mat-label>
+            <textarea style="height: 18px; resize: none;" matInput name="" id="" cols="30" rows="10" formControlName="note" autocomplete="nope" (mousedown)="$event.stopPropagation()"></textarea>
+            <mat-error *ngIf="addRouteForm.controls['note'].hasError('maxlength')">
+              Notes should be within 2048 characters.
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <div class="col-6 d-flex">
+          <div class="inputbox m-0">
+            <mat-form-field>
+              <mat-label>Unit type</mat-label>
+              <mat-select formControlName="unit_id" (selectionChange)="checkAndFetchRouteInformation()" (mousedown)="$event.stopPropagation()">
+                <mat-option *ngFor="let unit of unitsList" [value]="unit?.id"> {{unit?.type}} </mat-option>
+              </mat-select>
+              <mat-error *ngIf="addRouteForm.controls['unit_id'].hasError('required')">
+                Unit is required
+              </mat-error>
+            </mat-form-field>
+          </div>
+
+          <div class="inputbox m-0">
+            <mat-form-field>
+              <mat-label>Material</mat-label>
+              <mat-select formControlName="materials_id" (mousedown)="$event.stopPropagation()">
+                <mat-option *ngFor="let material of materialsList" [value]="material?.material_id"> {{material?.material}}
+                </mat-option>
+              </mat-select>
+              <mat-error *ngIf="addRouteForm.controls['materials_id'].hasError('required')">
+                Meterial is required
+              </mat-error>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="col-6">
+          <app-estimation-display *ngIf="addRouteForm?.value?.pickup_lat_lng && addRouteForm?.value?.delivery_lat_lng" [value]="addRouteForm['value']"></app-estimation-display>
+        </div>
+        <button mat-raised-button type="submit" (click)="saveRoute()" *ngIf="preventSave"
+          [disabled]="addRouteForm.invalid && preventSave || preventInitialSave">{{routeId? 'Update' : 'Save'}}
+        </button>
+        <div class="loader">
+          <mat-spinner *ngIf="!preventSave"></mat-spinner>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

package/src/lib/component/add-route/add-route.component.scss

@@ -0,0 +1,235 @@
+@import "../../../assets/variable.scss";
+.addroutebox{
+  width: calc(100% - 315px);
+  position: absolute;
+  left: 300px;
+  bottom: 10px;
+  z-index: 999;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .routedetailbox{
+    max-width: 300px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 20px;
+    margin-right: 20px;
+    @media (min-width:1600px) {
+      max-width: 280px;
+    }
+  }
+  .editbtn{
+    background: #326ad3;
+    padding: 10px 25px 10px 25px;
+    color: white;
+    font-size: 0.8125rem;
+    border-radius: 30px;
+    float: right;
+  }
+}
+.add_add_route_box {
+  background: $white;
+  padding: 10px 20px;
+  border-radius: 20px;
+  box-shadow: 2px 4px 4px 2px rgb(0 0 0 / 14%);
+  height: 370px;
+  width: 100%;
+  position: relative;
+  cursor: move;
+
+  .route_form_area {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .col-6 {
+      width: 48%;
+      margin-top: 15px;
+      justify-content: space-between;
+      .inputbox {
+        width: 47%;
+      }
+      span {
+        font-size: 0.875rem;
+      }
+    }
+    button {
+      background: $blue;
+      padding: 10px 18px 10px 18px;
+      color: $white;
+      font-size: 0.8125rem;
+      border-radius: 30px;
+      position: absolute;
+      right: 18px;
+      top: 20px;
+    }
+  }
+}
+.closebtn{
+  background: $black;
+  color: $white;
+  border-radius: 30px;
+  padding: 10px 18px 10px 18px;
+  margin-left: 10px;
+}
+.delbtn{
+  background:red;
+  color: $white;
+  border-radius: 30px;
+  padding: 10px 18px 10px 18px;
+}
+.add_route_listingpart {
+  .listing_toggle {
+    background: $white;
+    border-radius: 15px;
+    padding: 8px 10px;
+    position: absolute;
+    right: 10px;
+    top: 30px;
+    cursor: pointer;
+  }
+}
+.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 40px;
+  opacity: 0;
+  .closebtn {
+    display: none;
+  }
+}
+.show {
+  .listing_box {
+    width: 250px;
+    max-width: 250px;
+    -webkit-box-flex: 0;
+    flex: 0 0 250px;
+    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;
+    @media (min-width:1600px) {
+      width: 320px;
+      max-width: 320px;
+      -webkit-box-flex: 0;
+      flex: 0 0 320px;
+    }
+    h2 {
+      color: $white;
+      white-space: nowrap;
+    }
+    ul {
+      padding: 0 20px 0 0;
+      li {
+        background: #4a4a4a;
+        padding: 15px;
+        border-radius: 15px;
+        display: flex;
+        margin-bottom: 15px;
+        .companayIcon {
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          background: $white;
+          margin-right: 10px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .company_cont {
+          width: calc(100% - 50px);
+          h3 {
+            color: $white;
+            font-size: 15px;
+            font-weight: normal;
+            margin: 0;
+            text-overflow: ellipsis;
+            max-width: 129px;
+            -webkit-box-orient: vertical;
+            white-space: nowrap;
+            overflow: hidden;
+            @media (min-width:1600px) {
+              max-width: 170px;
+            }
+          }
+          p {
+            color: #bcbcbc;
+            font-size: 12px;
+            margin: 5px 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            line-height: 16px;
+          }
+        }
+      }
+    }
+  }
+  .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;
+  }
+}
+.loader{
+    position: absolute;
+    width: 95%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+.buttonprt{
+  margin-right: 83px;
+}
+.destination{
+  .duration{
+    padding: 10px;
+  }
+  span{
+    padding: 5px 0;
+  }
+}
+.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: #fff;
+  position: absolute;
+  top: -11px;
+  left: -11px;
+}
+.routenotes{
+  max-height: 170px;
+  overflow: auto;
+}

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

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