services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';

export enum CLOCK_TYPE { HOURS = 1, MINUTES = 2 }

export interface TimeFormat {
  hour: number;
  minute: number;
  meridiem: 'PM' | 'AM';
}

@Component({
  selector: 'ticker',
  template: `
  <div class="ticker-wrap">
    <div class="ticker">
      <div class="ticker-container">
        <button mat-mini-fab class="ticker-center"></button>
        <mat-toolbar [ngStyle]="getPointerStyle()" class="pointer">
          <button mat-mini-fab class="ticker-selected"></button>
        </mat-toolbar>
        <div *ngFor="let step of steps; let i = index" [class]="getTimeValueClass(step, i)" >
          <button 
            mat-mini-fab 
            [color]="selectedTimePart === step ? color : ''"
            (click)="changeTimeValue(step)"
          > 
            {{ step }} 
          </button>
        </div>
      </div>
    </div>
  </div>`,
  styleUrls: ['./time-picker.component.scss']
})
export class TickerComponent implements OnChanges {
  @Input() public pickTime: TimeFormat;
  @Output() public pickTimeChange: EventEmitter<TimeFormat> = new EventEmitter();

  @Input() public currentTemplate: CLOCK_TYPE;
  @Output() public viewChange = new EventEmitter<CLOCK_TYPE>();

  @Input() public color: string;

  public steps = new Array<number>();
  public selectedTimePart;

  private format: number = 12;
  private degrees: number;

  ngOnChanges() {
    this.degrees = 360 / this.format;
    this.setupUI();
  }

  private setupUI() {
    this.steps = new Array<number>();
    switch (this.currentTemplate) {
      case CLOCK_TYPE.HOURS:
        for (let i = 1; i <= this.format; i++) {
          this.steps.push(i);
          this.selectedTimePart = this.pickTime.hour || 0;
          if (this.selectedTimePart > this.format) {
            this.selectedTimePart -= this.format;
          }
        }
        break;

      case CLOCK_TYPE.MINUTES:
        for (let i = 5; i <= 55; i += 5) {
          this.steps.push(i);
        }
        this.steps.push(0);
        this.selectedTimePart = this.pickTime.minute || 0;
        break;
    }
  }

  public getPointerStyle() {
    let divider = 1;
    switch (this.currentTemplate) {
      case CLOCK_TYPE.HOURS:
        divider = this.format;
        break;

      case CLOCK_TYPE.MINUTES:
        divider = 60;
        break;
    }

    let degrees = 0;
    if (this.currentTemplate === CLOCK_TYPE.HOURS) {
      degrees = Math.round(this.pickTime.hour * (360 / divider)) - 180;
    } else {
      degrees = Math.round(this.pickTime.minute * (360 / divider)) - 180;
    }

    const style = {
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      transform: 'rotate(' + degrees + 'deg)'
    };

    return style;
  }

  public getTimeValueClass(step: number, index: number) {
    let classes = 'ticker-step ticker-deg' + this.degrees * (index + 1);
    if (this.selectedTimePart === step) classes += ' mat-primary';

    return classes;
  }

  public changeTimeValue(step: number) {
    if (this.currentTemplate === CLOCK_TYPE.HOURS) {
      this.pickTime.hour = step;
      this.viewChange.emit(CLOCK_TYPE.MINUTES);
    } else {
      this.pickTime.minute = step;
      this.viewChange.emit(CLOCK_TYPE.HOURS);
    }
    this.pickTimeChange.emit(this.pickTime);
  }
}