Cards for activity templates

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>
+{% 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>
-    {% endif %}
-
+</div>
+{% endif %}
 {% endblock %}
 
 {% block extrajavascript %}

apps/activity/templates/activity/activity_entry.html

@@ -1,12 +1,12 @@
 {% 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="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">
@@ -18,34 +18,36 @@
             </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 %}">
+            <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>
+</div>
 
-    <a href="{% url "activity:activity_detail" pk=activity.pk %}">
+<a href="{% url "activity:activity_detail" pk=activity.pk %}">
     <button class="btn btn-light">{% trans "Return to activity page" %}</button>
-    </a>
+</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>
+<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>
 {% endblock %}
 
 {% block extrajavascript %}
-    <script>
+<script>
     old_pattern = null;
     alias_obj = $("#alias");
 
-        function reloadTable(force=false) {
+    function reloadTable(force = false) {
         let pattern = alias_obj.val();
 
         if ((pattern === old_pattern || pattern === "") && !force)
@@ -60,7 +62,7 @@
     $(document).ready(init);
 
     function init() {
-            $(".table-row").click(function(e) {
+        $(".table-row").click(function (e) {
             let target = e.target.parentElement;
             target = $("#" + target.id);
 
@@ -77,15 +79,16 @@
                     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);
+                        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 {
+            } else {
                 let line_obj = $("#buttons_guest_" + id);
                 if (line_obj.length || target.attr('class').includes("table-success")) {
                     line_obj.remove();
@@ -94,13 +97,16 @@
 
                 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>" +
+                    "<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() {
+                let makeTransaction = function () {
                     $.post("/api/activity/entry/?format=json", {
                         csrfmiddlewaretoken: CSRF_TOKEN,
                         activity: {{ activity.id }},
@@ -108,7 +114,9 @@
                         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);
@@ -117,16 +125,24 @@
                     });
                 };
 
-                    let credit = function(credit_id, credit_name) {
-                        return function() {
-                            $.post("/api/note/transaction/transaction/",
-                                {
+                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 }})",
+                            "amount": {
+                                {
+                                    activity.activity_type.guest_entry_fee
+                                }
+                            },
+                            "reason": "Crédit " + credit_name +
+                                " (invitation {{ activity.name }})",
                             "valid": true,
-                                    "polymorphic_ctype": {{ notespecial_ctype }},
+                            "polymorphic_ctype": {
+                                {
+                                    notespecial_ctype
+                                }
+                            },
                             "resourcetype": "SpecialTransaction",
                             "source": credit_id,
                             "destination": target.attr('data-inviter'),
@@ -148,5 +164,5 @@
             }
         });
     }
-    </script>
+</script>
 {% endblock %}

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>
+<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 %}

apps/activity/templates/activity/activity_invite.html

@@ -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 %}

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 %}
     {% 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>
+</div>
 {% endblock %}

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 %}

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"""