misuzu/templates/manage/general/setting.twig

105 lines
5.6 KiB
Twig
Raw Normal View History

2022-09-13 13:14:49 +00:00
{% extends 'manage/general/master.twig' %}
{% from 'macros.twig' import container_title %}
{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select, input_colour %}
{% set title = conf_var.name is empty ? 'Adding a new setting' : ((conf_var.new ? 'Adding ' : 'Editing ') ~ ' setting ' ~ conf_var.name) %}
{% block manage_content %}
<div class="container manage-settings">
{{ container_title('<i class="fas fa-cogs fa-fw"></i> ' ~ title) }}
<form method="post" action="{{ url('manage-general-setting', {'name': conf_var.name}) }}" class="manage-setting" id="-msz-manage-setting-form">
{{ input_csrf() }}
{% if conf_var.new %}
<label class="manage-setting-field">
<div class="manage-setting-field-name">Name</div>
{{ input_text('conf_name', 'manage__emote__field__value', conf_var.name, 'text', null, false, {'id': '-msz-manage-setting-name'}) }}
</label>
<label class="manage-setting-field">
<div class="manage-setting-field-name">Type</div>
{{ input_select(
'conf_type',
['', 'string', 'integer', 'boolean', 'array'],
conf_var.type, null, null, true, 'manage__emote__field__value',
{'onchange': ('location.assign("' ~ url('manage-general-setting', {'name': '-name-', 'type': '-type-'}) ~ '".replace("-name-", document.getElementById("-msz-manage-setting-name").value).replace("-type-", this.value))')}
) }}
</label>
{% endif %}
{% if conf_var.type is not empty %}
<label class="manage-setting-field">
<div class="manage-setting-field-name">Value</div>
{% if conf_var.type == 'array' %}
<div class="manage-setting-array">
<div class="manage-setting-array-warning">
<noscript><div class="warning"><div class="warning__content">Touching this without Javascript will destroy everything.</div></div></noscript>
</div>
<div class="manage-setting-array-select">
<select class="input__select" multiple id="-msz-manage-setting-array" name="conf_value[]">
{% for entry in conf_var.value %}
<option>{{ entry }}</option>
{% endfor %}
</select>
</div>
<div class="manage-setting-array-remove">
<button type="button" id="-msz-manage-setting-array-delete" class="input__button input__button--destroy">Remove</button>
</div>
<div class="manage-setting-array-add">
<input type="text" id="-msz-manage-setting-array-input" class="input__text">
2022-09-13 13:14:49 +00:00
<button type="button" id="-msz-manage-setting-array-enter" class="input__button input__button--save">Add</button>
</div>
</div>
<script type="text/javascript">
var mszMSF = document.getElementById('-msz-manage-setting-form'),
mszMSA = document.getElementById('-msz-manage-setting-array'),
mszMSAD = document.getElementById('-msz-manage-setting-array-delete'),
mszMSAI = document.getElementById('-msz-manage-setting-array-input'),
mszMSAE = document.getElementById('-msz-manage-setting-array-enter');
mszMSF.addEventListener('submit', function() {
for(var i = 0; i < mszMSA.options.length; ++i)
mszMSA.options[i].selected = true;
});
mszMSAD.addEventListener('click', function() {
var opts = Array.from(mszMSA.selectedOptions);
while(opts.length > 0)
mszMSA.removeChild(opts.pop());
});
mszMSAE.addEventListener('click', function() {
var text = mszMSAI.value,
opt = document.createElement('option');
opt.textContent = text;
mszMSA.appendChild(opt);
});
mszMSAI.addEventListener('keydown', function(ev) {
if(ev.key === 'Enter') {
ev.preventDefault();
mszMSAE.click();
this.value = '';
return false;
}
});
</script>
{% elseif conf_var.type == 'string' %}
{{ input_text('conf_value', 'manage-setting-field-value', conf_var.value, 'text') }}
{% elseif conf_var.type == 'integer' %}
{{ input_text('conf_value', 'manage-setting-field-value', conf_var.value, 'number') }}
{% elseif conf_var.type == 'boolean' %}
{{ input_checkbox('conf_value', 'Enabled', conf_var.value) }}
{% endif %}
</label>
<div class="manage-setting-actions">
<button class="input__button">Save</button>
</div>
{% endif %}
</form>
</div>
{% endblock %}