From 22a0af640e98a94945b2cef29cc19634988fc41c Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Tue, 25 Aug 2020 17:39:30 +0200
Subject: [PATCH] Cards for activity templates

---
 .../templates/activity/activity_detail.html   |  29 ++-
 .../templates/activity/activity_entry.html    | 244 ++++++++++--------
 .../templates/activity/activity_form.html     |  28 +-
 .../templates/activity/activity_invite.html   |  15 --
 .../templates/activity/activity_list.html     |  69 ++---
 .../{ => includes}/activity_info.html         |  10 +-
 apps/activity/views.py                        |   2 +-
 7 files changed, 209 insertions(+), 188 deletions(-)
 delete mode 100644 apps/activity/templates/activity/activity_invite.html
 rename apps/activity/templates/activity/{ => includes}/activity_info.html (95%)

diff --git a/apps/activity/templates/activity/activity_detail.html b/apps/activity/templates/activity/activity_detail.html
index 37dcb9a4..9cfc7640 100644
--- a/apps/activity/templates/activity/activity_detail.html
+++ b/apps/activity/templates/activity/activity_detail.html
@@ -1,22 +1,23 @@
 {% extends "base.html" %}
-{% load static %}
-{% load i18n %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n perms %}
 {% load render_table from django_tables2 %}
-{% load pretty_money %}
-{% load perms %}
 
 {% block content %}
+{% include "activity/includes/activity_info.html" %}
 
-    {% include "activity/activity_info.html" %}
-
-    {% if guests.data %}
-        <hr>
-        <h2>{% trans "Guests list" %}</h2>
-        <div id="guests_table">
-            {% render_table guests %}
-        </div>
-    {% endif %}
-
+{% if guests.data %}
+<div class="card bg-white mb-3">
+    <h3 class="card-header text-center">
+        {% trans "Guests list" %}
+    </h3>
+    <div id="guests_table">
+        {% render_table guests %}
+    </div>
+</div>
+{% endif %}
 {% endblock %}
 
 {% block extrajavascript %}
diff --git a/apps/activity/templates/activity/activity_entry.html b/apps/activity/templates/activity/activity_entry.html
index cca044e2..806b486e 100644
--- a/apps/activity/templates/activity/activity_entry.html
+++ b/apps/activity/templates/activity/activity_entry.html
@@ -1,152 +1,168 @@
 {% extends "base.html" %}
-{% load static %}
-{% load i18n %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load static i18n pretty_money perms %}
 {% load render_table from django_tables2 %}
-{% load pretty_money %}
-{% load perms %}
 
 {% 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" data-toggle="buttons">
-                <a href="{% url "note:transfer" %}#transfer" class="btn btn-sm btn-outline-primary">
-                    {% trans "Transfer" %}
-                </a>
-                {% if "note.notespecial"|not_empty_model_list %}
-                    <a href="{% url "note:transfer" %}#credit" class="btn btn-sm btn-outline-primary">
-                        {% trans "Credit" %}
-                    </a>
-                {% endif %}
-                {% for a in activities_open %}
-                    <a href="{% url "activity:activity_entry" pk=a.pk %}" class="btn btn-sm btn-outline-primary{% if a.pk == activity.pk %} active{% endif %}">
-                        {% trans "Entries" %} {{ a.name }}
-                    </a>
-                {% endfor %}
-            </div>
+<div class="row">
+    <div class="col-xl-12">
+        <div class="btn-group btn-group-toggle" style="width: 100%; padding: 0 0 2em 0" data-toggle="buttons">
+            <a href="{% url "note:transfer" %}#transfer" class="btn btn-sm btn-outline-primary">
+                {% trans "Transfer" %}
+            </a>
+            {% if "note.notespecial"|not_empty_model_list %}
+            <a href="{% url "note:transfer" %}#credit" class="btn btn-sm btn-outline-primary">
+                {% trans "Credit" %}
+            </a>
+            {% endif %}
+            {% for a in activities_open %}
+            <a href="{% url "activity:activity_entry" pk=a.pk %}"
+                class="btn btn-sm btn-outline-primary{% if a.pk == activity.pk %} active{% endif %}">
+                {% trans "Entries" %} {{ a.name }}
+            </a>
+            {% endfor %}
         </div>
     </div>
+</div>
 
-    <a href="{% url "activity:activity_detail" pk=activity.pk %}">
-        <button class="btn btn-light">{% trans "Return to activity page" %}</button>
-    </a>
+<a href="{% url "activity:activity_detail" pk=activity.pk %}">
+    <button class="btn btn-light">{% trans "Return to activity page" %}</button>
+</a>
 
-    <input id="alias" type="text" class="form-control" placeholder="Nom/note ...">
+<input id="alias" type="text" class="form-control" placeholder="Nom/note ...">
 
-    <hr>
+<hr>
 
-    <div id="entry_table">
-        <h2 class="text-center">{{ entries.count }} {% if entries.count >= 2 %}{% trans "entries" %}{% else %}{% trans "entry" %}{% endif %}</h2>
-        {% render_table table %}
-    </div>
+<div id="entry_table">
+    <h2 class="text-center">{{ entries.count }}
+        {% if entries.count >= 2 %}{% trans "entries" %}{% else %}{% trans "entry" %}{% endif %}</h2>
+    {% render_table table %}
+</div>
 {% endblock %}
 
 {% block extrajavascript %}
-    <script>
-        old_pattern = null;
-        alias_obj = $("#alias");
+<script>
+    old_pattern = null;
+    alias_obj = $("#alias");
 
-        function reloadTable(force=false) {
-            let pattern = alias_obj.val();
+    function reloadTable(force = false) {
+        let pattern = alias_obj.val();
 
-            if ((pattern === old_pattern || pattern === "") && !force)
-                return;
+        if ((pattern === old_pattern || pattern === "") && !force)
+            return;
 
-            $("#entry_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #entry_table", init);
-            refreshBalance();
-        }
+        $("#entry_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #entry_table", init);
+        refreshBalance();
+    }
 
-        alias_obj.keyup(reloadTable);
+    alias_obj.keyup(reloadTable);
 
-        $(document).ready(init);
+    $(document).ready(init);
 
-        function init() {
-            $(".table-row").click(function(e) {
-                let target = e.target.parentElement;
-                target = $("#" + target.id);
+    function init() {
+        $(".table-row").click(function (e) {
+            let target = e.target.parentElement;
+            target = $("#" + target.id);
 
-                let type = target.attr("data-type");
-                let id = target.attr("data-id");
-                let last_name = target.attr("data-last-name");
-                let first_name = target.attr("data-first-name");
+            let type = target.attr("data-type");
+            let id = target.attr("data-id");
+            let last_name = target.attr("data-last-name");
+            let first_name = target.attr("data-first-name");
 
-                if (type === "membership") {
+            if (type === "membership") {
+                $.post("/api/activity/entry/?format=json", {
+                    csrfmiddlewaretoken: CSRF_TOKEN,
+                    activity: {{ activity.id }},
+                    note: id,
+                    guest: null
+                }).done(function () {
+                    if (target.hasClass("table-info"))
+                        addMsg(
+                            "Entrée effectuée, mais attention : la personne n'est plus adhérente Kfet.",
+                            "warning", 10000);
+                    else
+                        addMsg("Entrée effectuée !", "success", 4000);
+                    reloadTable(true);
+                }).fail(function (xhr) {
+                    errMsg(xhr.responseJSON, 4000);
+                });
+            } else {
+                let line_obj = $("#buttons_guest_" + id);
+                if (line_obj.length || target.attr('class').includes("table-success")) {
+                    line_obj.remove();
+                    return;
+                }
+
+                let tr = "<tr class='text-center'>" +
+                    "<td id='buttons_guest_" + id + "' style='table-danger center' colspan='5'>" +
+                    "<button id='transaction_guest_" + id +
+                    "' class='btn btn-secondary'>Payer avec la note de l'hôte</button> " +
+                    "<button id='transaction_guest_" + id +
+                    "_especes' class='btn btn-secondary'>Payer en espèces</button> " +
+                    "<button id='transaction_guest_" + id +
+                    "_cb' class='btn btn-secondary'>Payer en CB</button></td>" +
+                    "<tr>";
+                $(tr).insertAfter(target);
+
+                let makeTransaction = function () {
                     $.post("/api/activity/entry/?format=json", {
                         csrfmiddlewaretoken: CSRF_TOKEN,
                         activity: {{ activity.id }},
-                        note: id,
-                        guest: null
+                        note: target.attr("data-inviter"),
+                        guest: id
                     }).done(function () {
                         if (target.hasClass("table-info"))
-                            addMsg("Entrée effectuée, mais attention : la personne n'est plus adhérente Kfet.", "warning", 10000);
+                            addMsg(
+                                "Entrée effectuée, mais attention : la personne n'est plus adhérente Kfet.",
+                                "warning", 10000);
                         else
                             addMsg("Entrée effectuée !", "success", 4000);
                         reloadTable(true);
-                    }).fail(function(xhr) {
+                    }).fail(function (xhr) {
                         errMsg(xhr.responseJSON, 4000);
                     });
-                }
-                else {
-                    let line_obj = $("#buttons_guest_" + id);
-                    if (line_obj.length || target.attr('class').includes("table-success")) {
-                        line_obj.remove();
-                        return;
-                    }
+                };
 
-                    let tr = "<tr class='text-center'>" +
-                        "<td id='buttons_guest_" + id + "' style='table-danger center' colspan='5'>" +
-                        "<button id='transaction_guest_" + id + "' class='btn btn-secondary'>Payer avec la note de l'hôte</button> " +
-                        "<button id='transaction_guest_" + id + "_especes' class='btn btn-secondary'>Payer en espèces</button> " +
-                        "<button id='transaction_guest_" + id + "_cb' class='btn btn-secondary'>Payer en CB</button></td>" +
-                        "<tr>";
-                    $(tr).insertAfter(target);
-
-                    let makeTransaction = function() {
-                        $.post("/api/activity/entry/?format=json", {
-                            csrfmiddlewaretoken: CSRF_TOKEN,
-                            activity: {{ activity.id }},
-                            note: target.attr("data-inviter"),
-                            guest: id
+                let credit = function (credit_id, credit_name) {
+                    return function () {
+                        $.post("/api/note/transaction/transaction/", {
+                            "csrfmiddlewaretoken": CSRF_TOKEN,
+                            "quantity": 1,
+                            "amount": {
+                                {
+                                    activity.activity_type.guest_entry_fee
+                                }
+                            },
+                            "reason": "Crédit " + credit_name +
+                                " (invitation {{ activity.name }})",
+                            "valid": true,
+                            "polymorphic_ctype": {
+                                {
+                                    notespecial_ctype
+                                }
+                            },
+                            "resourcetype": "SpecialTransaction",
+                            "source": credit_id,
+                            "destination": target.attr('data-inviter'),
+                            "last_name": last_name,
+                            "first_name": first_name,
+                            "bank": ""
                         }).done(function () {
-                            if (target.hasClass("table-info"))
-                                addMsg("Entrée effectuée, mais attention : la personne n'est plus adhérente Kfet.", "warning", 10000);
-                            else
-                                addMsg("Entrée effectuée !", "success", 4000);
-                            reloadTable(true);
+                            makeTransaction();
+                            reset();
                         }).fail(function (xhr) {
                             errMsg(xhr.responseJSON, 4000);
                         });
                     };
+                };
 
-                    let credit = function(credit_id, credit_name) {
-                        return function() {
-                            $.post("/api/note/transaction/transaction/",
-                                {
-                                    "csrfmiddlewaretoken": CSRF_TOKEN,
-                                    "quantity": 1,
-                                    "amount": {{ activity.activity_type.guest_entry_fee }},
-                                    "reason": "Crédit " + credit_name + " (invitation {{ activity.name }})",
-                                    "valid": true,
-                                    "polymorphic_ctype": {{ notespecial_ctype }},
-                                    "resourcetype": "SpecialTransaction",
-                                    "source": credit_id,
-                                    "destination": target.attr('data-inviter'),
-                                    "last_name": last_name,
-                                    "first_name": first_name,
-                                    "bank": ""
-                                }).done(function () {
-                                makeTransaction();
-                                reset();
-                            }).fail(function (xhr) {
-                                errMsg(xhr.responseJSON, 4000);
-                            });
-                        };
-                    };
-
-                    $("#transaction_guest_" + id).click(makeTransaction);
-                    $("#transaction_guest_" + id + "_especes").click(credit(1, "espèces"));
-                    $("#transaction_guest_" + id + "_cb").click(credit(2, "carte bancaire"));
-                }
-            });
-        }
-    </script>
-{% endblock %}
+                $("#transaction_guest_" + id).click(makeTransaction);
+                $("#transaction_guest_" + id + "_especes").click(credit(1, "espèces"));
+                $("#transaction_guest_" + id + "_cb").click(credit(2, "carte bancaire"));
+            }
+        });
+    }
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/activity/templates/activity/activity_form.html b/apps/activity/templates/activity/activity_form.html
index 99c254e3..6bfd4f34 100644
--- a/apps/activity/templates/activity/activity_form.html
+++ b/apps/activity/templates/activity/activity_form.html
@@ -1,11 +1,21 @@
 {% extends "base.html" %}
-{% load static %}
-{% load i18n %}
-{% load crispy_forms_tags %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n crispy_forms_tags %}
+{% block contenttitle %}{% endblock %}
+
 {% block content %}
-<form method="post">
-{% csrf_token %}
-{{form|crispy}}
-<button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
-</form>
-{% endblock %}
+<div class="card bg-white mb-3">
+  <h3 class="card-header text-center">
+    {{ title }}
+  </h3>
+  <div class="card-body">
+    <form method="post">
+      {% csrf_token %}
+      {{ form|crispy }}
+      <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+    </form>
+  </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/activity/templates/activity/activity_invite.html b/apps/activity/templates/activity/activity_invite.html
deleted file mode 100644
index 8bdb1965..00000000
--- a/apps/activity/templates/activity/activity_invite.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% extends "base.html" %}
-{% load render_table from django_tables2 %}
-{% load i18n crispy_forms_tags %}
-{% block content %}
-    <form method="post">
-        {% csrf_token %}
-        {{ form|crispy }}
-        <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
-    </form>
-{% endblock %}
-
-{% block extrajavascript %}
-    <script type="text/javascript">
-    </script>
-{% endblock %}
diff --git a/apps/activity/templates/activity/activity_list.html b/apps/activity/templates/activity/activity_list.html
index 3c2add37..0a1eb4de 100644
--- a/apps/activity/templates/activity/activity_list.html
+++ b/apps/activity/templates/activity/activity_list.html
@@ -1,41 +1,50 @@
 {% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
 {% load render_table from django_tables2 %}
-{% load i18n crispy_forms_tags%}
-{% block content %}
-    {% if started_activities %}
-        <h2>{% trans "Current activity" %}</h2>
-        {% for activity in started_activities %}
-            {% include "activity/activity_info.html" %}
-            <hr>
-        {% endfor %}
-    {% endif %}
+{% load i18n %}
+{% block contenttitle %}{% endblock %}
 
-    <h2>{% trans "Upcoming activities" %}</h2>
+{% block content %}
+{% if started_activities %}
+<div class="card bg-info mb-3">
+    <h3 class="card-header text-center">
+        {% trans "Current activity" %}
+    </h3>
+    <div class="card-body">
+        {% for activity in started_activities %}
+        {% include "activity/includes/activity_info.html" %}
+        {% endfor %}
+    </div>
+</div>
+{% endif %}
+
+<div class="card bg-light mb-3">
+    <h3 class="card-header text-center">
+        {% trans "Upcoming activities" %}
+    </h3>
     {% if upcoming.data %}
-        {% render_table upcoming %}
+    {% render_table upcoming %}
     {% else %}
+    <div class="card-body">
         <div class="alert alert-warning">
             {% trans "There is no planned activity." %}
         </div>
+    </div>
     {% endif %}
+    <div class="card-footer">
+        <a class="btn btn-sm btn-success" href="{% url 'activity:activity_create' %}" data-turbolinks="false">
+            <i class="fa fa-calendar-plus-o" aria-hidden="true"></i>
+            {% trans 'New activity' %}
+        </a>
+    </div>
+</div>
 
-    <a class="btn btn-primary" href="{% url 'activity:activity_create' %}" data-turbolinks="false">{% trans 'New activity' %}</a>
-
-    <hr>
-
-    <h2>{% trans "All activities" %}</h2>
-
+<div class="card bg-light mb-3">
+    <h3 class="card-header text-center">
+        {% trans "All activities" %}
+    </h3>
     {% render_table table %}
-{% endblock %}
-
-{% block extrajavascript %}
-<script type="text/javascript">
-
-$(document).ready(function($) {
-    $(".table-row").click(function() {
-        window.document.location = $(this).data("href");
-    });
-});
-
-</script>
-{% endblock %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/apps/activity/templates/activity/activity_info.html b/apps/activity/templates/activity/includes/activity_info.html
similarity index 95%
rename from apps/activity/templates/activity/activity_info.html
rename to apps/activity/templates/activity/includes/activity_info.html
index ca2988b5..320bbb51 100644
--- a/apps/activity/templates/activity/activity_info.html
+++ b/apps/activity/templates/activity/includes/activity_info.html
@@ -1,10 +1,10 @@
-{% load i18n %}
-{% load perms %}
-{% load pretty_money %}
-
+{% comment %}
+SPDX-License-Identifier: GPL-3.0-or-later
+{% endcomment %}
+{% load i18n perms pretty_money %}
 {% url 'activity:activity_detail' activity.pk as activity_detail_url %}
 
-<div id="activity_info" class="card bg-light shadow">
+<div id="activity_info" class="card bg-light shadow mb-3">
     <div class="card-header text-center">
         <h4>
             {% if request.path_info != activity_detail_url %}
diff --git a/apps/activity/views.py b/apps/activity/views.py
index db318fdc..bd3d651b 100644
--- a/apps/activity/views.py
+++ b/apps/activity/views.py
@@ -117,7 +117,7 @@ class ActivityInviteView(ProtectQuerysetMixin, ProtectedCreateView):
     """
     model = Guest
     form_class = GuestForm
-    template_name = "activity/activity_invite.html"
+    template_name = "activity/activity_form.html"
 
     def get_sample_object(self):
         """ Creates a standart Guest binds to the Activity"""