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

   1 <!-- CHAT CONTENT -->
   2 <md-content class="chat-online">
   3   <form
   4     ng-if="vm.fields.length"
   5     name="vm.userForm"
   6     layout="column"
   7     ng-style="{'font-size': '{{settings.fontSize}}px'}"
   8     novalidate
   9   >
  10     <div class="form-input-container">
  11       <div
  12         ng-repeat="field in vm.fields | orderBy:'index'"
  13         layout="column"
  14         class="form-field"
  15       >
  16         <span>{{field.props.title + (field.config.required ? '*' : '')}}</span>
  17
  18         <span
  19           ng-class="field.props.error? 'field-description error': 'field-description'"
  20         >
  21           <div
  22             ng-if="vm.checkHTML[$index]"
  23             ng-bind-html="field.props.helpText"
  24           ></div>
  25           <div
  26             ng-if="!vm.checkHTML[$index]"
  27             ng-bind-html="field.props.error || field.props.helpText | embed:{linkTarget:'_blank'}"
  28           ></div>
  29         </span>
  30
  31         <!-- CHAT ERROR -->
  32         <div
  33           class="chat-error"
  34           ng-repeat="error in vm.errors"
  35           layout="row"
  36           layout-margin
  37         >
  38           <i class="mdi mdi-alert mdi-24px mdi-light"></i>
  39           <md-tooltip md-direction="top"
  40             >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
  41           >
  42           <span class="chat-error-message"
  43             >{{error.message || 'Service temporarily unavailable.'}}</span
  44           >
  45         </div>
  46         <!-- CHAT ERROR -->
  47
  48         <md-input-container md-no-float ng-switch="field.type">
  49           <!-- START label -->
  50           <div ng-switch-when="label">
  51             <md-content
  52               flex
  53               layout-padding
  54               layout="row"
  55               layout-align="center center"
  56             >
  57               <span>{{field.value}}</span>
  58             </md-content>
  59           </div>
  60           <!-- END label -->
  61
  62           <!-- START textinput -->
  63           <div ng-switch-when="input">
  64             <input
  65               name="{{field.props.title}}"
  66               ng-model="vm.form[field.props.title]"
  67               placeholder="{{field.config.placeholder}}"
  68               type="{{field.config.type}}"
  69               ng-required="field.config.required"
  70             />
  71           </div>
  72           <!-- END textinput -->
  73
  74           <!-- START textarea -->
  75           <div ng-switch-when="textarea">
  76             <textarea
  77               name="{{field.props.title}}"
  78               ng-model="vm.form[field.props.title]"
  79               placeholder="{{field.config.placeholder}}"
  80               md-maxlength="150"
  81               rows="3"
  82               ng-required="field.config.required"
  83             ></textarea>
  84           </div>
  85           <!-- END textarea -->
  86
  87           <!-- START select -->
  88           <div ng-switch-when="chooseFromList">
  89             <md-select
  90               name="{{field.props.title}}"
  91               ng-model="vm.form[field.props.title]"
  92               placeholder="{{field.config.placeholder}}"
  93               ng-required="field.config.required"
  94             >
  95               <md-option
  96                 ng-repeat="option in field.options"
  97                 ng-value="option.value"
  98                 >{{option.value}}</md-option
  99               >
 100             </md-select>
 101           </div>
 102           <!-- END select -->
 103
 104           <!-- START radio -->
 105           <div
 106             ng-switch-when="multipleChoices"
 107             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 108           >
 109             <md-radio-group
 110               name="{{field.props.title}}"
 111               ng-model="vm.form[field.props.title]"
 112               ng-required="field.config.required"
 113               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 114             >
 115               <md-radio-button
 116                 ng-repeat="option in field.options"
 117                 ng-value="option.value"
 118                 class="md-primary"
 119                 >{{option.value}}</md-radio-button
 120               >
 121             </md-radio-group>
 122           </div>
 123           <!-- END radio -->
 124
 125           <!-- START checkbox -->
 126           <div ng-switch-when="checkboxes">
 127             <div
 128               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 129             >
 130               <md-checkbox
 131                 md-no-ink
 132                 aria-label="{{field.props.title}}"
 133                 ng-repeat="option in field.options"
 134                 ng-checked="vm.exists(field.props.title, option.value)"
 135                 ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
 136                 ng-click="vm.toggle(field.props.title, option.value)"
 137                 flex
 138               >
 139                 {{option.value}}
 140               </md-checkbox>
 141             </div>
 142           </div>
 143           <!-- END checkbox -->
 144
 145           <!-- START agreement -->
 146           <div
 147             ng-switch-when="agreement"
 148             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 149           >
 150             <md-checkbox
 151               md-no-ink
 152               ng-model="vm.form[field.props.title]"
 153               aria-label="{{field.props.title}}"
 154               ng-required="field.config.required"
 155             >
 156               {{field.options[0].value}}
 157             </md-checkbox>
 158           </div>
 159           <!-- END agreement -->
 160
 161           <div
 162             ng-messages="vm.userForm[field.props.title].$error"
 163             ng-show="vm.userForm[field.props.title].$touched"
 164             role="alert"
 165           >
 166             <div ng-message="required">
 167               <span>Required Field</span>
 168             </div>
 169             <div ng-message="email">
 170               <span>Wrong type field</span>
 171             </div>
 172           </div>
 173         </md-input-container>
 174       </div>
 175     </div>
 176     <div class="online-button-wrapper">
 177       <md-button
 178         id="onlineButton"
 179         title="{{settings.start_chat_button}}"
 180         class="md-raised"
 181         ng-click="vm.submit()"
 182         ng-disabled="vm.userForm.$invalid  || vm.disableItem"
 183         ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
 184       >
 185         {{settings.start_chat_button}}
 186       </md-button>
 187     </div>
 188   </form>
 189
 190   <md-content layout="row" layout-align="center end" class="white-label">
 191     <span
 192       ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
 193       ng-style="{'font-size': '{{settings.fontSize}}px'}"
 194     ></span>
 195   </md-content>
 196 </md-content>
 197 <!-- / CHAT CONTENT -->