Ajout Agenda.affiche

beesgospel/migrations/0012_concertitem.py

@@ -19,5 +19,6 @@ class Migration(migrations.Migration):
                 ('chant', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='beesgospel.chant')),
                 ('concert', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='programme', to='beesgospel.agenda')),
             ],
+            options={'ordering': ['ordre']},
         ),
     ]

beesgospel/migrations/0013_agenda_affiche.py

@@ -0,0 +1,16 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('beesgospel', '0012_concertitem'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='agenda',
+            name='affiche',
+            field=models.ImageField(blank=True, help_text='Sous forme d’image', upload_to='affiches', verbose_name='Affiche'),
+        ),
+    ]

beesgospel/models.py

@@ -55,6 +55,9 @@ class Agenda(models.Model):
     date_heure = models.DateTimeField("Date/heure")
     infos = models.TextField("Informations", blank=True)
     infos_internes = models.TextField("Informations internes", blank=True)
+    affiche = models.ImageField(
+        "Affiche", blank=True, upload_to="affiches", help_text="Sous forme d’image"
+    )
     statut = models.CharField("Statut", max_length=10, choices=Statuts, help_text=(
         "Un évènement privé ou une répétition ne sont visibles que pour les membres de "
         "l’association, tandis qu'un évènement public est visible de tous."

beesgospel/static/css/main.css

@@ -111,6 +111,7 @@ tr.editable:hover .edit-button, tr.editable:hover .delete-button { display: inli
 }
 .date_agenda { background-color: #ddd; text-decoration: none; }
 .titre_agenda { font-size: 1.5rem; }
+.affiche img { max-width: 100%; cursor: pointer; }
 .prive {
   background-image: linear-gradient(45deg, #333333 41.67%, #6b0c0c 41.67%, #6b0c0c 50%, #333333 50%, #333333 91.67%, #6b0c0c 91.67%, #6b0c0c 100%);
   background-size: 33.94px 33.94px;

beesgospel/static/js/main.js

@@ -27,6 +27,11 @@ window.addEventListener('DOMContentLoaded', () => {
         audio.currentTime = 0;
         audio.src = "";
     })
+    attachHandlerSelector(document, ".affiche img", "click", (ev) => {
+        const src = ev.target.src;
+        document.querySelector("#modal-img").src = ev.target.src;
+        new bootstrap.Modal('#imagemodal').show();
+    });
     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
 })

common/urls.py

@@ -35,6 +35,7 @@ urlpatterns = [
     path("membres/documents/", views.MediaView.as_view(prive=True), name="docs-membres"),
 
     path("media/chants/<path:path>", views.MediaServeView.as_view(subdir="chants")),
+    path("media/affiches/<path:path>", views.MediaServeView.as_view(subdir="affiches")),
 
     path(
         "sitemap.xml", sitemap, {"sitemaps": sitemaps},

templates/agenda.html

@@ -8,13 +8,26 @@
 {% for even in object_list %}
     <div id="event-{{ even.pk }}" class="{% if even.statut != 'repet' %}border-bottom border-danger {% endif %}mt-3 {{ even.statut }}">
         <div class="row">
-            <div class="col col-12 col-sm-4 col-lg-2 text-black rounded align-self-center text-center fw-bold pt-2 pb-2 date_agenda">
-                {{ even.date_heure|date:'D d F à H:i' }}
+            <div class="col-md-10">
+                <div class="row">
+                    <div class="col col-12 col-sm-4 col-lg-2 text-black rounded align-self-center text-center fw-bold pt-2 pb-2 date_agenda">
+                        {{ even.date_heure|date:'D d F à H:i' }}
+                    </div>
+                    <div class="col col-12 col-sm-8 col-lg-10 titre_agenda">{{ even.titre }}{% if even.statut == 'repet' %} - {{ even.lieu }}{% endif %}</div>
+                </div>
+                {% if even.statut != 'repet' %}
+                <div class="mt-2 mb-2 lieu_agenda">{{ even.lieu }}</div>
+                {% endif %}
+                {% if even.infos %}
+                <div class="pb-3">{{ even.infos|linebreaksbr }}</div>
+                {% endif %}
             </div>
-            <div class="col col-12 col-sm-8 col-lg-10 titre_agenda">{{ even.titre }}{% if even.statut == 'repet' %} - {{ even.lieu }}{% endif %}</div>
+            {% if even.affiche %}
+            <div class="col-md-2 affiche">
+                <img src="{{ even.affiche.url }}">
+            </div>
+            {% endif %}
         </div>
-        {% if even.statut != 'repet' %}<div class="mt-2 mb-2 lieu_agenda">{{ even.lieu }}</div>{% endif %}
-        {% if even.infos %}<div class="pb-3">{{ even.infos|linebreaksbr }}</div>{% endif %}
         {% if user.is_authenticated %}
             {% if even.infos_internes %}<div class="infos_internes pb-3">{{ even.infos_internes|linebreaksbr }}</div>{% endif %}
             {% if even.programme.all %}
@@ -36,4 +49,16 @@
         {% endif %}
     </div>
 {% endfor %}
+
+<div class="modal fade" id="imagemodal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <img id="modal-img" src="">
+        </div>
+    </div>
+</div>
+
 {% endblock %}