app/template/user_data/ApgFormBuilder42/apg_form_builder_2.twig line 1

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% form_theme form 'Form/form_div_layout.twig' %}

{% block stylesheet %}
    {# custom css #}
    <style>
    </style>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.css">
    <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.css">
    <link
        href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
        rel="stylesheet"
    />
{% endblock stylesheet %}

{% block javascript %}
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
{# custom js #}
<script>
        $(function() {
            FilePond.registerPlugin(
              FilePondPluginImagePreview,
              FilePondPluginFileValidateSize
            );

            $('.upload-image').each((index, element) => {
                const $elem = $(element);
                const pond = FilePond.create(
                    $elem.get(0), {
                        instantUpload: true,
                        allowFileTypeValidation: true,
                        acceptedFileTypes: [
                            'image/gif',
                            'image/png',
                            'image/jpeg',
                            'image/pjpeg'
                        ],
                        allowFileSizeValidation: true,
                        maxFileSize: '{{ maxFileSize }}',
                        labelIdle : '<span class="filepond--label-action"> ファイル選択 </span>、 or ドラッグ＆ドロップ',
                        labelMaxFileSizeExceeded : 'ファイルが大きすぎます',
                        labelMaxFileSize : '最大ファイルサイズ : {filesize}',
                        labelFileProcessingError: 'ファイルのアップロードできませんでした',
                        onprocessfilestart: (file) => {
                            loadingOverlay();
                        },
                        server: {
                        url: '{{ url('apg_form_builder_upload_file', {id: FormEntity.id}) }}',
                        process: {
                            onload: (res) => {
                                const jsonObj = JSON.parse(res);
                                Object.keys(jsonObj).forEach(function (key) {
                                    const hiddenTarget = $('input[data-file_uploader="' + key + '"]');
                                    hiddenTarget.val(jsonObj[key][0]);
                                });
                                loadingOverlay('hide');
                                return res;
                            },
                            onerror: (res) => {
                                alert('ファイルアップロード中に予期しないエラーが発生しました。恐れ入りますが、再度やり直してください。');
                                console.log(res);
                                loadingOverlay('hide');
                                return res;
                            }
                        }
                    }
                });
                $('[data-file_uploader="' + $elem.attr('name') + '"]').each(function (){
                    if($(this).val()){
                        pond.addFile($(this).val(), {type: 'local'});
                    }
                });
            });
            if ($('[type="date"]').prop('type') != 'date') {
                // input type属性でdateが利用できるかどうか(カレンダー表示できないブラウザ対応)
                $.when(
                    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js")
                ).done(function() {
                    $(".afb_datepicker").datepicker({
                      dateFormat: "yy-mm-dd",
                      closeText: "閉じる",
                      prevText: "&#x3C;前",
                      nextText: "次&#x3E;",
                      currentText: "今日",
                      monthNames: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                      ],
                      monthNamesShort: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                      ],
                      dayNames: [
                        "日曜日",
                        "月曜日",
                        "火曜日",
                        "水曜日",
                        "木曜日",
                        "金曜日",
                        "土曜日"
                      ],
                      dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
                      dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
                      weekHeader: "週",
                      isRTL: false,
                      showMonthAfterYear: true,
                      yearSuffix: "年",
                      firstDay: 1, // 週の初めは月曜
                      showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
                    }
                   );
                });
            }
        });
</script>
{% endblock javascript %}

{% block main %}

    <div class="ec-contactRole">
        <div class="ec-pageHeader">
            <h1>{{ FormEntity.pageTitle }}</h1>
        </div>
        <div class="ec-off1Grid">
            <div class="ec-off1Grid__cell">
                <form method="post" action="{{ actionUrl }}" class="h-adr">
                    {{ form_widget(form._token) }}
                    {{ form_widget(form.revision) }}

                    {# mode によって、表示内容を分けています #}
                    {% if mode != 'confirm' %}

                        {# ▼▼▼▼ 入力画面 - ここから ▼▼▼▼ #}

                        <div class="ec-borderedDefs">
                            {% for formJson in formJsonArray %}

                                {% if formJson.type == 'header' %}
                                    <{{ formJson.subtype }}>{{ formJson.label }}</{{ formJson.subtype }}>
                                {% elseif formJson.type == 'paragraph' %}
                                    <{{ formJson.subtype }} class="ec-para-normal">{{ formJson.label|raw }}</{{ formJson.subtype }}>
                                {% elseif formJson.type == 'select' %}
                                    <dl class="afb afb-type-{{ formJson.type }} afb-input-{{ formJson.name }}">
                                        <dt>
                                            {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                        </dt>
                                        <dd>
                                            <div class="ec-select{{ has_errors(form[formJson.name]) ? ' error' }}">
                                                {{ form_widget(form[formJson.name]) }}
                                                {{ form_errors(form[formJson.name]) }}
                                                {% if formJson.description is defined %}
                                                    <p class="afb-help">{{ formJson.description|raw }}</p>
                                                {% endif %}
                                            </div>
                                        </dd>
                                    </dl>
                                {% elseif formJson.type == 'checkbox-group' %}
                                    <dl class="afb afb-type-{{ formJson.type }} afb-input-{{ formJson.name }}">
                                        <dt>
                                            {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                        </dt>
                                        <dd>
                                            <div class="ec-checkbox{{ has_errors(form[formJson.name]) ? ' error' }}">
                                                <label>
                                                    {{ form_widget(form[formJson.name]) }}
                                                </label>
                                                {{ form_errors(form[formJson.name]) }}
                                                {% if formJson.description is defined %}
                                                    <p class="afb-help">{{ formJson.description|raw }}</p>
                                                {% endif %}
                                            </div>
                                        </dd>
                                    </dl>
                                {% elseif formJson.type == 'radio-group' %}
                                    <dl class="afb afb-type-{{ formJson.type }} afb-input-{{ formJson.name }}">
                                        <dt>
                                            {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                        </dt>
                                        <dd>
                                            <div class="ec-radio{{ has_errors(form[formJson.name]) ? ' error' }}">
                                                {{ form_widget(form[formJson.name]) }}
                                                {{ form_errors(form[formJson.name]) }}
                                            </div>
                                            {% if formJson.description is defined %}
                                                <p class="afb-help">{{ formJson.description|raw }}</p>
                                            {% endif %}
                                        </dd>
                                    </dl>
                                {% elseif formJson.type == 'date' %}
                                    <dl class="afb afb-type-{{ formJson.type }} afb-input-{{ formJson.name }}">
                                        <dt>
                                            {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                        </dt>
                                        <dd>
                                            <div class="ec-birth{{ has_errors(form[formJson.name]) ? ' error' }}">
                                                {{ form_widget(form[formJson.name]) }}
                                                {{ form_errors(form[formJson.name]) }}
                                            </div>
                                            {% if formJson.description is defined %}
                                                <p class="afb-help">{{ formJson.description|raw }}</p>
                                            {% endif %}
                                        </dd>
                                    </dl>
                                {% elseif formJson.type == 'file' %}
                                    <dl class="afb afb-type-{{ formJson.type }} afb-input-{{ formJson.name }}">
                                        <dt>
                                            {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                        </dt>
                                        <dd>
                                            {{ form_widget(form[formJson.name], {type : 'hidden'}) }}
                                            <div class="ec-input{{ has_errors(form[formJson.name]) ? ' error' }}">
                                                {% if formJson.fileType == 'image' %}
                                                    {{ form_widget(form[formJson.name~'_input'],
                                                        {attr:{class: 'upload-image'}}) }}
                                                    {{ form_errors(form[formJson.name]) }}
                                                {% endif %}
                                                {% if formJson.description is defined %}
                                                    <p class="afb-help">{{ formJson.description|raw }}</p>
                                                {% endif %}
                                            </div>
                                        </dd>
                                    </dl>
                                {% else %}
                                    <dl class="afb afb-type-{{ formJson.type }} afb-input-{{ formJson.name }}">
                                        <dt>
                                            {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                        </dt>
                                        <dd>
                                            <div class="ec-input{{ has_errors(form[formJson.name]) ? ' error' }}">
                                                {{ form_widget(form[formJson.name]) }}
                                                {{ form_errors(form[formJson.name]) }}
                                                {% if formJson.type == 'textarea' %}
                                                    <p></p>
                                                {% endif %}
                                                {% if formJson.description is defined %}
                                                    <p class="afb-help">{{ formJson.description|raw }}</p>
                                                {% endif %}
                                            </div>
                                        </dd>
                                    </dl>
                                {% endif %}
                            {% endfor %}
                        </div>

                        <div class="ec-RegisterRole__actions">
                            <div class="ec-off4Grid">
                                <div class="ec-off4Grid__cell">
                                    <button type="submit" class="ec-blockBtn--action" name="mode"
                                            value="confirm">{{ 'common.go_to_confirm'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        {# ▲▲▲▲ 入力画面 - ここまで ▲▲▲▲ #}

                    {% else %}

                        {# ▼▼▼▼ 確認画面 - ここから ▼▼▼▼ #}

                        <div class="ec-borderedDefs">
                        {% for formJson in formJsonArray %}

                            {% if formJson.type == 'header' %}
                                <{{ formJson.subtype }}>{{ formJson.label }}</{{ formJson.subtype }}>
                            {% elseif formJson.type == 'paragraph' %}
                                <{{ formJson.subtype }} class="ec-para-normal">{{ formJson.label|raw }}</{{ formJson.subtype }}>
                            {% elseif
                                formJson.type == 'select'
                                or formJson.type == 'checkbox-group'
                                or formJson.type == 'radio-group'
                            %}
                                <dl class="afb afb-type-{{ formJson.type }} afb-confirm-{{ formJson.name }}">
                                    <dt>
                                        {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        {% set selectedData = form[formJson.name].vars.data %}
                                        {% if selectedData is iterable %}
                                            {% set firstFlg = true %}
                                            {% for choice in form[formJson.name].vars.choices %}
                                                {% set choideData = choice.data %}
                                                {% for s in selectedData %}
                                                    {% if choideData == s %}
                                                        {% if firstFlg == false %}
                                                            ／
                                                        {% else %}
                                                            {% set firstFlg = false %}
                                                        {% endif %}
                                                        {{ choice.label }}
                                                    {% endif %}
                                                {% endfor %}
                                            {% endfor %}
                                            {% for s in selectedData %}
                                                <input type="hidden" name="{{ formJson.name }}[]" value="{{ s }}">
                                            {% endfor %}
                                        {% else %}
                                            {% for choice in form[formJson.name].vars.choices %}
                                                {% set choideData = choice.data %}
                                                {% if choideData == selectedData %}
                                                    {{ choice.label }}
                                                {% endif %}
                                            {% endfor %}
                                            {{ form_widget(form[formJson.name], { type : 'hidden' }) }}
                                        {% endif %}
                                    </dd>
                                </dl>
                            {% elseif formJson.type == 'date' %}
                                <dl class="afb afb-type-{{ formJson.type }} afb-confirm-{{ formJson.name }}">
                                    <dt>
                                        {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        {{ form[formJson.name].vars.data|date_day }}
                                        {{ form_widget(form[formJson.name], { type : 'hidden' }) }}
                                    </dd>
                                </dl>
                            {% elseif formJson.type == 'file' %}
                                <dl class="afb afb-type-{{ formJson.type }} afb-confirm-{{ formJson.name }}">
                                    <dt>
                                        {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        {% if form[formJson.name].vars.data %}
                                            <a target="_blank" href="{{ fileUrl~form[formJson.name].vars.data }}">
                                                <img alt="" style="max-height:320px;max-width:320px;"
                                                     src="{{ fileUrl~form[formJson.name].vars.data }}">
                                            </a>
                                        {% endif %}
                                        {{ form_widget(form[formJson.name], { type : 'hidden' }) }}
                                    </dd>
                                </dl>
                            {% else %}
                                <dl class="afb afb-type-{{ formJson.type }} afb-confirm-{{ formJson.name }}">
                                    <dt>
                                        {{ form_label(form[formJson.name], formJson.label, { 'label_attr': { 'class': 'ec-label' }}) }}
                                    </dt>
                                    <dd>
                                        {{ form[formJson.name].vars.data|nl2br }}
                                        {{ form_widget(form[formJson.name], { type : 'hidden' }) }}
                                    </dd>
                                </dl>
                            {% endif %}
                        {% endfor %}
                        </div>

                        <div class="ec-RegisterRole__actions">
                            <div class="ec-off4Grid">
                                <div class="ec-off4Grid__cell">
                                    <button type="submit"
                                            class="ec-blockBtn--action"
                                            name="mode"
                                            style="margin-bottom: 16px;"
                                            value="complete">{{ 'common.send'|trans }}
                                    </button>
                                    <button type="submit"
                                            class="ec-blockBtn--cancel"
                                            name="mode"
                                            value="back">{{ 'common.back'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        {# ▲▲▲▲ 確認画面 - ここまで ▲▲▲▲ #}

                    {% endif %}
                </form>
            </div>
        </div>
    </div>

{% endblock %}