gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 <div
   2     class="owl-dateTime owl-widget"
   3     [ngClass]="{'owl-dateTime-inline': inline}"
   4     [ngStyle]="style"
   5     #container>
   6    <div *ngIf="!inline && customTemp.children.length == 0" class="owl-dateTime-inputWrapper" (mouseout)="Mouseout($event)" (mouseover)="Mouseover($event)">
   7        <input *ngIf="!supportKeyboardInput" type="text" [class]="inputStyleClass"
   8               [ngClass]="{
   9            'owl-dateTime-input owl-inputtext owl-state-default': true
  10            }"
  11               [ngStyle]="inputStyle"
  12               [attr.placeholder]="placeHolder"
  13               [attr.tabindex]="tabIndex" [attr.id]="inputId"
  14               [attr.required]="required"
  15               [disabled]="disabled"
  16               [value]="formattedValue"
  17               (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (click)="onInputClick($event)" readonly>
  18         <input *ngIf="supportKeyboardInput" type="text" [class]="inputStyleClass"
  19               [ngClass]="{
  20            'owl-dateTime-input owl-inputtext owl-state-default': true
  21            }"
  22               [ngStyle]="inputStyle"
  23               [attr.placeholder]="placeHolder"
  24               [attr.tabindex]="tabIndex" [attr.id]="inputId"
  25               (change)="onInputChange($event)"
  26               [attr.required]="required"
  27               [value]="formattedValue"
  28               (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (click)="onInputClick($event)">
  29        <i class="ict ict-close  owl-icon" style="margin-right: 5px;" [hidden]="(!value)||(disabled)||(!mouseIn)||(!canClear)" (click)="clearValue($event)"></i>
  30        <i class="fa fa-calendar  owl-icon" style="margin-right: 5px;" [hidden]="value&&(!disabled)"  (click)="onInputClick($event)" ></i>
  31    </div>
  32    <!-- Workaround of ng-content default content (angular issue #12530) -->
  33    <div [ngClass]="{'owl-dateTime-customTemp': customTemp.children.length !== 0}" #customTemp (click)="onInputClick($event)">
  34        <ng-content></ng-content>
  35    </div>
  36    <div class="owl-dateTime-dialog owl-state-default owl-corner-all"
  37         [ngStyle]="{'display': inline ? 'inline-block' : null}"
  38         [@fadeInOut]="dialogVisible? 'visible' : (!inline? 'hidden': null)"
  39         (click)="onDialogClick($event)" #dialog>
  40        <div *ngIf="showHeader" class="owl-dateTime-dialogHeader owl-corner-top">
  41            <span *ngIf="value; else elseBlock">{{formattedValue}}</span>
  42            <ng-template #elseBlock><span>{{placeHolder}}</span></ng-template>
  43        </div>
  44        <div *ngIf="type ==='both' || type === 'calendar'" class="owl-calendar-wrapper owl-corner-all owl-padding">
  45            <div class="owl-calendar-control owl-cal-header">
  46                <div class="owl-calendar-controlNav">
  47                    <span class="fa fa-angle-left" style="padding: 8px;margin-left:12px; font-size: 20px;"
  48                     (click)="prevNav($event)"></span>
  49                </div>
  50                <div class="owl-calendar-controlContent">
  51                    <span class="month-control" (click)="changeDialogType(2)">{{pickerMonth}}</span>
  52                    <span class="year-control" (click)="changeDialogType(3)">{{pickerYear}}</span>
  53                </div>
  54                <div class="owl-calendar-controlNav">
  55                    <span class="fa fa-angle-right" style="padding: 8px;  font-size: 20px;" (click)="nextNav($event)"></span>
  56                </div>
  57            </div>
  58            <div class="owl-calendar" [hidden]="dialogType !== 1">
  59                <table class="owl-calendar-day">
  60                    <thead class="owl-cal-header">
  61                    <tr class="owl-weekdays" style="height:40px">
  62                        <th *ngFor="let weekDay of calendarWeekdays" class="owl-weekday" scope="col">
  63                            <span>{{weekDay}}</span>
  64                        </th>
  65                    </tr>
  66                    </thead>
  67                    <tbody>
  68                    <tr class="owl-days" *ngFor="let week of calendarDays">
  69                        <td *ngFor="let d of week" class="owl-day" style="padding: 5px;"
  70                            [ngClass]="{
  71                        'owl-calendar-invalid': !isValidDay(d.date),
  72                        'owl-calendar-outFocus': d.otherMonth,
  73                        'owl-calendar-hidden': d.hide,
  74                        'owl-day-today': d.today
  75                    }" (click)="selectDate($event, d.date)">
  76                    <div style="height:32px;"  class="owl-day day" [ngClass]=" {'owl-calendar-selected': isSelectedDay(d.date), 'owl-calendar-invalid': !isValidDay(d.date)}">
  77                            <a style="line-height:32px;">{{d.num}}</a>
  78                         </div>
  79                        </td>
  80                    </tr>
  81                    </tbody>
  82                </table>
  83            </div>
  84            <div class="owl-calendar" [hidden]="dialogType !== 2">
  85                <table class="owl-calendar-month">
  86                    <tbody>
  87                    <tr class="owl-months" *ngFor="let months of calendarMonths; let i = index">
  88                        <td *ngFor="let month of months; let j = index" class="owl-month"
  89                            (click)="selectMonth(i*3 + j)">
  90                            <div class="owl-month" [ngClass]="{'owl-calendar-div-selected': isCurrentMonth(i*3 + j),'owl-calendar-month-part':true,'owl-calendar-month-selected': isCurrentMonth(i*3 + j)}">
  91                            <a>{{month}}</a>
  92                            </div>
  93                        </td>
  94                    </tr>
  95                    </tbody>
  96                </table>
  97            </div>
  98            <div class="owl-calendar" [hidden]="dialogType !== 3">
  99                <table class="owl-calendar-year">
 100                    <tbody>
 101                    <tr class="owl-years" *ngFor="let years of calendarYears">
 102                        <td class="owl-year" *ngFor="let year of years"
 103                            (click)="selectYear(+year)">
 104                            <div [ngClass]="{'owl-calendar-year-part':true,'owl-calendar-year-selected': isCurrentYear(year)}">
 105                             <a>{{year}}</a>
 106                         </div>
 107                        </td>
 108                    </tr>
 109                    </tbody>
 110                </table>
 111                <!--
 112                <div class="owl-calendar-yearArrow left" style="left: 12px;
 113                font-size: 20px;
 114                margin-top: -116px;" (click)="generateYearList('prev')">
 115                    <i style="padding:8px" class="fa fa-angle-left"></i>
 116                </div>
 117                <div class="owl-calendar-yearArrow right" style="left: 261px;
 118                font-size: 20px;
 119                margin-top: -116px;" (click)="generateYearList('next')">
 120                    <i style="padding:8px" class="fa fa-angle-right"></i>
 121                </div>
 122             -->
 123            </div>
 124        </div>
 125        <div *ngIf="type ==='both' || type === 'timer'" [hidden]="dialogType !== 1" >
 126            <div style="height: 35px; padding: 8px;margin-bottom: 20px;">
 127        <oes-timepickerr #timepicker [max]="_max" [min]="_min" class="time-picker" (TimerChange)="TimerChange($event)"  [showSecondsTimer]="showSeconds" [(ngModel)]="mtime" [size]="'small'" [seconds]="seconds"></oes-timepickerr>
 128        <div class="confirm-btn-div" style="    float: right; margin-top: -35px;">
 129              <button class="plx-btn plx-btn-primary plx-btn-xs" (click)="confirm()" type="button"> {{locale.confirm}} </button>
 130         </div>
 131     </div>
 132        </div>
 133    </div>
 134 </div>