swaf-boilerplate/views/macros.njk

{% macro message(type, content, raw=false, discreet=false) %}
    <div class="message{{ ' message-discreet' if discreet }}" data-type="{{ type }}">
        <i class="icon"></i>
        <span class="content">
            {{ content|safe if raw else content }}
        </span>
    </div>
{% endmacro %}

{% macro messages(flash) %}
    {% set flashed = flash() %}
    {% set display = 0 %}

    {% for type, bag in flashed %}
        {% if bag|length %}
            {% set display = 1 %}
        {% endif %}
    {% endfor %}

    {% if display %}
        <div class="messages">
            {% for type, bag in flashed %}
                {% for content in bag %}
                    {{ message(type, content) }}
                {% endfor %}
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}

{% macro csrf(getCSRFToken) %}
    <input type="hidden" name="csrf" value="{{ getCSRFToken() }}">
{% endmacro %}

{% macro field(_locals, type, name, value, placeholder, hint, validation_attributes='', extraData='') %}
    {% set validation = _locals.validation() %}
    {% set validation = validation[name] if validation[name] or null %}
    {% set previousFormData = _locals.previousFormData() %}
    {% set value = previousFormData[name] or value or validation.value or '' %}

    {% if type == 'hidden' %}
        {% if validation %}
            {{ message('error', validation.message) }}
        {% endif %}
        <input type="hidden" name="{{ name }}" value="{{ value }}">
    {% else %}
        <div class="form-field{{ ' inline' if type == 'checkbox' }}">
            {% if type == 'duration' %}
                <div class="input-group">
                    {% for f in extraData %}
                        <div class="time-input">
                            {% if previousFormData[name] %}
                                {% set v = value[f] %}
                            {% else %}
                                {% set v = (value % 60) if f == 's' else (((value - value % 60) / 60 % 60) if f == 'm' else ((value - value % 3600) / 3600 if f == 'h')) %}
                            {% endif %}
                            <input type="number" name="{{ name }}[{{ f }}]" id="field-{{ name }}-{{ f }}"
                                   value="{{ v }}"
                                   min="0" {{ 'max=60' if (f == 's' or f == 'm') }}
                                    {{ validation_attributes }}>
                            <label for="field-{{ name }}-{{ f }}">{{ f }}</label>
                        </div>
                    {% endfor %}
                </div>
            {% elseif type == 'select' %}
                <select name="{{ name }}" id="field-{{ name }}" {{ validation_attributes|safe }}>
                    {% for option in extraData %}
                        <option value="{{ option }}" {{ 'selected' if value == option }}>{{ option }}</option>
                    {% endfor %}
                </select>
                <i data-feather="chevron-down"></i>
            {% else %}
                <input type="{{ type }}" name="{{ name }}" id="field-{{ name }}"
                        {% if type != 'checkbox' %} value="{{ value }}" {% endif %}
                        {{ 'checked' if (type == 'checkbox' and value == 'on') }}
                        {{ validation_attributes|safe }}>
            {% endif %}

            <label for="field-{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label>
            {% if validation %}
                <div class="error"><i data-feather="x-circle"></i> {{ validation.message }}</div>
            {% endif %}
            {% if hint %}
                <div class="hint"><i data-feather="info"></i> {{ hint }}</div>
            {% endif %}
        </div>
    {% endif %}
{% endmacro %}

{% macro websocket(websocketUrl, listener, reconnectOnClose = 1, checkFunction = 0) %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            {% if checkFunction %}
            if (!{{ checkFunction }}()) return;
            {% endif %}

            const run = () => {
                const websocket = new WebSocket('{{ websocketUrl }}');
                websocket.onopen = (e) => {
                    console.debug('Websocket connected');
                };
                websocket.onmessage = (e) => {
                    {{ listener }}(websocket, e);
                };
                websocket.onerror = (e) => {
                    console.error('Websocket error', e);
                };
                websocket.onclose = (e) => {
                    console.debug('Websocket closed', e.code, e.reason);

                    {% if reconnectOnClose %}
                    setTimeout(run, 1000);
                    {% endif %}
                };
            };

            run();
        });
    </script>
{% endmacro %}

{% macro paginate(pagination, routeName) %}
    {% if pagination.hasPrevious() or pagination.hasNext() %}
        <div class="pagination">
            {% if pagination.hasPrevious() %}
                <a href="{{ route(routeName, {page: pagination.page - 1}) }}"><i data-feather="chevron-left"></i></a>
            {% endif %}

            <span>{{ pagination.page }}</span>

            {% if pagination.hasNext() %}
                <a href="{{ route(routeName, {page: pagination.page + 1}) }}"><i data-feather="chevron-right"></i></a>
            {% endif %}
        </div>
    {% endif %}
{% endmacro %}