Skip to content

Commit

Permalink
Merge branch 'feature/advanced_search' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
manuhdez committed Oct 15, 2018
2 parents 1f32c9a + f82f700 commit 822db0e
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 82 deletions.
108 changes: 26 additions & 82 deletions html/search.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,111 +47,54 @@
<!-- Name input-->
<div class="form-group row w-100">
<label class="col-4 control-label" for="name">Name</label>
<input name="name" class="form-control input-md col-8" id="name" required="" type="text" placeholder="Por favor introduzca su nombre">
<input name="name" class="form-control input-md col-8" id="name" type="text" placeholder="Enter the name">
</div>
<!-- Username input -->
<div class="form-group row w-100">
<label class="col-4 control-label" for="name">Userame</label>
<input name="username" class="form-control input-md col-8" id="username" type="text" placeholder="Enter the username">
</div>
<!-- City input-->
<div class="form-group row w-100">
<label class="col-4 control-label" for="city">City</label>
<input name="city" class="form-control input-md col-8" id="city" required="" type="text" placeholder="Enter the city">
<input name="city" class="form-control input-md col-8" id="city" type="text" placeholder="Enter the city">
</div>
<!-- Country input -->
<div class="form-group row w-100">
<label class="col-4 control-label" for="country">Country</label>
<input name="country" class="form-control input-md col-8" id="country" type="text" placeholder="Enter the country">
</div>
<!-- Company input -->
<div class="form-group row w-100">
<label class="col-4 control-label" for="company">Company</label>
<input name="company" class="form-control input-md col-8" id="company" type="text" placeholder="Enter the company">
</div>
<!-- Experience select input-->
<div class="form-group row w-100">
<label class="col-4" for="exampleFormControlSelect1">Experience</label>
<select class="form-control col-8" id="exampleFormControlSelect1">
<option>- 1 year</option>
<option>1 - 3 years</option>
<option>3 - 5 years</option>
<option>+ 5 years</option>
<select class="form-control col-8" id="experience">
<option value="- 1 year">- 1 year</option>
<option value="1 - 3 years">1 - 3 years</option>
<option value="3 - 5 years">3 - 5 years</option>
<option value="+ 5 years">+ 5 years</option>
</select>
</div>

<!-- Checkbox area -->
<div class="row w-100">
<!-- Languages Checkboxes -->
<div class="form-group col-6 mt-5">
<div class="form-group col-6 mt-5" id="langs_containers">
<label>Languages</label>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
English
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
German
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Chineese
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Spanish
</label>
</div>
</div>

<!-- Skills Checkboxes -->
<div class="form-group col-6 mt-5">
<div class="form-group col-6 mt-5" id="skill_container">
<label>Skills</label>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
HTML
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
CSS
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
SASS, LESS
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Javascript
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
React
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Node js
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Express js
</label>
</div>
<div class="form-check col-12">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Mongodb
</label>
</div>
</div>
</div>


<button type="submit" class="btn btn-primary mt-4">Search</button>
<button type="submit" class="btn btn-primary mt-4" id="searchbtn">Search</button>
</form>
</main>

Expand All @@ -162,6 +105,7 @@
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="../js/advanced_search.js"></script>
</body>

</html>
128 changes: 128 additions & 0 deletions js/advanced_search.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
const inputName = document.getElementById("name");
const inputUsername = document.getElementById("username");
const inputCity = document.getElementById("city");
const inputCountry = document.getElementById("country");
const inputExperience = document.getElementById("experience");
const inputCompany = document.getElementById("company");

//Imprimir los checkboxes de lang que están checked
function getLangFilterAdvancedSearch() {
var langChecks = document.getElementsByClassName("check-lang");
var langArr = [];
for (var i = 0; i < langChecks.length; i++) {
if (langChecks[i].checked == true) {
langArr.push(langChecks[i].value);
}
var checkUserLangs = [];
langArr.forEach(function(lang){
checkUserLangs.push(user.langs.includes(lang));
});
if(checkUserLangs.includes(false)){
console.log(checkUserLangs);
return false;
}else {
return true;
}
}
}

//Imprimir los checkboxes de skill que están checked
function getSkillFilterAdvancedSearch(user) {
var skillChecks = document.getElementsByClassName("check-skill");
var skillArr = [];
for (var i = 0; i < skillChecks.length; i++) {
if (skillChecks[i].checked == true) {
skillArr.push(skillChecks[i].value);
}
//Comparar los lang que están en el array con los que el array del user
}
var checkUserSkills = [];
skillArr.forEach(function(skill){
//Comprobar que el valor está en el array del usuario
checkUserSkills.push(user.skills.includes(skill));
});

if (checkUserSkills.includes(false)){
return false;
}else {
return true;
}
}

document.getElementById("searchbtn").addEventListener("click", function(e) {
e.preventDefault();
//Ponemos aquí el ajax para hacer la llamada al json cada vez que le demos click al botón search y no cada vez que se inicie la pantalla

$.ajax({
url: "https://cv-mobile-api.herokuapp.com/api/users"
}).done(function(data) {
console.log(data)
const filteredUser = data.filter(function(user) {
// console.log(getSkillFilterAdvancedSearch(user));
return (
inputName.value.toLowerCase() ===
user.name.slice(0, inputName.value.length).toLowerCase() &&
inputUsername.value.toLowerCase() ===
user.username.slice(0, inputUsername.value.length).toLowerCase() &&
inputCity.value.toLowerCase() ===
user.location.city.slice(0, inputCity.value.length).toLowerCase() &&
inputCountry.value.toLowerCase() ===
user.location.country.slice(0, inputCountry.value.length).toLowerCase() &&
inputExperience.value.toLowerCase() === user.experience &&
inputCompany.value.toLowerCase() ===
user.company.slice(0, inputCompany.value.length).toLowerCase() &&
getSkillFilterAdvancedSearch(user) &&
getLangFilterAdvancedSearch(user)
);
});
console.log(filteredUser);

});
});

$.ajax({
url: "https://cv-mobile-api.herokuapp.com/api/skills"
}).done(function(data) {
data.forEach(function(skill) {
document.getElementById("skill_container").innerHTML += renderSkill(skill);
});
});

function renderSkill(skill) {
var skillTemplate =
'<div class="form-check col-12">' +
'<input class="form-check-input check-skill" type="checkbox" value="' + skill.name + '" name="' + skill.name + '"id="' + skill.name +'">' +
'<label class="form-check-label" for="' + skill.name +'">' + skill.label +"</label>" +
"</div>";
return skillTemplate;
}

$.ajax({
url: "https://cv-mobile-api.herokuapp.com/api/langs"
}).done(function(data) {
data.forEach(function(language) {
document.getElementById("langs_containers").innerHTML += renderLanguage(
language
);
});
const inputLang = document.querySelectorAll(".check-lang");
var langArr = [];
inputLang.forEach(function(lang) {
if (lang.checked == true) {
langArr.push(lang.value);
}
});
});

function renderLanguage(language) {
var languageTemplate =
' <div class="form-check col-12">' +
//Operador ternario
'<input class="form-check-input check-lang" type="checkbox" value="' + language.label + '" id="' + language.name + '"' + (language.default ? "checked" : "") + ">" +
'<label class="form-check-label" for="' + language.name + '">' + language.label + "</label>" +

"</div>";
return languageTemplate;
}


0 comments on commit 822db0e

Please sign in to comment.