snippet/3.0.0/templates/offline/index.tpl.html/index.tpl.html

   1 <!-- CHAT CONTENT -->
   2 <md-content class="chat-online">
   3   <div id="toaster"></div>
   4
   5   <form
   6     ng-if="vm.fields.length"
   7     name="vm.userForm"
   8     layout="column"
   9     ng-style="{'font-size': '{{settings.fontSize}}px'}"
  10     novalidate
  11   >
  12     <div ng-repeat="field in vm.fields | orderBy:'index'" layout="column">
  13       <span>{{field.props.title + (field.config.required ? '*' : '')}}</span>
  14
  15       <span
  16         ng-class="field.props.error? 'field-description error': 'field-description'"
  17       >
  18         <div
  19           ng-if="vm.checkHTML[$index]"
  20           ng-bind-html="field.props.helpText"
  21         ></div>
  22         <div
  23           ng-if="!vm.checkHTML[$index]"
  24           ng-bind-html="field.props.error || field.props.helpText | embed:{linkTarget:'_blank'}"
  25         ></div>
  26       </span>
  27
  28       <!-- CHAT ERROR -->
  29       <div
  30         class="chat-error"
  31         ng-repeat="error in vm.errors"
  32         layout="row"
  33         layout-margin
  34       >
  35         <i class="mdi mdi-alert mdi-24px mdi-light"></i>
  36         <md-tooltip md-direction="top"
  37           >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
  38         >
  39         <span class="chat-error-message"
  40           >{{error.message || 'Service temporarily unavailable.'}}</span
  41         >
  42       </div>
  43       <!-- CHAT ERROR -->
  44
  45       <md-input-container
  46         md-no-float
  47         ng-switch="field.type"
  48         style="margin: 0px; padding: 0px 0px 10px 0px"
  49       >
  50         <!-- START label -->
  51         <div ng-switch-when="label">
  52           <md-content
  53             flex
  54             layout-padding
  55             layout="row"
  56             layout-align="center center"
  57           >
  58             <span>{{field.value}}</span>
  59           </md-content>
  60         </div>
  61         <!-- END label -->
  62
  63         <!-- START textinput -->
  64         <div ng-switch-when="input">
  65           <input
  66             name="{{field.props.title}}"
  67             ng-model="vm.form[field.props.title]"
  68             placeholder="{{field.config.placeholder}}"
  69             type="{{field.config.type}}"
  70             ng-required="field.config.required"
  71           />
  72         </div>
  73         <!-- END textinput -->
  74
  75         <!-- START textarea -->
  76         <div ng-switch-when="textarea">
  77           <textarea
  78             name="{{field.props.title}}"
  79             ng-model="vm.form[field.props.title]"
  80             placeholder="{{field.config.placeholder}}"
  81             md-maxlength="150"
  82             rows="3"
  83             ng-required="field.config.required"
  84           ></textarea>
  85         </div>
  86         <!-- END textarea -->
  87
  88         <!-- START select -->
  89         <div ng-switch-when="chooseFromList">
  90           <md-select
  91             name="{{field.props.title}}"
  92             ng-model="vm.form[field.props.title]"
  93             placeholder="{{field.config.placeholder}}"
  94             ng-required="field.config.required"
  95           >
  96             <md-option
  97               ng-repeat="option in field.options"
  98               ng-value="option.value"
  99               >{{option.value}}</md-option
 100             >
 101           </md-select>
 102         </div>
 103         <!-- END select -->
 104
 105         <!-- START radio -->
 106         <div
 107           ng-switch-when="multipleChoices"
 108           layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
 109         >
 110           <md-radio-group
 111             name="{{field.props.title}}"
 112             ng-model="vm.form[field.props.title]"
 113             ng-required="field.config.required"
 114             layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
 115           >
 116             <md-radio-button
 117               ng-repeat="option in field.options"
 118               value="{{option.value}}"
 119               class="md-primary"
 120               >{{option.value}}</md-radio-button
 121             >
 122           </md-radio-group>
 123         </div>
 124         <!-- END radio -->
 125
 126         <!-- START checkbox -->
 127         <div ng-switch-when="checkboxes">
 128           <div
 129             layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
 130           >
 131             <md-checkbox
 132               md-no-ink
 133               aria-label="{{field.props.title}}"
 134               ng-repeat="option in field.options"
 135               ng-checked="vm.exists(field.props.title, option.value)"
 136               ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
 137               ng-click="vm.toggle(field.props.title, option.value)"
 138               flex
 139             >
 140               {{option.value}}
 141             </md-checkbox>
 142           </div>
 143         </div>
 144         <!-- END checkbox -->
 145
 146         <!-- START agreement -->
 147         <div ng-switch-when="agreement" layout="column">
 148           <md-checkbox
 149             md-no-ink
 150             ng-model="vm.form[field.props.title]"
 151             aria-label="{{field.props.title}}"
 152             ng-required="field.config.required"
 153           >
 154             {{field.options[0].value}}
 155           </md-checkbox>
 156         </div>
 157         <!-- END agreement -->
 158
 159         <!-- START upload -->
 160         <div ng-switch-when="upload" layout="column">
 161           <div layout="row" class="option-item upload-item">
 162             <md-input-container class="md-block" style="margin: 0">
 163               <input
 164                 type="file"
 165                 class="ng-hide"
 166                 aria-label="file"
 167                 ng-init="vm.setupFileInput(field)"
 168               />
 169               <md-input-container flex class="md-block">
 170                 <input
 171                   type="text"
 172                   ng-model="fileName"
 173                   class="ng-hide"
 174                   disabled
 175                   aria-label="fileName"
 176                 />
 177               </md-input-container>
 178             </md-input-container>
 179
 180             <md-button
 181               ng-init="vm.initUploadButton($index)"
 182               class="md-raised md-accent upload-button"
 183               ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
 184               ><md-icon class="material-icons">attach_file</md-icon
 185               ><span>{{field.config.uploadFileButtonLabel}}</span></md-button
 186             >
 187           </div>
 188           <div>
 189             <label></label>
 190             <div
 191               style="
 192                 display: grid;
 193                 grid-template-columns: 8em auto;
 194                 align-items: center;
 195               "
 196               layout="row"
 197               ng-repeat="option in field.options"
 198             >
 199               <md-button
 200                 ng-click="vm.removeFileItem(field, $index)"
 201                 class="md-icon-button"
 202               >
 203                 <md-icon class="material-icons">close</md-icon>
 204               </md-button>
 205               <span class="filename-label" ng-init="vm.makeFileOptionsVisible()"
 206                 >{{option.name}}</span
 207               >
 208             </div>
 209           </div>
 210         </div>
 211         <!-- END upload -->
 212
 213         <div
 214           ng-messages="vm.userForm[field.props.title].$error"
 215           ng-show="vm.userForm[field.props.title].$touched"
 216           role="alert"
 217         >
 218           <div ng-message="required">
 219             <span>Required Field</span>
 220           </div>
 221           <div ng-message="email">
 222             <span>Wrong type field</span>
 223           </div>
 224         </div>
 225       </md-input-container>
 226     </div>
 227
 228     <div class="offline-button-wrapper">
 229       <md-button
 230         id="offlineButton"
 231         ng-if="(typeField !== 'label')"
 232         title="{{settings.offline_chat_button}}"
 233         ng-click="vm.submit()"
 234         class="md-raised"
 235         ng-disabled="vm.userForm.$invalid || loading"
 236         ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
 237       >
 238         {{settings.offline_chat_button}}
 239       </md-button>
 240     </div>
 241   </form>
 242
 243   <md-content layout="row" layout-align="center end" class="white-label">
 244     <span
 245       ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
 246       ng-style="{'font-size': '{{settings.fontSize}}px'}"
 247     ></span>
 248   </md-content>
 249 </md-content>
 250 <!-- / CHAT CONTENT -->