public/app/main/apps/tools/views/intervals/edit/apps/interval/dialog.html

   1 <md-dialog class="inboundroute-dialog" aria-label="New Interval">
   2     <form name="intervalForm" class="md-inline-form" novalidate>
   3         <md-toolbar class="md-accent md-hue-2">
   4             <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
   5                 <span class="title">{{ vm.title | translate }}</span>
   6                 <md-button class="md-icon-button" ng-click="vm.closeDialog()">
   7                     <md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
   8                 </md-button>
   9             </div>
  10         </md-toolbar>
  11
  12         <md-dialog-content ms-scroll>
  13             <div class="error-list">
  14                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
  15                     <div>
  16                         <span class="message">{{error.message}}</span>
  17                         <span class="type">({{error.type}})</span>
  18                     </div>
  19                     <md-button class="md-icon-button">
  20                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
  21                     </md-button>
  22                 </div>
  23             </div>
  24
  25             <md-input-container class="md-block">
  26                 <label translate="TOOLS.NAME">Name</label>
  27                 <input ng-model="vm.interval.name" type="text" name="name" placeholder="{{'TOOLS.NAME' | translate}}" md-autofocus required>
  28                 <div ng-messages="intervalForm.name.$error" ng-show="intervalForm.name.$touched" role="alert">
  29                     <div ng-message="required">
  30                         <span translate="TOOLS.ERRORS.NAME_REQUIRED">Name field is required</span>
  31                     </div>
  32                 </div>
  33             </md-input-container>
  34
  35             <md-input-container class="md-block">
  36                 <label translate="TOOLS.TYPE">Type</label>
  37                 <md-select ng-model="vm.type">
  38                     <md-option ng-value="type" ng-repeat='type in vm.types'>{{ type | ucfirst }}</md-option>
  39                 </md-select>
  40             </md-input-container>
  41
  42             <md-input-container class="md-block" ng-if="vm.type === 'list'">
  43                 <label translate="TOOLS.INTERVALS">Intervals</label>
  44                 <md-select ng-model="vm.interval.IntervalId">
  45                     <md-option ng-value="interval.id" ng-repeat="interval in vm.intervals.rows">{{ interval.name }}</md-option>
  46                 </md-select>
  47             </md-input-container>
  48
  49             <!-- TIMERANGE START -->
  50             <label ng-if="vm.type === 'custom'" translate="TOOLS.TIME_RANGE">Time Range</label>
  51             <div layout=row ng-if="vm.type === 'custom'">
  52                 <div class="md-block" flex>
  53                     <mdp-time-picker name="timeRangeFrom" mdp-placeholder="FROM" ng-model="vm.timeRangeFrom" mdp-format="HH:mm" mdp-auto-switch="true">
  54                         <div ng-messages="intervalForm.timeRangeFrom.$error" ng-show="intervalForm.timeRangeFrom.$touched" role="alert">
  55                             <div ng-message="format">
  56                                 <span translate="TOOLS.ERRORS.TIME_RANGE_FROM_INVALID">Time Range From field is invalid</span>
  57                             </div>
  58                         </div>
  59                     </mdp-time-picker>
  60                 </div>
  61                 <div class="md-block" flex>
  62                     <mdp-time-picker name="timeRangeTo" mdp-placeholder="TO" ng-model="vm.timeRangeTo" mdp-format="HH:mm" mdp-auto-switch="true">
  63                         <div ng-messages="intervalForm.timeRangeTo.$error" ng-show="intervalForm.timeRangeTo.$touched" role="alert">
  64                             <div ng-message="format">
  65                                 <span translate="TOOLS.ERRORS.TIME_RANGE_TO_INVALID">Time Range To field is invalid</span>
  66                             </div>
  67                         </div>
  68                     </mdp-time-picker>
  69                 </div>
  70             </div>
  71             <!-- TIMERANGE END -->
  72
  73             <!-- DAYSOFWEEK START -->
  74             <label ng-if="vm.type === 'custom'" translate="TOOLS.WEEK_DAYS">Time Range</label>
  75             <div layout=row ng-if="vm.type === 'custom'">
  76                 <md-input-container flex class="md-block">
  77                     <label translate="TOOLS.FROM">From</label>
  78                     <md-select ng-model="vm.dayOfWeekFrom">
  79                         <md-option ng-value="null"><span translate="TOOLS.ALWAYS">Always</span></md-option>
  80                         <md-option ng-value="day.value" ng-repeat="day in vm.daysOfWeek"><span translate="TOOLS.{{day.value | uppercase}}">{{ day.value | ucfirst }}</span></md-option>
  81                     </md-select>
  82                 </md-input-container>
  83
  84                 <md-input-container flex class="md-block" ng-if="vm.dayOfWeekFrom">
  85                     <label translate="TOOLS.TO">To</label>
  86                     <md-select ng-model="vm.dayOfWeekTo">
  87                         <md-option ng-value="day.value" ng-repeat="day in vm.daysOfWeek"><span translate="TOOLS.{{day.value | uppercase}}">{{ day.value | ucfirst }}</span></md-option>
  88                     </md-select>
  89                 </md-input-container>
  90             </div>
  91             <!-- DAYSOFWEEK END -->
  92
  93             <!-- MONTHDAY START -->
  94             <label ng-if="vm.type === 'custom'" translate="TOOLS.MONTH_DAYS">Time Range</label>
  95             <div layout=row ng-if="vm.type === 'custom'">
  96                 <md-input-container flex layout="column" class="md-block">
  97                     <label translate="TOOLS.FROM">From</label>
  98                     <md-select ng-model="vm.monthDayFrom">
  99                         <md-option ng-value="null"><span translate="TOOLS.ALWAYS">Always</span></md-option>
 100                         <md-option ng-value="month" ng-repeat="month in vm.daysOfMonth">{{ month }}</md-option>
 101                     </md-select>
 102                 </md-input-container>
 103
 104                 <md-input-container flex layout="column" class="md-block" ng-if="vm.monthDayFrom">
 105                     <label translate="TOOLS.TO">To</label>
 106                     <md-select ng-model="vm.monthDayTo">
 107                         <md-option ng-value="month" ng-repeat="month in vm.daysOfMonth">{{ month }}</md-option>
 108                     </md-select>
 109                 </md-input-container>
 110             </div>
 111             <!-- MONTHDAY END -->
 112
 113             <!-- MONTH START -->
 114             <label ng-if="vm.type === 'custom'" translate="TOOLS.MONTHS">Time Range</label>
 115             <div layout=row ng-if="vm.type === 'custom'">
 116                 <md-input-container flex layout="column" class="md-block">
 117                     <label translate="TOOLS.FROM">From</label>
 118                     <md-select ng-model="vm.monthFrom">
 119                         <md-option ng-value="null"><span translate="TOOLS.ALWAYS">Always</span></md-option>
 120                         <md-option ng-value="month.value" ng-repeat="month in vm.monthName"><span translate="TOOLS.{{month.value | uppercase}}">{{ month.value | ucfirst }}</span></md-option>
 121                     </md-select>
 122
 123                 </md-input-container>
 124
 125                 <md-input-container flex layout="column" class="md-block" ng-if="vm.monthFrom">
 126                     <label translate="TOOLS.TO">To</label>
 127                     <md-select ng-model="vm.monthTo">
 128                         <md-option ng-value="month.value" ng-repeat="month in vm.monthName"><span translate="TOOLS.{{month.value | uppercase}}">{{ month.value | ucfirst }}</span></md-option>
 129                     </md-select>
 130                 </md-input-container>
 131             </div>
 132             <!-- MONTH END -->
 133
 134             <div class="error-list">
 135                 <div ng-repeat="error in vm.errors" class="error" layout="row" layout-align="space-between center">
 136                     <div>
 137                         <span class="message">{{error.message}}</span>
 138                         <span class="type">({{error.type}})</span>
 139                     </div>
 140                     <md-button class="md-icon-button">
 141                         <md-icon md-font-icon="icon-alert-box" aria-label="alert error" class="s16"></md-icon>
 142                     </md-button>
 143                 </div>
 144             </div>
 145         </md-dialog-content>
 146
 147         <md-dialog-actions layout="row" layout-align="space-between center">
 148             <div layout="row" layout-align="start center">
 149                 <md-button type="submit" ng-if="!vm.newInterval" ng-click="vm.saveInterval()" class="send-button md-accent md-raised" ng-disabled="intervalForm.$invalid || intervalForm.$pristine" aria-label="SAVE" translate="TOOLS.SAVE" translate-attr-aria-label="TOOLS.SAVE">
 150                     SAVE
 151                 </md-button>
 152
 153                 <md-button type="submit" ng-if="vm.newInterval" ng-click="vm.addNewInterval()" class="send-button md-accent md-raised" ng-disabled="intervalForm.$invalid" aria-label="ADD" translate="TOOLS.ADD_INTERVAL" translate-attr-aria-label="TOOLS.ADD_INTERVAL">
 154                     ADD INTERVAL
 155                 </md-button>
 156             </div>
 157         </md-dialog-actions>
 158     </form>
 159 </md-dialog>