Motion >> Repos - motion-next.git/blob

   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
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title">{{ vm.title | translate }}</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18
  19     <md-dialog-content ms-scroll>
  20       <div class="error-list">
  21         <div
  22           ng-repeat="error in vm.errors"
  23           class="error"
  24           layout="row"
  25           layout-align="space-between center"
  26         >
  27           <div>
  28             <span class="message">{{error.message}}</span>
  29             <span class="type">({{error.type}})</span>
  30           </div>
  31           <md-button class="md-icon-button">
  32             <md-icon
  33               md-font-icon="icon-alert-box"
  34               aria-label="alert error"
  35               class="s16"
  36             ></md-icon>
  37           </md-button>
  38         </div>
  39       </div>
  40
  41       <md-input-container class="md-block">
  42         <label translate="TOOLS.TYPE">Type</label>
  43         <md-select
  44           ng-model="vm.type"
  45           ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
  46         >
  47           <md-option ng-value="type" ng-repeat="type in vm.types"
  48             >{{ type | ucfirst }}</md-option
  49           >
  50         </md-select>
  51       </md-input-container>
  52
  53       <md-input-container class="md-block" ng-if="vm.type === 'list'">
  54         <label translate="TOOLS.INTERVALS">Intervals</label>
  55         <md-select
  56           ng-model="vm.interval.IntervalId"
  57           ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
  58         >
  59           <md-option ng-value="interval.id" ng-repeat="interval in vm.intervals"
  60             >{{ interval.name }}</md-option
  61           >
  62         </md-select>
  63       </md-input-container>
  64
  65       <!-- TIMERANGE START -->
  66       <label ng-if="vm.type === 'custom'" translate="TOOLS.TIME_RANGE"
  67         >Time Range</label
  68       >
  69       <div layout="row" ng-if="vm.type === 'custom'">
  70         <div class="md-block" flex>
  71           <mdp-time-picker
  72             name="timeRangeFrom"
  73             mdp-placeholder="FROM"
  74             ng-model="vm.timeRangeFrom"
  75             mdp-format="HH:mm"
  76             mdp-auto-switch="true"
  77             mdp-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
  78           >
  79             <div
  80               ng-messages="intervalForm.timeRangeFrom.$error"
  81               ng-show="intervalForm.timeRangeFrom.$touched"
  82               role="alert"
  83             >
  84               <div ng-message="format">
  85                 <span translate="TOOLS.ERRORS.TIME_RANGE_FROM_INVALID"
  86                   >Time Range From field is invalid</span
  87                 >
  88               </div>
  89             </div>
  90           </mdp-time-picker>
  91         </div>
  92         <div class="md-block" flex ng-if="vm.timeRangeFrom">
  93           <mdp-time-picker
  94             name="timeRangeTo"
  95             mdp-placeholder="TO*"
  96             ng-model="vm.timeRangeTo"
  97             mdp-format="HH:mm"
  98             mdp-auto-switch="true"
  99             mdp-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 100             required
 101           >
 102             <div
 103               ng-messages="intervalForm.timeRangeTo.$error"
 104               ng-show="intervalForm.timeRangeTo.$invalid"
 105               role="alert"
 106             >
 107               <div ng-message="format">
 108                 <span translate="TOOLS.ERRORS.TIME_RANGE_TO_INVALID"
 109                   >Time Range To field is invalid</span
 110                 >
 111               </div>
 112               <div ng-message="required">
 113                 <span translate="TOOLS.ERRORS.TIME_RANGE_TO_REQUIRED"
 114                   >Time Range To field is required</span
 115                 >
 116               </div>
 117             </div>
 118           </mdp-time-picker>
 119         </div>
 120       </div>
 121       <!-- TIMERANGE END -->
 122
 123       <!-- DAYSOFWEEK START -->
 124       <label ng-if="vm.type === 'custom'" translate="TOOLS.WEEK_DAYS"
 125         >Week Days</label
 126       >
 127       <div layout="row" ng-if="vm.type === 'custom'">
 128         <md-input-container flex class="md-block">
 129           <label translate="TOOLS.FROM">From</label>
 130           <md-select
 131             ng-model="vm.dayOfWeekFrom"
 132             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 133           >
 134             <md-option ng-value="null"
 135               ><span translate="TOOLS.ALWAYS">Always</span></md-option
 136             >
 137             <md-option ng-value="day.value" ng-repeat="day in vm.daysOfWeek"
 138               ><span translate="TOOLS.{{day.value | uppercase}}"
 139                 >{{ day.value | ucfirst }}</span
 140               ></md-option
 141             >
 142           </md-select>
 143         </md-input-container>
 144
 145         <md-input-container flex class="md-block" ng-if="vm.dayOfWeekFrom">
 146           <label translate="TOOLS.TO">To</label>
 147           <md-select
 148             name="dayOfWeekTo"
 149             ng-model="vm.dayOfWeekTo"
 150             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 151           >
 152             <md-option ng-value="day.value" ng-repeat="day in vm.daysOfWeek"
 153               ><span translate="TOOLS.{{day.value | uppercase}}"
 154                 >{{ day.value | ucfirst }}</span
 155               ></md-option
 156             >
 157           </md-select>
 158           <div
 159             ng-messages="intervalForm.dayOfWeekTo.$error"
 160             ng-show="intervalForm.dayOfWeekTo.$touched"
 161             role="alert"
 162           ></div>
 163         </md-input-container>
 164       </div>
 165       <!-- DAYSOFWEEK END -->
 166
 167       <!-- MONTHDAY START -->
 168       <label ng-if="vm.type === 'custom'" translate="TOOLS.MONTH_DAYS"
 169         >Time Range</label
 170       >
 171       <div layout="row" ng-if="vm.type === 'custom'">
 172         <md-input-container flex layout="column" class="md-block">
 173           <label translate="TOOLS.FROM">From</label>
 174           <md-select
 175             ng-model="vm.monthDayFrom"
 176             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 177           >
 178             <md-option ng-value="null"
 179               ><span translate="TOOLS.ALWAYS">Always</span></md-option
 180             >
 181             <md-option ng-value="month" ng-repeat="month in vm.daysOfMonth"
 182               >{{ month }}</md-option
 183             >
 184           </md-select>
 185         </md-input-container>
 186
 187         <md-input-container
 188           flex
 189           layout="column"
 190           class="md-block"
 191           ng-if="vm.monthDayFrom"
 192         >
 193           <label translate="TOOLS.TO">To</label>
 194           <md-select
 195             name="monthDayTo"
 196             ng-model="vm.monthDayTo"
 197             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 198           >
 199             <md-option ng-value="month" ng-repeat="month in vm.daysOfMonth"
 200               >{{ month }}</md-option
 201             >
 202           </md-select>
 203           <div
 204             ng-messages="intervalForm.monthDayTo.$error"
 205             ng-show="intervalForm.monthDayTo.$touched"
 206             role="alert"
 207           ></div>
 208         </md-input-container>
 209       </div>
 210       <!-- MONTHDAY END -->
 211
 212       <!-- MONTH START -->
 213       <label ng-if="vm.type === 'custom'" translate="TOOLS.MONTHS"
 214         >Time Range</label
 215       >
 216       <div layout="row" ng-if="vm.type === 'custom'">
 217         <md-input-container flex layout="column" class="md-block">
 218           <label translate="TOOLS.FROM">From</label>
 219           <md-select
 220             ng-model="vm.monthFrom"
 221             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 222           >
 223             <md-option ng-value="null"
 224               ><span translate="TOOLS.ALWAYS">Always</span></md-option
 225             >
 226             <md-option ng-value="month.value" ng-repeat="month in vm.monthName"
 227               ><span translate="TOOLS.{{month.value | uppercase}}"
 228                 >{{ month.value | ucfirst }}</span
 229               ></md-option
 230             >
 231           </md-select>
 232         </md-input-container>
 233
 234         <md-input-container
 235           flex
 236           layout="column"
 237           class="md-block"
 238           ng-if="vm.monthFrom"
 239         >
 240           <label translate="TOOLS.TO">To</label>
 241           <md-select
 242             name="monthTo"
 243             ng-model="vm.monthTo"
 244             ng-disabled="!vm.newInterval && !vm.crudPermissions.canEdit"
 245           >
 246             <md-option ng-value="month.value" ng-repeat="month in vm.monthName"
 247               ><span translate="TOOLS.{{month.value | uppercase}}"
 248                 >{{ month.value | ucfirst }}</span
 249               ></md-option
 250             >
 251           </md-select>
 252           <div
 253             ng-messages="intervalForm.monthTo.$error"
 254             ng-show="intervalForm.monthTo.$touched"
 255             role="alert"
 256           ></div>
 257         </md-input-container>
 258       </div>
 259       <!-- MONTH END -->
 260
 261       <div class="error-list">
 262         <div
 263           ng-repeat="error in vm.errors"
 264           class="error"
 265           layout="row"
 266           layout-align="space-between center"
 267         >
 268           <div>
 269             <span class="message">{{error.message}}</span>
 270             <span class="type">({{error.type}})</span>
 271           </div>
 272           <md-button class="md-icon-button">
 273             <md-icon
 274               md-font-icon="icon-alert-box"
 275               aria-label="alert error"
 276               class="s16"
 277             ></md-icon>
 278           </md-button>
 279         </div>
 280       </div>
 281     </md-dialog-content>
 282
 283     <md-dialog-actions layout="row" layout-align="space-between center">
 284       <div layout="row" layout-align="start center">
 285         <md-button
 286           type="submit"
 287           ng-if="!vm.newInterval && vm.crudPermissions.canEdit"
 288           ng-click="vm.saveInterval()"
 289           class="send-button md-accent md-raised"
 290           ng-disabled="intervalForm.$invalid || intervalForm.$pristine"
 291           aria-label="SAVE"
 292           translate="TOOLS.SAVE"
 293           translate-attr-aria-label="TOOLS.SAVE"
 294         >
 295           SAVE
 296         </md-button>
 297
 298         <md-button
 299           type="submit"
 300           ng-if="vm.newInterval && vm.crudPermissions.canEdit"
 301           ng-click="vm.addNewInterval()"
 302           class="send-button md-accent md-raised"
 303           ng-disabled="intervalForm.$invalid"
 304           aria-label="ADD"
 305           translate="TOOLS.ADD_INTERVAL"
 306           translate-attr-aria-label="TOOLS.ADD_INTERVAL"
 307         >
 308           ADD INTERVAL
 309         </md-button>
 310       </div>
 311     </md-dialog-actions>
 312   </form>
 313 </md-dialog>