parcours définis

public/js/salle.js

+function initMap() {
+    var carte = new google.maps.Map(document.getElementById('carte'), {
+      zoom: 8,
+      center: {lat: 48.856614, lng: 2.3522219}
+    });
+    
+    var directionsService = new google.maps.DirectionsService();
+    const parcours = document.querySelectorAll('.parcours');
+    var request = {};
+    parcours.forEach(parcour => {
+        var parcour_salle_json = JSON.parse(parcour.innerText);
+            request = {
+            origin: {lat: parcour_salle_json[0].lat, lng: parcour_salle_json[0].lng},
+            destination: {lat: parcour_salle_json[2].lat, lng: parcour_salle_json[2].lng},
+            waypoints: [
+                {location: {lat: parcour_salle_json[1].lat, lng: parcour_salle_json[1].lng}}
+            ],
+            travelMode: google.maps.TravelMode.DRIVING
+        };
+    });
+    
+    
+    
+    directionsService.route(request, function(result, status) {
+      if (status == 'OK') {
+        var directionsRenderer = new google.maps.DirectionsRenderer();
+        directionsRenderer.setMap(carte);
+        directionsRenderer.setDirections(result);
+      }
+    });
+  }
+  
+  window.initMap = initMap;
+
+
+
+

public/js/ville.js

@@ -45,10 +45,12 @@ console.log(url);
 
             markerd.addListener("mouseover", function () {
               document.getElementById("resultat").innerHTML = this.title;
+              console.log(markerd.title);
             });
 
             markerd.addListener("click", function() {
               links.forEach(link => {
+                console.log(link.id);
                 if(markerd.title == link.id) {
                   window.location.href = link.innerHTML;
                 }

templates/base.html.twig

@@ -38,9 +38,13 @@
         			<li>
         				<a href="{{ path('contact') }}" class="font-bold">Nous Contacter</a>
         			</li>
-        			<li>
-        				<a href="{{ path('app_login') }}" class="px-3 md:px-4 py-2 bg-[#326273] rounded-3xl font-bold">Se connecter</a>
-        			</li>
+					<li>
+						{% if app.user %}	
+							<a href="{{ path('app_user_show', {'id': app.user.id}) }}" class="px-3 md:px-4 py-2 bg-[#326273] rounded-3xl font-bold">{{app.user.username}}</a>
+						{% else %}
+							<a href="{{ path('app_login') }}" class="px-3 md:px-4 py-2 bg-[#326273] rounded-3xl font-bold">Se connecter</a>
+						{% endif %}
+					</li>
         		</ul>
         	</nav>
         </header>

templates/salles/show.html.twig

@@ -8,7 +8,9 @@
     <h3 class="flex justify-center my-7 text-4xl">{{salle.nom}}</h3> 
     <section class="flex justify-center">
         <img class="h-48 mr-4 sm:flex-col" src="{{ salle.img }}" alt="{{ salle.alt }}" >
-        <textarea class="sm:flex-col">{{ salle.parcours }}</textarea>
+        <div class='w-[400px] h-[400px] rounded-3xl border-8 border-[#5C9EAD] ' id="carte">Carte</div>
+        <p class="hidden position">{{ salle.positionGPS }}</p>
+        <p class="hidden parcours">{{ salle.parcours }}</p>
     </section>
     <p class="mx-10 w-4/5">{{ salle.description }}</p>
 
@@ -60,6 +62,7 @@
     {{ include('salles/_delete_form.html.twig') }}
 
 </main>
+<script src="{{ asset('js/salle.js') }}"></script>
 
 <script>
     const swiper = new Swiper('.swiper', {

templates/villes/show.html.twig

@@ -8,20 +8,17 @@
     <div class='carte_accueil rounded-3xl border-8 border-[#5C9EAD] mt-8' id="carte">Carte</div> 
 </div>
 <p id="gps_coord" class="hidden">{{ ville.positionGPS }}</p>
-    {% for salles in ville.salles %}
-        {{salles.nom}}
-    {% endfor %}
 
     <div class="mt-[120px] mb-[120px]">
         <h4 class="bg-[#326273] text-white w-fit px-8 rounded-r-lg text-end py-4 font-semibold">Salles de concert</h4>
-        <div class="flex justify-center pt-[60px]">
+        <div class="flex flex-wrap justify-center  mt-8 gap-4 md:gap-12">
         {% for salles in ville.salles %}
         <a href="{{ path('app_salles_show', {'id': salles.id}) }}">
             <article class="bg-[#EEEEEE] hover:bg-[#5C9EAD] transition-colors duration-500 w-fit p-5 case">
                 <div class="bg-[url('{{ salles.img }}')] bg-cover w-60 h-60 flex items-end">
                     <h5 class="bg-[#5C9EAD] text-[#EEEEEE] w-36 py-2 mb-5 pr-2 text-end rounded-r-xl name_salle">{{ salles.nom }}</h5>
                     <p class="hidden gps" id="{{ salles.nom }}">{{ salles.positionGPS }}</p>
-                    <p class="hidden link" id="{{ salles.alt }}">{{ path('app_salles_show', {'id': salles.id}) }}</p>
+                    <p class="hidden link" id="{{ salles.nom }}">{{ path('app_salles_show', {'id': salles.id}) }}</p>
                 </div>
             </article>
         </a>