baangt/flask/app/templates/testrun/create_item.html

{% extends "base.html" %}

{% block title %}
    Create {{ type|name_by_type(False) }}
{% endblock %}

{% block content %}

<main>

<!-- bread crumb -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="/{{ type }}">{{ type|name_by_type }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">New</li>
    </ol>
</nav>

<!-- flash messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, msg in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ msg }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    {% endfor %}
{% endwith %}

<div class="container mt-5">
    <div class="border-bottom pt-3">
        <h1 >Create new {{ type|name_by_type(False) }}</h1>
    </div>

    <form class="pr-5" method="post" onsubmit="get_chips()" action="/{{ type }}/new">
        {{ form.hidden_tag() }}

        {% for field in form %}
            {% if field.name != "csrf_token" %}
            
            <!-- error message -->
            {% for error in field.errors %}
                <p class="text-danger">{{ error }}</p>
            {% endfor %}

            {% if field.name == 'value' %}
                <div class="input-group mt-3">
                    <div class="input-group-prepend w-60 ml-0">
                        {{ form.value.label(class="input-group-text w-80") }}
                        {{ form.comparision.label(class="input-group-text w-40") }}
                    </div>
                    <div class="input-group-append w-40">
                        {{ form.value2.label(class="input-group-text w-100") }}
                    </div>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group w-40">
                        {{ form.value(class="form-control w-50") }}
                    </div>
                    <div class="input-group w-20">
                        {{ form.comparision(class="form-control") }}
                    </div>
                    <div class="input-group w-40">
                        {{ form.value2(class="form-control") }}                    
                    </div>
                </div>

            {% elif field.name != 'comparision' and field.name != 'value2' %}
            <div class="input-group my-3">
                <div class="input-group-prepend">
                    {{ field.label(class="input-group-text fixed-label") }}
                </div>

                {% if field.name in chips %}
                <!-- choices for chips -->
                    <input type="text" class="form-control" list="{{ field.name }}Opt" data-name="{{ field.name }}"
                        onkeyup="filter_options(this)" oninput="add_chip(this, '{{ field.name }}')">
                    <datalist id="{{ field.name }}Opt">
                        {% for option in field.choices %}
                            <option>
                                {{ option.1 }}
                            </option>
                        {% endfor %}
                    </datalist>
                
                {% else %}
                <!-- other fields -->
                    {{ field(class="form-control") }}
                {% endif %}
            </div>

            <!-- chips area -->
            {% if field.name in chips %}
                <!-- hidden multi-select -->
                <select class="d-none" id="{{ field.name }}" name="{{ field.name }}" multiple>
                    {% for option in field.choices %}
                        <option value="{{ option.0 }}">
                            {{ option.1 }}
                        </option>
                    {% endfor %}
                </select>
                
                <!-- chips -->
                <div id="chips_{{ field.name }}">
                </div>
            {% endif %}
            {% endif %}
            {% endif %}

        {% endfor %}

        <p>
            <button class="btn btn-primary px-5 my-3" type="submit">Create</button>
        </p>
    </form>
</div>

</main>

{% endblock %}