dateTime bug fix, name change

canbax · canbax · commit d99cd9da8b15 · 2020-04-04T20:14:22.000+03:00
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
-# HandyCalc
+# hasap
 
-A web based general purpose math calculator. Use `ng deploy --base-href=/handyCalc/` to deploy to github-pages
+A web based general purpose math calculator. Use `ng deploy --base-href=/hasap/` to deploy to github-pages
 
 Built with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.7.
diff --git a/angular.json b/angular.json
@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "handyCalc": {
+    "hasap": {
       "projectType": "application",
       "schematics": {},
       "root": "",
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/handyCalc",
+            "outputPath": "dist/hasap",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -68,18 +68,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "handyCalc:build"
+            "browserTarget": "hasap:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "handyCalc:build:production"
+              "browserTarget": "hasap:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "handyCalc:build"
+            "browserTarget": "hasap:build"
           }
         },
         "test": {
@@ -118,11 +118,11 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "handyCalc:serve"
+            "devServerTarget": "hasap:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "handyCalc:serve:production"
+              "devServerTarget": "hasap:serve:production"
             }
           }
         },
@@ -133,7 +133,7 @@
       }
     }
   },
-  "defaultProject": "handyCalc",
+  "defaultProject": "hasap",
   "cli": {
     "analytics": "be52f3a5-601b-4520-87da-b01b2b0f3ec9"
   }
diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('handyCalc app is running!');
+    expect(page.getTitleText()).toEqual('hasap app is running!');
   });
 
   afterEach(async () => {
diff --git a/karma.conf.js b/karma.conf.js
@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/handyCalc'),
+      dir: require('path').join(__dirname, './coverage/hasap'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,7 +1,6 @@
 <mat-sidenav-container class="main-container mat-app-background">
   <mat-sidenav mode="side" #sidenav [(opened)]="isOpen" (disableClose)="true">
     <mat-accordion>
-
       <div>
         <div class="form-part">
           <form [formGroup]="fnListForm" class="container">
@@ -92,13 +91,12 @@
           <h5>{{'About'|translate}}</h5>
           <span style="display:table; max-width:20vw;">{{'AboutTxt'|translate}}</span>
           <small> <span>Hasap 1.0.0</span> </small>
-          <a href="https://github.com/canbax/handyCalc" target="_blank" mat-button>
+          <a href="https://github.com/canbax/hasap" target="_blank" mat-button>
             <small> <span>{{'MoreAbout'|translate}}</span> </small>
           </a>
         </div>
       </div>
     </mat-accordion>
-
   </mat-sidenav>
   <mat-sidenav-content class="m-5">
     <div>
@@ -109,7 +107,6 @@ <h5>{{'About'|translate}}</h5>
     </div>
 
     <div class="m-5">
-
       <div [hidden]="settings.mode != 'date & time'">
         <mat-form-field class="editor" appearance="outline">
           <mat-chip-list #chipList>
@@ -120,6 +117,14 @@ <h5>{{'About'|translate}}</h5>
             <input #userDateInp2 #userDateInp="matAutocompleteTrigger" [matAutocomplete]="auto"
               [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="[13, 32]" [matChipInputAddOnBlur]="false"
               (matChipInputTokenEnd)="addChip($event)" (change)="syncInp()">
+            <span matSuffix>
+              <button style="display: inline;" mat-button mat-icon-button (click)="copy(inp)">
+                <mat-icon>file_copy</mat-icon>
+              </button>
+              <button style="display: inline;" mat-button mat-icon-button (click)="isShowHistory=!isShowHistory;">
+                <mat-icon>history</mat-icon>
+              </button>
+            </span>
             <mat-hint>{{usrHint}}</mat-hint>
           </mat-chip-list>
           <mat-autocomplete #auto="matAutocomplete" (optionSelected)="timeUnitSelected($event)">
@@ -128,6 +133,7 @@ <h5>{{'About'|translate}}</h5>
             </mat-option>
           </mat-autocomplete>
         </mat-form-field>
+
       </div>
       <div>
         <mat-form-field *ngIf="settings.mode != 'date & time'" [style.fontSize]="16" class="editor"
@@ -139,11 +145,6 @@ <h5>{{'About'|translate}}</h5>
           <mat-hint>{{usrHint}}</mat-hint>
           <!-- buttons which are inline with input -->
           <span matSuffix>
-            <span [hidden]="settings.mode != 'date & time'">
-              <button style="display: inline;" mat-button mat-icon-button id="date-inp">
-                <mat-icon>date_range</mat-icon>
-              </button>
-            </span>
             <button style="display: inline;" mat-button mat-icon-button (click)="copy(inp)">
               <mat-icon>file_copy</mat-icon>
             </button>
@@ -166,6 +167,9 @@ <h5>{{'About'|translate}}</h5>
             </mat-radio-group>
           </div>
           <div *ngIf="settings.mode != 'programmer'">
+            <button *ngIf="settings.mode == 'date & time'" mat-button mat-icon-button id="date-inp">
+              <mat-icon>date_range</mat-icon>
+            </button>
             <span matRipple [matRippleTrigger]="resultRipple2" #resultRipple2 class="result-txt">{{results[1]}}</span>
             <button *ngIf="results[1].length > 0" mat-icon-button matSuffix (click)="copy(results[1])">
               <mat-icon>file_copy</mat-icon>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -16,16 +16,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'handyCalc'`, () => {
+  it(`should have as title 'hasap'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('handyCalc');
+    expect(app.title).toEqual('hasap');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('handyCalc app is running!');
+    expect(compiled.querySelector('.content span').textContent).toContain('hasap app is running!');
   });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -152,18 +152,8 @@ export class AppComponent implements OnInit {
       );
     setInterval(this.keepHistory.bind(this), this.PUSH_HISTORY_MS);
 
-    flatpickr('#date-inp', {
-      defaultDate: new Date(), enableTime: true, enableSeconds: true, time_24hr: true,
-      onClose: () => {
-        if (this.isDateSelected) {
-          let d1 = document.querySelector('#date-inp')['_flatpickr'].selectedDates[0] as Date;
-          this.processInp4chips();
-          this.dateChips.push({ isHumanDate: true, str: d1.toLocaleString(), val: d1.getTime() });
-          this.isDateSelected = false;
-          this.compute();
-        }
-      }, onChange: () => { this.isDateSelected = true; }
-    });
+    this.initFlatPickr();
+
     this.setHtmlTitle();
     setTimeout(() => { this.isAnimateTitle = false }, 3000);
   }
@@ -215,6 +205,9 @@ export class AppComponent implements OnInit {
       this.bases = [];
     }
     this._usrSetting.setSetting('mode', this.settings.mode);
+    if (this.settings.mode == 'date & time') {
+      this.initFlatPickr();
+    }
     this.refreshSideNav();
   }
 
@@ -354,9 +347,11 @@ export class AppComponent implements OnInit {
   }
 
   addChip(event: MatChipInputEvent): void {
-    const value = event.value;
+    let value = event.value.trim();
     this.processInp4chips();
-    this.dateChips.push({ val: Number(value), str: value, isHumanDate: false });
+    if (value.length > 0) {
+      this.dateChips.push({ val: Number(value), str: value, isHumanDate: false });
+    }
     this.compute();
   }
 
@@ -369,10 +364,37 @@ export class AppComponent implements OnInit {
     let s = this._usrDateInp.nativeElement.value.trim();
     let unit = e.option.viewValue;
     this.processInp4chips();
+    if (s.length < 1) {
+      s = '1';
+    }
     this.dateChips.push({ isHumanDate: false, str: s + unit, val: Number(s) });
     this.compute();
   }
 
+  private initFlatPickr() {
+    if (this.settings.mode != 'date & time') {
+      return;
+    }
+    setTimeout(() => {
+      let dateElem = document.querySelector('#date-inp');
+      if (dateElem && dateElem['_flatpickr']) {
+        return;
+      }
+      flatpickr('#date-inp', {
+        defaultDate: new Date(), enableTime: true, enableSeconds: true, time_24hr: true,
+        onClose: () => {
+          if (this.isDateSelected) {
+            let d1 = document.querySelector('#date-inp')['_flatpickr'].selectedDates[0] as Date;
+            this.processInp4chips();
+            this.dateChips.push({ isHumanDate: true, str: d1.toLocaleString(), val: d1.getTime() });
+            this.isDateSelected = false;
+            this.compute();
+          }
+        }, onChange: () => { this.isDateSelected = true; }
+      });
+    }, 1000);
+  }
+
   private setHtmlTitle() {
     let e = document.getElementsByTagName('title')[0];
     this.translate.get('appTitle').subscribe(x => {
@@ -408,7 +430,7 @@ export class AppComponent implements OnInit {
   }
 
   private processInp4chips() {
-    let s = this._usrDateInp.nativeElement.value;
+    let s = this._usrDateInp.nativeElement.value.trim();
     if (this.opChips4DateTime.includes(s)) {
       this.dateChips.push({ isHumanDate: false, str: s, val: 0 });
     }
@@ -418,11 +440,16 @@ export class AppComponent implements OnInit {
 
   private compute4dateTime(): string {
     let s = '';
-    for (let c of this.dateChips) {
+    for (let i = 0; i < this.dateChips.length; i++) {
+      let c = this.dateChips[i];
       if (c.isHumanDate) {
         s += c.val;
       } else {
-        s += c.str;
+        if (i > 0 && !this.dateChips[i - 1].isHumanDate && !this.isContainDateOp(c.str) && !this.isContainDateOp(this.dateChips[i - 1].str)) {
+          s += '+' + c.str;
+        } else {
+          s += c.str;
+        }
       }
     }
     for (let u in TIME_UNIT_STR[this.settings.lang]) {
@@ -432,6 +459,15 @@ export class AppComponent implements OnInit {
     return s;
   }
 
+  private isContainDateOp(s: string) {
+    for (let i = 0; i < this.opChips4DateTime.length; i++) {
+      if (s.includes(this.opChips4DateTime[i])) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   private getResult4DateTime(result: string): string {
     let hasHumanDate = false;
     for (let c of this.dateChips) {
