jean-marie/backend/templates/giftexchange.html

{% extends "authorized.html" %}
{% block title %}Gift Exchange{% endblock %}
{% block center %}
<form action="/giftexchange/{{ giftexchange.id }}" method="post">
    <div class="row">
        <div class="btn-toolbar" role="toolbar">
            <a role="button" class="btn btn-primary" href="/giftexchange/{{ giftexchange.id }}">Save</a>
            <button type="submit" class="btn btn-danger">Update</button>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <label for="name">Exchange Name:</label>
            <input id="name" class="form-control" name="name" type="text" value="{{ giftexchange.name }}" required>
        </div>
        <div class="form-group">
            <label for="exchange_date">Exchange Date:</label>
            <input id="exchange_date" name="exchange_date" type="date" value="{{ giftexchange.exchange_date }}">
        </div>
    </div>
    <div class="row align-items-center text-center">
        <div class="col">
            <table id="non_participants" data-toggle="table" data-click-to-select="true" class="table table-bordered"
                height="400">
                <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th data-sortable="true" data-field="name" scope="col">Name</th>
                        <th data-hidden="true" data-field="id" scope="col">ID</th>
                    </tr>
                </thead>
                <tbody id="np_tbody">
                    {% for participant in non_participants %}
                    <tr>
                        <td></td>
                        <td>{{ participant.name }}</td>
                        <td>{{ participant.id }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="col">
            <div class="btn-group-vertical text-center" role="group">
                <button id="add" type="button" class="btn btn-primary">Add</button>
                <button id="remove" type="button" class="btn btn-primary">Remove</button>
            </div>
        </div>
        <div class="col">
            <table id="participants" data-toggle="table" data-click-to-select="true" class="table table-bordered"
                height="400">
                <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th data-sortable="true" data-field="name" scope="col">Name</th>
                        <th data-hidden="true" data-field="id" scope="col">ID</th>
                    </tr>
                </thead>
                <tbody id="p_tbody">
                    {% for participant in participants %}
                    <tr>
                        <td></td>
                        <td>{{ participant.name }}</td>
                        <td>{{ participant.id }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</form>
{% endblock center %}

{% block script %}
<script>
    $(document).ready(() => {
        var npRows = [];
        var pRows = [];

        $('#non_participants').bootstrapTable('hideColumn', 'id');
        $('#participants').bootstrapTable('hideColumn', 'id');

        $('#non_participants').on('check.bs.table', function (e, row) {
            npRows.push({ name: row.name, id: row.id });
            console.log(npRows);
        });

        $('#non_participants').on('uncheck.bs.table', function (e, row) {
            $.each(npRows, function (index, value) {
                if (value.id === row.id) {
                    npRows.splice(index, 1);
                }
            });
            console.log(npRows);
        });

        $('#participants').on('check.bs.table', function (e, row) {
            pRows.push({ name: row.name, id: row.id });
            console.log(pRows);
        });

        $('#participants').on('uncheck.bs.table', function (e, row) {
            $.each(pRows, function (index, value) {
                if (value.id === row.id) {
                    pRows.splice(index, 1);
                }
            });
            console.log(pRows);
        });

        $("#add").click(function () {
            $("#output").empty();
            $.each(npRows, function (index, value) {
                $('#non_participants').bootstrapTable('remove', {
                    field: 'id',
                    values: [value.id]
                });
                $('#participants').bootstrapTable('insertRow', {
                    index: 0,
                    row: {
                        name: value.name,
                        id: value.id
                    }
                });
            });
            npRows = [];
        });

        $("#remove").click(function () {
            $("#p_output").empty();
            $.each(pRows, function (index, value) {
                $('#participants').bootstrapTable('remove', {
                    field: 'id',
                    values: [value.id]
                });
                $('#non_participants').bootstrapTable('insertRow', {
                    index: 0,
                    row: {
                        name: value.name,
                        id: value.id
                    }
                });
            });
            pRows = [];
        });
    })
</script>
{% endblock script %}