Flat file database editor and browser with web interface
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
rocket-inv/templates/_form_macros.html.tera

134 lines
2.9 KiB

{# TEXT #}
{% macro text(field) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<input id="field-{{field.key}}"
name="{{field.key}}"
type="text"
value="{{field.value}}">
{% endmacro %}
{# TEXT AREA #}
{% macro longtext(field) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<textarea id="field-{{field.key}}" name="{{field.key}}">{{field.value}}</textarea>
{% endmacro %}
{# FREE SELECT #}
{% macro free_select(field) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<input id="field-{{field.key}}"
name="{{field.key}}"
type="text"
list="suggestions-{{field.key}}"
value="{{field.value}}">
<datalist id="suggestions-{{field.key}}">
{%- for option in field.options %}
<option value="{{option}}">
{%- endfor %}
</datalist>
{% endmacro %}
{# NUMBER #}
{% macro number(field) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<input id="field-{{field.key}}"
name="{{field.key}}"
type="number"
value="{{field.value}}"
step="{{field.step}}"
min="{{field.min}}"
max="{{field.max}}">
{% endmacro %}
{# CHECKBOX #}
{% macro checkbox(field) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<label class="checkbox-wrap" for="field-{{field.key}}">
<input id="field-{{field.key}}"
name="{{field.key}}"
type="checkbox"
{% if field.checked %}checked{% endif %}>
</label>
{% endmacro %}
{# SELECT #}
{% macro select(field) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<select id="field-{{field.key}}" name="{{field.key}}">
{%- for option in field.options %}
<option value="{{option}}" {% if field.value == option %}selected{% endif %}>{{option}}</option>
{%- endfor %}
</select>
{% endmacro %}
{# TAGS #}
{% macro tags(field,free=false) %}
<label for="field-{{field.key}}">
{{field.label}}
</label>
<input type="hidden" id="field-{{field.key}}" name="{{field.key}}" value="{{field.value}}">
<div class="tag-input" id="tag-input-{{field.key}}"></div>
<datalist id="suggestions-{{field.key}}">
{%- for option in field.options %}
<option value="{{option}}">
{%- endfor %}
</datalist>
<script>
!(function() {
let taggle;
let hiden_field = document.querySelector('#field-{{field.key}}');
let onchange = () => {
let values = taggle.tag.values.join(",");
hiden_field.setAttribute("value", values);
};
taggle = new Taggle('tag-input-{{field.key}}', {
placeholder: 'Enter tags...',
allowDuplicates: false,
tags: {{field.tags_json | safe }},
allowedTags: {% if not free %}{{field.all_tags_json | safe}}{% else %}[]{% endif %},
onTagAdd: onchange,
onTagRemove: onchange,
saveOnBlur: true,
clearOnBlur: false,
});
document.querySelector('#tag-input-{{field.key}} .taggle_input')
.setAttribute('list', 'suggestions-{{field.key}}');
})();
</script>
{% endmacro %}
{# FREE TAGS #}
{% macro free_tags(field) %}
{{ self::tags(field=field, free=true) }}
{% endmacro %}