@WidgetComponent

nm-job-downtime

File

src/app/shared/widgets/jobs/downtime/job-downtime.component.ts

Description

This class represents the job downtime widget.

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector nm-job-downtime
styleUrls job-downtime.component.scss
templateUrl ./job-downtime.component.html

Index

Widget inputs
Widget outputs
Properties
Methods

Constructor

constructor()

Methods

Public addDownTime
addDownTime()
Returns : void
Private checkDowntimesChanged
checkDowntimesChanged()
Returns : void
Protected configureWidget
configureWidget(configuration: WidgetConfig)
Decorators : WidgetConfigure
Parameters :
Name Type Optional
configuration WidgetConfig no
Returns : void
Public getSelectedDays
getSelectedDays(days: )
Parameters :
Name Optional
days no
Returns : void
Private resetTimes
resetTimes()
Returns : void
Public updateDowntimes
updateDowntimes(newDownTimes: )
Parameters :
Name Optional
newDownTimes no
Returns : void
Private validateFromToValues
validateFromToValues()
Returns : void
Public validateHours
validateHours()
Returns : void

Properties

Public _id
_id: string
Type : string
Decorators : WidgetId
Public areDowntimesChanged
areDowntimesChanged:
Default value : new ReplaySubject<boolean>()
Decorators : WidgetOutput

Emits if downtimes are changed

Public chiplistConfig
chiplistConfig:
Public configuration
configuration: WidgetConfig
Type : WidgetConfig
Decorators : WidgetConfiguration
Public currentDowntimes
currentDowntimes:
Default value : new Subject<any>()
Decorators : WidgetOutput

Emits current job downtimes

Public downtimes
downtimes: []
Type : []
Default value : []
Public errorMessage
errorMessage: string
Type : string
Default value : ""
Public fetchDowntimesConfig
fetchDowntimesConfig:
Default value : new Subject<boolean>()
Decorators : WidgetInput

Channel to get cuurent job downtimes

Public fromHourValue
fromHourValue: string
Type : string
Default value : "00"
Public fromMinuteValue
fromMinuteValue: string
Type : string
Default value : "00"
Public isValid
isValid: boolean
Type : boolean
Default value : false
Public loadDowntimesChannel
loadDowntimesChannel:
Default value : new Subject<any>()
Decorators : WidgetInput

Sets loaded downtimes

Public loadedTimesLength
loadedTimesLength: number
Type : number
Public selectDays
selectDays:
Default value : new ReplaySubject<any>(1)
Public selectedDay
selectedDay:
Public selectedDays
selectedDays:
Public timeIndexCounter
timeIndexCounter: number
Type : number
Default value : 8
Public toHourValue
toHourValue: string
Type : string
Default value : "00"
Public toMinuteValue
toMinuteValue: string
Type : string
Default value : "00"
Private unsubscribe
unsubscribe:
Default value : NgUnsubscribe.create()
Public updatedArray
updatedArray:
Default value : new Subject<any>()
import { Component, ChangeDetectionStrategy } from "@angular/core";
import { Subject, ReplaySubject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetId,
  WidgetInput,
  WidgetOutput,
  WidgetConfigure,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../../shared/ng-unsubscribe";
import { WidgetConfig } from "../../widget.configuration";
import { UtilService } from "../../../components/util/util.service";

const MAX_HOURS = "23";
const MAX_MINUTES = "59";
const MIN_TIME = "0";

/**
 * This class represents the job downtime widget.
 */
@WidgetComponent("nm-job-downtime")
@Component({
  selector: "nm-job-downtime",
  templateUrl: "./job-downtime.component.html",
  styleUrls: ["./job-downtime.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JobDowntimeWidget {
  private unsubscribe = NgUnsubscribe.create();

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public _id: string;

  public selectedDay;
  public fromHourValue = "00";
  public fromMinuteValue = "00";
  public toHourValue = "00";
  public toMinuteValue = "00";
  public updatedArray = new Subject<any>();
  public selectedDays;

  public chiplistConfig;
  public selectDays = new ReplaySubject<any>(1);

  public downtimes = [];
  public errorMessage: string = "";
  public isValid: boolean = false;

  public timeIndexCounter = 8;
  public loadedTimesLength: number;

  /**
   * Channel to get cuurent job downtimes
   */
  @WidgetInput("fetchDowntimes")
  public fetchDowntimesConfig = new Subject<boolean>();

  /**
   * Emits current job downtimes
   */
  @WidgetOutput("downtimes")
  public currentDowntimes = new Subject<any>();

  /**
   * Sets loaded downtimes
   */
  @WidgetInput("loadedDowntimes")
  public loadDowntimesChannel = new Subject<any>();

  /**
   * Emits if downtimes are changed
   */
  @WidgetOutput()
  public areDowntimesChanged = new ReplaySubject<boolean>();

  constructor() {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.chiplistConfig = configuration.configuration.chiplistConfig;

    this.fetchDowntimesConfig
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => this.currentDowntimes.next(this.downtimes));

    this.loadDowntimesChannel
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((times) => {
        this.loadedTimesLength = times.length;

        if (this.loadedTimesLength === 0) {
          this.areDowntimesChanged.next(false);
          this.selectDays.next([]);
          return;
        }

        this.areDowntimesChanged.next(true);
        this.downtimes = times.map((time) => {
          if (time.type !== "time") {
            time.index = time.sortIdx
              ? time.sortIdx
              : time.index
              ? time.index
              : null;
            return time;
          }
          time.index = this.timeIndexCounter;
          this.timeIndexCounter++;
          return time;
        });
        let downtimeDays = times.filter((time) => time.type !== "time");

        this.selectDays.next(downtimeDays);
      });
  }

  public validateHours() {
    this.fromHourValue = UtilService.validateTime(
      this.fromHourValue,
      MIN_TIME,
      MAX_HOURS
    );
    this.toHourValue = UtilService.validateTime(
      this.toHourValue,
      MIN_TIME,
      MAX_HOURS
    );
    this.fromMinuteValue = UtilService.validateTime(
      this.fromMinuteValue,
      MIN_TIME,
      MAX_MINUTES
    );
    this.toMinuteValue = UtilService.validateTime(
      this.toMinuteValue,
      MIN_TIME,
      MAX_MINUTES
    );

    if (!this.fromHourValue || !this.toHourValue) {
      this.isValid = false;
    } else if (this.fromHourValue < MIN_TIME || this.toHourValue < MIN_TIME) {
      this.isValid = false;
    } else if (this.fromHourValue > MAX_HOURS || this.toHourValue > MAX_HOURS) {
      this.isValid = false;
    } else {
      if (this.fromHourValue > this.toHourValue) {
        this.isValid = false;
        return;
      } else if (this.fromHourValue === this.toHourValue) {
        this.validateFromToValues();
        return;
      }
      this.isValid = true;
    }
  }

  private validateFromToValues() {
    if (this.fromMinuteValue) {
      if (!this.toMinuteValue) {
        this.isValid = false;
      } else if (this.fromMinuteValue < this.toMinuteValue) {
        this.isValid = true;
      } else {
        this.isValid = false;
      }
      return;
    }
    if (this.toMinuteValue) {
      this.isValid = true;
      return;
    }
    this.isValid = false;
  }

  public updateDowntimes(newDownTimes) {
    this.selectDays.next(newDownTimes);
    this.downtimes = newDownTimes;
    this.checkDowntimesChanged();
  }

  public getSelectedDays(days) {
    this.selectedDays = days;
    let downtimeDays = days.map((day) => {
      switch (day.index) {
        case 1:
          day.type = "sunday";
          break;
        case 2:
          day.type = "monday";
          break;
        case 3:
          day.type = "tuesday";
          break;
        case 4:
          day.type = "wednesday";
          break;
        case 5:
          day.type = "thursday";
          break;
        case 6:
          day.type = "friday";
          break;
        case 7:
          day.type = "saturday";
          break;
        default:
          break;
      }
      return { value: day.day, index: day.index, type: day.type };
    });
    let downtimes = this.downtimes.filter((time) => time["type"] === "time");
    this.downtimes = [...downtimeDays, ...downtimes];
    this.checkDowntimesChanged();
  }

  public addDownTime() {
    this.validateHours();
    let fromVal = this.fromMinuteValue
      ? this.fromHourValue + ":" + this.fromMinuteValue
      : this.fromHourValue;
    let toVal = this.toMinuteValue
      ? this.toHourValue + ":" + this.toMinuteValue
      : this.toHourValue;
    let val = fromVal + " - " + toVal;

    this.downtimes.push({
      value: val,
      index: this.timeIndexCounter,
      type: "time",
    });
    this.timeIndexCounter++;
    this.resetTimes();
    this.checkDowntimesChanged();
  }

  private resetTimes() {
    this.fromHourValue = "00";
    this.fromMinuteValue = "00";
    this.toHourValue = "00";
    this.toMinuteValue = "00";
    this.isValid = false;
  }

  private checkDowntimesChanged() {
    if (this.downtimes.length === 0 && this.loadedTimesLength === 0) {
      this.areDowntimesChanged.next(false);
    } else {
      this.areDowntimesChanged.next(true);
    }
  }
}
<mat-dialog-content class="nm-dialog__content">
  <nm-week-day-selector
    (selectedDays)="getSelectedDays($event)"
    [isSingleMode]="false"
    [selectDays]="selectDays"
  >
  </nm-week-day-selector>
  <div class="nm-jobDownTime__time">
    <div>
      <div class="nm-jobDownTime__input --from">
        <h6 class="nm-jobDownTime__label">
          {{ "web.processes.jobs.downtime.from.placeholder" | translate }}
        </h6>
        <mat-form-field class="nm-jobDownTime__hours">
          <mat-label>HH</mat-label>
          <input
            (change)="validateHours()"
            [(ngModel)]="fromHourValue"
            autocomplete="off"
            matInput
            max="23"
            min="0"
            type="number"
          />
        </mat-form-field>

        <mat-form-field class="nm-jobDownTime__minutes">
          <mat-label>MM</mat-label>
          <input
            (change)="validateHours()"
            [(ngModel)]="fromMinuteValue"
            autocomplete="off"
            matInput
            max="59"
            min="0"
            type="number"
          />
        </mat-form-field>
      </div>
      <div class="nm-jobDownTime__input --to">
        <h6 class="nm-jobDownTime__label">
          {{ "web.processes.jobs.downtime.to.placeholder" | translate }}
        </h6>

        <mat-form-field class="nm-jobDownTime__hours">
          <mat-label>HH</mat-label>
          <input
            (change)="validateHours()"
            [(ngModel)]="toHourValue"
            autocomplete="off"
            matInput
            max="23"
            min="0"
            type="number"
          />
        </mat-form-field>

        <mat-form-field class="nm-jobDownTime__minutes">
          <mat-label>MM</mat-label>
          <input
            (change)="validateHours()"
            [(ngModel)]="toMinuteValue"
            autocomplete="off"
            matInput
            max="59"
            min="0"
            type="number"
          />
        </mat-form-field>
      </div>
    </div>
    <div class="nm-jobDownTime__add">
      <button
        (click)="addDownTime()"
        [disabled]="!isValid"
        class="mat-icon-button"
        color="primary"
        mat-mini-fab
        pTooltip="{{ 'add downtime' | translate }}"
      >
        <div class="material-icons nm-svg-icon">
          <mat-icon>add</mat-icon>
        </div>
      </button>
    </div>
  </div>
  <hr />

  <nm-chiplist
    [chipsData]="downtimes"
    [configuration]="chiplistConfig"
    (updatedArray)="updateDowntimes($event)"
  ></nm-chiplist>
</mat-dialog-content>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""