svg
This commit is contained in:
@ -4,6 +4,7 @@
|
||||
<style>
|
||||
.card-body div {
|
||||
display:flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-body div label {
|
||||
@ -16,7 +17,15 @@
|
||||
|
||||
|
||||
{{ form_start(form) }}
|
||||
{{ form_widget(form.submit) }}
|
||||
<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 %}
|
||||
@ -39,12 +48,19 @@
|
||||
|
||||
{% 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);
|
||||
console.log('Section trouvée:', section);
|
||||
});
|
||||
|
||||
$('label.required').each(function () {
|
||||
@ -55,6 +71,69 @@
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
@ -68,49 +147,78 @@
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function refreshHideShow() {
|
||||
$('.slave').each(function() {
|
||||
slave = $(this);
|
||||
slaveId = slave.attr('id');
|
||||
const isExpert = localStorage.getItem('expertMode') === '1';
|
||||
|
||||
// Déterminer si le champs est required
|
||||
isrequired = $('label[for="' + slaveId + '"]').hasClass('required');
|
||||
console.log(slaveId);
|
||||
console.log(isrequired);
|
||||
// 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;
|
||||
|
||||
// Rechercher son maitre
|
||||
masterArray = slave.data('slave').split("=");
|
||||
master = $('[data-master="'+masterArray[0]+'"]')
|
||||
// 1. Évaluer les conditions de dépendance
|
||||
if (slaveConditions) {
|
||||
const conditions = slaveConditions.split('&&');
|
||||
|
||||
// Déterminer si le slave doit etre afficher
|
||||
toshow=false;
|
||||
if(master.is(':visible')&&master.val()===masterArray[1]) {
|
||||
toshow=true;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(toshow) {
|
||||
slave.parent().show();
|
||||
}
|
||||
else {
|
||||
slave.parent().hide();
|
||||
// 2. Appliquer l'affichage
|
||||
if (toShow) {
|
||||
$wrapper.show();
|
||||
} else {
|
||||
$wrapper.hide();
|
||||
}
|
||||
});
|
||||
|
||||
cardHideShow();
|
||||
// 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 () {
|
||||
console.log($(this).val());
|
||||
refreshHideShow();
|
||||
});
|
||||
|
||||
moveToSection();
|
||||
moveToSection();
|
||||
addResetButtons();
|
||||
watchInputsForResetState();
|
||||
refreshHideShow();
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
Reference in New Issue
Block a user