changed tabbar and upper case renglones

platforms/browser/www/index.html

 
       <script type="text/javascript" src="js/saveLocal.js"></script>
 
-      <script> console.log(window.localStorage.getItem("MADERA")); </script>
 
 
-        <ons-navigator swipeable animation="slide" id="myNavigator">
+
            <ons-page>
             <ons-toolbar>
                 <div class="center">Directorio Artesanal</div>
         </template>
 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
-
+<!----------------------------------------------------------------------------------->
+        <script src = "js/searchfunctions.js"></script>
         <script>
-            var Madera = JSON.parse(window.localStorage.getItem("TODOS"));
+            //JSON file that has all the artesanos
+            var all_artesanos = JSON.parse(window.localStorage.getItem("TODOS"));
             function filter(){
-
-
-                // var request = new XMLHttpRequest()
-                // request.open('GET','json/MADERA.json',true)
-                // request.onload = function(){
-                //   var Madera = JSON.parse(this.response)
-                // }
-                // request.send()
-                // var input = document.getElementById('searchbar').value
-                // var firstwood = Madera[0].Nombre
-                // ons.notification.alert('Searched for: ' + firstwood)
-                var input = document.getElementById('searchbar').value
+                var input = document.getElementById('searchbar').value;
+                var inputarte = document.getElementById('searchartesania').value;
+                var inputmuni = document.getElementById('searchbarmunicipio').value;
                 var x = document.getElementsByClassName('artists');
+                //making sure they're all in the same format
                 input = input.trim().toLowerCase();
-                if (input.length == 0){
-                    for (i = 0; Madera.length; i++){
+                inputarte = inputarte.trim().toLowerCase();
+                inputmuni = inputmuni.trim().toLowerCase();
+                input = acento_replace(input);
+                inputarte = acento_replace(inputarte);
+                inputmuni = acento_replace(inputmuni);
+                //default case is where evey one of them has nothing or less than 3 characters (displays every artist)
+                if (input.length <= 3 && inputarte.length <= 3 && inputmuni.length <= 3){
+                    for (var i = 0; all_artesanos.length; i++){
                         x[i].style.display = "list-item";
                     }
                 }
                 else{
-                    var foundesp = 0;
-                    for (i = 0; i < Madera.length; i++){
-                        console.log("damn")
-                        //try checking the especificacion first
-                        var especificaciones = Madera[i].Especificaciones1;
-                        especificaciones = especificaciones.split(';');
-                        for (var j = 0; j < especificaciones.length; j++){
-                            var especificacion = especificaciones[j];
-                            especificacion = especificacion.trim().toLowerCase();
-                            if (input == especificacion){
-                                x[i].style.display = "list-item";
-                                foundesp = 1;
-                                break;
-                            }
-                            else{
-                                x[i].style.display = "none";
-                            }
-                        }
+                    var cases = 0;
+                    cases = getcasenum(input,inputarte,inputmuni);
+                    //take every one of them out first (dont display any)
+                    for (var i = 0; i < all_artesanos.length; i++){
+                        x[i].style.display = "none";
                     }
-                    if (foundesp != 1){
-                        input = input.trim().toLowerCase().split(' ')
-                        //changing the input into something that can be searched
-                        for (var i = 0; i < input.length; i++){
-                            input[i] = input[i].charAt(0).toUpperCase() + input[i].slice(1);
-                        }
-                        console.log(input);
-                        for(var i = 0; i < Madera.length; i++){
-                            count = 0;
-                            artist = Madera[i].Nombre.trim().split(' ');
-                            for (k = 0; k < input.length; k++){
-                                for (var l = 0; l < artist.length; l++){
-                                    if(artist[l] == input[k]){
-                                        x[i].style.display = "list-item";
-                                        break;
-                                    }
-                                    else{
-                                        x[i].style.display = "none";
-                                    }
-                                }
-                            }
-                        }
+                    switch(cases){
+                        //cases == 1 when only inputmuni has been writen on
+                        case 1:
+                            filter_municipios(inputmuni);
+                            break;
+                        //cases == 2 when only inputarte has been written on
+                        case 2:
+                            filter_artesanias(inputarte);
+                            break;
+                        //cases == 3 when inputarte and inputmuni has been written on
+                        case 3:
+                            search_art_mun(inputarte,inputmuni);
+                            break;
+                        //cases == 4 when input has been writen on
+                        case 4:
+                            filter_any(input);
+                            break;
+                        //cases == 5 when input and inputmuni has been written on
+                        case 5:
+                            search_any_mun(input,inputmuni);
+                            break;
+                        //cases == 6 when input and inputart has been written on
+                        case 6:
+                            search_any_art(input,inputarte);
+                            break;
+                        //cases == 7 when input, inputart and inputmuni has been writen on
+                        case 7:
+                            search_any_art_mun(input,inputarte,inputmuni);
+                            break;
                     }
                 }
             }
         </script>
 
         <template id="search.html">
+          <ons-navigator swipeable animation="slide" id="SNavigator">
             <ons-page id="Buscar">
-
                 <p style="text-align: center; margin-top: 10px;">
-                    <ons-search-input placeholder="Search" id = "searchbar"
-                                      onchange = "filter()"
-                                      ></ons-search-input>
+                    <ons-search-input placeholder="Search anything" id = "searchbar"
+                        onkeyup = "filter()"></ons-search-input>
+                    <ons-search-input placeholder="Tipo de artesania" id = "searchartesania"
+                        onkeyup = "filter()"></ons-search-input>
+                    <ons-search-input placeholder = "Municipio" id = "searchbarmunicipio"
+                        onkeyup = "filter()"></ons-search-input>
                 </p>
 
                 <ons-list id="results" src="">
                 </ons-list>
 
                 <script>
-                    for (i = 0; i < Madera.length;i++){
+                    for (i = 0; i < all_artesanos.length;i++){
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
-                        onclick="myNavigator.pushPage('artesano.html', { data: {title: '${Madera[i].Nombre}', mun: '${Madera[i].Municipio}', tel: '${Madera[i]["Telefono1"]}', email: '${Madera[i]["E-mail1"]}', redes: '${Madera[i]["E-Commerce1"]}', esp: '${Madera[i].Especificaciones1}' } })" tappable>
-                        <div>${Madera[i].Nombre}</div>
+                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["E-mail"]}', redes: '${all_artesanos[i]["E-Commerce"]}', esp: '${all_artesanos[i].Especificacion}' } })" tappable>
+                        <div>${all_artesanos[i].Nombre}</div>
                     </ons-list-item>`);
                         // var artesano = ons.createElement(`
                         //   <ons-list-item class = "artists">
-                        //     <div class="center" >${Madera[i].Nombre}</div>
+                        //     <div class="center" >${all_artesanos[i].Nombre}</div>
                         //   </ons-list-item>`
                         // );
                         document.getElementById('results').appendChild(artesano);
                         if(mun.trim() != ""){
                             data+='Municipio: '+ mun +'<br>';
                         }
-                        
+
                         if(email.trim() != "" & email.toUpperCase().trim() != "NO TIENE"){
                             data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+email+'"><u>'+email+'</u></a><br>';
                         }
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
 
         <template id="renglones.html">
+          <ons-navigator swipeable animation="slide" id="myNavigator">
             <ons-page id="renglones">
 
             <!--div class="search-bar">
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
     </body>
-</html>
+</html>

platforms/browser/www/js/renglones.js

 var list = document.getElementById("list");
 
   for (var i = 0; i < info.length; i++) {
+          var renglonLower = info[i].Renglones.toLowerCase()
+          var renglonCap = renglonLower.charAt(0).toUpperCase() + renglonLower.slice(1)
+
 
-          
 
           var item = ons.createElement(`<ons-list-item expandable onclick="hideAll()">
-                      <div class="center">${info[i].Renglones}</div>
+                      <div class="center">${renglonCap}</div>
                       <div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.jpg"></div>
                       <div class="expandable-content">
                       <ons-list>
   /*`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">
                         <div class="title">${info[i].Renglones}</div>
                         <div class="content"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
-                    </ons-card>`*/
+                    </ons-card>`*/

platforms/browser/www/js/searchfunctions.js

+//Basic shit to understand
+//all_artesanos is the json that has the file that contains all the artesanos, this includes the studd they do,municipio,telefono,email and name
+//x is going to be what is displayed in the app, it basically has the same infromation as all_artesanos
+//THe basic mechanic is to display each artist in the search tab whenever something of them is found
+//You need at least 3 characters in one of the searchbars for it to display something
+//If nothing is written then it will display every artists
+//Some of these functions also try to make sure that the inputs are the same format as the thing they're looking up so that they dont have to follow a specific syntax to look for stuff
+
+//Tries to filter by the type of work that the artists do, if what they wrote in inputarte is included in one of them then the artists is displayed in the search bar
+function filter_artesanias(inputarte){
+    var x = document.getElementsByClassName('artists');
+    for (var i = 0; i < all_artesanos.length; i++){
+        var especificaciones = all_artesanos[i].Especificacion;
+        especificaciones = especificaciones.trim().toLowerCase();
+        especificaciones = acento_replace(especificaciones);
+        if (especificaciones.search(inputarte) != -1){
+            x[i].style.display = "list-item";
+        }
+        //before it did this down here but im keeping it just in case...
+        //especificaciones = especificaciones.split(',');
+        //for (var j = 0; j < especificaciones.length; j++){
+            //var especificacion = especificaciones[j];
+            //especificacion = especificacion.trim().toLowerCase();
+            //especificacion = acento_replace(especificacion);
+            //if (especificacion.search(inputarte) != -1){
+                //x[i].style.display = "list-item";
+                //break;
+            //}
+
+        }
+    return;
+}
+
+//Tries to filter by the municipio that they reside in or work in (not sure which one of the two it is)
+function filter_municipios(inputmuni){
+    var x = document.getElementsByClassName('artists');
+    for (var i = 0; i < all_artesanos.length; i++){
+        var municipio = all_artesanos[i].Municipio;
+        municipio = municipio.trim().toLowerCase();
+        municipio = acento_replace(municipio);
+        if (municipio.search(inputmuni)!= -1){
+            x[i].style.display = "list-item";
+        }
+    }
+    return;
+}
+
+//Tries to filter by any kind of information provided (name,artesania,municipio,telefono,email)
+function filter_any(input){
+    var x = document.getElementsByClassName('artists');
+    for (var i = 0; i < all_artesanos.length; i++){
+        if (find_name(i,input)){
+            x[i].style.display = "list-item";
+            continue;
+        }
+        else if (find_artesania(i,input)){
+            x[i].style.display = "list-item";
+            continue;
+        }
+        else if (find_municipio(i,input)){
+            x[i].style.display = "list-item";
+            continue;
+        }
+        else if (find_telefono(i,input)){
+            x[i].style.display = "list-item";
+            continue;
+        }
+        else if (find_email(i,input)){
+            x[i].style.display = "list-item";
+            continue;
+        }
+    }
+    return;
+}
+
+//Te trata de buscar si cualquiera de ellos tienen el input que se dio aplica a ese artista especifico (i)
+function find_any(i,input){
+    //if you find any of these in that space then return 1 if you didnt find that anything matched with the input then return 0
+    if (find_name(i,input) || find_telefono(i,input) || find_email(i,input) || find_artesania(i,input) || find_municipio(i,input)){
+        return 1;
+    }
+    else{
+        return 0;
+    }
+}
+
+//Trata de ver si el input es parte del nombre del artista i
+//Mayuscula y acento proof
+function find_name(i,input){
+    var name = all_artesanos[i].Nombre;
+    name = name.trim().toLowerCase();
+    name = acento_replace(name);
+    if(name.search(input) != -1){
+        return 1;
+    }
+    return 0;
+}
+
+//trata de ver si el input es parte de alguna artesania que trabaja el artista i
+//Mayuscula y acento proof
+function find_artesania(i,input){
+    var artesanias = all_artesanos[i].Especificacion;
+    artesanias = artesanias.trim().toLowerCase();
+    artesanias = acento_replace(artesanias);
+    if(artesanias.search(input) != -1){
+        return 1;
+    }
+    //artesanias = artesanias.split(',');
+    //for (var j = 0; j < artesanias.length; j++){
+        //var artesania = artesanias[j];
+        //artesania = artesania.trim().toLowerCase();
+        //artesania = acento_replace(artesania);
+        //if (artesania.search(input) != -1){
+            //return 1;
+        //}
+    //}
+    return 0;
+}
+
+//trata de ver si el input es parte del municipio del artista i
+//Mayuscula y acento proof
+function find_municipio(i,input){
+    var mun = all_artesanos[i].Municipio;
+    mun = mun.trim().toLowerCase();
+    mun = acento_replace(mun);
+    if(mun.search(input) != -1){
+        return 1;
+    }
+    return 0;
+}
+
+//trata de ver si el input es parte del telefono del artista i
+//'(',')','-' and ' ' proof
+function find_telefono(i,input){
+    var tel = all_artesanos[i]["Telefono 1"];
+    tel = tel.trim();
+    //To make sure they're both the same im taking out spaces,'(',')' and '-' to make sure they're both the same format
+    tel = tel.replace(/\s/g,'').replace(/\u0028/g,'').replace(/\u0029/g,'').replace(/\u002D/g,'');
+    input = input.replace(/\s/g,'').replace(/\u0028/g,'').replace(/\u0029/g,'').replace(/\u002D/g,'');
+    if(tel.search(input) != -1){
+        return 1;
+    }
+    return 0;
+}
+
+//trata de ver si el input es parte del email del artista i
+//Mayuscula and acento proof
+function find_email(i,input){
+    var email = all_artesanos[i]["E-mail"];
+    email = email.trim().toLowerCase();
+    email = acento_replace(email);
+    if(email.search(input) != -1){
+        return 1;
+    }
+    return 0;
+}
+
+//Esta funcion trata de coger el numero de caso que se esta buscando, esto es para saber que 
+//caso del switch para considerar
+//LOs casos dependen de lo que esta escrito en cada search bar, cada vez que se escribe en uno nuevo o cuando se borra completamente uno entonces es un caso nuevo
+function getcasenum(input,inputarte,inputmuni){
+    //this will get the case number
+    //think of this as 3 binary numbers where 001 would mean that only its input muni
+    //010 is only inputarte and 100 is only input
+    //max number is 7
+    var casenum = 0;
+    if (input.length != 0){
+        casenum += 4;
+    }
+    if (inputarte.length != 0){
+        casenum += 2;
+    }
+    if (inputmuni.length != 0){
+        casenum += 1;
+    }
+    return casenum;
+}
+
+//case 3: artesania y municipio
+//Busca todos los artistas que trabajan con esa artesania y en ese municipio
+function search_art_mun(inputarte,inputmuni){
+    var x = document.getElementsByClassName('artists');
+        for (var i = 0; i < all_artesanos.length; i++){
+            if (find_artesania(i,inputarte) && find_municipio(i,inputmuni)){
+                x[i].style.display = "list-item";
+            }
+        }
+}
+
+//Busca todos los artistas que salen con el primer input y trabajan en ese municipio
+function search_any_mun(input,inputmuni){
+    var x = document.getElementsByClassName('artists');
+        for (var i = 0; i < all_artesanos.length; i++){
+            if(find_any(i,input) && find_municipio(i,inputmuni)){
+                x[i].style.display = "list-item";
+            }
+        }
+}
+
+//Busca todos los artistas que salen con el primer input y trabajan con esa artesania
+function search_any_art(input,inputarte){
+    var x = document.getElementsByClassName('artists');
+    for (var i = 0; i < all_artesanos.length; i++){
+        if(find_any(i,input) && find_artesania(i,inputarte)){
+            x[i].style.display = "list-item";
+        }
+    }
+}
+
+//Busca todos los artistas que salen con el primer input, trabajan con esa artesania y trabajan en ese municipio
+function search_any_art_mun(input,inputarte,inputmuni){
+    var x = document.getElementsByClassName('artists');
+    for (var i = 0; i < all_artesanos.length; i++){
+        if(find_any(i,input) && find_artesania(i,inputarte) && find_municipio(i,inputmuni)){
+            x[i].style.display = "list-item";
+        }
+    }
+}
+
+//Replacing special characters with non special characters in case input doesnt include it
+function acento_replace(string){
+    var precstring = "";
+    var poststring = "";
+    for( i = 0; i < string.length ; i++){
+        if (string.charAt(i) == 'á' || string.charAt(i) == 'é' || string.charAt(i) == 'í'|| string.charAt(i) == 'ó' || string.charAt(i) == 'ú' || string.charAt(i) == 'ü' || string.charAt(i) == 'ñ' || string.charAt(i) == 'ö'){
+            precstring = string.slice(0,i);
+            postcstring = "";
+            if(i != string.length-1){
+              postcstring = string.slice(i+1,string.length);
+            }
+            switch(string.charAt(i)){
+                case 'á':
+                    string = precstring.concat('a',postcstring);
+                    break;
+                case 'é':
+                    string = precstring.concat('e',postcstring);
+                    break;
+                case 'í':
+                    string = precstring.concat('i',postcstring);
+                    break;
+                case 'ó':
+                    string = precstring.concat('o',postcstring);
+                    break;
+                case 'ú':
+                    string = precstring.concat('u',postcstring);
+                    break;
+                case 'ü':
+                    string = precstring.concat('u',postcstring);
+                    break;
+                case 'ñ':
+                    string = precstring.concat('n',postcstring);
+                    break;
+                case 'ö':
+                    string = precstring.concat('o',postcstring);
+                    break;
+            }
+        }
+    }
+    return string;
+}

www/index.html

 
       <script type="text/javascript" src="js/saveLocal.js"></script>
 
-      <script> console.log(window.localStorage.getItem("MADERA")); </script>
 
 
-        <ons-navigator swipeable animation="slide" id="myNavigator">
+
            <ons-page>
             <ons-toolbar>
                 <div class="center">Directorio Artesanal</div>
 <!----------------------------------------------------------------------------------->
         <script src = "js/searchfunctions.js"></script>
         <script>
-            //JSON file that has all the artesanos 
+            //JSON file that has all the artesanos
             var all_artesanos = JSON.parse(window.localStorage.getItem("TODOS"));
             function filter(){
                 var input = document.getElementById('searchbar').value;
                             break;
                     }
                 }
-            }            
+            }
         </script>
 
         <template id="search.html">
+          <ons-navigator swipeable animation="slide" id="SNavigator">
             <ons-page id="Buscar">
                 <p style="text-align: center; margin-top: 10px;">
                     <ons-search-input placeholder="Search anything" id = "searchbar"
                         onkeyup = "filter()"></ons-search-input>
-                    <ons-search-input placeholder="Tipo de artesania" id = "searchartesania" 
+                    <ons-search-input placeholder="Tipo de artesania" id = "searchartesania"
                         onkeyup = "filter()"></ons-search-input>
                     <ons-search-input placeholder = "Municipio" id = "searchbarmunicipio"
                         onkeyup = "filter()"></ons-search-input>
                 <script>
                     for (i = 0; i < all_artesanos.length;i++){
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
-                        onclick="myNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["E-mail"]}', redes: '${all_artesanos[i]["E-Commerce"]}', esp: '${all_artesanos[i].Especificacion}' } })" tappable>
+                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["E-mail"]}', redes: '${all_artesanos[i]["E-Commerce"]}', esp: '${all_artesanos[i].Especificacion}' } })" tappable>
                         <div>${all_artesanos[i].Nombre}</div>
                     </ons-list-item>`);
                         // var artesano = ons.createElement(`
                         if(mun.trim() != ""){
                             data+='Municipio: '+ mun +'<br>';
                         }
-                        
+
                         if(email.trim() != "" & email.toUpperCase().trim() != "NO TIENE"){
                             data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+email+'"><u>'+email+'</u></a><br>';
                         }
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
 
         <template id="renglones.html">
+          <ons-navigator swipeable animation="slide" id="myNavigator">
             <ons-page id="renglones">
 
             <!--div class="search-bar">
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
     </body>
-</html>
+</html>

www/js/renglones.js

 var list = document.getElementById("list");
 
   for (var i = 0; i < info.length; i++) {
+          var renglonLower = info[i].Renglones.toLowerCase()
+          var renglonCap = renglonLower.charAt(0).toUpperCase() + renglonLower.slice(1)
+
 
-          
 
           var item = ons.createElement(`<ons-list-item expandable onclick="hideAll()">
-                      <div class="center">${info[i].Renglones}</div>
+                      <div class="center">${renglonCap}</div>
                       <div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.jpg"></div>
                       <div class="expandable-content">
                       <ons-list>
   /*`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">
                         <div class="title">${info[i].Renglones}</div>
                         <div class="content"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
-                    </ons-card>`*/
+                    </ons-card>`*/