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

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