ywang
/
StreetForum


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
							<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jszip.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/FileSaver.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>

    <title>StreetForum Design Game</title>
</head>

<body>

<div class="container">

    <div class="title">
        <h1>
            StreetForum Design Game
        </h1>
        <div class="logout-btn">
            <form id="logout" action="/logout">
                <input class="btn btn-primary" type="submit" value="Log out"/>
            </form>
        </div>
    </div>


    <div class="download">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Select Game for Download:</span>
            </div>
            <select class="custom-select" id="select-game">
                {% for id in games %}
                    <option value="{{ id }}">{{ id }}</option>
                {% endfor %}
            </select>
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" onclick="download()">Download (images +
                    .csv)
                    <a id="loading-field"><span class="loader"></span></a>
                </button>
            </div>
        </div>
    </div>

    <div id="table">
        <h2> Game Table </h2>
        <table class="table {#table-striped#} table-responsive table-hover">
            <thead class="table-header">
            <tr>
                <th>game number</th>
                <!--<th>game images</th>-->
                <th>number of players</th>
                <th>location</th>
                <th>closed</th>
                <th>player number</th>
                <th>claimed</th>
                <th>points</th>
                <th>goal card</th>
                <th>character card</th>
                <th>action card</th>
                <th>object ID</th>
                <th>object name</th>
                <th>object points</th>
            </tr>
            </thead>
            <tbody>
            {% for row in data %}
                <tr>
                    <td>{{ row.Game.id }}</td>
                    {#
                {% set id = row.Game.id %}
                {% if images[id | string] is defined %}
                    <td>
                    {% for img in images[id | string] %}
                        <img class="table-img img-responsive" src="{{ img }}">
                    {% endfor %}
                    </td>
                {% else %}
                    <td>
                        -
                    </td>
                {% endif %}
                #}
                    <td>{{ row.Game.number_of_players }}</td>
                    <td>{{ row.Game.location }}</td>
                    <td>{{ row.Game.closed }}</td>
                    <td>{{ row.Player.player_number }}</td>
                    <td>{{ row.Player.is_taken }}</td>
                    <td>{{ row.Player.points }}</td>
                    <td>{{ row.Player.goal_card_id }}</td>
                    <td>{{ row.Player.character_card_id }}</td>
                    <td>
                        {% for ac in row.Player.drawn_action_cards %}
                            {{ ac.card_id }},
                        {% endfor %}
                    </td>
                    <td>{{ row.Object.object_type }}</td>
                    <td>{{ row.Object.object_name }}</td>
                    <td>{{ row.Object.object_points }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>


    <div id="table-img">
        <h2> Image Table </h2>
        <table class="table {#table-striped#} table-responsive table-hover">
            <thead class="table-header">
            <tr>
                <th>game number</th>
                <th>game images</th>
            </tr>
            </thead>
            <tbody>
            {% for key, row in images.items() %}
                <tr>
                    <td>{{ key }}</td>
                    <td>
                        {% for img in row %}
                            <img class="table-img img-responsive" src="{{ img }}">
                        {% endfor %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div id="action-card-table">
        <div class="row-align"><h2> Action Cards </h2>
            <!-- Button trigger modal -->
            <button style="margin-left: 10px" type="button" class="btn btn-primary" data-toggle="modal"
                    data-target="#addActionCard">
                Add Card
            </button>
        </div>
        <table class="table {#table-striped#} table-responsive table-hover">
            <thead class="table-header">
            <tr>
                <th>Card ID</th>
                <th>Action</th>
                <th>Image</th>
            </tr>
            </thead>
            <tbody>
            {% for card in action_cards %}
                <tr>
                    <td>{{ card.card_id }}</td>
                    <td>{{ card.action }}</td>
                    <td>{% set filename = card.img_path.split('/')[-1] %}
                        <a target="_blank" rel="noopener noreferrer"
                           href="/api/get_card_image/{{ filename }}">{{ filename }}</a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger"
                                onclick="delete_card('action', {{ card.card_id }})">Delete
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="addActionCard" tabindex="-1" role="dialog"
         aria-labelledby="addActionCardTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addActionCardTitle">Add an Action Card</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="submit-action-card">
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="cardid_action" class="col-form-label">Card ID: </label>
                            <input type="number" class="form-control" id="cardid_action" required>

                            <label for="action_action" class="col-form-label">Action: </label>
                            <input type="text" class="form-control" id="action_action" required>

                            <label for="img_action" class="col-form-label">Image: </label>
                            <input type="file" accept="image/png" class="form-control" id="img_action" required>
                        </div>

                        <div id="response-msg-action">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Submit & Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="char-card-table">
        <div class="row-align"><h2> Character Cards </h2>
            <button style="margin-left: 10px" type="button" class="btn btn-primary" data-toggle="modal"
                    data-target="#addCharCard">
                Add Card
            </button>
        </div>
        <table class="table {#table-striped#} table-responsive table-hover">
            <thead class="table-header">
            <tr>
                <th>Card ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Role</th>
                <th>Interest</th>
                <th>Quote</th>
                <th>Image</th>
            </tr>
            </thead>
            <tbody>
            {% for card in char_cards %}
                <tr>
                    <td>{{ card.card_id }}</td>
                    <td>{{ card.name }}</td>
                    <td>{{ card.age }}</td>
                    <td>{{ card.role }}</td>
                    <td>{{ card.interest }}</td>
                    <td>{{ card.quote }}</td>
                    <td>{% set filename = card.img_path.split('/')[-1] %}
                        <a target="_blank" rel="noopener noreferrer"
                           href="/api/get_card_image/{{ filename }}">{{ filename }}</a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" onclick="delete_card('char', {{ card.card_id }})">
                            Delete
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="addCharCard" tabindex="-1" role="dialog"
         aria-labelledby="addCharCardTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCharCardTitle">Add a Character Card</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="submit-char-card">
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="cardid_char" class="col-form-label">Card ID: </label>
                            <input type="number" class="form-control" id="cardid_char" required>

                            <label for="name_char" class="col-form-label">Name: </label>
                            <input type="text" class="form-control" id="name_char" required>

                            <label for="age_char" class="col-form-label">Age: </label>
                            <input type="number" accept="image/png" class="form-control" id="age_char" required>

                            <label for="role_char" class="col-form-label">Role: </label>
                            <input type="text" class="form-control" id="role_char" required>

                            <label for="interest_char" class="col-form-label">Interest: </label>
                            <input type="text" class="form-control" id="interest_char" required>

                            <label for="quote_char" class="col-form-label">Quote: </label>
                            <input type="text" class="form-control" id="quote_char" required>

                            <label for="img_char" class="col-form-label">Image: </label>
                            <input type="file" accept="image/png" class="form-control" id="img_char" required>
                        </div>

                        <div id="response-msg-char">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Submit & Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="goal-card-table">
        <div class="row-align"><h2> Goal Cards </h2>
            <button style="margin-left: 10px" type="button" class="btn btn-primary" data-toggle="modal"
                    data-target="#addGoalCard">
                Add Card
            </button>
        </div>
        <table class="table {#table-striped#} table-responsive table-hover">
            <thead class="table-header">
            <tr>
                <th>Card ID</th>
                <th>Goal</th>
                <th>Image</th>
            </tr>
            </thead>
            <tbody>
            {% for card in goal_cards %}
                <tr>
                    <td>{{ card.card_id }}</td>
                    <td>{{ card.goal }}</td>
                    <td>{% set filename = card.img_path.split('/')[-1] %}
                        <a target="_blank" rel="noopener noreferrer"
                           href="/api/get_card_image/{{ filename }}">{{ filename }}</a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger" onclick="delete_card('goal', {{ card.card_id }})">
                            Delete
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="addGoalCard" tabindex="-1" role="dialog"
         aria-labelledby="addGoalCardTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addGoalCardTitle">Add a Goal Card</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="submit-goal-card">
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="cardid_goal" class="col-form-label">Card ID: </label>
                            <input type="number" class="form-control" id="cardid_goal" required>

                            <label for="goal_goal" class="col-form-label">Goal: </label>
                            <input type="text" class="form-control" id="goal_goal" required>

                            <label for="img_goal" class="col-form-label">Image: </label>
                            <input type="file" accept="image/png" class="form-control" id="img_goal" required>
                        </div>

                        <div id="response-msg-goal">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Submit & Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalCenter">
        Reset Database
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalCenterTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Are you Sure you want to reset the Database?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="confirm-pass">
                    <div class="modal-body">
                        <p>WARNING: All games and images will be permanently deleted!</p>
                        <p>Retype your password to continue.</p>

                        <div class="form-group">
                            <label for="pass" class="col-form-label">Password:</label>
                            <input type="password" class="form-control" id="pass" required>
                        </div>

                        <div id="response-msg">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Reset Database and Reload Page</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">

    // Handle action card submission
    document.getElementById('submit-action-card').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent default form submission

        // Create a new FormData object
        const formData = new FormData();

        // Retrieve the values from the inputs
        const cardid = document.getElementById('cardid_action').value;
        const action = document.getElementById('action_action').value;
        const image = document.getElementById('img_action').files[0];

        // Add the values to the FormData object
        formData.append('cardid', cardid);
        formData.append('action', action);
        formData.append('img', image);

        // Perform AJAX POST request
        $.ajax({
            type: "POST",
            url: "/api/add_action_card",
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                console.log(result)
                location.reload()
            },
            error: function (result, status) {
                console.log(result)
                document.getElementById('response-msg-action').innerText = result.responseText
            }
        });
    });

    // Handle char card submission
    document.getElementById('submit-char-card').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent default form submission

        // Create a new FormData object
        const formData = new FormData();

        // Retrieve the values from the inputs
        const cardid = document.getElementById('cardid_char').value;
        const name = document.getElementById('name_char').value;
        const age = document.getElementById('age_char').value;
        const role = document.getElementById('role_char').value;
        const interest = document.getElementById('interest_char').value;
        const quote = document.getElementById('quote_char').value;
        const image = document.getElementById('img_char').files[0];

        // Add the values to the FormData object
        formData.append('cardid', cardid);
        formData.append('name', name);
        formData.append('age', age);
        formData.append('role', role);
        formData.append('interest', interest);
        formData.append('quote', quote);
        formData.append('img', image);

        // Perform AJAX POST request
        $.ajax({
            type: "POST",
            url: "/api/add_char_card",
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                console.log(result)
                location.reload()
            },
            error: function (result, status) {
                console.log(result)
                document.getElementById('response-msg-char').innerText = result.responseText
            }
        });
    });

    // Handle goal card submission
    document.getElementById('submit-goal-card').addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent default form submission

        // Create a new FormData object
        const formData = new FormData();

        // Retrieve the values from the inputs
        const cardid = document.getElementById('cardid_goal').value;
        const goal = document.getElementById('goal_goal').value;
        const image = document.getElementById('img_goal').files[0];

        // Add the values to the FormData object
        formData.append('cardid', cardid);
        formData.append('goal', goal);
        formData.append('img', image);

        // Perform AJAX POST request
        $.ajax({
            type: "POST",
            url: "/api/add_goal_card",
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                console.log(result)
                location.reload()
            },
            error: function (result, status) {
                console.log(result)
                document.getElementById('response-msg-goal').innerText = result.responseText
            }
        });
    });


    $("#confirm-pass").submit(function (event) {
        event.preventDefault(); //stop a full postback

        let password = $("#pass").val(); //get the entered value from the password box

        $.ajax({
            type: "POST",
            url: "/api/reset_database",
            data: JSON.stringify({"password": password}),
            contentType: "application/json",
            success: function (result) {
                location.reload()
            },
            error: function (result, status) {
                document.getElementById('response-msg').innerText = result.responseText
            }
        });
    });

    function delete_card(type, id) {

        let url;
        switch (type) {
            case "action":
                url = "/api/delete_action_card";
                break;
            case "char":
                url = "/api/delete_char_card";
                break;
            case "goal":
                url = "/api/delete_goal_card";
                break;
        }

        let fd = new FormData();
        fd.append('cardid', id);

        $.ajax({
            type: "POST",
            url: url,
            data: fd,
            processData: false,
            contentType: false,
            success: function (result) {
                location.reload()
            },
            error: function (result, status) {
                document.getElementById('response-msg').innerText = result.responseText
            }
        });
    }

</script>

</body>
</html>