eric/e-tandem_UI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Changes, autocomplete etc.

Browse source
This commit is contained in:
ericb 2024-12-16 11:25:34 +01:00
parent 801a3e25d3
commit 1582637343
5 changed files with 3555 additions and 3535 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -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="tandem-list.html" target="_blank" rel="noopener">Recherche TANDEM</a></li>
<li><a href="404.html" target="_blank" rel="noopener">Error 404</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><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><span class="badge bg-warning rounded-pill ms-2">updated: 11.12.24</span></li>
</ul>
</body>
</html>

29
static/css/main.css
View file

@ -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;

29
static/js/autocomplete.js Normal file
View file

@ -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 = '';
}
});
});

57
static/js/js.js
View file

@ -5,38 +5,51 @@ function initTooltips(section) {
}
function checkTermsandConditions(){
const checkTerms = document.querySelector('#cgvCheck');
const createAccountButton = document.querySelector('#btnCreateAccount');
const checkTerms = document.getElementById('cgvCheck'),
createAccountButton = document.getElementById('btnCreateAccount');
createAccountButton.disabled = !checkTerms.checked;
}
document.addEventListener("DOMContentLoaded", function() {
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 updateMeet = () => {
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 = () => {
if (meetLocation) {meetLocation.style.display = (meetOption1?.checked || meetOption3?.checked) ? 'block' : 'none'; }
};
const toggleMenus = ({ matches }) => {
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);
});

93
tandem-list.html
View file

@ -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">
<label class="col-form-label">Lieu de rencontre:</label>
<select class="form-select" id="userSearchedLocation">
<!-- Must use an autocomplete input -->
<label class="col-form-label" for="searchedLocationInput">Lieu de rencontre:</label>
<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:</label>
<input type="number" class="form-control" id="userSearchedRadius" placeholder="Distance (km)" step="1">
</div>
<label class="col-form-label">Distance (en km): <span id="townRadiusValue">0</span></label>
<input type="range" class="form-range" min="0" max="100" value="0" step="25" id="townRadius">
</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>