From 42ec68178a3efb7ffd9eba33922a08b36aab6ef3 Mon Sep 17 00:00:00 2001
From: Yasder5 <102179445+Yasder5@users.noreply.github.com>
Date: Mon, 2 Mar 2026 21:01:46 +0100
Subject: [PATCH] jolie beau et ajax

---
 .env                       |   3 +-
 .gitignore                 |   2 +-
 assests/css/style.css      |  13 ++++-
 env                        |   2 +-
 models/ProjectModel.php    |   2 +-
 views/_partial/apigeo.tpl  | 112 +++++++++++++++++++++++++++++++++++++
 views/_partial/header.tpl  |  96 ++++++++++++++++---------------
 views/_partial/preview.tpl |   2 +-
 views/signup.tpl           |  29 ++++++----
 views/user.tpl             |  20 +++++--
 views/useredit.tpl         |  37 ++++++++----
 11 files changed, 242 insertions(+), 76 deletions(-)
 create mode 100644 views/_partial/apigeo.tpl

diff --git a/.env b/.env
index 312e8f9..224a3e6 100644
--- a/.env
+++ b/.env
@@ -7,4 +7,5 @@ DB_USERNAME=
 DB_PASSWORD=
 
 IMG_PROJECT_PATH = uploads/projects/
-IMG_USER_PATH = uploads/profiles/
\ No newline at end of file
+IMG_USER_PATH = uploads/profiles/
+HEHE=HAHA
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 183434a..68b4719 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 /templates_c/
 /templates_c/**
-.env
+.env
\ No newline at end of file
diff --git a/assests/css/style.css b/assests/css/style.css
index 142ea7f..1ba981a 100644
--- a/assests/css/style.css
+++ b/assests/css/style.css
@@ -10,7 +10,12 @@ body {
   background-color: #ffffff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 0.8rem 2rem;
+  min-height: 64px;
+  max-height: 64px;
 }
+.navbar .navbar-collapse {
+            align-items: center;
+        }
 
 .navbar-brand {
   font-size: 1.5rem;
@@ -29,7 +34,13 @@ body {
   margin: 0 0.2rem;
   transition: color 0.3s;
 }
-
+.nav-avatar {
+            width: 36px;
+            height: 36px;
+            object-fit: cover;
+            border-radius: 50%;
+            display: block;
+        }
 .navbar-nav .nav-link:hover {
   color: #0d6efd;
 }
diff --git a/env b/env
index 1ba2754..611d244 100644
--- a/env
+++ b/env
@@ -1,7 +1,7 @@
 # config BDD
 
 DB_CONNECTION=mysql
-DB_HOSTNAME=boulayoune.com
+DB_HOSTNAME=localhost
 DB_DATABASE=projet_folliow
 DB_USERNAME=
 DB_PASSWORD=
diff --git a/models/ProjectModel.php b/models/ProjectModel.php
index 084f1ec..f7d87cf 100644
--- a/models/ProjectModel.php
+++ b/models/ProjectModel.php
@@ -24,7 +24,7 @@
 
 			
 			$strRq = "SELECT project.*, 
-						CONCAT(user_firstname, ' ', user_name) AS 'project_creatorname',
+						user_pseudo AS 'project_creatorname',
 						user_image
 						FROM project
 						INNER JOIN users ON user_id = project_user_id
diff --git a/views/_partial/apigeo.tpl b/views/_partial/apigeo.tpl
new file mode 100644
index 0000000..fb32c47
--- /dev/null
+++ b/views/_partial/apigeo.tpl
@@ -0,0 +1,112 @@
+<!-- Script d'autocomplétion ville/département — API Géo (gouvernement français) -->
+<script>
+(function () {
+	const input       = document.getElementById('user_location');
+	const suggestions = document.getElementById('location-suggestions');
+	let debounceTimer = null;
+
+	// Ferme la liste si on clique ailleurs
+	document.addEventListener('click', function (e) {
+		if (!input.contains(e.target) && !suggestions.contains(e.target)) {
+			hideSuggestions();
+		}
+	});
+
+	input.addEventListener('input', function () {
+		const query = this.value.trim();
+
+		clearTimeout(debounceTimer);
+
+		if (query.length < 2) {
+			hideSuggestions();
+			return;
+		}
+
+		// Délai de 300 ms pour éviter trop d'appels API
+		debounceTimer = setTimeout(function () {
+			fetchCities(query);
+		}, 300);
+	});
+
+	// Navigation clavier dans la liste
+	input.addEventListener('keydown', function (e) {
+		const items = suggestions.querySelectorAll('.list-group-item');
+		const active = suggestions.querySelector('.list-group-item.active');
+		let index = Array.from(items).indexOf(active);
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			if (index < items.length - 1) setActive(items, index + 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			if (index > 0) setActive(items, index - 1);
+		} else if (e.key === 'Enter' && active) {
+			e.preventDefault();
+			selectItem(active.dataset.value);
+		} else if (e.key === 'Escape') {
+			hideSuggestions();
+		}
+	});
+
+	function fetchCities(query) {
+		// On cherche par nom de commune, on récupère aussi le département
+		const url = 'https://geo.api.gouv.fr/communes?nom=' + encodeURIComponent(query)
+			+ '&fields=nom,departement&boost=population&limit=8';
+
+		fetch(url)
+			.then(function (res) { return res.json(); })
+			.then(function (data) { renderSuggestions(data); })
+			.catch(function () { hideSuggestions(); });
+	}
+
+	function renderSuggestions(cities) {
+		suggestions.innerHTML = '';
+
+		if (!cities || cities.length === 0) {
+			hideSuggestions();
+			return;
+		}
+
+		cities.forEach(function (city) {
+			const dept  = city.departement
+				? city.departement.nom + ' (' + city.departement.code + ')'
+				: '';
+			const label = city.nom + (dept ? ' — ' + dept : '');
+			// Valeur stockée : "Ville (Département)"
+			const value = city.nom + (city.departement ? ' (' + city.departement.nom + ')' : '');
+
+			const li = document.createElement('li');
+			li.className   = 'list-group-item list-group-item-action py-2 px-3';
+			li.style.cursor = 'pointer';
+			li.dataset.value = value;
+			li.textContent = label;
+
+			li.addEventListener('mousedown', function (e) {
+				// mousedown avant blur pour éviter que la liste disparaisse avant le clic
+				e.preventDefault();
+				selectItem(value);
+			});
+
+			suggestions.appendChild(li);
+		});
+
+		suggestions.style.display = 'block';
+	}
+
+	function selectItem(value) {
+		input.value = value;
+		hideSuggestions();
+	}
+
+	function hideSuggestions() {
+		suggestions.style.display = 'none';
+		suggestions.innerHTML = '';
+	}
+
+	function setActive(items, index) {
+		items.forEach(function (item) { item.classList.remove('active'); });
+		items[index].classList.add('active');
+		input.value = items[index].dataset.value;
+	}
+})();
+</script>
\ No newline at end of file
diff --git a/views/_partial/header.tpl b/views/_partial/header.tpl
index 316ce2e..e1bc5b5 100644
--- a/views/_partial/header.tpl
+++ b/views/_partial/header.tpl
@@ -5,29 +5,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assests/css/style.css">
     <link rel="shortcut icon" href="assests/img/Group-49.ico" type="image/x-icon">
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
     <title>Folliow{block name="title"}{/block}</title>
 </head>
 <body class="d-flex flex-column min-vh-100">
+
     <nav class="navbar navbar-expand-lg navbar-light">
         <div class="container-fluid">
+
+            <!-- Logo -->
             <a class="navbar-brand d-flex align-items-center" href="index.php">
                 <img src="assests/img/logo.png" alt="Logo" class="logo-image">
             </a>
-            
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+
+            <!-- Bouton hamburger mobile -->
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            
+
+            <!-- Liens de navigation -->
             <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
-                   
+
+                <!-- Liens gauche -->
+                <ul class="navbar-nav me-auto mb-0">
                     <li class="nav-item">
                         <a class="nav-link" href="?ctrl=page&action=about">À propos</a>
                     </li>
-
                     <li class="nav-item">
                         <a class="nav-link" href="?ctrl=project&action=search">Rechercher</a>
                     </li>
@@ -42,62 +47,65 @@
                         {/if}
                     {/if}
                 </ul>
-                
-                <nav class="col-4 d-flex justify-content-end align-items-center" aria-label="Connexion utilisateur">
+
+                <!-- Liens droite (connexion / profil) -->
+                <nav aria-label="Connexion utilisateur">
                     {if !isset($smarty.session.user)}
-                        <ul class="navbar-nav">    
+                        <ul class="navbar-nav d-flex flex-row align-items-center gap-1 mb-0">
                             <li class="nav-item">
-                                <a class="nav-link" href="index.php?ctrl=user&action=signup" title="Créer un compte" aria-label="Créer un compte">
+                                <a class="nav-link" href="index.php?ctrl=user&action=signup"
+                                    title="Créer un compte" aria-label="Créer un compte">
                                     S'inscrire
                                 </a>
                             </li>
-                            <li class="nav-item">    
-                                <a class="nav-link" href="index.php?ctrl=user&action=login" title="Se connecter" aria-label="Se connecter">
-                                    Se connecter 
+                            <li class="nav-item">
+                                <a class="nav-link" href="index.php?ctrl=user&action=login"
+                                    title="Se connecter" aria-label="Se connecter">
+                                    Se connecter
                                 </a>
                             </li>
-                        </ul> 
+                        </ul>
                     {else}
-                        <ul class="navbar-nav">   
-                            <li class="nav-item"> 
-                                <a class="nav-link" href="index.php?ctrl=user&action=user&pseudo={$smarty.session.user.user_pseudo}" title="Modifier mon compte" aria-label="Modifier mon compte">
-                                    <img src={$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($smarty.session.user.user_image))|file_exists}{$smarty.session.user.user_image}{else}images.jpg{/if}
-                                        class="rounded-circle flex-shrink-0 mt-2 ml-5"
-                                        style="width: 36px; height: 36px; object-fit: cover;"
-                                        alt="Photo de profil">
+                        <ul class="navbar-nav d-flex flex-row align-items-center gap-2 mb-0">
+                            <li class="nav-item d-flex align-items-center">
+                                <a class="nav-link p-0" href="index.php?ctrl=user&action=user&pseudo={$smarty.session.user.user_pseudo}"
+                                    title="Modifier mon compte" aria-label="Modifier mon compte">
+                                    <img
+                                        src="{$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($smarty.session.user.user_image))|file_exists}{$smarty.session.user.user_image}{else}images.jpg{/if}"
+                                        class="nav-avatar"
+                                        alt="Photo de profil"
+                                    >
                                 </a>
                             </li>
-
-                            <li> 
-                                <a class="nav-link" href="index.php?ctrl=user&action=logout" title="Se déconnecter" aria-label="Se déconnecter">
+                            <li class="nav-item d-flex align-items-center">
+                                <a class="nav-link" href="index.php?ctrl=user&action=logout"
+                                    title="Se déconnecter" aria-label="Se déconnecter">
                                     Se déconnecter
                                 </a>
                             </li>
                         </ul>
                     {/if}
                 </nav>
+
             </div>
         </div>
     </nav>
-	
-	<main id="main-content" class="container my-4">
-	  <section
-		class="p-4 mb-4 text-center txt_title "
-		aria-labelledby="page-title"
-	  >
-		<div class="col-lg-8 mx-auto">
-		  <h2 id="page-title" class="display-5 fw-semibold mb-3">
-			{block name="h2"}{/block}
-		  </h2>
-		  <p class="lead mb-2">
-			{block name="p"}{/block}
-		  </p>
-		  <p class="text-muted small mb-0">
-			{block name="date_maj"}{/block}
-		  </p>
-		</div>
-	  </section>
-	</main>
+
+    <main id="main-content" class="container my-4">
+        <section class="p-4 mb-4 text-center txt_title" aria-labelledby="page-title">
+            <div class="col-lg-8 mx-auto">
+                <h2 id="page-title" class="display-5 fw-semibold mb-3">
+                    {block name="h2"}{/block}
+                </h2>
+                <p class="lead mb-2">
+                    {block name="p"}{/block}
+                </p>
+                <p class="text-muted small mb-0">
+                    {block name="date_maj"}{/block}
+                </p>
+            </div>
+        </section>
+    </main>
 
 </body>
     {include file="views/_partial/messages.tpl"}
diff --git a/views/_partial/preview.tpl b/views/_partial/preview.tpl
index 19ff6d3..ca3fd81 100644
--- a/views/_partial/preview.tpl
+++ b/views/_partial/preview.tpl
@@ -14,7 +14,7 @@
 
         <div class="card-body p-3 bg-light">
             <div class="d-flex align-items-start gap-3">
-                <a href="index.php?ctrl=user&action=user&id={$objProject->getUser_id()}">
+                <a href="index.php?ctrl=user&action=user&pseudo={$objProject->getCreatorname()}">
                 <img src="{$smarty.env.IMG_USER_PATH}{if ($smarty.env.IMG_USER_PATH|cat:($objProject->getUser_image()))|file_exists}{$objProject->getUser_image()}{else}images.jpg{/if}"
      				class="rounded-circle flex-shrink-0 border border-2 border-white"
      				style="width: 64px; height: 64px; object-fit: cover; margin-top: 8px;"
diff --git a/views/signup.tpl b/views/signup.tpl
index 21ec90a..406b699 100644
--- a/views/signup.tpl
+++ b/views/signup.tpl
@@ -3,7 +3,6 @@
 
 {block name="content"}
 <!-- Page : Inscription -->
-
 <div class="py-5">
 
 	<!-- Centrage horizontal du formulaire -->
@@ -150,13 +149,23 @@
 							<label class="form-label" for="user_location">
 								Localisation
 							</label>
-							<input
-								class="form-control"
-								type="text"
-								id="user_location"
-								name="user_location"
-								value="{$objUser->getLocation()|default:''}"
-							>
+							<div class="position-relative">
+								<input
+									class="form-control"
+									type="text"
+									id="user_location"
+									name="user_location"
+									value="{$objUser->getLocation()|default:''}"
+									autocomplete="off"
+									placeholder="Ex : Paris, Lyon..."
+								>
+								<!-- Liste déroulante des suggestions -->
+								<ul
+									id="location-suggestions"
+									class="list-group position-absolute w-100 shadow-sm"
+									style="z-index: 1000; display: none; max-height: 220px; overflow-y: auto; top: 100%; left: 0;"
+								></ul>
+							</div>
 						</div>
 
 						<!-- Champ optionnel : phrase d'accroche -->
@@ -168,9 +177,8 @@
 								class="form-control"
 								id="user_description"
 								name="user_description"
-								value="{$objUser->getDescription()|default:''}"
 								rows="3"
-							></textarea>
+							>{$objUser->getDescription()|default:''}</textarea>
 						</div>
 
 						<!-- Bouton de soumission du formulaire -->
@@ -199,4 +207,5 @@
 	</div>
 
 </div>
+{include file="views/_partial/apigeo.tpl"}
 {/block}
\ No newline at end of file
diff --git a/views/user.tpl b/views/user.tpl
index 667307b..71f95b4 100644
--- a/views/user.tpl
+++ b/views/user.tpl
@@ -15,18 +15,30 @@
                 <p class="text-muted">{$user->getMail()}</p>
 
                 {if $user->getWork()}
-                    <p>{$user->getWork()}</p>
+                    <div class="d-flex align-items-center gap-2 mt-3">
+                        <i class="fa-solid fa-briefcase"></i>
+                        <p class="mb-0">{$user->getWork()}</p>
+                    </div>
                 {/if}
 
                 {if $user->getLocation()}
-                    <p>{$user->getLocation()}</p>
+                    
+                    <div class="d-flex align-items-center gap-2 mt-3">
+                        <i class="fa-solid fa-location-dot"></i>
+                        <p class="mb-0">{$user->getLocation()}</p>
+                    </div>
+                {/if}
+                {if $user->getLocation()}
+                    
+                    <div class="d-flex align-items-center gap-2 mt-3">
+                        <i class="fa-regular fa-note-sticky"></i> <p class="mb-0">{$user->getDescription()}</p>
+                    </div>
                 {/if}
 
-                <p class="mt-3">{$user->getDescription()}</p>
                 {if $smarty.session.user.user_id == $user->getId()}
                 <a class="btn btn-sm btn-primary flex-fill" 
                        href="?ctrl=user&action=edit">Edit account</a>
-            {/if}
+                {/if}
             </div>
             
         </div>
diff --git a/views/useredit.tpl b/views/useredit.tpl
index ee62c71..c3fd0df 100644
--- a/views/useredit.tpl
+++ b/views/useredit.tpl
@@ -132,18 +132,29 @@
                     </div>
 
                                    
-                    <div class="col-12">
-                        <label class="form-label" for="user_location">
-                                                Localisation
-                        </label>
-                        <input
-                                                class="form-control"
-                                                type="text"
-                                                id="user_location"
-                                                name="user_location"
-                                                 value="{$objUser->getLocation()}"
-                        >
-                    </div>
+                    <!-- Champ optionnel : localisation de l'utilisateur -->
+						<div class="col-12">
+							<label class="form-label" for="user_location">
+								Localisation
+							</label>
+							<div class="position-relative">
+								<input
+									class="form-control"
+									type="text"
+									id="user_location"
+									name="user_location"
+									value="{$objUser->getLocation()}"
+									autocomplete="off"
+									placeholder="Ex : Paris, Lyon..."
+								>
+								<!-- Liste déroulante des suggestions -->
+								<ul
+									id="location-suggestions"
+									class="list-group position-absolute w-100 shadow-sm"
+									style="z-index: 1000; display: none; max-height: 220px; overflow-y: auto; top: 100%; left: 0;"
+								></ul>
+							</div>
+						</div>
 
                                     
                     <div class="col-12">
@@ -176,4 +187,6 @@
     </div>
 </div>
 </main>
+
+{include file="views/_partial/apigeo.tpl"}
 {/block}
\ No newline at end of file