eveAI/eveai_app/templates/scripts.html

{#dist/main.js contains all used javascript libraries#}
<script src="{{ asset_url('dist/main.js') }}"></script>

{% include 'eveai_json_editor.html' %}
{% include 'eveai_ordered_list_editor.html' %}
<!-- ListView component is now included in base.html -->

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips if bootstrap is available
    if (typeof bootstrap !== 'undefined') {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });
    } else {
        console.warn('Bootstrap is not defined. Tooltips will not be initialized.');
    }

    // De JSON editor initialisatie is hierboven al samengevoegd.
    // Deze dubbele DOMContentLoaded listener en .json-editor initialisatie kan verwijderd worden.
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get all forms with tabs
    const formsWithTabs = document.querySelectorAll('form');

    formsWithTabs.forEach(form => {
        // Handle the form's submit event
        form.addEventListener('submit', function(event) {
            const invalidFields = form.querySelectorAll(':invalid');

            if (invalidFields.length > 0) {
                // Prevent form submission
                event.preventDefault();

                // Find which tab contains the first invalid field
                const firstInvalidField = invalidFields[0];
                const tabPane = firstInvalidField.closest('.tab-pane');

                if (tabPane) {
                    // Get the tab ID
                    const tabId = tabPane.id;

                    // Find and click the corresponding tab button
                    const tabButton = document.querySelector(`[data-bs-toggle="tab"][data-bs-target="#${tabId}"]`);
                    if (tabButton && typeof bootstrap !== 'undefined') {
                        const tab = new bootstrap.Tab(tabButton);
                        tab.show();
                    } else if (tabButton) {
                        // Fallback if bootstrap is not available
                        tabButton.click();
                    }

                    // Scroll the invalid field into view and focus it
                    firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstInvalidField.focus();
                }

                // Optional: Show a message about validation errors
                const errorCount = invalidFields.length;
                const message = `Please fill in all required fields (${errorCount} ${errorCount === 1 ? 'error' : 'errors'} found)`;
                if (typeof Swal !== 'undefined') {
                    // If SweetAlert2 is available
                    Swal.fire({
                        title: 'Validation Error',
                        text: message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                } else {
                    // Fallback to browser alert
                    alert(message);
                }
            }
        });

        // Optional: Real-time validation as user switches tabs
        const tabButtons = document.querySelectorAll('[data-bs-toggle="tab"]');
        tabButtons.forEach(button => {
            button.addEventListener('shown.bs.tab', function() {
                const previousTabPane = document.querySelector(button.getAttribute('data-bs-target'));
                if (previousTabPane) {
                    const invalidFields = previousTabPane.querySelectorAll(':invalid');
                    if (invalidFields.length > 0) {
                        // Add visual indicator to tab
                        button.classList.add('has-error');
                    } else {
                        button.classList.remove('has-error');
                    }
                }
            });
        });
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('textarea[data-handle-enter="true"]').forEach(function(textarea) {
        textarea.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.shiftKey) {
                e.preventDefault();
                const start = this.selectionStart;
                const end = this.selectionEnd;
                this.value = this.value.substring(0, start) + '\n' + this.value.substring(end);
                this.selectionStart = this.selectionEnd = start + 1;
            }
        });
    });
});
</script>
<script>
function validateTableSelection(formId) {
    const form = document.getElementById(formId);
    const selectedRow = form.querySelector('input[name="selected_row"]:checked');
    if (!selectedRow) {
        alert('Please select a row first');
        return false;
    }
    return true;
}
</script>
<script>
(function(){
  function initClickableRowsWithjQuery(){
    // Maak tabelrijen klikbaar (voor tabellen met radio-buttons)
    $(document).on('click', 'table tbody tr', function(e) {
      // Voorkom dat dit gedrag optreedt als er direct op de radio-button of een link wordt geklikt
      if (!$(e.target).is('input[type="radio"], a')) {
        // Vind de radio-button in deze rij
        const radio = $(this).find('input[type="radio"]');
        // Selecteer de radio-button
        radio.prop('checked', true);
        // Voeg visuele feedback toe voor de gebruiker
        $('table tbody tr').removeClass('table-active');
        $(this).addClass('table-active');
      }
    });
  }
  if (window.$) {
    $(document).ready(initClickableRowsWithjQuery);
  } else {
    // Fallback zonder jQuery: beperkte ondersteuning
    document.addEventListener('click', function(e){
      const row = e.target.closest('table tbody tr');
      if (!row) return;
      // klik op radio/link niet overrulen
      if (e.target.closest('input[type="radio"], a')) return;
      const radio = row.querySelector('input[type="radio"]');
      if (radio) {
        radio.checked = true;
        // visuele feedback
        row.closest('tbody')?.querySelectorAll('tr').forEach(tr => tr.classList.remove('table-active'));
        row.classList.add('table-active');
      }
    });
  }
})();
</script>

<style>
.json-editor-container {
    height: 400px;
    margin-bottom: 1rem;
}
.tooltip {
    position: fixed;
}
/* Voeg CSS toe voor vanilla-jsoneditor */
/* Je kunt het thema aanpassen of de standaardstijlen gebruiken */
/* @import 'vanilla-jsoneditor/themes/jse-theme-dark.css'; */
/* Of importeer de basisstijlen */
/* @import 'vanilla-jsoneditor/dist/vanilla-jsoneditor.css'; */

/* Als je de CSS via een link tag wilt toevoegen: */
/* <link href="path/to/vanilla-jsoneditor.min.css" rel="stylesheet"> */
/* <link href="path/to/jse-theme-dark.css" rel="stylesheet"> (optioneel thema) */

/* Zorg ervoor dat de container de juiste hoogte heeft, de editor neemt de hoogte van de container over */
.json-viewer, .json-editor-container /* Pas dit aan je HTML structuur aan indien nodig */ {
    height: 300px; /* Of de gewenste hoogte */
    width: 100%;
}

/* Voeg styling toe om de vanilla-jsoneditor eruit te laten zien als de oude, indien gewenst */
.jsoneditor-readonly-mode .jse-main-menu,
.jsoneditor-readonly-mode .jse-status-bar {
    /* Verberg menu en statusbalk in read-only modus indien gewenst */
    /* display: none; */
}

.jse-read-only {
    /* Standaard read-only styling van vanilla-jsoneditor */
}

</style>