View (#8)

Création de la page species et detail specie

Co-authored-by: Clément Laporte <Clement.LAPORTE@etu.uca.fr>
Co-authored-by: clfreville2 <clement.freville2@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/clement.freville2/herbarium/pulls/8
Co-authored-by: Clément LAPORTE <clement.laporte@etu.uca.fr>
Co-committed-by: Clément LAPORTE <clement.laporte@etu.uca.fr>

templates/species/detail.html.twig

@@ -0,0 +1,43 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Herbarium - Détail de l'espèces{% endblock %}
+
+{% block body %}
+    <style>
+        .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+        .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+    </style>
+
+    <div class="example-wrapper">
+        <h1>{{ specie.vernacularName }}</h1>
+        <p>
+            🔬 Nom Scientifique : {{ specie.scientificName }}<br/>
+            📍 Region : {{ specie.region }}
+        </p>
+        <div>
+            <h2>Posts :</h2>
+
+            {% for post in specie.posts %}
+                <div>
+                    <dt>
+                        <h3>
+                            <a href="">
+                                📅 {{ post.publicationDate | date }}
+                            </a>
+                        </h3>
+                    </dt>
+                    <dd>
+                        📍 géolocalisation :<br/>
+                        - Longitude : {{ post.longitude }}<br/>
+                        - Latitude : {{ post.latitude }}<br/>
+                        - Altitude : {{ post.altitude }}<br/><br/>
+
+                        💬 Commentaire :<br/>
+                            - {{ post.getCommentary }}
+                    </dd>
+                </div>
+            {% endfor %}
+        </div>
+
+    </div>
+{% endblock %}

templates/species/index.html.twig

@@ -0,0 +1,29 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Herbarium - Espèces{% endblock %}
+
+{% block body %}
+<style>
+    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
+    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
+</style>
+
+<div class="example-wrapper">
+    <h1>Liste des espèces</h1>
+
+    <dl>
+        {% for specie in species %}
+            <dt>
+                <a href={{ url('app_species') ~ '/' ~ specie.getId }}>
+                🌿 {{ specie.getVernacularName }}
+                </a>
+            </dt>
+            <dd >
+                🔬 Nom Scientifique : {{ specie.getScientificName }}<br/>
+                📍 Region : {{ specie.getRegion }}
+            </dd><br/>
+        {% endfor %}
+    </dl>
+
+</div>
+{% endblock %}