43547287b1
- Creating a specialized Form class for handling dynamic fields - Refinement of HTML-macros to handle dynamic fields - Introduction of dynamic fields for Catalogs
72 lines
3.5 KiB
HTML
72 lines
3.5 KiB
HTML
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/perfect-scrollbar.min.js"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/typedjs.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/prism.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/highlight.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/parallax.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/nouislider.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/plugins/anime.min.js')}}"></script>
|
|
<script src="{{url_for('static', filename='assets/js/material-kit-pro.min.js')}}?v=3.0.4 type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.css" rel="stylesheet" type="text/css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/10.1.0/jsoneditor.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
});
|
|
|
|
// Initialize JSON editors
|
|
document.querySelectorAll('.json-editor').forEach(function(textarea) {
|
|
// Create container for editor
|
|
var container = document.getElementById(textarea.id + '-editor');
|
|
|
|
// Initialize the editor
|
|
var editor = new JSONEditor(container, {
|
|
mode: 'code',
|
|
modes: ['code', 'tree'],
|
|
onChangeText: function(jsonString) {
|
|
textarea.value = jsonString;
|
|
}
|
|
});
|
|
|
|
// Set initial value
|
|
try {
|
|
const initialValue = textarea.value ? JSON.parse(textarea.value) : {};
|
|
editor.set(initialValue);
|
|
} catch (e) {
|
|
console.error('Error parsing initial JSON:', e);
|
|
editor.set({});
|
|
}
|
|
|
|
// Add validation indicator
|
|
editor.validate().then(function(errors) {
|
|
if (errors.length) {
|
|
container.style.border = '2px solid red';
|
|
} else {
|
|
container.style.border = '1px solid #ccc';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.json-editor-container {
|
|
height: 400px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.tooltip {
|
|
position: fixed;
|
|
}
|
|
</style>
|