Built motion from commit (unavailable).|2.5.23
[motion2.git] / snippet / 3.0.0 / templates / offline / index.tpl.html / index.tpl.html
diff --git a/snippet/3.0.0/templates/offline/index.tpl.html/index.tpl.html b/snippet/3.0.0/templates/offline/index.tpl.html/index.tpl.html
new file mode 100644 (file)
index 0000000..6cc3bc0
--- /dev/null
@@ -0,0 +1,250 @@
+<!-- CHAT CONTENT -->
+<md-content class="chat-online">
+  <div id="toaster"></div>
+
+  <form
+    ng-if="vm.fields.length"
+    name="vm.userForm"
+    layout="column"
+    ng-style="{'font-size': '{{settings.fontSize}}px'}"
+    novalidate
+  >
+    <div ng-repeat="field in ::vm.fields | orderBy:'index'" layout="column">
+      <span>{{field.props.title + (field.config.required ? '*' : '')}}</span>
+
+      <span
+        ng-class="field.props.error? 'field-description error': 'field-description'"
+      >
+        <div
+          ng-if="vm.checkHTML[$index]"
+          ng-bind-html="field.props.helpText"
+        ></div>
+        <div
+          ng-if="!vm.checkHTML[$index]"
+          ng-bind-html="field.props.error || field.props.helpText | embed:{linkTarget:'_blank'}"
+        ></div>
+      </span>
+
+      <!-- CHAT ERROR -->
+      <div
+        class="chat-error"
+        ng-repeat="error in vm.errors"
+        layout="row"
+        layout-margin
+      >
+        <i class="mdi mdi-alert mdi-24px mdi-light"></i>
+        <md-tooltip md-direction="top"
+          >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
+        >
+        <span class="chat-error-message"
+          >{{error.message || 'Service temporarily unavailable.'}}</span
+        >
+      </div>
+      <!-- CHAT ERROR -->
+
+      <md-input-container
+        md-no-float
+        ng-switch="field.type"
+        style="margin: 0px; padding: 0px 0px 10px 0px"
+      >
+        <!-- START label -->
+        <div ng-switch-when="label">
+          <md-content
+            flex
+            layout-padding
+            layout="row"
+            layout-align="center center"
+          >
+            <span>{{field.value}}</span>
+          </md-content>
+        </div>
+        <!-- END label -->
+
+        <!-- START textinput -->
+        <div ng-switch-when="input">
+          <input
+            name="{{field.props.title}}"
+            ng-model="vm.form[field.props.title]"
+            placeholder="{{field.config.placeholder}}"
+            type="{{field.config.type}}"
+            ng-required="field.config.required"
+          />
+        </div>
+        <!-- END textinput -->
+
+        <!-- START textarea -->
+        <div ng-switch-when="textarea">
+          <textarea
+            name="{{field.props.title}}"
+            ng-model="vm.form[field.props.title]"
+            placeholder="{{field.config.placeholder}}"
+            md-maxlength="150"
+            rows="3"
+            ng-required="field.config.required"
+          ></textarea>
+        </div>
+        <!-- END textarea -->
+
+        <!-- START select -->
+        <div ng-switch-when="chooseFromList">
+          <md-select
+            name="{{field.props.title}}"
+            ng-model="vm.form[field.props.title]"
+            placeholder="{{field.config.placeholder}}"
+            ng-required="field.config.required"
+          >
+            <md-option
+              ng-repeat="option in ::field.options"
+              ng-value="option.value"
+              >{{option.value}}</md-option
+            >
+          </md-select>
+        </div>
+        <!-- END select -->
+
+        <!-- START radio -->
+        <div
+          ng-switch-when="multipleChoices"
+          layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+        >
+          <md-radio-group
+            name="{{field.props.title}}"
+            ng-model="vm.form[field.props.title]"
+            ng-required="field.config.required"
+            layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+          >
+            <md-radio-button
+              ng-repeat="option in ::field.options"
+              value="{{option.value}}"
+              class="md-primary"
+              >{{option.value}}</md-radio-button
+            >
+          </md-radio-group>
+        </div>
+        <!-- END radio -->
+
+        <!-- START checkbox -->
+        <div ng-switch-when="checkboxes">
+          <div
+            layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+          >
+            <md-checkbox
+              md-no-ink
+              aria-label="{{field.props.title}}"
+              ng-repeat="option in ::field.options"
+              ng-checked="vm.exists(field.props.title, option.value)"
+              ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
+              ng-click="vm.toggle(field.props.title, option.value)"
+              flex
+            >
+              {{option.value}}
+            </md-checkbox>
+          </div>
+        </div>
+        <!-- END checkbox -->
+
+        <!-- START agreement -->
+        <div ng-switch-when="agreement" layout="column">
+          <md-checkbox
+            md-no-ink
+            ng-model="vm.form[field.props.title]"
+            aria-label="{{field.props.title}}"
+            ng-required="field.config.required"
+          >
+            {{field.options[0].value}}
+          </md-checkbox>
+        </div>
+        <!-- END agreement -->
+
+        <!-- START upload -->
+        <div ng-switch-when="upload" layout="column">
+          <div layout="row" class="option-item upload-item">
+            <md-input-container class="md-block" style="margin: 0">
+              <input
+                type="file"
+                class="ng-hide"
+                aria-label="file"
+                ng-init="vm.setupFileInput(field)"
+              />
+              <md-input-container flex class="md-block">
+                <input
+                  type="text"
+                  ng-model="fileName"
+                  class="ng-hide"
+                  disabled
+                  aria-label="fileName"
+                />
+              </md-input-container>
+            </md-input-container>
+
+            <md-button
+              ng-init="vm.initUploadButton($index)"
+              class="md-raised md-accent upload-button"
+              ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
+              ><md-icon class="material-icons">attach_file</md-icon
+              ><span>{{field.config.uploadFileButtonLabel}}</span></md-button
+            >
+          </div>
+          <div>
+            <label></label>
+            <div
+              style="
+                display: grid;
+                grid-template-columns: 8em auto;
+                align-items: center;
+              "
+              layout="row"
+              ng-repeat="option in field.options"
+            >
+              <md-button
+                ng-click="vm.removeFileItem(field, $index)"
+                class="md-icon-button"
+              >
+                <md-icon class="material-icons">close</md-icon>
+              </md-button>
+              <span class="filename-label" ng-init="vm.makeFileOptionsVisible()"
+                >{{option.name}}</span
+              >
+            </div>
+          </div>
+        </div>
+        <!-- END upload -->
+
+        <div
+          ng-messages="vm.userForm[field.props.title].$error"
+          ng-show="vm.userForm[field.props.title].$touched"
+          role="alert"
+        >
+          <div ng-message="required">
+            <span>Required Field</span>
+          </div>
+          <div ng-message="email">
+            <span>Wrong type field</span>
+          </div>
+        </div>
+      </md-input-container>
+    </div>
+
+    <div class="offline-button-wrapper">
+      <md-button
+        id="offlineButton"
+        ng-if="(typeField !== 'label')"
+        title="{{settings.offline_chat_button}}"
+        ng-click="vm.submit()"
+        class="md-raised"
+        ng-disabled="vm.userForm.$invalid || loading"
+        ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
+      >
+        {{settings.offline_chat_button}}
+      </md-button>
+    </div>
+  </form>
+
+  <md-content layout="row" layout-align="center end" class="white-label">
+    <span
+      ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
+      ng-style="{'font-size': '{{settings.fontSize}}px'}"
+    ></span>
+  </md-content>
+</md-content>
+<!-- / CHAT CONTENT -->