Elep

{% extends 'basehtml.html' %}
{% block title %}
    Mapping | RetentionFlow
{% endblock title %}
{% block content %}
    
    <div class="container-fluid d-flex justify-content-center flex-column ">
        
        <h1 class="h3 mb-1 text-gray-800 text-center">Mapping Signals</h1>
        <p class="mb-4 text-center">Please map the signals you want to send to RetentionFlow</p>

<div class="row justify-content-center">
            <div class="col-12 col-md-7 col-lg-5">
                
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Mapping</h6>
                    </div>
                    <div class="card-body">
                        <form class="form" id="mapping-form" name="mapping-form" action="/mapping" method="POST">
                        <meta name="csrf-token" content="{{ csrf_token }}">
                        {% csrf_token %}
                            <div class="form-group form-group-lg">
                                <label for="warehouse-mapping">Warehouses</label>
                                <select class="form-control" id="warehouse-mapping" name="warehouse-mapping" required>
                                    <option></option>
                                    {%  for item in warehouse_list %}
                                        <option value="{{ item }}">{{ item }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="retention-database-mapping">RetentionFlow Databases</label>
                                <select class="form-control" id="retention-database-mapping" name="retention-database-mapping" required>
                                    <option></option>
                                    {%  for item in database_list %}
                                        <option value="{{ item }}">{{ item }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="database-mapping">Databases</label>
                                <select class="form-control" id="database-mapping" name="database-mapping" onchange="onchangedatabase()" required>
                                    <option></option>
                                    {%  for item in database_list %}
                                        <option value="{{ item }}">{{ item }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="schema-mapping">Schemas</label>
                                <select class="form-control" id="schema-mapping" name="schema-mapping" onchange="onchangeschema()" required>
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="table-mapping">Tables</label>
                                <select class="form-control" id="table-mapping" name="table-mapping" onchange="onchangetable()" required>
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="event-col-mapping">Event</label>
                                <select class="form-control" id="event-col-mapping" name="event-col-mapping" required>
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="customer-col-mapping">Customer</label>
                                <select class="form-control" id="customer-col-mapping" name="customer-col-mapping" required>
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="timestamp-col-mapping">Timestamp</label>
                                <select class="form-control" id="timestamp-col-mapping" name="timestamp-col-mapping" required>
                                </select>
                            </div>
                            <div class="form-group form-group-lg">
                                <label for="metadata-col-mapping">Meta Data</label>
                                <select class="form-control" id="metadata-col-mapping" name="metadata-col-mapping" required>
                                </select>
                            </div>
                            <div class="form-row form-group form-group-lg justify-content-center">
                                {% if request.session.mapping is False %}
                                    <button type="submit" id="button_submit" class="btn btn-primary ">Send Mapping</button>
                                {% else %}
                                    <button type="submit" class="btn btn-success" disabled>MAPPING COMPLETED</button>
                            {% endif %}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<script src="/static/js/custom.js"></script>
{% if values_found %}
    <script>
        warehouse1 = $('#warehouse-mapping');
        warehouse1.find('option').remove();
        warehouse1.append('<option>' + '{{ warehouse }}' + ' </option>');
        warehouse1.prop('disabled',true);

retention = $('#retention-database-mapping');
        retention.find('option').remove();
        retention.append('<option>' + '{{ retention_database }}' + ' </option>');
        retention.prop('disabled',true);

database = $('#database-mapping');
        database.find('option').remove();
        database.append('<option>' + '{{ database }}' + ' </option>');
        database.prop('disabled',true);

schema = $('#schema-mapping');
        schema.find('option').remove();
        schema.append('<option>' + '{{ schema }}' + ' </option>');
        schema.prop('disabled',true);

table = $('#table-mapping');
        table.find('option').remove();
        table.append('<option>' + '{{ table }}' + ' </option>');
        table.prop('disabled',true);

events = $('#event-col-mapping');
        events.find('option').remove();
        events.append('<option>' + '{{ e }}' + ' </option>');
        events.prop('disabled',true);

customer = $('#customer-col-mapping');
        customer.find('option').remove();
        customer.append('<option>' + '{{ customer }}' + ' </option>');
        customer.prop('disabled',true);

timestamp = $('#timestamp-col-mapping');
        timestamp.find('option').remove();
        timestamp.append('<option>' + '{{ timestamp }}' + ' </option>');
        timestamp.prop('disabled',true);

metadata = $('#metadata-col-mapping');
        metadata.find('option').remove();
        metadata.append('<option>' + '{{ meta }}' + ' </option>');
        metadata.prop('disabled',true);

</script>
{% endif %}
<script>
    $(document).ready(function () {
        $("#mapping-form").submit(function (e) {
            //disable the submit button
            $("#button_submit").attr("disabled", true);
            $("#button_submit").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            return true;
        });
    });
</script>
{% endblock content %}