(feat front) ajout du composant de rechercher

app_transport_front/src/components/Sidebar.vue

@@ -3,7 +3,9 @@
     <div class="sidebar-header">
       <div class="logo">
         <!-- <img src="/assets/images/logo.png" alt="Logo" /> -->
+        <router-link to="/" class="menu-item" :class="{ active: currentRoute === '/dashboard' }">
         <span>Transport App</span>
+        </router-link>
       </div>
     </div>
     

app_transport_front/src/components/TripSearchForm.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="trip-search-form-container">
+    <h3>Trouvez votre prochain voyage</h3>
+    <form @submit.prevent="handleSearch" class="search-form">
+      <div class="form-row">
+        <div class="form-group">
+          <label for="departure">Ville de départ</label>
+          <input type="text" id="departure" v-model="searchCriteria.departure" placeholder="Ex: Abidjan" required />
+        </div>
+        <div class="form-group">
+          <label for="arrival">Ville d'arrivée</label>
+          <input type="text" id="arrival" v-model="searchCriteria.arrival" placeholder="Ex: Yamoussoukro" required />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="departureDate">Date de départ</label>
+          <input type="date" id="departureDate" v-model="searchCriteria.departureDate" required />
+        </div>
+        <div class="form-group">
+          <label for="returnDate">Date de retour (optionnel)</label>
+          <input type="date" id="returnDate" v-model="searchCriteria.returnDate" />
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="passengers">Passagers</label>
+          <input type="number" id="passengers" v-model.number="searchCriteria.passengers" min="1" placeholder="Ex: 1" required />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <button type="submit" class="search-button">Rechercher</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const searchCriteria = ref({
+  departure: '',
+  arrival: '',
+  departureDate: '',
+  returnDate: '',
+  passengers: 1,
+});
+
+const emit = defineEmits(['search-trips']);
+
+const handleSearch = () => {
+  // Valider les données ici si nécessaire avant d'émettre
+  emit('search-trips', { ...searchCriteria.value });
+};
+</script>
+
+<style scoped>
+.trip-search-form-container {
+  background-color: #ffffff;
+  padding: 25px;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  margin: 20px auto;
+}
+
+.trip-search-form-container h3 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 20px;
+  font-size: 1.5em;
+}
+
+.search-form .form-row {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.search-form .form-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-form label {
+  margin-bottom: 5px;
+  font-weight: 500;
+  color: #555;
+  font-size: 0.9em;
+}
+
+.search-form input[type="text"],
+.search-form input[type="date"],
+.search-form input[type="number"] {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 1em;
+  transition: border-color 0.3s;
+}
+
+.search-form input[type="text"]:focus,
+.search-form input[type="date"]:focus,
+.search-form input[type="number"]:focus {
+  border-color: #4b8ef1;
+  outline: none;
+}
+
+.search-button {
+  background-color: #4b8ef1;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+  font-weight: 500;
+  transition: background-color 0.3s;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.search-button:hover {
+  background-color: #3a75c4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .search-form .form-row {
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+   .trip-search-form-container h3 {
+    font-size: 1.3em;
+  }
+   .search-button {
+    padding: 10px 15px;
+  }
+}
+</style>

app_transport_front/src/views/HomeView.vue

@@ -13,8 +13,8 @@
                 <li><a href="#top" class="active">Accueil</a></li>
                 <li><a href="#services">Services</a></li>
                 <li><a href="#about">À propos</a></li>
-                <li><a href="#pricing">Tarifs</a></li>
-                <li><a href="#newsletter">Newsletter</a></li>
+                <li><a href="#pricing">Tarifs</a></li>                
+                <li><a href="#trajets">Trajets</a></li>
                 <li><router-link to="/login">Connexion</router-link></li>
               </ul>
               <a class="menu-trigger" @click="toggleMenu">
@@ -41,23 +41,15 @@
                     </div>
                     <div class="col-lg-12">
                       <div class="white-button first-button scroll-to-section">
-                        <router-link to="/search">Rechercher un trajet</router-link>
+                        <label class="label" @click="toggleSearchForm">Rechercher un trajet</label>
                       </div>
                       <div class="white-button scroll-to-section">
                         <router-link to="/login">Se connecter</router-link>
                       </div>
                     </div>
                   </div>
-                </div>
-              </div>
-              <div class="col-lg-6">
-                <div class="right-image">
-                  <LottieAnimation
-                    path="https://assets9.lottiefiles.com/packages/lf20_jcikwtux.json"
-                    :loop="true"
-                    :autoplay="true"
-                    style="width: 100%;"
-                  />
+                  <!-- Emplacement pour le formulaire de recherche -->
+                  <TripSearchForm v-if="showSearchForm" @search-trips="handleTripSearch" class="trip-search-on-banner" />
                 </div>
               </div>
             </div>
@@ -230,6 +222,39 @@
       </div>
     </div>
 
+       <!-- Trajet disponibles -->
+       <div id="trajets" class="pricing-tables">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-8 offset-lg-2">
+              <div class="section-heading">
+              <h2><em>Trajets</em> disponibles</h2>
+            </div>
+          </div>
+          <!--fait ma boucle ici pour les trajets -->
+          <div class="flex ">
+            <div class="col">
+              <div class="pricing-item-regular">
+                <div class="icon">
+                  <i class="fa fa-car"></i>
+                </div>
+                <ul>
+                  <li>Service entre particuler de là à là</li>
+                  <!-- <li>Valable 30 jours</li> -->
+                  <li>Support standard</li>
+                  <!-- <li class="non-function">Réservation prioritaire</li>
+                  <li class="non-function">Annulation gratuite</li> -->
+                </ul>
+                <div class="border-button">
+                  <a href="#">Acheter maintenant</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Newsletter Section -->
     <div id="newsletter" class="subscribe">
       <div class="container">
@@ -278,9 +303,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+// Supprimez axios si non utilisé directement ici pour la recherche initiale
+// import axios from 'axios'
+import TripSearchForm from '@/components/TripSearchForm.vue'; // Importez le nouveau composant
 
 const router = useRouter()
 const menuActive = ref(false)
+// const isRechercheTrajet = ref(false) // Remplacé par showSearchForm
+const showSearchForm = ref(false); // Pour contrôler la visibilité du formulaire
 
 const toggleMenu = () => {
   menuActive.value = !menuActive.value
@@ -290,6 +320,25 @@ const toggleMenu = () => {
   }
 }
 
+// const rechercheTrajet = () => { // Remplacé par toggleSearchForm
+//   isRechercheTrajet.value = true
+// }
+
+const toggleSearchForm = () => {
+  showSearchForm.value = !showSearchForm.value;
+};
+
+const handleTripSearch = (criteria: any) => {
+  console.log('Critères de recherche:', criteria);
+  // Ici, vous naviguerez vers une page de résultats ou afficherez les résultats.
+  // Par exemple, en utilisant Vue Router :
+  // router.push({ name: 'SearchResults', query: criteria });
+  // Pour l'instant, nous allons juste logger les critères.
+  // Vous devrez implémenter la logique de recherche ou la navigation.
+  alert(`Recherche pour : ${criteria.departure} à ${criteria.arrival} le ${criteria.departureDate}`);
+  showSearchForm.value = false; // Optionnel: cacher le formulaire après la recherche
+};
+
 onMounted(() => {
   // Smooth scrolling pour les liens d'ancrage
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@@ -545,6 +594,18 @@ html, body {
   transition: all 0.3s;
 }
 
+.white-button .label {
+  display: inline-block;
+  padding: 12px 20px;
+  background-color: #fff;
+  color: #4b8ef1;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 30px;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+
 .white-button a:hover {
   background-color: #4b8ef1;
   color: #fff;
@@ -832,4 +893,19 @@ footer p {
     transform: scale(1.03);
   }
 }
+.trip-search-on-banner {
+  margin-top: 20px; /* Ajustez selon vos besoins */
+  animation: fadeIn 0.5s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>

docker-compose.yml

@@ -28,7 +28,7 @@ services:
     ports:
       - "5174:5173"
     environment:
-      - VITE_API_URL=http://localhost:5174
+      - VITE_API_URL=http://localhost:5173
     networks:
       - gogs-network
     # labels: