nk20/apps/family/templates/family/manage.html

{% extends "base.html" %}
{% comment %}
Copyright (C) 2018-2025 by BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n static django_tables2 %}

{% block containertype %}container-fluid{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xl-12">
        <div class="btn-group btn-group-toggle" style="width: 100%; padding: 0 0 2em 0">
            <a href="{% url "family:family_list" %}" class="btn btn-sm btn-outline-primary">
                {% trans "Families" %}
            </a>
            <a href="{% url "family:challenge_list" %}" class="btn btn-sm btn-outline-primary">
                {% trans "Challenges" %}
            </a>
            <a href="#" class="btn btn-sm btn-outline-primary active">
                {% trans "Manage" %}
            </a>
        </div>
    </div>
</div>

<div class="row mb-3">
    <div class='col-sm-5 col-xl-6' id="infos_div">
        <div class="row justify-content-center justify-content-md-end">
            {# Family details column #}
            <div class="col picture-col">
                <div class="card bg-light mb-4 text-center">
                    <a id="profile_pic_link" href="#">
                        <img src="{% static "member/img/default_picture.png" %}" id="profile_pic" alt="" class="card-img-top d-none d-sm-block">
                    </a>
                    <div class="card-body text-center text-break p-2">
                        <span id="user_note"><i class="small">{% trans "Please select a family" %}</i></span>
                    </div>
                </div>
            </div>

            {# Family selection column #}
            <div class="col-xl" id="user_select_div">
                <div class="card bg-light border-success mb-4">
                    <div class="card-header">
                        <p class="card-text font-weight-bold">
                            {% trans "Families" %}
                        </p>
                    </div>
                    <div class="card-body p-0" style="min-height:125px;">
                        <ul class="list-group list-group-flush" id="note_list"></ul>
                    </div>
                    {# User search with autocompletion #}
                    <div class="card-footer">
                        <input class="form-control mx-auto d-block" placeholder="{% trans "Name" %}" type="text" id="note" autofocus />
                    </div>
                </div>
            </div>

            {# Summary of challenges and validate button #}
            <div class="col-xl-5" id="consos_list_div">
                <div class="card bg-light border-info mb-4">
                    <div class="card-header">
                        <p class="card-text font-weight-bold">
                            {% trans "Challenges" %}
                        </p>
                    </div>
                    <div class="card-body p-0" style="min-height:125px;">
                        <ul class="list-group list-group-flush" id="consos_list"></ul>
                    </div>
                    <div class="card-footer text-center">
                        <span id="consume_all" class="btn btn-primary">
                            {% trans "Validate!" %}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {# Create family/challenge buttons #}
        <div class="card bg-light border-success mb-4">
          <h3 class="card-header font-weight-bold text-center">
              {% trans "Create a family or challenge" %}
          </h3>
        <div class="card-body text-center">
            {% if can_add_family %}
            <a class="btn btn-sm btn-primary mx-2" href="{% url "family:add_family" %}">
                {% trans "Add a family" %}
            </a>
            {% endif %}
            {% if can_add_challenge %}
            <a class="btn btn-sm btn-primary mx-2" href="{% url "family:add_challenge" %}">
                {% trans "Add a challenge" %}
            </a>
            {% endif %}
        </div>
        </div>
    </div>

    {# Buttons column #}
    <div class="col">
        <div class="card bg-light border-primary text-center mb-4">
            {# Tabs for list and search #}
            <div class="card-header">
                <ul class="nav nav-tabs nav-fill card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link font-weight-bold" data-toggle="tab" href="#list">
                            {% trans "List" %}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link font-weight-bold" data-toggle="tab" href="#search">
                            {% trans "Search" %}
                        </a>
                    </li>
                </ul>
            </div>

            {# Tabs content #}
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane" id="list">
                        <div class="d-inline-flex flex-wrap justify-content-center">
                            {% for challenge in all_challenges %}
                                    <button class="btn btn-outline-dark rounded-0 flex-fill"
                                            id="challenge{{ challenge.id }}" name="button" value="{{ challenge.name }}">
                                        {{ challenge.name }} ({{ challenge.points }} {% trans "points" %})
                                    </button>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="tab-pane" id="search">
                        <input class="form-control mx-auto d-block mb-3" placeholder="{% trans "Search challenge..." %}" type="search" id="search-input"/>
                        <div class="d-inline-flex flex-wrap justify-content-center" id="search-results">
                            {% for challenge in all_challenges %}
                                    <button class="btn btn-outline-dark rounded-0 flex-fill" hidden
                                            id="search_challenge{{ challenge.id }}" name="button" value="{{ challenge.name }}">
                                            {{ challenge.name }} ({{ challenge.points }} {% trans "points" %})
                                    </button>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

{# transaction history #}
    <div class="card">
        <div class="card-header position-relative" id="historyListHeading">
            <a class="stretched-link font-weight-bold" 
                href="{% url 'family:achievement_list' %}" >
                {% trans "Recent achievements history" %}
            </a>
        </div>
        <div id="history_list">
            {% render_table table %}
        </div>
    </div>
{% endblock %}



{% block extrajavascript %}
    <script type="text/javascript" src="{% static "family/js/achievements.js" %}"></script>
    <script type="text/javascript">
        {% for challenge in all_challenges %}
        document.getElementById("challenge{{ challenge.id }}").addEventListener("click", function() {
            addChallenge({{ challenge.id}}, "{{ challenge.name|escapejs }}", {{ challenge.points }});
        });
        {% endfor %}
    
        {% for challenge in all_challenges %}
            document.getElementById("search_challenge{{ challenge.id }}").addEventListener("click", function() {
                addChallenge({{ challenge.id}}, "{{ challenge.name|escapejs }}", {{ challenge.points }});
            });
        {% endfor %} 
    </script>
{% endblock %}