bugfixes: * change time with minutesGap by using arrows (issue #103)

Agranom · Jan 26, 2019 · eef1fbd · eef1fbd
1 parent 04a9b96
commit eef1fbd
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 41 deletions.
diff --git a/...components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts b/...components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts
@@ -1,8 +1,8 @@
-import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {NgxMaterialTimepickerDialControlComponent} from './ngx-material-timepicker-dial-control.component';
-import {NO_ERRORS_SCHEMA, SimpleChanges} from '@angular/core';
-import {TimeUnit} from '../../models/time-unit.enum';
-import {TimepickerTime} from '../../timepicker-time.namespace';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NgxMaterialTimepickerDialControlComponent } from './ngx-material-timepicker-dial-control.component';
+import { NO_ERRORS_SCHEMA, SimpleChanges } from '@angular/core';
+import { TimeUnit } from '../../models/time-unit.enum';
+import { TimepickerTime } from '../../timepicker-time.namespace';
 
 describe('NgxMaterialTimepickerDialControlComponent', () => {
     let fixture: ComponentFixture<NgxMaterialTimepickerDialControlComponent>;
@@ -125,7 +125,7 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
         let counter = 0;
         const event = {
             keyCode: 0, preventDefault: () => {
-                counter++
+                counter++;
             }
         } as KeyboardEvent;
         const numbers = Array(10).fill(48).map((v, i) => v + i);
@@ -187,7 +187,7 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
             restrictedCodes.forEach((code, index) => {
                 component.onKeyDown({...event, keyCode: code});
                 expect(counter).toBe(index + 1);
-            })
+            });
         });
 
         it('should call preventDefault if no time exist or time disabled', () => {
@@ -201,7 +201,7 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
 
             component.time = '';
             component.onKeyDown({...event, keyCode: NUM_1});
-            expect(counter).toBe(2)
+            expect(counter).toBe(2);
         });
 
         it('should up time by 1', () => {
@@ -219,5 +219,23 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
             component.onKeyDown({...event, keyCode: ARROW_DOWN});
             expect(component.time).toBe('10');
         });
+
+        it('should up time by 7', () => {
+            const ARROW_UP = 38;
+            component.time = '11';
+            component.minutesGap = 7;
+
+            component.onKeyDown({...event, keyCode: ARROW_UP});
+            expect(component.time).toBe('18');
+        });
+
+        it('should down time by 6', () => {
+            const ARROW_DOWN = 40;
+            component.time = '11';
+            component.minutesGap = 6;
+
+            component.onKeyDown({...event, keyCode: ARROW_DOWN});
+            expect(component.time).toBe('5');
+        });
     });
 });
diff --git a/...cker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts b/...cker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts
@@ -1,7 +1,8 @@
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
-import {ClockFaceTime} from '../../models/clock-face-time.interface';
-import {TimeUnit} from '../../models/time-unit.enum';
-import {TimeFormatterPipe} from '../../pipes/time-formatter.pipe';
+/* tslint:disable:triple-equals */
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ClockFaceTime } from '../../models/clock-face-time.interface';
+import { TimeUnit } from '../../models/time-unit.enum';
+import { TimeFormatterPipe } from '../../pipes/time-formatter.pipe';
 
 @Component({
     selector: 'ngx-material-timepicker-dial-control',
@@ -17,6 +18,7 @@ export class NgxMaterialTimepickerDialControlComponent implements OnChanges {
     @Input() time: string;
     @Input() isActive: boolean;
     @Input() isEditable: boolean;
+    @Input() minutesGap: number;
 
     @Output() timeUnitChanged = new EventEmitter<TimeUnit>();
     @Output() timeChanged = new EventEmitter<ClockFaceTime>();
@@ -32,7 +34,7 @@ export class NgxMaterialTimepickerDialControlComponent implements OnChanges {
             if (this.isEditable && !changes['time'].firstChange) {
                 return;
             }
-            this.time = new TimeFormatterPipe().transform(+changes['time'].currentValue, this.timeUnit)
+            this.time = new TimeFormatterPipe().transform(+changes['time'].currentValue, this.timeUnit);
         }
     }
 
@@ -76,9 +78,9 @@ export class NgxMaterialTimepickerDialControlComponent implements OnChanges {
         let time: string;
 
         if (keyCode === ARROW_UP) {
-            time = String(+this.time + 1);
+            time = String(+this.time + (this.minutesGap || 1));
         } else if (keyCode === ARROW_DOWN) {
-            time = String(+this.time - 1);
+            time = String(+this.time - (this.minutesGap || 1));
         }
 
         if (!isTimeUnavailable(time, this.timeList)) {
@@ -103,7 +105,7 @@ function isInputAllowed(e: KeyboardEvent): boolean {
 
         return true;
     }
-    return !((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105))
+    return !((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105));
 }
 
 function isTimeDisabledToChange(currentTime: string, nextTime: string, timeList: ClockFaceTime[]): boolean {

diff --git a/...aterial-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.html b/...aterial-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.html
@@ -1,25 +1,29 @@
 <div class="timepicker-dial">
-    <div class="timepicker-dial__time">
-        <ngx-material-timepicker-dial-control [timeList]="hours" [time]="hour" [timeUnit]="timeUnit.HOUR"
-                                              [isActive]="activeTimeUnit === timeUnit.HOUR"
-                                              [isEditable]="isEditable"
-                                              (timeUnitChanged)="changeTimeUnit($event)"
-                                              (timeChanged)="changeHour($event)">
+    <div class="timepicker-dial__container">
+        <div class="timepicker-dial__time">
+            <ngx-material-timepicker-dial-control [timeList]="hours" [time]="hour" [timeUnit]="timeUnit.HOUR"
+                                                  [isActive]="activeTimeUnit === timeUnit.HOUR"
+                                                  [isEditable]="isEditable"
+                                                  (timeUnitChanged)="changeTimeUnit($event)"
+                                                  (timeChanged)="changeHour($event)">
 
-        </ngx-material-timepicker-dial-control>
-        <span>:</span>
-        <ngx-material-timepicker-dial-control [timeList]="minutes" [time]="minute" [timeUnit]="timeUnit.MINUTE"
-                                              [isActive]="activeTimeUnit === timeUnit.MINUTE"
-                                              [isEditable]="isEditable"
-                                              (timeUnitChanged)="changeTimeUnit($event)"
-                                              (timeChanged)="changeMinute($event)">
+            </ngx-material-timepicker-dial-control>
+            <span>:</span>
+            <ngx-material-timepicker-dial-control [timeList]="minutes" [time]="minute" [timeUnit]="timeUnit.MINUTE"
+                                                  [isActive]="activeTimeUnit === timeUnit.MINUTE"
+                                                  [isEditable]="isEditable"
+                                                  [minutesGap]="minutesGap"
+                                                  (timeUnitChanged)="changeTimeUnit($event)"
+                                                  (timeChanged)="changeMinute($event)">
 
-        </ngx-material-timepicker-dial-control>
+            </ngx-material-timepicker-dial-control>
+        </div>
+        <ngx-material-timepicker-period class="timepicker-dial__period"
+                                        [ngClass]="{'timepicker-dial__period--hidden': format === 24}"
+                                        [selectedPeriod]="period" [activeTimeUnit]="activeTimeUnit"
+                                        [maxTime]="maxTime" [minTime]="minTime" [format]="format"
+                                        [hours]="hours" [minutes]="minutes" [selectedHour]="hour"
+                                        (periodChanged)="changePeriod($event)"></ngx-material-timepicker-period>
     </div>
-    <ngx-material-timepicker-period class="timepicker-dial__period"
-                                    [ngClass]="{'timepicker-dial__period--hidden': format === 24}"
-                                    [selectedPeriod]="period" [activeTimeUnit]="activeTimeUnit"
-                                    [maxTime]="maxTime" [minTime]="minTime" [format]="format"
-                                    [hours]="hours" [minutes]="minutes" [selectedHour]="hour"
-                                    (periodChanged)="changePeriod($event)"></ngx-material-timepicker-period>
+    <small class="timepicker-dial__hint" *ngIf="isEditable">* use arrows (<span>&#8645;</span>) to change the time</small>
 </div>
diff --git a/...aterial-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.scss b/...aterial-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.scss
@@ -1,10 +1,14 @@
 @import "../../styles/config";
 
 .timepicker-dial {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    text-align: right;
+    &__container {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+
     &__time {
         display: flex;
         align-items: baseline;
@@ -17,18 +21,35 @@
             color: var(--dial-inactive-color);
         }
     }
+
     &__period {
         display: block;
         margin-left: 10px;
+
         &--hidden {
             visibility: hidden;
         }
     }
+
+    &__hint {
+        display: inline-block;
+        font-size: 10px;
+        color: $dial-active-color;
+        @supports (color: var(--dial-active-color)) {
+            color: var(--dial-active-color);
+        }
+        span {
+            font-size: 14px;
+        }
+    }
 }
 
 @media (max-device-width: 1023px) and (orientation: landscape) {
     .timepicker-dial {
-        flex-direction: column;
+        &__container {
+            flex-direction: column;
+        }
+
         &__period {
             margin-left: 0;
         }