Changes, autocomplete etc.

index.html

@@ -20,9 +20,9 @@
         <li><a href="home.html" target="_blank" rel="noopener">Page d'accueil</a></li>
         <li><a href="connect.html" target="_blank" rel="noopener">Page de connexion</a></li>
         <li><a href="create-account.html" target="_blank" rel="noopener">Création de compte</a></li>
-        <li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a></li>
+        <li><a href="profile.html" target="_blank" rel="noopener">Profil utilisateur</a><span class="badge bg-warning rounded-pill ms-2">updated: 11.12.24</span></li>
-        <li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
+        <li><a href="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a><span class="badge bg-warning rounded-pill ms-2">updated: 16.12.24</span></li>
-        <li><a href="404.html" target="_blank" rel="noopener">Error 404</a></li>
+        <li><a href="404.html" target="_blank" rel="noopener">Error 404</a><span class="badge bg-warning rounded-pill ms-2">updated: 11.12.24</span></li>
     </ul>
 </body>
 </html>

static/css/main.css

@@ -37,9 +37,6 @@ body {
 h1, h2, h3, h4, h5{
   font-family: var(--bs-ttl-font-family);
 }
-/* ::selection, ::-moz-selection {
-  text-shadow: none;
-} */
 .navbar-toggler{
   color: var(--bs-btn-hover-bg);
 }
@@ -89,14 +86,6 @@ h1, h2, h3, h4, h5{
   margin-top: var(--top-bar);
 }
 /* Screens */
-/* [data-screen="error404"], [data-screen="connect"]{
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-[data-screen="error404"] main, [data-screen="connect"] main{
-  margin: auto 0;
-} */
 [data-screen="search"] .container-fluid > .row, [data-screen="profile"] .container-fluid > .row{
   justify-content: center;
 }
@@ -160,9 +149,6 @@ h1, h2, h3, h4, h5{
 .hero-primary, .hero-secondary{
   padding: var(--div-padding)
 }
-/* .hero-secondary{
-  min-height: 30vh;
-} */
 #lead{
   display: flex;
   height: 100%;
@@ -367,6 +353,21 @@ label[for="lang"]{
 #searchFilters label{
   font-weight: 600;
 }
+
+/* autocomplete */
+
+.autocomplete-suggestions {
+  border: 1px solid #e3e3e3;
+  max-height: 150px;
+  overflow-y: auto;
+}
+.autocomplete-suggestion {
+  padding: 8px;
+  cursor: pointer;
+}
+.autocomplete-suggestion:hover {
+  background-color: #f8f9fa;
+}
 /* overrides */
 ul, ol{
   padding-left: 1rem;

static/js/autocomplete.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const input = document.getElementById('searchedLocationInput'),
+        suggestionsContainer = document.getElementById('searchedLocationSuggestions'),
+        options = [...document.getElementById('userSearchedLocation').options];
+
+  input.addEventListener('input', () => {
+    const inputValue = input.value.toLowerCase();
+    suggestionsContainer.innerHTML = '';
+
+    if (inputValue) { options.forEach(option => {
+      const optionText = option.text.toLowerCase();
+      if (optionText.includes(inputValue)) {
+        const suggestion = document.createElement('div');
+        suggestion.classList.add('autocomplete-suggestion');
+        suggestion.textContent = option.text;
+        suggestion.addEventListener('click', () => {
+          input.value = suggestion.textContent;
+          suggestionsContainer.innerHTML = '';
+        });
+        suggestionsContainer.appendChild(suggestion);
+      }
+    });}
+  });
+  document.addEventListener('click', (event) => {
+    if (!event.target.closest('#searchedLocationInput')) {
+      suggestionsContainer.innerHTML = '';
+    }
+  });
+});

static/js/js.js

@@ -5,38 +5,51 @@ function initTooltips(section) {
 }
 
 function checkTermsandConditions(){
-  const checkTerms = document.querySelector('#cgvCheck');
+  const checkTerms = document.getElementById('cgvCheck'),
-  const createAccountButton = document.querySelector('#btnCreateAccount');
+        createAccountButton = document.getElementById('btnCreateAccount');
   createAccountButton.disabled = !checkTerms.checked;
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+const updateMeet = () => {
-  const offmenu = document.getElementById("offSideMenu"),
-        sidemenu = document.getElementById("secondNav");
-
-  const toggleMenus = ({ matches }) => {
-    if(offmenu && sidemenu){
-      offmenu.style.display = matches ? "block" : "none";
-      sidemenu.style.display = matches ? "none" : "block";
-    }
-  };
-
-  const mediaQuery = window.matchMedia("(max-width: 992px)");
-
-  mediaQuery.addEventListener('change', toggleMenus);
-
   const meetOption1 = document.getElementById('userMeetOptionReal'),
   meetOption2 = document.getElementById('userMeetOptionVirtual'),
   meetOption3 = document.getElementById('userMeetOptionHybrid'),
   meetLocation = document.getElementById('userTandemMeetLocation');
+  if (meetLocation) {
+    meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none';
+    [meetOption1, meetOption2, meetOption3].forEach(option => {
+      if (option) {
+        option.addEventListener('change', updateMeet);
+      }}
+    );
+  }
+};
 
-  const updateMeet = () => {
+const toggleMenus = ({ matches }) => {
-    if (meetLocation) {meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none'; }
+  const offMenu = document.getElementById("offSideMenu"),
-  };
+  sideMenu = document.getElementById("secondNav");
+  if(offMenu && sideMenu){
+    offMenu.style.display = matches ? "block" : "none";
+    sideMenu.style.display = matches ? "none" : "block";
+    mediaQuery.addEventListener('change', toggleMenus);
+  }
+};
 
-  [meetOption1, meetOption2, meetOption3].forEach(option => { if (option) { option.addEventListener('change', updateMeet); }} );
+const radiusUpdate = () => {
+  const rangeInput = document.getElementById('townRadius'),
+  rangeValue = document.getElementById('townRadiusValue');
+  if (rangeInput && rangeValue) {
+    rangeInput.addEventListener('input', () => {
+      rangeValue.textContent = rangeInput.value;
+    });
+  }
+};
 
+document.addEventListener("DOMContentLoaded", function() {
+  mediaQuery = window.matchMedia("(max-width: 992px)");
+
+  radiusUpdate();
   updateMeet();
   initTooltips(document);
-  toggleMenus(mediaQuery); // Initial check
+  toggleMenus(mediaQuery);
 });

tandem-list.html

@@ -13,6 +13,7 @@
     <link href="static/css/main.css" rel="stylesheet">
     <script src="static/js/vendor/bootstrap.bundle.min.js"></script>
     <script src="static/js/js.js"></script>
+    <script src="static/js/autocomplete.js"></script>
 </head>
 
 <body data-platform="public" data-screen="search">
@@ -213,40 +214,36 @@
                             <!-- Ajax form submit -->
                             <div class="row">
                                 <div class="col-md-auto">
-                                    <div class="align-items-center">
                                     <label class="col-form-label">Langue(s) proposée(s):</label>
+                                    <!-- select populated from profiles choices: maternal langs 1&2 + Proposed langs 1&2 -->
                                     <select class="form-select" id="userGivenLangs">
                                         <option>--------</option>
                                         <option>Français</option>
                                         <option>Deutsch</option>
-                                            <option>Italiano</option>
-                                            <option>Rumantsch</option>
-                                            <option>English</option>
                                     </select>
                                 </div>
-                                </div>
                 
                                 <div class="col-md-auto">
-                                    <div class="align-items-center">
                                     <label class="col-form-label">Langue(s) recherchée(s):</label>
+                                    <!-- select populated from profiles choices: searched langs 1&2 -->
                                     <select class="form-select" id="userSearchedLangs">
                                         <option>--------</option>
-                                            <option>Français</option>
-                                            <option>Deutsch</option>
                                         <option>Italiano</option>
                                         <option>Rumantsch</option>
                                         <option>English</option>
                                     </select>
                                 </div>
                             </div>
-                            </div>
                             <div class="row">
                                 <div class="col-md-auto">
-                                    <div class="align-items-center">
+                                    <!-- Must use an autocomplete input -->
-                                        <label class="col-form-label">Lieu de rencontre:</label>
+                                    <label class="col-form-label" for="searchedLocationInput">Lieu de rencontre:</label>
-                                        <select class="form-select" id="userSearchedLocation">
+                                    <input type="text" class="form-control" id="searchedLocationInput" autocomplete="off">
+                                    <div id="searchedLocationSuggestions" class="autocomplete-suggestions"></div>
+
+                                    <select class="form-select" id="userSearchedLocation" style="display: none;">
                                         <option selected value="">Indifférent</option>
-                                            <!-- Note: doesn't know what's the value for each town as it doesn't match the real NPA.
+                                        <!-- Note: options where gathered from actual platform, I doesn't know what's the value for each town as it doesn't match the real NPA.
                                             eg: Delémont is 2800. Maybe it's the database index  -->
                                         <option value="9228">Aadorf</option>
                                         <option value="7904">Aarau</option>
@@ -3665,50 +3662,11 @@
                                         <option value="7400">Zwischenflüh</option>
                                     </select>
                                 </div>
-                                </div>
                                 <div class="col-md-3">
-                                    <div class="align-items-center">
+                                    <label class="col-form-label">Distance (en km): <span id="townRadiusValue">0</span></label>
-                                        <label class="col-form-label">Distance:</label>
+                                    <input type="range" class="form-range" min="0" max="100" value="0" step="25" id="townRadius">
-                                        <input type="number" class="form-control" id="userSearchedRadius" placeholder="Distance (km)" step="1">
-                                    </div>  
                                 </div>
                                 <div class="col-md-auto">
-                                    <div class="align-items-center">
-                                        <label class="col-form-label">Canton:</label>
-                                        <select class="form-select" id="userSearchedLocation">
-                                            <option value="" selected>Tous les cantons</option>
-                                            <option value="AG">AG</option>
-                                            <option value="AI">AI</option>
-                                            <option value="AR">AR</option>
-                                            <option value="BE">BE</option>
-                                            <option value="BL">BL</option>
-                                            <option value="BS">BS</option>
-                                            <option value="FL">FL</option>
-                                            <option value="FR">FR</option>
-                                            <option value="GE">GE</option>
-                                            <option value="GL">GL</option>
-                                            <option value="GR">GR</option>
-                                            <option value="JU">JU</option>
-                                            <option value="LU">LU</option>
-                                            <option value="NE">NE</option>
-                                            <option value="NW">NW</option>
-                                            <option value="OW">OW</option>
-                                            <option value="SG">SG</option>
-                                            <option value="SH">SH</option>
-                                            <option value="SO">SO</option>
-                                            <option value="SZ">SZ</option>
-                                            <option value="TG">TG</option>
-                                            <option value="TI">TI</option>
-                                            <option value="UR">UR</option>
-                                            <option value="VD">VD</option>
-                                            <option value="VS">VS</option>
-                                            <option value="ZG">ZG</option>
-                                            <option value="ZH">ZH</option>
-                                        </select>
-                                    </div>  
-                                </div>
-                                <div class="col-md-auto">
-                                    <div class="align-items-center">
                                     <label class="col-form-label">Genre:</label>
                                     <select class="form-select" id="userSearchedGender">
                                         <option>Indifférent</option>
@@ -3718,7 +3676,6 @@
                                     </select>
                                 </div>
                             </div>
-                            </div>
                         </form>
                     </div>
                     <div id="searchTotalResults" class="alert alert-warning mt-3">
@@ -3781,7 +3738,7 @@
                                     </p>
                                 </div>
                                 <div class="profileOptions">
-                                    <button type="button" class="btn btn-cta rounded">Proposer un TANDEM</button>
+                                    <button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button>
                                     <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button>
                                 </div>
                             </div>
@@ -3842,7 +3799,7 @@
                                     </p>
                                 </div>
                                 <div class="profileOptions">
-                                    <button type="button" class="btn btn-cta rounded" >Proposer un TANDEM</button>
+                                    <button type="button" class="btn btn-cta rounded" data-bs-toggle="modal" data-bs-target="#alertModal">Proposer un TANDEM</button>
                                     <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#signalModal">Signaler ce profil inapproprié</button>
                                 </div>
                             </div>
@@ -3884,7 +3841,6 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">Signaler le profil de<br>{ userPseudo }</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                 </div>
                 <div class="modal-body">
                     <form>
@@ -3915,5 +3871,26 @@
         </div>
     </div>
 
+    <div class="modal fade" id="alertModal" tabindex="-1" aria-label="Proposer un TANDEM" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Proposer un TANDEM à<br>{ userPseudo }</h5>
+                </div>
+                <div class="modal-body">
+                    <form>
+                        <p>Vous allez envoyer une demande de TANDEM à { userPseudo }, veuillez confirmer votre action.</p>
+                        <input type="hidden" id="userId" name="userId" value="678910" />
+                    </form>
+
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+                    <button type="button" class="btn btn-primary">Confirmer</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
 </body>
 </html>