emus/templates/games/gamesystem_detail.html

{% extends "base.html" %}
{% block page_title %}{{object.name}}{% endblock %}

{% block title %}{{object.name}}{% endblock %}

{% block extra_head %}
    <script>
    $('#library-update-form').on('submit', function(event){
        event.preventDefault();
        console.log("form submitted!")  // sanity check
        $.ajax({
            url : "library/update/",
            type : "GET",
            // handle a successful response
            success : function(json) {
                $('#library-update-form').html("<button id='library-update-btn' class='btn btn-secondary my-2 my-sm-0' type='submit' disabled>Update</button>");
                console.log(json); // log the returned json to the console
            },

            // handle a non-successful response
            error : function(xhr,errmsg,err) {
                console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
            }
        });
    });
    </script>
{% endblock %}

{% block content %}
    <h4>Browsing {{object_list.count}} games</h4>

    <form id="library-update-form" class="form-inline my-2 my-lg-0" method="get" action="{% url 'games:game_library_update' %}?game_systems={{object.retropie_slug}}">
    <button id="library-update-btn" class="btn btn-warning my-2 my-sm-0" type="submit" {% if update_in_progress %}disabled{% endif %}>Update {{object.name}}</button>
    </form>

     <div class="d-flex flex-column">
        <div class="image-grid-container">
        {% for  game in object_list %}
            {% include "games/_game_card.html" %}
        {% endfor %}
        </div>
     </div>

     {% include "games/_pagination.html" %}
{% endblock %}