Licitator/httpdocs/templates/builder/builder.html.twig

{% extends 'standard_layout.html.twig' %}

{% block content %}
    <div class="content">
        <select name="formTemplates" id="formTemplates" class="form-control">
  <option value="user">User Form</option>
  <option value="terms">Terms Agreement Form</option>
  <option value="issue">Submit Issue Form</option>
</select>
        <h1 id="formName" {% if formEntity.name is not defined or formEntity.name is empty %}class="d-none"{% endif %}>
            <span class="text-muted fa fa-edit" title="{{ 'Form Name'|trans({}) }}">{{ formEntity.name }}</span>
            <span class="name"></span>
        </h1>
        <form action="{{ path('admin_app_taskbuilder_edit', {'id':formEntity.id}) }}" id="wizard" method="post" data-parsley-validate>

        <div id="formNameEdit" class="form-group {% if formEntity.name is defined and formEntity.name is not empty %}d-none{% endif %}">
            <div class="input-group">
                <div class="input-group-addon input-group-prepend">
                    <span class="input-group-text text-success fa fa-check" title="Namen anzeigen"></span>
                </div>
                <input type="text" class="form-control" name="formName" value="{% if formEntity.name is defined and formEntity.name is not empty %}{{ formEntity.name }}{% endif %}" placeholder="Formularname">
            </div>
        </div>
        <input type="hidden" name="json" id="jsondata" value="{% if formEntity.json is defined and formEntity.json is not empty %}{{ formEntity.json }}{% endif %}">
        <div id="stage1" class="build-wrap"></div>
        </form>
        <div class="sonata-ba-form-actions well well-small form-actions stuck">      
            <button type="submit" class="btn btn-success" name="btn_update_and_edit"><i class="fa fa-save" aria-hidden="true"></i> Update</button>
            <button type="submit" class="btn btn-success" name="btn_update_and_list"><i class="fa fa-save"></i> <i class="fa fa-list" aria-hidden="true"></i> Update and close</button>                        
            or
             <a class="btn btn-danger" href="{{ path('admin_app_taskbuilder_delete', {'id':formEntity.id}) }}"><i class="fa fa-minus-circle" aria-hidden="true"></i> Delete</a>
            </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('js/formbuilder/form-builder.min.js') }}"></script>
    
    <script>
        const templates = {
    user: [
      {
        type: "text",
        label: "Name:",
        subtype: "text",
        className: "form-control",
        name: "text-1475765723950"
      },
      {
        type: "text",
        subtype: "email",
        label: "Email:",
        className: "form-control",
        name: "text-1475765724095"
      },
      {
        type: "text",
        subtype: "tel",
        label: "Phone:",
        className: "form-control",
        name: "text-1475765724231"
      },
      {
        type: "textarea",
        label: "Short Bio:",
        className: "form-control",
        name: "textarea-1475765724583"
      }
    ],
    terms: [
      {
        type: "header",
        subtype: "h2",
        label: "Terms &amp; Conditions",
        className: "header"
      },
      {
        type: "paragraph",
        subtype: "p",
        label:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in libero quis nibh molestie dapibus. Integer pellentesque massa orci, quis posuere velit fermentum nec. Nullam arcu velit, ornare at urna non, viverra finibus lectus. Curabitur a dui non ipsum maximus faucibus. Quisque a justo purus. Donec volutpat sem vel bibendum pretium. Nulla neque ex, posuere semper urna in, molestie molestie tortor. Maecenas nec arcu sit amet nisl laoreet vestibulum. Cras placerat vulputate maximus. Phasellus ultricies, turpis et efficitur tristique, massa nibh sagittis libero, quis fringilla velit nisl eget augue. Praesent metus nibh, fermentum ut interdum at, lacinia sit amet mauris.",
        className: "paragraph"
      },
      {
        type: "checkbox",
        label: "I agree to the terms",
        className: "checkbox",
        name: "checkbox-1475766391803"
      }
    ],
    issue: [
      {
        type: "text",
        label: "Issue:",
        subtype: "text",
        className: "form-control",
        name: "text-1475766502491"
      },
      {
        type: "text",
        label: "Platform:",
        subtype: "text",
        className: "form-control",
        name: "text-1475766502680"
      },
      {
        type: "textarea",
        label: "Steps to Reproduce:",
        className: "form-control",
        name: "textarea-1475766579522"
      },
      {
        type: "file",
        label: "Screenshot:",
        className: "form-control",
        name: "file-1475766594420"
      },
      {
        type: "select",
        label: "Assign Developer:",
        className: "form-control",
        name: "select-1475766623703",
        multiple: true,
        values: [
          {
            label: "Adam",
            value: "option-1",
            selected: true
          },
          {
            label: "Adrian",
            value: "option-2",
            selected: false
          },
          {
            label: "Alexa",
            value: "option-3",
            selected: false
          },
          {
            label: "Amy",
            value: "",
            selected: false
          }
        ]
      }
    ]
  };
        var id = null,
            formDataEntity = null,
            urlShowForm = null,
            orderAvailableFields = {{ available_builder_fields|json_encode()|raw }},
            disabledFields = {{ disabled_builder_fields|json_encode()|raw }};
          
        {% if formEntity is defined %}
            id = {{ formEntity.id }};
            formDataEntity = '{{ filteredjson|json_encode()|raw }}';
            {#urlShowForm = "{{ path('getForm', {'id': formEntity.id}) }}";#}
        {% endif %}

        $(document).ready(function () {
            var formBuilder=$('.build-wrap').formBuilder();
           setTimeout( function(){formBuilder.actions.setData(formDataEntity)},2000);
            $('#formTemplates').on("change", function(e) {
                formBuilder.actions.setData(templates[e.target.value]);
              });
            $("button[name='btn_update_and_list']").on('click',function(event){
                event.preventDefault();
                $("#jsondata").val(formBuilder.actions.getData('json', true));
                $("#wizard").submit();
            });    
        });
       
    </script>
{% endblock %}