Comment écrire ce modèle HTML Django plus efficacement ?

Question

J'ai une application Django où les utilisateurs peuvent créer leurs listes et ajouter des tâches à faire. Je veux ajouter une nouvelle page qui montrera les tâches qui ont des dates d'échéance. Par exemple, dans la page, il y aura une section appelée "Plus tôt" qui présentera les tâches dont la date d'échéance est dépassée. Les autres sections seraient "Aujourd'hui", "Demain" et "Plus tard". Je vais maintenant montrer ma classe de vue et mon code HTML et expliquer mon problème.

Vue basée sur une classe pour gérer cette page :

class ToDoNextUpView(LoginRequiredMixin, ListView):
    model = ToDo
    template_name = "ToDo/next_up.html"
    ordering = ["-due_date"]
    context_object_name = "todos"

    def get_queryset(self):
        query_set = []
        for todo in ToDo.objects.filter(creator=self.request.user, is_checked=False):
            if todo.due_date is not None:
                query_set.append(todo)

        return query_set

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        today = datetime.datetime.now(datetime.timezone.utc)
        tomorrow = today + datetime.timedelta(days=1)

        todos_earlier = []
        todos_today = []
        todos_tomorrow = []
        todos_later = []

        for todo in ToDo.objects.filter(creator=self.request.user, is_checked=False):
            if todo.due_date is not None:
                if todo.due_date.day == today.day and todo.due_date.month == today.month and todo.due_date.year == today.year:
                    todos_today.append(todo)
                elif todo.due_date.day == tomorrow.day and todo.due_date.month == tomorrow.month and todo.due_date.year == tomorrow.year:
                    todos_tomorrow.append(todo)
                elif todo.due_date < today:
                    todos_earlier.append(todo)
                elif todo.due_date > tomorrow:
                    todos_later.append(todo)

        context["todos_earlier"] = todos_earlier
        context["todos_today"] = todos_today
        context["todos_tomorrow"] = todos_tomorrow
        context["todos_later"] = todos_later

        return context

Et ceci est next_up.html

{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}

{% if todos_earlier %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Earlier</h1></center>
    <br>
    {% for todo in todos_earlier %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:red">
                    Was due on: {{ todo.due_date|date:"F d" }}
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% if todos_today %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Today</h1></center>
    <br>
    {% for todo in todos_today %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:blue">
                    Due today
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% if todos_tomorrow %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Tomorrow</h1></center>
    <br>
    {% for todo in todos_tomorrow %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:green">
                    Due tomorrow
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% if todos_later %}
    <br>
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Coming up later</h1></center>
    <br>
    {% for todo in todos_later %}
        <article class="content-section">
            <div class="media-body full-content">
                <h2>
                    <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                        <i class="fa fa-check"></i>
                    </button> 
                    <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                    <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i>
                    </button>
                    {% if not todo.important %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-secondary">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                        {% else %}
                        <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                            type="submit" class="btn btn-warning">
                            <span aria-hidden="true"><i class="fas fa-star"></i></span>
                        </button>
                    {% endif %}
                </h2>
                <h3 style="color:seagreen">
                    Due on: {{ todo.due_date|date:"F d" }}
                </h3>
            </div>
        </article>
    {% endfor %}
{% endif %}

{% endblock content %}

Comme vous pouvez le constater, j'ai écrit presque exactement le même code HTML pour chacune de ces sections. Bien que cela fonctionne techniquement, je ne pourrais jamais vivre avec moi-même. Je dois écrire ces boutons de contrôle quatre fois, ces boutons d'étoile quatre fois et tout le reste quatre fois. Cela ne peut pas être bon.

De plus, dans ma vue, j'ai fait un codage peu soigné où j'ai vérifié la date, le mois et l'année, ce qui ne semblait pas correct. Mais je suis conscient que vérifier seulement le jour n'est pas bon puisque les mêmes jours peuvent être des mois différents. Et pour être clair, ce sont des objets DateTime donc je ne peux pas simplement les égaliser car les secondes précises ne correspondront pas. Mais je suppose que cela pourrait quand même être acceptable. Ma question principale ici est de savoir quels changements je dois apporter à mon code HTML et Python pour pouvoir afficher toutes les sections dans une seule boucle for (ou peut-être des boucles imbriquées mais je ne veux pas faire quatre fois le même code).

Merci.

Answer 1

Je pense que vous devriez utiliser la balise de modèle intégrée de Django. inclure pour chaque section todo et pour ces inclusions, créez un fichier pour chacune d'entre elles en étendant un fichier générique de base avec la logique partagée.

Je montre ci-dessous un exemple qui pourrait être utilisé, maintenant au lieu d'écrire 4 fois le code, il suffit d'éditer todo_generic.html

next_up.html

{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}

{% if todos_earlier %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Earlier</h1></center>
    <br>
    {% include "todos_earlier.html" with todos=todos_earlier %}
{% endif %}

{% if todos_today %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Today</h1></center>
    <br>
    {% include "todos_today.html" with todos=todos_today %}
{% endif %}

{% if todos_tomorrow %}
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">For Tomorrow</h1></center>
    <br>
    {% include "todos_tomorrow.html" with todos=todos_tomorrow %}
{% endif %}

{% if todos_later %}
    <br>
    <center><h1 style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 10ch; background-color: royalblue;">Coming up later</h1></center>
    <br>
    {% include "todos_later.html" with todos=todos_later %}
{% endif %}

{% endblock content %}

todo_generic.html

{% for todo in todos %}
    <article class="content-section">
        <div class="media-body full-content">
            <h2>
                <button onclick="location.href='{% url 'todo-check' todo.pk %}'" class="btn btn-outline-success">
                    <i class="fa fa-check"></i>
                </button> 
                <a style="overflow: hidden; text-overflow: ellipsis;" href="{% url 'todo-detailed' todo.title todo.pk %}" class="article-title">  {{ todo.title }}</a> 
                <button data-toggle="modal" data-target="#exampleModalCenter{{ todo.pk }}" style="float: right;" class="btn btn-outline-danger">
                    <i class="fas fa-trash"></i>
                </button>
                {% if not todo.important %}
                    <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                        type="submit" class="btn btn-secondary">
                        <span aria-hidden="true"><i class="fas fa-star"></i></span>
                    </button>
                {% else %}
                    <button style="float: right; margin-right: 5px;" onclick="location.href='{% url 'todo-toggle-important' todo.pk %}'"
                        type="submit" class="btn btn-warning">
                        <span aria-hidden="true"><i class="fas fa-star"></i></span>
                    </button>
                {% endif %}
            </h2>
            {% block due %}{% endblock %}
        </div>
    </article>
{% endfor %}

todos_earlier.html

{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:red">
    Was due on: {{ todo.due_date|date:"F d" }}
</h3>
{% endblock due %}

todos_today.html

{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:blue">
    Due today
</h3>
{% endblock due %}

todos_tomorrow.html

{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:green">
    Due tomorrow
</h3>
{% endblock due %}

todos_later.html

{% extends "todo_generic.html" %}
{% block due %}
<h3 style="color:seagreen">
    Due on: {{ todo.due_date|date:"F d" }}
</h3>
{% endblock due %}