Sebastian Molenda
78 lines
3.2 KiB
Twig
78 lines
3.2 KiB
Twig
{% extends "admin/blank.twig" %}
|
|
{% block content %}
|
|
<h1 class="text-2xl font-bold mb-6">Add Content</h1>
|
|
{% if error %}
|
|
<p class="text-red-600 mb-4">{{ error }}</p>
|
|
{% endif %}
|
|
<form method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onsubmit="return validateForm();">
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="key">Key</label>
|
|
<input name="key" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="key" type="text" placeholder="Key" oninput="validateKey(this)">
|
|
<div id="key-feedback" class="text-sm mt-1"></div>
|
|
<script>
|
|
function validateKey(el) {
|
|
let feedback = document.getElementById('key-feedback');
|
|
const re = /^[a-z_]+$/;
|
|
if (!el.value) {
|
|
feedback.textContent = 'Key is required.';
|
|
feedback.className = 'text-red-600';
|
|
return false;
|
|
} else if (!re.test(el.value)) {
|
|
feedback.textContent = 'Key must be all lowercase letters and underscores only.';
|
|
feedback.className = 'text-red-600';
|
|
return false;
|
|
} else {
|
|
feedback.textContent = '';
|
|
return true;
|
|
}
|
|
}
|
|
function validateForm() {
|
|
var keyInput = document.getElementById('key');
|
|
return validateKey(keyInput);
|
|
}
|
|
</script>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="value">Content</label>
|
|
<input type="hidden" name="value" id="value-hidden">
|
|
<div id="editor" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline h-40 resize-y bg-white" style="height: 200px;"></div>
|
|
<div id="json-feedback" class="text-sm mt-2"></div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.3/ace.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script>
|
|
var editor = ace.edit("editor");
|
|
editor.session.setMode("ace/mode/json");
|
|
editor.setTheme("ace/theme/github");
|
|
editor.setOptions({
|
|
minLines: 10,
|
|
maxLines: 30,
|
|
autoScrollEditorIntoView: true
|
|
});
|
|
// Sync editor content to hidden input
|
|
function syncEditor() {
|
|
var val = editor.getValue();
|
|
document.getElementById('value-hidden').value = val;
|
|
validateJson(val);
|
|
}
|
|
editor.session.on('change', syncEditor);
|
|
// JSON validation
|
|
function validateJson(val) {
|
|
let feedback = document.getElementById('json-feedback');
|
|
try {
|
|
JSON.parse(val);
|
|
feedback.textContent = 'Valid JSON';
|
|
feedback.className = 'text-green-600';
|
|
} catch (e) {
|
|
feedback.textContent = 'Invalid JSON';
|
|
feedback.className = 'text-red-600';
|
|
}
|
|
}
|
|
// Initial sync
|
|
syncEditor();
|
|
</script>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Create</button>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|