nineconfig/templates/home/home.html.twig

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

{% block localstyle%}
<style>
    .card-body div {
        display:flex;
        align-items: center;
    }

    .card-body div label {
        width: 30%;
    }
</style>
{% endblock %}

{% block body %}


{{ form_start(form) }}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            {{ form_widget(form.submit) }}
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="expertSwitch">
            <label class="form-check-label ms-2" for="expertSwitch">Mode Expert</label>
        </div>
    </div>

    <div class="row">
        {% for section in dicos %}
            <div class="{{section.style}}">
                <div class="card mt-3 ">
                    <div class="card-header">
                        <h5>{{section.label}}</h5>
                    </div>
                    <div id="{{section.id}}" class="card-body">

                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{{ form_end(form) }}

{% endblock %}


{% block localscript %}
<script>
    let isExpert=false;

    function toggleExpertMode(isExpertMode) {
        localStorage.setItem('expertMode', isExpertMode ? '1' : '0');
        isExpert=isExpertMode;
        refreshHideShow();
    }

    function moveToSection() {
        $('[data-section]').each(function() {
            inputLabel = $(this).parent();
            section = $(this).data('section');
            inputLabel.appendTo('#'+section);
        });

        $('label.required').each(function () {
            // Évite de doubler les *
            if (!$(this).text().includes('*')) {
                $(this).append(' *');
            }
        });        
    }

    function addResetButtons() {
        $('input, select, textarea').each(function () {
            const $input = $(this);
            const defaultValue = $input.data('default');

            // Créer le bouton seulement si une valeur par défaut existe
            if (typeof defaultValue !== 'undefined') {
                const $wrapper = $input.closest('div');

                // Évite les doublons
                if ($wrapper.find('.reset-btn').length === 0) {
                    const $resetBtn = $(`
                        <button type="button" class="btn btn-sm btn-secondary ms-2 reset-btn" title="Réinitialiser">
                            <i class="fas fa-rotate-left"></i>
                        </button>
                    `);

                    $resetBtn.on('click', function () {
                        if ($input.is(':checkbox')) {
                            $input.prop('checked', defaultValue == 1 || defaultValue === 'true');
                        } else {
                            $input.val(defaultValue).trigger('change');
                        }
                        updateResetButtonStyle($input, $resetBtn); // maj couleur après reset
                    });

                    $wrapper.append($resetBtn);
                }

                // Appliquer couleur initiale
                const $resetBtn = $wrapper.find('.reset-btn');
                updateResetButtonStyle($input, $resetBtn);
            }
        });
    }

    function updateResetButtonStyle($input, $btn) {
        const currentVal = $input.is(':checkbox') ? $input.is(':checked') : $input.val();
        const defaultVal = $input.data('default');
        let isChanged = false;

        if ($input.is(':checkbox')) {
            isChanged = (defaultVal == '1' || defaultVal === true || defaultVal === 'true') !== $input.is(':checked');
        } else {
            isChanged = currentVal != defaultVal;
        }

        if (isChanged) {
            $btn.removeClass('btn-secondary').addClass('btn-success');
        } else {
            $btn.removeClass('btn-success').addClass('btn-secondary');
        }
    }

    function watchInputsForResetState() {
        $('input[data-default], select[data-default], textarea[data-default]').on('input change', function () {
            console.log("here");
            const $input = $(this);
            const $btn = $input.closest('div').find('.reset-btn');
            updateResetButtonStyle($input, $btn);
        });
    }

    function cardHideShow() {
        $('.card-body').each(function () {
            const $cardBody = $(this);
            const $children = $cardBody.children();
            $cardBody.parent().parent().show();

            const allHidden = $children.length > 0 && $children.filter(':visible').length === 0;
            if (allHidden) {
                $cardBody.parent().parent().hide();
            }
        });            
    }

    
    function refreshHideShow() {
        const isExpert = localStorage.getItem('expertMode') === '1';

        // Afficher / Masquer les slaves
        $('.slave').each(function () {
            const $slave = $(this);
            const slaveConditions = $slave.data('slave'); // ex: "foo=1&&bar=SQL"
            const isExpertField = $slave.data('expert');
            const $wrapper = $slave.closest('div');
            let toShow = true;

            // 1. Évaluer les conditions de dépendance
            if (slaveConditions) {
                const conditions = slaveConditions.split('&&');

                for (const cond of conditions) {
                    const [masterKey, expectedValue] = cond.split('=');
                    const $master = $('[data-master="' + masterKey + '"]');

                    if (!($master.length && $master.is(':visible') && $master.val() == expectedValue)) {
                        toShow = false;
                        break;
                    }
                }
            }

            // 2. Appliquer l'affichage
            if (toShow) {
                $wrapper.show();
            } else {
                $wrapper.hide();
            }
        });

        // Afficher / Masquer Mode expert
        $('[data-expert]').each(function () {
            const $el = $(this);
            const isExpertField = $el.data('expert');
            const $wrapper = $el.closest('div');

            if (isExpertField && !isExpert) {
                $wrapper.hide();
            } else {
                $wrapper.show();
            }
        });


        cardHideShow();
    }



    $(document).ready(function() {
        isExpert = localStorage.getItem('expertMode') === '1';
        $('#expertSwitch').prop('checked', isExpert);
        toggleExpertMode(isExpert);

        $('#expertSwitch').on('change', function() {
            toggleExpertMode(this.checked);
        });

        $('.master').on('change', function () {
            refreshHideShow();
        });

        moveToSection();      
        addResetButtons();  
        watchInputsForResetState();
        refreshHideShow();
    });

</script>
{% endblock %}