Tabla para contener la ayuda y renderizado en templates

JugarAlPadel/gestion_reservas/gestion_reservas/admin.py

@@ -0,0 +1,10 @@
+from django.contrib import admin
+from .models import Ayuda
+
+
+class AyudaAdmin(admin.ModelAdmin):
+    list_display = ['titulo', 'descripcion', 'apartado']
+
+
+admin.site.register(Ayuda, AyudaAdmin)
+

JugarAlPadel/gestion_reservas/gestion_reservas/models.py

@@ -0,0 +1,18 @@
+from django.db import models
+
+
+class Ayuda(models.Model):
+
+    APARTADOS =[
+        ('ORG', 'Organización'),
+        ('RES', 'Reserva y cancelación'),
+        ('POZ', 'Los partidos'),
+    ]
+
+    titulo = models.CharField(max_length=100)
+    apartado = models.CharField(max_length=30, choices=APARTADOS, default='ORG')
+    descripcion = models.TextField()
+
+    def __str__(self):
+        return f"{self.titulo} - {self.apartado}"
+

JugarAlPadel/gestion_reservas/gestion_reservas/settings.py

@@ -40,6 +40,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
 
     'eventos',
+    'gestion_reservas',
     'reymotausers',
 
     'rest_framework',

JugarAlPadel/gestion_reservas/gestion_reservas/urls.py

@@ -33,6 +33,7 @@ urlpatterns = [
 
     path('', views.principal, name='principal'),
     path('entorno/', views.ver_variables_entorno, name='ver_variables_entorno'),
+    path('ayuda/', views.ayuda, name='ayuda'),
 
     path('api/proximo-evento/', views.proximo_evento, name='proximo_evento'),
     path('api/todos-los-eventos/', views.todos_los_eventos, name='todos_los_eventos'),

JugarAlPadel/gestion_reservas/gestion_reservas/views.py

@@ -11,6 +11,9 @@ from django.http import HttpResponseForbidden
 
 from eventos.models import Noticia, Evento
 from .serializers import EventoSerializer
+from .models import Ayuda
+
+import markdown  # Importa la biblioteca de markdown
 
 
 @user_passes_test(lambda u: u.is_staff)
@@ -95,3 +98,13 @@ def todos_los_eventos(request):
     serializer = EventoSerializer(eventos, many=True)  # `many=True` para serializar una lista de eventos
     return Response(serializer.data)
 
+
+def ayuda(request):
+    elementos_ayuda = Ayuda.objects.all().order_by('apartado')
+    apartados = Ayuda.APARTADOS
+
+    # Convierte la descripción de cada item a HTML usando Markdown
+    for item in elementos_ayuda:
+        item.descripcion = markdown.markdown(item.descripcion)
+
+    return render(request, 'ayuda.html', {'elementos': elementos_ayuda, 'apartados': apartados})

JugarAlPadel/gestion_reservas/templates/ayuda.html

@@ -0,0 +1,73 @@
+{% extends 'base.html' %}
+
+{% block menuapp %}
+
+{% endblock menuapp %}
+
+{% block content %}
+<div class="container-xl">
+    <style>
+        body { font-family: Arial, sans-serif; }
+        .apartado {
+            margin-bottom: 20px;
+            background-color: #ffffff;  /* Fondo blanco para el bloque del apartado */
+            padding: 15px;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .titulo-apartado { font-size: 1.5em; font-weight: bold; margin-top: 20px; }
+        
+        .item { margin-bottom: 10px; }
+        .titulo-item {
+            font-weight: bold;
+            cursor: pointer;
+            padding: 10px;
+            background-color: #ffffff;
+            border: 1px solid #ddd;
+            color: #008000; /* Verde */
+        }
+        .descripcion-item {
+            display: none;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-top: none;
+        }
+    </style>
+
+    <h1>Centro de Ayuda</h1>
+
+    {% for code, nombre in apartados %}
+        <div class="apartado">
+            <div class="titulo-apartado">{{ nombre }}</div>
+            {% for item in elementos %}
+                {% if item.apartado == code %}
+                    <div class="item">
+                        <div class="titulo-item" onclick="toggleDescripcion(this)">{{ item.titulo }}</div>
+                        <div class="descripcion-item">{{ item.descripcion|safe }}</div>
+                    </div>
+                {% endif %}
+            {% empty %}
+                <p>No hay elementos en esta sección.</p>
+            {% endfor %}
+        </div>
+    {% endfor %}
+
+    <script>
+        // Función para mostrar/ocultar la descripción al hacer clic en el título
+        function toggleDescripcion(element) {
+            const descripcion = element.nextElementSibling;
+            if (descripcion.style.display === "none" || descripcion.style.display === "") {
+                descripcion.style.display = "block";
+            } else {
+                descripcion.style.display = "none";
+            }
+        }
+    </script>
+
+    <div class="row g-3 mb-4 align-items-center justify-content-between">
+        <div class="col-auto">
+            <a class="btn app-btn-secondary" href="{% url 'principal' %}">Volver al inicio</a>
+        </div>
+    </div>
+</div>
+{% endblock %}

JugarAlPadel/gestion_reservas/templates/base.html

@@ -127,7 +127,7 @@
 
                     <li class="nav-item">
                         <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
-                        <a class="nav-link" href="{% url 'eventos:ayuda' %}">
+                        <a class="nav-link" href="{% url 'ayuda' %}">
                            <span class="nav-icon">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>

JugarAlPadel/requirements.txt

@@ -12,3 +12,4 @@ sqlparse==0.5.1
 typing_extensions==4.12.2
 django-calculation==1.0.0
 djangorestframework==3.15.2
+Markdown==3.7