451 lines
23 KiB
HTML
451 lines
23 KiB
HTML
<form class="row container" name="editForm" auto-save-form auto-save-watch="myform" auto-save-callback="update">
|
|
|
|
<!-- Add Fields Element -->
|
|
<div class="col-xs-2 col-sm-4 col-md-4 add-field">
|
|
|
|
<div class="row add-field-title">
|
|
<h3 class="col-md-12 hidden-sm hidden-xs">{{ 'ADD_FIELD_LG' | translate }}</h3>
|
|
<h4 class="col-sm-12 hidden-xs hidden-md hidden-lg">{{ 'ADD_FIELD_MD' | translate }}</h4>
|
|
<h5 class="col-xs-12 hidden-sm hidden-md hidden-lg">{{ 'ADD_FIELD_SM' | translate }}</h5>
|
|
</div>
|
|
<div class="panel-group row" class="draggable" ng-model="addField.types">
|
|
|
|
<div class="col-xs-12 col-sm-12 col-md-6" ng-repeat="type in addField.types" style="padding-top:7.5px;">
|
|
<div class="panel panel-default" style="background-color:#f5f5f5;">
|
|
<div class="panel-heading" ng-click="addNewField(true, type.name)" style="cursor: pointer; font-size:12px; padding-left: 10px; padding-right: 10px;">
|
|
<span>
|
|
<field-icon-directive type-name="{{type.name}}">
|
|
</field-icon-directive>
|
|
</span>
|
|
|
|
<span class="hidden-xs" style="padding-left:0.3em;">{{type.value}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Fields Element -->
|
|
<div class="col-xs-10 col-sm-8 current-fields container">
|
|
<!-- Welcome Screen -->
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-default startPage">
|
|
<div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseStart">
|
|
<h4 class="text-center">
|
|
{{ 'WELCOME_SCREEN' | translate }}
|
|
<span class="pull-right">
|
|
<i class="fa fa-chevron-right" ng-hide="startPage.isOpen">
|
|
</i>
|
|
<i class="fa fa-chevron-down" ng-show="startPage.isOpen">
|
|
</i>
|
|
</span>
|
|
</h4>
|
|
</div>
|
|
|
|
<div id="collapseStart" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
|
|
<div class="row hidden-sm hidden-xs">
|
|
<div class="col-md-12">
|
|
<h4>{{ 'PREVIEW_START_PAGE' | translate }}</h4>
|
|
</div>
|
|
<ul class="col-md-12 container" style="list-style:none; border:2px lightgray solid; padding-bottom: 2em;">
|
|
|
|
<div class="field row">
|
|
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
|
|
<h1>{{myform.startPage.introTitle}}</h1>
|
|
</div>
|
|
<div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
|
|
<p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
|
|
<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
|
|
<button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
|
|
<a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" >
|
|
{{button.text}}
|
|
</a>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<div class="row form-actions">
|
|
<button class="btn btn-info btn btn-info col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3" type="button">
|
|
<span style="color:white; font-size: 1.6em; text-decoration: none;">
|
|
{{myform.startPage.introButtonText}}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h4>{{ 'EDIT_START_PAGE' | translate }}</h4>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row question">
|
|
<div class="col-md-4 col-sm-12">{{ 'INTRO_TITLE' | translate }}:</div>
|
|
<div class="col-md-8 col-sm-12">
|
|
<input type="text"
|
|
ng-model="myform.startPage.introTitle"
|
|
name="introTitleStartPage"
|
|
value="{{myform.startPage.introTitle}}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row question">
|
|
<div class="col-md-4 col-sm-12">{{ 'INTRO_PARAGRAPH' | translate }}:</div>
|
|
<div class="col-md-8 col-sm-12">
|
|
<textarea type="text"
|
|
ng-model="myform.startPage.introParagraph"
|
|
name="introParagraphStartPage"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row question">
|
|
<div class="col-md-4 col-sm-12">{{ 'INTRO_BTN' | translate }}:</div>
|
|
<div class="col-md-8 col-sm-12">
|
|
<input type="text"
|
|
ng-model="myform.startPage.introButtonText"
|
|
name="introButtonText"
|
|
value="{{myform.startPage.introButtonText}}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row"><br><br></div>
|
|
|
|
<div class="row options buttons">
|
|
<div class="col-md-3 col-xs-12">Buttons:</div>
|
|
<div class="col-md-9 col-xs-12">
|
|
<div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
|
|
|
|
<div class="col-xs-5">
|
|
<span>{{ 'BUTTON_TEXT' | translate }}</span>
|
|
<input type="text"
|
|
name="{{button.text}}_buttonText_startPage"
|
|
ng-model="button.text"
|
|
value="{{button.text}}"
|
|
placeholder="Button Text">
|
|
</div>
|
|
|
|
|
|
<div class="col-xs-5">
|
|
<span>{{ 'BUTTON_LINK' | translate }}</span>
|
|
<input type="text"
|
|
name="{{button.url}}_url_startPage"
|
|
ng-model="button.url"
|
|
value="{{button.url}}"
|
|
placeholder="http://aeouaou.com/aoeuoa">
|
|
</div>
|
|
|
|
<div class="col-xs-2">
|
|
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
|
|
<i class="fa fa-trash-o"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row"><br></div>
|
|
<div class="row">
|
|
<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
|
|
<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12"><hr></div>
|
|
</div>
|
|
|
|
<!-- Form Fields -->
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-10 dropzoneContainer">
|
|
|
|
<accordion close-others="accordion.oneAtATime"
|
|
ui-sortable="sortableOptions"
|
|
ng-model="myform.form_fields"
|
|
class="dropzone">
|
|
|
|
<accordion-group ng-repeat="field in myform.form_fields track by field._id"
|
|
is-open="accordion[$index].isOpen"
|
|
on-finish-render="editFormFields"
|
|
ng-if="!field.deletePreserved">
|
|
<accordion-heading>
|
|
|
|
<div class="handle">
|
|
|
|
<span class="col-xs-1" ng-switch="field.fieldType">
|
|
<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
|
|
</span>
|
|
<span class="col-xs-10">
|
|
{{field.title}}
|
|
<span ng-show="field.required">*</span>
|
|
</span>
|
|
<span class="pull-right">
|
|
<i class="fa fa-chevron-right" ng-hide="accordion[$index].isOpen">
|
|
</i>
|
|
<i class="fa fa-chevron-down" ng-show="accordion[$index].isOpen">
|
|
</i>
|
|
</span>
|
|
</div>
|
|
</accordion-heading>
|
|
<div class="accordion-edit container">
|
|
|
|
<div class="row hidden-sm hidden-xs">
|
|
<div class="col-md-12">
|
|
<h4>{{ 'PREVIEW_FIELD' | translate }}</h4>
|
|
</div>
|
|
<ul class="col-md-12 container" style="list-style:none;border:2px lightgray solid;">
|
|
<field-directive field="field" validate="false">
|
|
</field-directive>
|
|
</ul>
|
|
<hr>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<h4>{{ 'EDIT_FIELD' | translate }}</h4>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row question">
|
|
<div class="col-md-4 col-sm-12">{{ 'QUESTION_TITLE' | translate }}:</div>
|
|
<div class="col-md-8 col-sm-12">
|
|
<input type="text" ng-model="field.title" name="title{{field._id}}" value="{{field.title}}" required></div>
|
|
</div>
|
|
|
|
<div class="row"><br></div>
|
|
|
|
<div class="row description" ng-hide="showRatingOptions(field)">
|
|
<div class="col-md-4 col-sm-12">{{ 'QUESTION_DESCRIPTION' | translate }}:</div>
|
|
<div class="col-md-8 col-sm-12"><textarea type="text" ng-model="field.description" name="description{{field._id}}"value="{{field.description}}"></textarea> </div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="showAddOptions(field)"><br></div>
|
|
<div class="row options" ng-if="showAddOptions(field)">
|
|
<div class="col-md-4 col-xs-12">{{ 'OPTIONS' | translate }}:</div>
|
|
<div class="col-md-8 col-xs-12">
|
|
<div ng-repeat="option in field.fieldOptions track by option.option_id" class="row">
|
|
<input type="text" name="{{option.option_value}}{{field._id}}" ng-model="option.option_value" class="col-xs-5">
|
|
|
|
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption($index, option)" class="col-xs-3">
|
|
<i class="fa fa-trash-o"></i>
|
|
</a>
|
|
</div>
|
|
<div class="row">
|
|
<button class="btn btn-primary btn-small col-md-offset-0 col-md-6 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-6" type="button" ng-click="addOption($index)">
|
|
<i class="icon-plus icon-white"></i> {{ 'ADD_OPTION' | translate }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="showRatingOptions(field)"><br></div>
|
|
<div class="row" ng-if="showRatingOptions(field)">
|
|
<div class="col-md-9 col-sm-9">{{ 'NUM_OF_STEPS' | translate }}</div>
|
|
<div class="col-md-3 col-sm-3">
|
|
<input style="width:100%" type="number"
|
|
min="1" max="10"
|
|
ng-model="field.ratingOptions.steps"
|
|
name="ratingOptions_steps{{field._id}}"
|
|
ng-value="{{field.ratingOptions.steps}}"
|
|
required>
|
|
</div>
|
|
<br>
|
|
<div class="col-md-5 col-sm-9">Shape:</div>
|
|
<div class="col-md-7 col-sm-3">
|
|
<select style="width:100%" ng-model="field.ratingOptions.shape"
|
|
value="{{field.ratingOptions.steps}}"
|
|
name="ratingOptions_shape{{field._id}}" required>
|
|
<option ng-repeat="shapeType in field.ratingOptions.validShapes"
|
|
value="{{shapeType}}">
|
|
{{select2FA[shapeType]}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row"><br></div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 col-xs-12 field-title">Required:</div>
|
|
<div class="col-md-8 col-xs-12 field-input">
|
|
<label class="btn col-xs-5">
|
|
<input type="radio" ng-value="true" ng-model="field.required" name="required{{field._id}}"/>
|
|
<span> {{ 'YES' | translate }}</span>
|
|
</label>
|
|
|
|
<label class="btn col-xs-5 col-xs-offset-1">
|
|
<input type="radio" ng-value="false" ng-model="field.required" name="required{{field._id}}"/>
|
|
<span> {{ 'NO' | translate }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 col-xs-12 field-input">{{ 'DISABLED' | translate }}</div>
|
|
<div class="col-md-8 col-xs-12 field-input">
|
|
<label class="btn col-xs-5">
|
|
<input type="radio" ng-value="true"
|
|
ng-model="field.disabled" name="disabled{{field._id}}"/>
|
|
<span> {{ 'YES' | translate }}</span>
|
|
</label>
|
|
|
|
<label class="btn col-xs-5 col-xs-offset-1">
|
|
<input type="radio" ng-value="false"
|
|
ng-model="field.disabled" name="disabled{{field._id}}"/>
|
|
<span> {{ 'NO' | translate }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-if="myform.form_fields.length > 1">
|
|
<h4> Logic Jump </h4>
|
|
</div>
|
|
<div class="row" ng-if="myform.form_fields.length > 1">
|
|
<div class="col-md-4 col-xs-12 field-input">{{ 'ADD_LOGIC_JUMP' | translate }}</div>
|
|
<div class="col-md-8 col-xs-12 field-input">
|
|
<label class="btn col-xs-5">
|
|
<input type="radio" ng-checked="!!myform.form_fields[$index].logicJump.fieldA"
|
|
name="logicJumpYes{{field._id}}" ng-click="addNewLogicJump($index)"/>
|
|
<span> {{ 'YES' | translate }}</span>
|
|
</label>
|
|
|
|
<label class="btn col-xs-5 col-xs-offset-1">
|
|
<input type="radio" ng-checked="!myform.form_fields[$index].logicJump.fieldA"
|
|
name="logicJumpNo{{field._id}}" ng-click="removeLogicJump($index)"/>
|
|
<span> {{ 'NO' | translate }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row question" ng-if="myform.form_fields.length > 1 && myform.form_fields[$index].logicJump.fieldA">
|
|
<div class="col-md-4 col-sm-12">
|
|
<!-- FIX ME: translate this -->
|
|
<b> If this field </b>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12">
|
|
<select style="width:100%" ng-model="field.logicJump.expressionString"
|
|
value="{{field.logicJump.expressionString}}"
|
|
name="logicjump_expressionString{{field._id}}">
|
|
<option value="field == static">
|
|
<!-- FIX ME: translate this -->
|
|
is equal to
|
|
</option>
|
|
<option value="field != static">
|
|
<!-- FIX ME: translate this -->
|
|
is not equal to
|
|
</option>
|
|
|
|
<option value="field > static" ng-if-start="field.fieldType === 'number' || field.fieldType === 'rating' || field.fieldType === 'number'">
|
|
<!-- FIX ME: translate this -->
|
|
is greater than
|
|
</option>
|
|
<option value="field >= static">
|
|
<!-- FIX ME: translate this -->
|
|
is greater or equal than
|
|
</option>
|
|
<option value="field < static">
|
|
<!-- FIX ME: translate this -->
|
|
is smaller than
|
|
</option>
|
|
<option value="field <= static" ng-if-end>
|
|
<!-- FIX ME: translate this -->
|
|
is smaller or equal than
|
|
</option>
|
|
|
|
<option value="field contains static" ng-if-start="field.fieldType !== 'number' && field.fieldType !== 'rating' && field.fieldType !== 'number'">
|
|
<!-- FIX ME: translate this -->
|
|
contains
|
|
</option>
|
|
<option value="field !contains static">
|
|
<!-- FIX ME: translate this -->
|
|
does not contain
|
|
</option>
|
|
<option value="field ends static">
|
|
<!-- FIX ME: translate this -->
|
|
ends with
|
|
</option>
|
|
<option value="field !ends static">
|
|
<!-- FIX ME: translate this -->
|
|
does not end with
|
|
</option>
|
|
<option value="field starts static">
|
|
<!-- FIX ME: translate this -->
|
|
starts with
|
|
</option>
|
|
<option value="field !starts static" ng-if-end>
|
|
<!-- FIX ME: translate this -->
|
|
does not start with
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12">
|
|
<input type="text" ng-model="field.logicJump.valueB"/>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<!-- FIX ME: translate this -->
|
|
<b>Jumps to </b>
|
|
</div>
|
|
<div class="col-md-10">
|
|
<select style="width:100%" ng-model="field.logicJump.jumpTo"
|
|
value="{{field.logicJump.jumpTo}}"
|
|
name="logicjump_jumpTo{{field._id}}">
|
|
<option ng-repeat="jump_field in myform.form_fields"
|
|
value="{{jump_field._id}}">
|
|
{{jump_field.title}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</accordion-group>
|
|
|
|
<div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title text-center" style="color: #a9a9a9;">
|
|
{{ 'CLICK_FIELDS_FOOTER' | translate }}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
</accordion>
|
|
</div>
|
|
<div class="col-md-1 hidden-xs hidden-sm" style="padding:0 5px;" >
|
|
<div class="panel-group tool-panel text-center">
|
|
<div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved">
|
|
<div class="panel-heading" style="padding: 10px 10px; height: 37px;" ng-click="deleteField($index)">
|
|
<span class="text-center">
|
|
<a href="" class="fa fa-trash-o"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1 hidden-xs hidden-sm" style="padding:0 5px;">
|
|
<div class="panel-group tool-panel text-center">
|
|
<div class="panel panel-default" ng-repeat="field in myform.form_fields track by field._id" ng-if="!field.deletePreserved">
|
|
<div class="panel-heading" style="padding: 10px 10px; height: 37px;" ng-click="duplicateField($index)">
|
|
<span class="text-center">
|
|
<a href="" class="fa fa-files-o"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|