CCOM4030
/
artesanias
Watch 5
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Resuelto el bug de search y Lillie

Emmanuel 3 years ago
parent
7152c1a5c5 7c8ca43e8b
commit
30e315acc3
2 changed files with 0 additions and 1744 deletions
Split View Show Diff Stats
  1. 0
    826
      platforms/android/app/src/main/assets/www/index.html
  2. 0
    918
      www/index.html

+ 0
- 826
platforms/android/app/src/main/assets/www/index.html View File 

@@ -1,826 +0,0 @@
1 
-<!DOCTYPE html>
2 
-<!--
3 
-    Licensed to the Apache Software Foundation (ASF) under one
4 
-    or more contributor license agreements.  See the NOTICE file
5 
-    distributed with this work for additional information
6 
-    regarding copyright ownership.  The ASF licenses this file
7 
-    to you under the Apache License, Version 2.0 (the
8 
-    "License"); you may not use this file except in compliance
9 
-    with the License.  You may obtain a copy of the License at
10 
-
11 
-    http://www.apache.org/licenses/LICENSE-2.0
12 
-
13 
-    Unless required by applicable law or agreed to in writing,
14 
-    software distributed under the License is distributed on an
15 
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16 
-     KIND, either express or implied.  See the License for the
17 
-    specific language governing permissions and limitations
18 
-    under the License.
19 
--->
20 
-<html>
21 
-    <head>
22 
-        <!--
23 
-        Customize this policy to fit your own app's needs. For more guidance, see:
24 
-            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
25 
-        Some notes:
26 
-            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
27 
-            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
28 
-            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
29 
-                * Enable inline JS: add 'unsafe-inline' to default-src
30 
-        -->
31 
-        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
32 
-        <!--these three for the calendar-->
33 
-        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
34 
-        <link href="css/robotocondensed.css" rel="stylesheet">
35 
-        <link rel="stylesheet" href="calendar_files/css/demo.css"/>
36 
-        <link rel="stylesheet" href="css/file.css"/>
37 
-        <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
38 
-        <!--this is for the search bar-->
39 
-        <link rel = "stylesheet" href = "css/searchbar1.css">
40 
-
41 
-        <meta name="format-detection" content="telephone=no">
42 
-        <meta name="msapplication-tap-highlight" content="no">
43 
-        <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
44 
-        <meta charset="UTF-8">
45 
-        <link rel="stylesheet" type="text/css" href="css/index.css">
46 
-        <link rel="stylesheet" href="lib/OnsenUI/css/onsenui.css">
47 
-        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
48 
-        <script src="lib/OnsenUI/js/onsenui.min.js"></script>
49 
-        <script src="js/jquery_.js"></script>
50 
-        <script type="text/javascript" src="js/saveLocal.js"></script>
51 
-
52 
-
53 
-    </head>
54 
-    <body>
55 
-
56 
-        <script>
57 
-
58 
-
59 
-
60 
-        </script>
61 
-
62 
-            <!--the toolbar is where it will have the main name of the app and the ICP logo (top center)-->
63 
-           <ons-page>
64 
-            <ons-toolbar>
65 
-                <div class="center">ArtesaníasICP</div>
66 
-                <div class="right"><img class="list-item__thumbnail" src="img/ICP.png"></div>
67 
-            </ons-toolbar>
68 
-            <!--The tabbar is the place where the user can get acces to the different sections of the app-->
69 
-            <!--Each tab will hace a page name (which we use to reference and define them later one), then we have a laber, this is what will be used as a name for that page in the tabbar-->
70 
-            <ons-tabbar swipeable position="bottom" modifier="autogrow">
71 
-                <ons-tab page="home.html" label="Hogar" icon = "md-home" active></ons-tab>
72 
-                <ons-tab page="renglones.html" label="Artesanías" icon = "fa-paint-brush"></ons-tab>
73 
-                <ons-tab page ="search.html" label="Buscar" icon = "fa-search"> </ons-tab>
74 
-                <ons-tab page ="ferias.html" label="Eventos" icon = "fa-calendar-alt"> </ons-tab>
75 
-                <ons-tab page="colaboradores.html" label="Colab" icon = "fa-users"></ons-tab>
76 
-            </ons-tabbar>
77 
-        </ons-page>
78 
-
79 
-
80 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
81 
-
82 
-        <template id="home.html">
83 
-
84 
-            <ons-page id="home" class="red">
85 
-
86 
-                <ons-card id="azar"><!--style="height: 100%"-->
87 
-
88 
-                    <!--<div class="title" id="Title"></div>-->
89 
-                    <div id="image" style= "max-height:450px"></div><br>
90 
-                    <div class="content" id="Content"></div>
91 
-                    <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 
-                    <!--For now all this information is stored inside a .csv file-->
93 
-                    <script type="text/javascript" src="js/azar.js"> </script>
94 
-
95 
-                </ons-card>
96 
-
97 
-
98 
-            </ons-page>
99 
-
100 
-        </template>
101 
-
102 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
103 
-        <!-- This is the page that's accesed when someone clicks on a renglon (tipo de material usado) and then artesanos, it will show a list of all theartists that work with that type of material
104 
-        -->
105 
-        <template id="artesanos.html">
106 
-            <ons-page id="artesanos">
107 
-                <!-- This button lets the user go back to the previous page of the artesanias tab-->
108 
-                <ons-toolbar>
109 
-                    <div class="left"><ons-back-button>Atrás</ons-back-button></div>
110 
-                    <div class="center"></div>
111 
-                </ons-toolbar>
112 
-
113 
-                <!--Not sure what this does....-->
114 
-                <!-- when you pull down and are already at the top of the artesanos list then you see that fa-arrow-down on the top-->
115 
-                <ons-pull-hook id="pull-hook" threshold-height="120px">
116 
-                    <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
117 
-                </ons-pull-hook>
118 
-
119 
-                <!--This is where it will make the list, so the function that puts the artists here should reference this -->
120 
-                <ons-list id="artesanos-list" src="">
121 
-                    <ons-list-header>Artesanos</ons-list-header>
122 
-                </ons-list>
123 
-
124 
-                <script>
125 
-
126 
-                    ons.getScriptPage().onInit = function () {
127 
-                        //not sure what this does, because I dont really know what this.data.title have inside
128 
-                        //But I think what it has is the renglon that the user chose in the previous tab, and then using it as the title on this page
129 
-                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
130 
-
131 
-
132 
-                        //var File = this.data.title.toUpperCase() + '.json' ;
133 
-                        //seperates all different types of especificaciones
134 
-                        var Esp = this.data.esp.split(', ');
135 
-                        //Puts the json file of all the artesanos into this variable
136 
-                        var artesanos_json = this.data.json;
137 
-
138 
-                        //Turns the first character into an upper case
139 
-                        //Convertir en mayuscula primera letra del string.
140 
-                        for(var i=0; i<Esp.length; i++) {
141 
-                            Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
142 
-                        };
143 
-
144 
-                        //This is what happens when you scroll the list of names down when its already at the top
145 
-                        //First the arrow faces down, at some point it spins and points to the top, right before the user's finger stops touching the screen
146 
-                        //or if their finger goes back down.
147 
-                        var pullHook = document.getElementById('pull-hook');
148 
-                        var icon = document.getElementById('pull-hook-icon');
149 
-                        pullHook.addEventListener('changestate', function (event) {
150 
-                            switch (event.state) {
151 
-                                case 'initial':
152 
-                                    icon.setAttribute('icon', 'fa-arrow-down');
153 
-                                    icon.removeAttribute('rotate');
154 
-                                    icon.removeAttribute('spin');
155 
-                                    break;
156 
-                                case 'preaction':
157 
-                                    icon.setAttribute('icon', 'fa-arrow-down');
158 
-                                    icon.setAttribute('rotate', '180');
159 
-                                    icon.removeAttribute('spin');
160 
-                                    break;
161 
-                                case 'action':
162 
-                                    icon.setAttribute('icon', 'fa-spinner');
163 
-                                    icon.removeAttribute('rotate');
164 
-                                    icon.setAttribute('spin', true);
165 
-                                    break;
166 
-                            }
167 
-                        });
168 
-
169 
-                        //This function recieves a number that is tied to a specific Especificacion (type of artesania that artist make like: boligrafos,figuras...) in the variable Esp declared beforehand
170 
-                        //Then it finds and copies all the information of the artists that work on that type of artesania
171 
-                        //It ends up returning the especificacion in 'name' and retuns all the names and municipios of the artists that it found in 'artesan'
172 
-                        var getArtesania = function (num) {
173 
-                            //First it empty in case we dont find anyone, this is the variable where the information of the artist's name and municipio will be sent
174 
-                            var Artesanos = ``;
175 
-
176 
-                            console.log('Filtrado de ',Esp[num])
177 
-
178 
-                            //results: This variable will have all the information about the artists who work with that especificacion, it will look for this in the artesanos_json that has the whole json file of artesanos.
179 
-                            //I dont think its using 'searchVal' for anything....
180 
-                            var results = [];
181 
-                            var searchVal = "my Name";
182 
-                            for (var i=0 ; i < artesanos_json.length ; i++)
183 
-                            {
184 
-                                if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
185 
-                                    results.push(artesanos_json[i]);
186 
-                                }
187 
-                            }
188 
-
189 
-          /*var arr1=artesanos_json.filter(function(item){
190 
-              return item.Nombre=="Ana";
191 
-          });*/
192 
-                            //After going through the whole json file
193 
-                            //It adds the names and municipios of the ones found and later stored in 'results' to the 'Artesanos' variable
194 
-                            for(var i=0; i<results.length; i++) {
195 
-
196 
-                                //if(Esp[num] in artesanos_json.) {}
197 
-                                Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
198 
-                                //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
199 
-                            }
200 
-
201 
-
202 
-                            return {
203 
-                                name: Esp[num],
204 
-                                artesan: Artesanos
205 
-                            };
206 
-                        };
207 
-
208 
-                        //Then this function returns the name of the Especificacion that was searched in 'name'
209 
-                        //And it also returns all the names and municipios of the artesanos that work with that especificacion
210 
-                        var getData = function () {
211 
-                            const data = [];
212 
-                            for (var i = 0; i < Esp.length; i++) {
213 
-                                data.push(getArtesania(i));
214 
-                            }
215 
-                            return data;
216 
-                        };
217 
-
218 
-                        //not sure what this does because the element is also created later on, with even more information so idk if this one is just wrong
219 
-                        //This will create a new tab with the information of the arteanos?
220 
-                        var createArtesano = function (Artesano) {
221 
-
222 
-                            return ons.createElement(`
223 
-              <ons-list-item expandable tappable>
224 
-                <div class="center" >${Artesano.Nombre}</div>
225 
-                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
226 
-                                                 Tel\u00e9fono: ${Artesano["Telefono 1"]}<br>
227 
-                                                 Correo Electr\u00f3nico: ${Artesano["Email"]}<br>
228 
-                                                 </div>
229 
-              </ons-list-item>`
230 
-                                                    );
231 
-                        };
232 
-
233 
-                        //var Artesanias = getData();
234 
-                        //artesanos_json
235 
-
236 
-                        for (Artesano of artesanos_json) {
237 
-
238 
-                            var cont = 0;
239 
-                            var lista = document.getElementById('artesanos-list');
240 
-
241 
-                            //Recopilar datos no vacios.
242 
-                            //Counts all the tyoes of data that the artists don't have
243 
-                            //Later on, if you discover that they didn't have 'municipios', telephone numbers, emails and especificaciones then you wont display it.
244 
-                            if (Artesano.Municipio.trim().length != 0) {
245 
-                                cont ++;
246 
-                            }
247 
-                            if (Artesano["Telefono 1"].trim().length != 0) {
248 
-                                cont ++;
249 
-                            }
250 
-                            if (Artesano["Email"].trim().length != 0 & Artesano["Email"].toUpperCase().trim() != "NO TIENE") {
251 
-                                cont ++;
252 
-                            }
253 
-                            if (Artesano.Especificacion.trim().length != 0) {
254 
-                                cont ++;
255 
-                            }
256 
-
257 
-                            Artesano.Nombre = Artesano.Nombre + " " + Artesano["Apellido Paterno"] + " " + Artesano["Apellido Materno"];
258 
-
259 
-                            //info a pasar
260 
-                            //'title':'${Artesano.Nombre}','esp': '${info}'
261 
-                            //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
262 
-                            //And puts this into the 'item' variable
263 
-                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
264 
-                        <div class="title">${Artesano.Nombre}</div>
265 
-                    </ons-list-item>`);
266 
-
267 
-                            //If it didn't find 'municipios', telephone numbers, emails and 'especificaciones' of that artists then it wont include it on the 'artesanos-list' (variable: 'lista')
268 
-                            //If it found that it has at least one of them then it will include it into the list.
269 
-                            if(cont == 0){
270 
-                                //console.log(Artesano.Nombre+' no tiene ningun tipo de informacion.');
271 
-                                //return ons.createElement(``);
272 
-                            }
273 
-                            else {
274 
-                                lista.appendChild(item);
275 
-                            }
276 
-
277 
-                        };
278 
-
279 
-                    };
280 
-                </script>
281 
-
282 
-                <style>
283 
-                    .pull-hook-content {
284 
-                        color: #333;
285 
-                        transition: transform .25s ease-in-out;
286 
-                    }
287 
-                </style>
288 
-
289 
-            </ons-page>
290 
-
291 
-        </template>
292 
-
293 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
294 
-
295 
-         <template id="artesanias.html">
296 
-             <ons-page id="artesanias">
297 
-
298 
-                 <ons-toolbar>
299 
-                     <div class="left"><ons-back-button>Atrás</ons-back-button></div>
300 
-                     <div class="center"></div>
301 
-                 </ons-toolbar>
302 
-
303 
-                 <ons-pull-hook id="pull-hook" threshold-height="120px">
304 
-                     <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
305 
-                 </ons-pull-hook>
306 
-
307 
-                 <ons-list id="artesania-list" src="">
308 
-                     <ons-list-header>Artesanias</ons-list-header>
309 
-                 </ons-list>
310 
-
311 
-                 <script>
312 
-
313 
-                     ons.getScriptPage().onInit = function () {
314 
-                         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
315 
-
316 
-                         //var File = this.data.title.toUpperCase() + '.json' ;
317 
-                         var Esp = this.data.esp.split(', ');
318 
-                         var artesanos_json = this.data.json;
319 
-
320 
-                         //Convertir en mayuscula primera letra del string.
321 
-                         for(var i=0; i<Esp.length; i++) {
322 
-                             Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
323 
-                         };
324 
-
325 
-                         var pullHook = document.getElementById('pull-hook');
326 
-                         var icon = document.getElementById('pull-hook-icon');
327 
-                         pullHook.addEventListener('changestate', function (event) {
328 
-                             switch (event.state) {
329 
-                                 case 'initial':
330 
-                                     icon.setAttribute('icon', 'fa-arrow-down');
331 
-                                     icon.removeAttribute('rotate');
332 
-                                     icon.removeAttribute('spin');
333 
-                                     break;
334 
-                                 case 'preaction':
335 
-                                     icon.setAttribute('icon', 'fa-arrow-down');
336 
-                                     icon.setAttribute('rotate', '180');
337 
-                                     icon.removeAttribute('spin');
338 
-                                     break;
339 
-                                 case 'action':
340 
-                                     icon.setAttribute('icon', 'fa-spinner');
341 
-                                     icon.removeAttribute('rotate');
342 
-                                     icon.setAttribute('spin', true);
343 
-                                     break;
344 
-                             }
345 
-                         });
346 
-
347 
-                         var getArtesania = function (num) {
348 
-
349 
-                             var Artesanos = ``,
350 
-                                 ArtesanosInfo = ``;
351 
-
352 
-                             //console.log('Filtrado de ',Esp[num])
353 
-
354 
-                             var results = [];
355 
-                             var searchVal = "my Name";
356 
-                             for (var i=0 ; i < artesanos_json.length ; i++)
357 
-                             {
358 
-                                 if (artesanos_json[i].Especificacion.includes(Esp[num])) {
359 
-                                     results.push(artesanos_json[i]);
360 
-                                 }
361 
-                             }
362 
-
363 
-                             /*var arr1=artesanos_json.filter(function(item){
364 
-                             return item.Nombre=="Ana";
365 
-                             });*/
366 
-
367 
-                             for(var i=0; i<results.length; i++) {
368 
-
369 
-                                 //if(Esp[num] in artesanos_json.) {}
370 
-                                 //results[i].Nombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
371 
-                                 ANombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
372 
-                                 Artesanos+=`${ANombre}|`
373 
-                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["Email"]}|${results[i].Especificacion}|${results[i]["Tecnica"]}&&`
374 
-                                 //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
375 
-                             }
376 
-
377 
-                             return {
378 
-                                 name: Esp[num],
379 
-                                 artesan: Artesanos,
380 
-                                 info: ArtesanosInfo
381 
-                             };
382 
-                         };
383 
-
384 
-                         var getData = function () {
385 
-                             const data = [];
386 
-                             for (var i = 0; i < Esp.length; i++) {
387 
-                                 data.push(getArtesania(i));
388 
-                             }
389 
-                             return data;
390 
-                         };
391 
-                         var createArtesania = function (Artesania) {
392 
-
393 
-                             //console.log('Devuelto elemento')
394 
-                             var listaArt=``;
395 
-                             var arts = Artesania.artesan.split('|');
396 
-                             var artsInfo = Artesania.info.split('&&');
397 
-
398 
-                             for(var i=0; i<arts.length; i++) {
399 
-                                 var lot = artsInfo[i].split('|'),
400 
-                                     mun = lot[0],
401 
-                                     tel = lot[1],
402 
-                                     email = lot[2],
403 
-                                     esp = lot[3],
404 
-                                     redes = lot[4],
405 
-                                     tecnicas = lot[5];
406 
-
407 
-                                 listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i]}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}', redes: '${redes}', tecnicas: '${tecnicas}' }} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
408 
-                             }
409 
-
410 
-                             if (Artesania.name == "Figuras y simbolos indigenas") {
411 
-                                 Artesania.name = "Figuras y símbolos indígenas";
412 
-                             }
413 
-
414 
-                             console.log(Artesania.name);
415 
-
416 
-                             return ons.createElement(`
417 
-              <ons-list-item expandable tappable>
418 
-                <div class="center" >${Artesania.name}</div>
419 
-                <div class="expandable-content">Artesanos que trabajan con ${Artesania.name}
420 
-                <ons-card>${listaArt}</ons-card></div>
421 
-                </ons-list-item>`
422 
-                                                     );
423 
-                         };
424 
-
425 
-                         var Artesanias = getData();
426 
-
427 
-                         for (Art of Artesanias) {
428 
-
429 
-                             var Artesania = createArtesania(Art);
430 
-                             document.getElementById('artesania-list').appendChild(Artesania);
431 
-                         };
432 
-                         pullHook.onAction = function (done) {
433 
-
434 
-                             setTimeout(function() {
435 
-                                 document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
436 
-                                 done();
437 
-                             }, 400);
438 
-                         }
439 
-
440 
-                     };
441 
-                 </script>
442 
-
443 
-                 <style>
444 
-                     .pull-hook-content {
445 
-                         color: #333;
446 
-                         transition: transform .25s ease-in-out;
447 
-                     }
448 
-                 </style>
449 
-             </ons-page>
450 
-        </template>
451 
-
452 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
453 
-<!----------------------------------------------------------------------------------->
454 
-        <!--
455 
-            The searchfunctions.js file is just a file that has all the definitions of the functions used later on in the switch
456 
-        -->
457 
-        <script src = "js/searchfunctions.js"></script>
458 
-        <script>
459 
-            //'all_artesanos' is the variable containing the JSON file that has all the artesanos with their data
460 
-
461 
-
462 
-            var all_artesanos = JSON.parse(window.localStorage.getItem('TODOS'));
463 
-            function filter(){
464 
-                //finds the values of the search bar which are sent from the block of code after this script
465 
-                //input is the one you use to filter by any parameter
466 
-                //inputarte is the one you use to filter by the type of art the artists make
467 
-                //inputmuni is the one you use to filter by municipio
468 
-                //informacion is the variable that has all the information that will be sent to this tab, what we're going to use here is just to declare which artists are seen (informacion[i].style.display = "list-item") and which are not seen (informacion[i].style.display = "none")
469 
-                var input = document.getElementById('searchbar').value;
470 
-                var inputarte = document.getElementById('searchartesania').value;
471 
-                var inputmuni = document.getElementById('searchbarmunicipio').value;
472 
-                var x = document.getElementsByClassName('artists');
473 
-                //just making sure everything is at the same format by taking out special characters, trimming it and putting it in lowercase (same thing will be done to the arguments it's being compared to later on)
474 
-                //acento_replace(): it's a function I made that takes out any special characters of a word and changes them back to the plain ones (quitar acentos o cosas asi)
475 
-                input = input.trim().toLowerCase();
476 
-                inputarte = inputarte.trim().toLowerCase();
477 
-                inputmuni = inputmuni.trim().toLowerCase();
478 
-                input = acento_replace(input);
479 
-                inputarte = acento_replace(inputarte);
480 
-                inputmuni = acento_replace(inputmuni);
481 
-                //default case is where evey one of them has nothing or less than 3 characters (displays every artist until it passes that length)
482 
-                if (input.length <= 3 && inputarte.length <= 3 && inputmuni.length <= 3){
483 
-                    for (var i = 0; all_artesanos.length; i++){
484 
-                        x[i].style.display = "list-item";
485 
-                    }
486 
-                }
487 
-                else{
488 
-                    var cases = 0;
489 
-                    cases = getcasenum(input,inputarte,inputmuni);
490 
-                    //take every one of them out first (dont display any)
491 
-                    for (var i = 0; i < all_artesanos.length; i++){
492 
-                        x[i].style.display = "none";
493 
-                    }
494 
-                    switch(cases){
495 
-                        //cases == 1 when only inputmuni has been writen on
496 
-                        case 1:
497 
-                            filter_municipios(inputmuni);
498 
-                            break;
499 
-                        //cases == 2 when only inputarte has been written on
500 
-                        case 2:
501 
-                            filter_artesanias(inputarte);
502 
-                            break;
503 
-                        //cases == 3 when inputarte and inputmuni has been written on
504 
-                        case 3:
505 
-                            search_art_mun(inputarte,inputmuni);
506 
-                            break;
507 
-                        //cases == 4 when input has been writen on
508 
-                        case 4:
509 
-                            filter_any(input);
510 
-                            break;
511 
-                        //cases == 5 when input and inputmuni has been written on
512 
-                        case 5:
513 
-                            search_any_mun(input,inputmuni);
514 
-                            break;
515 
-                        //cases == 6 when input and inputart has been written on
516 
-                        case 6:
517 
-                            search_any_art(input,inputarte);
518 
-                            break;
519 
-                        //cases == 7 when input, inputart and inputmuni has been writen on
520 
-                        case 7:
521 
-                            search_any_art_mun(input,inputarte,inputmuni);
522 
-                            break;
523 
-                    }
524 
-                }
525 
-            }
526 
-        </script>
527 
-
528 
-        <template id="search.html">
529 
-          <ons-navigator swipeable animation="slide" id="SNavigator">
530 
-            <ons-page id="Buscar">
531 
-                <!--
532 
-                    This is the search bars, each time you type a character into any of the search bars, they will run the filter() function with what they all have as arguments (even if the other search bars have nothing in them)
533 
-                    The first search bar is to find by any information related to the artist
534 
-                    The second searchbar is to find by the type of artwork they work on
535 
-                    The third searchbar is to find by the municipio where the artists works or lives
536 
-                -->
537 
-                <p style="text-align: center; margin-top: 10px;">
538 
-                    <ons-search-input placeholder="Búsqueda con cualquier término" id = "searchbar"
539 
-                        onkeyup = "filter()" style = "width: 300px;" ></ons-search-input>
540 
-                    <ons-search-input placeholder="Búsqueda por artesanias" id = "searchartesania"
541 
-                        onkeyup = "filter()" style = "width: 300px;"></ons-search-input>
542 
-                    <ons-search-input placeholder = "Búsqueda por municipio" id = "searchbarmunicipio"
543 
-                        onkeyup = "filter()" style = "width: 300px;"></ons-search-input>
544 
-                </p>
545 
-
546 
-                <ons-list id="results" src="">
547 
-                </ons-list>
548 
-
549 
-                <script>
550 
-                    //This is basically declaring what we refer to as informacion in the filter() function
551 
-                    //It iterates though each artists in the all_artesanos json file from before, it displays their name in the "Buscar" page, and it gets prepared so that when its clicked it redirects to the "artesano.html" page with the other aditional information that we have other than the name.
552 
-                    for (i = 0; i < all_artesanos.length;i++){
553 
-                        all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
554 
-                        var artesano = ons.createElement(`<ons-list-item class = "artists"
555 
-                        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]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
556 
-                        <div>${all_artesanos[i].Nombre}</div>
557 
-                    </ons-list-item>`);
558 
-                        document.getElementById('results').appendChild(artesano);
559 
-                    }
560 
-                </script>
561 
-
562 
-            </ons-page>
563 
-            </ons-navigator>
564 
-        </template>
565 
-
566 
-        <!-- ---------------------------------------------------------------------------------------------------------------------------------------- -->
567 
-        <!--This page is used so that we can display the information of a specific artists, and whenever the artists is missing information then we just dont include that in the page-->
568 
-        <template id= "artesano.html">
569 
-            <ons-page id = "artesano">
570 
-                <ons-toolbar>
571 
-                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
572 
-                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
573 
-                    <div class = "center"></div>
574 
-                </ons-toolbar>
575 
-                <body>
576 
-                    <!-- This is where we'll put all the information of that artsts -->
577 
-                    <font size="+1">
578 
-                        <ons-card id="all"></ons-card>
579 
-                    </font>
580 
-                </body>
581 
-                <script>
582 
-                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
583 
-                    ons.getScriptPage().onInit = function () {
584 
-                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
585 
-
586 
-                        var data = '',
587 
-                            mun = this.data.mun,
588 
-                            tel = this.data.tel,
589 
-                            em = this.data.email,
590 
-                            esp = this.data.esp,
591 
-                            redes = this.data.redes,
592 
-                            tecnicas = this.data.tecnicas;
593 
-
594 
-                        //here the email is the string made from the start to where the '#' is.
595 
-
596 
-
597 
-                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
598 
-                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
599 
-                        //but if theres only one then you just write it into the page
600 
-                        if(esp.trim() != ""){
601 
-                            if(esp.includes(";", 0)){
602 
-                                esp=esp.replace(/;/g,", ");
603 
-                                data+='Tipos de artesanías: '+esp+'<br>';
604 
-                            }
605 
-                            else {
606 
-                                data+='Tipo de artesanía: '+esp+'<br>';
607 
-                            }
608 
-                        }
609 
-
610 
-                        if(tecnicas.trim() != ''){
611 
-                            if(tecnicas.includes(";", 0)){
612 
-                                tecnicas = tecnicas.replace(/;/g,", ");
613 
-                                data+='Técnicas que usan: '+tecnicas+'<br>';
614 
-                            }
615 
-                            else {
616 
-                                data+='Técnicas que usan: '+tecnicas+'<br>';
617 
-                            }
618 
-                        }
619 
-                        //console.log("Las redes son..."+this.data.redes);
620 
-                        //Here it's making sure theres something in municipio and writing their municipio into the page
621 
-                        if(mun.trim() != ""){
622 
-                            data+='Municipio: '+ mun +'<br>';
623 
-                        }
624 
-
625 
-                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
626 
-                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
627 
-                        if(em.trim() != "" & em.toUpperCase().trim() != "NO TIENE"){
628 
-                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+em+'"><u>'+em+'</u></a><br>';
629 
-                        }
630 
-
631 
-                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
632 
-                        if(tel.trim() != "" ){
633 
-                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
634 
-                        }
635 
-
636 
-                        console.log("Redes: "+redes);
637 
-
638 
-                        //Here it has to decide what to do depending on the links they give to their social media pages
639 
-                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
640 
-                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
641 
-                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
642 
-                        //If it's none of them then it will not display anything
643 
-                        if(redes.includes("facebook")){
644 
-
645 
-                            console.log(redes.substring(1,redes.length-2));
646 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
647 
-                        }
648 
-                        else if(redes.includes("instagram")){
649 
-                            console.log(redes.substring(1,redes.length-2));
650 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
651 
-                        }
652 
-                        else if(redes.includes("myspace")){
653 
-                            console.log(redes.substring(1,redes.length-2));
654 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
655 
-                        }
656 
-                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
657 
-                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
658 
-                            redes = redes.substr(0, redes.length-1);
659 
-                            console.log(redes);
660 
-                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
661 
-                        }
662 
-                        else if(redes.includes("#") || redes.includes("mailto")){
663 
-                            console.log("tiene un disparate");
664 
-                        } else {
665 
-                            console.log("no tiene nada");
666 
-                        }
667 
-
668 
-                        //This is the part that allows eveything (data) to be displayed
669 
-                        document.getElementById("all").innerHTML = `${data}`;
670 
-
671 
-                    }
672 
-                </script>
673 
-            </ons-page>
674 
-        </template>
675 
-
676 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
677 
-
678 
-        <template id="renglones.html">
679 
-          <ons-navigator swipeable animation="slide" id="myNavigator">
680 
-            <ons-page id="renglones">
681 
-
682 
-            <!--div class="search-bar">
683 
-                 <p style="text-align: center; margin-top: 10px;">
684 
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
685 
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
686 
-                </p>
687 
-            </div-->
688 
-
689 
-            <ons-card id="list">
690 
-              <script type="text/javascript" src="js/renglones.js"></script>
691 
-            </ons-card>
692 
-
693 
-                <!--Javascript function to hide other open expandables-->
694 
-                <script>
695 
-                    const hideAll = () => {
696 
-                        Array.from(document.querySelector('#list').children)
697 
-                            .forEach(item => {
698 
-                                if (item.expanded) {
699 
-                                    item.hideExpansion();
700 
-                                }
701 
-                            });
702 
-                        };
703 
-                </script>
704 
-
705 
-                <style>
706 
-                    .intro {
707 
-                        text-align: center;
708 
-                        padding: 20px;
709 
-                        margin-top: 30px;
710 
-                    }
711 
-
712 
-                    ons-card {
713 
-                        cursor: pointer;
714 
-                        color: #333;
715 
-                    }
716 
-
717 
-                    .card__title,
718 
-                    .card--material__title {
719 
-                        font-size: 15px;
720 
-                    }
721 
-                </style>
722 
-            </ons-page>
723 
-            </ons-navigator>
724 
-
725 
-        </template>
726 
-
727 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
728 
-
729 
-        <template id="ferias.html">
730 
-            <ons-page id="ferias">
731 
-                <!--<ons-card>
732 
-
733 
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
734 
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
735 
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
736 
-                </div>
737 
-
738 
-                </ons-card>--
739 
-                <br><br><br>-->
740 
-                <ons-card>
741 
-                <div id="logo" style="text-align: center">
742 
-                    <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">
743 
-                </div>
744 
-                <br><br>
745 
-                <div id="button" style="text-align: center">
746 
-                <button onclick="redirect()">Pasar a la página de eventos</button>
747 
-                </div>
748 
-                <br><br>
749 
-                <div id="Mensaje">
750 
-                    El Instituto de Cultura Puertorriqueña, el Gobierno de Puerto Rico, los Colaboradores de esta aplicación, así como los funcionarios, empleados y contratistas de los anteriores, no se hacen responsables de los mensajes, imágenes, opiniones, servicios, declaraciones, representaciones o cualquier forma de contenido incluido en cualquiera de los enlaces accesibles, vinculados o referidos a través de ArtesaníasICP.
751 
-                </div>
752 
-                </ons-card>
753 
-
754 
-              <script>
755 
-              function redirect() {
756 
-                location.replace("https://facebook.com/icppr")
757 
-              }
758 
-              </script>
759 
-            </ons-page>
760 
-        </template>
761 
-
762 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
763 
-
764 
-        <template id="colaboradores.html">
765 
-            <ons-page id="colaboradores">
766 
-                <ons-card>
767 
-
768 
-                    <h1>Colaboradores</h1>
769 
-
770 
-                    <style>
771 
-                        .column {
772 
-                            float: left;
773 
-                            width: 50%;
774 
-                        }
775 
-                        .row {
776 
-                            width: 100%;
777 
-                        }
778 
-                    </style>
779 
-                    <h2>SINFINESPR</h2>
780 
-                    <div class = "column">
781 
-                        SINFINESPR es un programa de Titín Foundation que responde a nuestro interés y compromiso con el fortalecimiento del tercer sector.
782 
-                        <br><br>
783 
-                        En esta plataforma agrupamos herramientas que permitirán que tu organización adquiera mayor visibilidad, recursos, conexiones, capacidad para una operación más eficiente y efectiva.
784 
-                        <br><br>
785 
-                        Saludos Cordiales,
786 
-                                Aziria
787 
-                    </div>
788 
-                    <div class = "column">
789 
-                        <img src="img/sfpr.svg" style="width:150px;height:100px">
790 
-                    </div>
791 
-                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
792 
-                    Visita nuesta Página Web o siguenos en nuestras redes sociales <br> <br>
793 
-                    <a href="https://twitter.com/SINFINESPR"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
794 
-                    </a>
795 
-                    <a href="https://www.facebook.com/sinfinespr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
796 
-                    </a>
797 
-                    <a href="https://www.linkedin.com/company/sinfinespr/"><img src="img/linkedin.png" alt="Linkedin" style="width:35px;height:35px;border:0;">
798 
-                    </a>
799 
-                    <a href="https://www.instagram.com/sinfinespr/"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
800 
-                    </a>
801 
-                    <br><br>
802 
-                    <h2>Centro de Desarrollo y Consultoría Computacional</h2>
803 
-                    El Centro de Desarrollo y Consultoría Computacional está compuesto por profesores y estudiantes del departamento de Ciencia de Cómputos de la Universidad de Puerto Rico Recinto de Río Piedras. Nuestra meta es aportar al desarrollo computacional de la Universidad y de Puerto Rico al proveer servicios al día, de calidad y con precios accesibles, a la misma vez que se le ofrece experiencias prácticas a los estudiantes del departamento de Ciencia de Cómputos.
804 
-                    <br><br>
805 
-
806 
-                    <img src="img/logo_cdcc.png" style="width: 150px; height: 100px">
807 
-
808 
-                    <br><br>
809 
-                    Si tiene alguna duda nos puede contactar por:
810 
-                    <br>
811 
-                    Teléfono: 787-764-0000 Ext. 88341, 88349
812 
-                    <br>
813 
-                    o
814 
-                    <br>
815 
-                    Correo electrónico: <a href = "mailto:carlos.corrada2@upr.edu" style ="color:#0000EE;text-decoration: underline;">carlos.corrada2@upr.edu</a>
816 
-
817 
-                </ons-card>
818 
-            </ons-page>
819 
-        </template>
820 
-  <script src="js/load.js"></script>
821 
-
822 
-
823 
-        <script type="text/javascript" src="cordova.js"></script>
824 
-        <script type="text/javascript" src="js/index.js"></script>
825 
-    </body>
826 
-</html>

+ 0
- 918
www/index.html View File 

@@ -1,918 +0,0 @@
1 
-<!DOCTYPE html>
2 
-<!--
3 
-    Licensed to the Apache Software Foundation (ASF) under one
4 
-    or more contributor license agreements.  See the NOTICE file
5 
-    distributed with this work for additional information
6 
-    regarding copyright ownership.  The ASF licenses this file
7 
-    to you under the Apache License, Version 2.0 (the
8 
-    "License"); you may not use this file except in compliance
9 
-    with the License.  You may obtain a copy of the License at
10 
-
11 
-    http://www.apache.org/licenses/LICENSE-2.0
12 
-
13 
-    Unless required by applicable law or agreed to in writing,
14 
-    software distributed under the License is distributed on an
15 
-    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16 
-     KIND, either express or implied.  See the License for the
17 
-    specific language governing permissions and limitations
18 
-    under the License.
19 
--->
20 
-<html>
21 
-    <head>
22 
-        <!--
23 
-        Customize this policy to fit your own app's needs. For more guidance, see:
24 
-            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
25 
-        Some notes:
26 
-            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
27 
-            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
28 
-            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
29 
-                * Enable inline JS: add 'unsafe-inline' to default-src
30 
-        -->
31 
-        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
32 
-        <!--these three for the calendar-->
33 
-        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
34 
-        <link href="css/robotocondensed.css" rel="stylesheet">
35 
-        <link rel="stylesheet" href="calendar_files/css/demo.css"/>
36 
-        <link rel="stylesheet" href="css/file.css"/>
37 
-        <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
38 
-        <!--this is for the search bar-->
39 
-        <link rel = "stylesheet" href = "css/searchbar1.css">
40 
-
41 
-        <meta name="format-detection" content="telephone=no">
42 
-        <meta name="msapplication-tap-highlight" content="no">
43 
-        <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
44 
-        <meta charset="UTF-8">
45 
-        <link rel="stylesheet" type="text/css" href="css/index.css">
46 
-        <link rel="stylesheet" href="lib/OnsenUI/css/onsenui.css">
47 
-        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
48 
-        <script src="lib/OnsenUI/js/onsenui.min.js"></script>
49 
-        <script src="js/jquery_.js"></script>
50 
-        <script type="text/javascript" src="js/saveLocal.js"></script>
51 
-
52 
-
53 
-    </head>
54 
-    <body>
55 
-
56 
-        <script>
57 
-
58 
-
59 
-
60 
-        </script>
61 
-
62 
-            <!--the toolbar is where it will have the main name of the app and the ICP logo (top center)-->
63 
-           <ons-page>
64 
-            <ons-toolbar>
65 
-                <div class="center">ArtesaníasICP</div>
66 
-                <div class="right"><img class="list-item__thumbnail" src="img/ICP.png"></div>
67 
-            </ons-toolbar>
68 
-            <!--The tabbar is the place where the user can get acces to the different sections of the app-->
69 
-            <!--Each tab will hace a page name (which we use to reference and define them later one), then we have a laber, this is what will be used as a name for that page in the tabbar-->
70 
-            <ons-tabbar swipeable position="bottom" modifier="autogrow">
71 
-                <ons-tab page="home.html" label="Hogar" icon = "md-home" active></ons-tab>
72 
-                <ons-tab page="renglones.html" label="Artesanías" icon = "fa-paint-brush"></ons-tab>
73 
-                <ons-tab page ="search.html" label="Buscar" icon = "fa-search"> </ons-tab>
74 
-                <ons-tab page ="ferias.html" label="Eventos" icon = "fa-calendar-alt"> </ons-tab>
75 
-                <ons-tab page="colaboradores.html" label="Colab" icon = "fa-users"></ons-tab>
76 
-            </ons-tabbar>
77 
-        </ons-page>
78 
-
79 
-
80 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
81 
-
82 
-        <template id="home.html">
83 
-
84 
-            <ons-page id="home" class="red">
85 
-
86 
-                <ons-card id="azar"><!--style="height: 100%"-->
87 
-
88 
-                    <!--<div class="title" id="Title"></div>-->
89 
-                    <div id="image" style= "max-height:450px"></div><br>
90 
-                    <div class="content" id="Content"></div>
91 
-                    <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 
-                    <!--For now all this information is stored inside a .csv file-->
93 
-                    <script type="text/javascript" src="js/azar.js"> </script>
94 
-
95 
-                </ons-card>
96 
-
97 
-
98 
-            </ons-page>
99 
-
100 
-        </template>
101 
-
102 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
103 
-        <!-- This is the page that's accesed when someone clicks on a renglon (tipo de material usado) and then artesanos, it will show a list of all theartists that work with that type of material
104 
-        -->
105 
-        <template id="artesanos.html">
106 
-            <ons-page id="artesanos">
107 
-                <!-- This button lets the user go back to the previous page of the artesanias tab-->
108 
-                <ons-toolbar>
109 
-                    <div class="left"><ons-back-button>Atrás</ons-back-button></div>
110 
-                    <div class="center"></div>
111 
-                </ons-toolbar>
112 
-
113 
-                <!--Not sure what this does....-->
114 
-                <!-- when you pull down and are already at the top of the artesanos list then you see that fa-arrow-down on the top-->
115 
-                <ons-pull-hook id="pull-hook" threshold-height="120px">
116 
-                    <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
117 
-                </ons-pull-hook>
118 
-
119 
-                <!--This is where it will make the list, so the function that puts the artists here should reference this -->
120 
-                <ons-list id="artesanos-list" src="">
121 
-                    <ons-list-header>Artesanos</ons-list-header>
122 
-                </ons-list>
123 
-
124 
-                <script>
125 
-
126 
-                    ons.getScriptPage().onInit = function () {
127 
-                        //not sure what this does, because I dont really know what this.data.title have inside
128 
-                        //But I think what it has is the renglon that the user chose in the previous tab, and then using it as the title on this page
129 
-                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
130 
-
131 
-
132 
-                        //var File = this.data.title.toUpperCase() + '.json' ;
133 
-                        //seperates all different types of especificaciones
134 
-                        var Esp = this.data.esp.split(', ');
135 
-                        //Puts the json file of all the artesanos into this variable
136 
-                        var artesanos_json = this.data.json;
137 
-
138 
-                        //Turns the first character into an upper case
139 
-                        //Convertir en mayuscula primera letra del string.
140 
-                        for(var i=0; i<Esp.length; i++) {
141 
-                            Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
142 
-                        };
143 
-
144 
-                        //This is what happens when you scroll the list of names down when its already at the top
145 
-                        //First the arrow faces down, at some point it spins and points to the top, right before the user's finger stops touching the screen
146 
-                        //or if their finger goes back down.
147 
-                        var pullHook = document.getElementById('pull-hook');
148 
-                        var icon = document.getElementById('pull-hook-icon');
149 
-                        pullHook.addEventListener('changestate', function (event) {
150 
-                            switch (event.state) {
151 
-                                case 'initial':
152 
-                                    icon.setAttribute('icon', 'fa-arrow-down');
153 
-                                    icon.removeAttribute('rotate');
154 
-                                    icon.removeAttribute('spin');
155 
-                                    break;
156 
-                                case 'preaction':
157 
-                                    icon.setAttribute('icon', 'fa-arrow-down');
158 
-                                    icon.setAttribute('rotate', '180');
159 
-                                    icon.removeAttribute('spin');
160 
-                                    break;
161 
-                                case 'action':
162 
-                                    icon.setAttribute('icon', 'fa-spinner');
163 
-                                    icon.removeAttribute('rotate');
164 
-                                    icon.setAttribute('spin', true);
165 
-                                    break;
166 
-                            }
167 
-                        });
168 
-
169 
-                        //This function recieves a number that is tied to a specific Especificacion (type of artesania that artist make like: boligrafos,figuras...) in the variable Esp declared beforehand
170 
-                        //Then it finds and copies all the information of the artists that work on that type of artesania
171 
-                        //It ends up returning the especificacion in 'name' and retuns all the names and municipios of the artists that it found in 'artesan'
172 
-                        var getArtesania = function (num) {
173 
-                            //First it empty in case we dont find anyone, this is the variable where the information of the artist's name and municipio will be sent
174 
-                            var Artesanos = ``;
175 
-
176 
-                            console.log('Filtrado de ',Esp[num])
177 
-
178 
-                            //results: This variable will have all the information about the artists who work with that especificacion, it will look for this in the artesanos_json that has the whole json file of artesanos.
179 
-                            //I dont think its using 'searchVal' for anything....
180 
-                            var results = [];
181 
-                            var searchVal = "my Name";
182 
-                            for (var i=0 ; i < artesanos_json.length ; i++)
183 
-                            {
184 
-                                if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
185 
-                                    results.push(artesanos_json[i]);
186 
-                                }
187 
-                            }
188 
-
189 
-          /*var arr1=artesanos_json.filter(function(item){
190 
-              return item.Nombre=="Ana";
191 
-          });*/
192 
-                            //After going through the whole json file
193 
-                            //It adds the names and municipios of the ones found and later stored in 'results' to the 'Artesanos' variable
194 
-                            for(var i=0; i<results.length; i++) {
195 
-
196 
-                                //if(Esp[num] in artesanos_json.) {}
197 
-                                Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
198 
-                                //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
199 
-                            }
200 
-
201 
-
202 
-                            return {
203 
-                                name: Esp[num],
204 
-                                artesan: Artesanos
205 
-                            };
206 
-                        };
207 
-
208 
-                        //Then this function returns the name of the Especificacion that was searched in 'name'
209 
-                        //And it also returns all the names and municipios of the artesanos that work with that especificacion
210 
-                        var getData = function () {
211 
-                            const data = [];
212 
-                            for (var i = 0; i < Esp.length; i++) {
213 
-                                data.push(getArtesania(i));
214 
-                            }
215 
-                            return data;
216 
-                        };
217 
-
218 
-                        //not sure what this does because the element is also created later on, with even more information so idk if this one is just wrong
219 
-                        //This will create a new tab with the information of the arteanos?
220 
-                        var createArtesano = function (Artesano) {
221 
-
222 
-                            return ons.createElement(`
223 
-              <ons-list-item expandable tappable>
224 
-                <div class="center" >${Artesano.Nombre}</div>
225 
-                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
226 
-                                                 Tel\u00e9fono: ${Artesano["Telefono 1"]}<br>
227 
-                                                 Correo Electr\u00f3nico: ${Artesano["Email"]}<br>
228 
-                                                 </div>
229 
-              </ons-list-item>`
230 
-                                                    );
231 
-                        };
232 
-
233 
-                        //var Artesanias = getData();
234 
-                        //artesanos_json
235 
-
236 
-                        for (Artesano of artesanos_json) {
237 
-
238 
-                            var cont = 0;
239 
-                            var lista = document.getElementById('artesanos-list');
240 
-
241 
-                            //Recopilar datos no vacios.
242 
-                            //Counts all the tyoes of data that the artists don't have
243 
-                            //Later on, if you discover that they didn't have 'municipios', telephone numbers, emails and especificaciones then you wont display it.
244 
-                            if (Artesano.Municipio.trim().length != 0) {
245 
-                                cont ++;
246 
-                            }
247 
-                            if (Artesano["Telefono 1"].trim().length != 0) {
248 
-                                cont ++;
249 
-                            }
250 
-                            if (Artesano["Email"].trim().length != 0 & Artesano["Email"].toUpperCase().trim() != "NO TIENE") {
251 
-                                cont ++;
252 
-                            }
253 
-                            if (Artesano.Especificacion.trim().length != 0) {
254 
-                                cont ++;
255 
-                            }
256 
-
257 
-                            Artesano.Nombre = Artesano.Nombre + " " + Artesano["Apellido Paterno"] + " " + Artesano["Apellido Materno"];
258 
-
259 
-                            //info a pasar
260 
-                            //'title':'${Artesano.Nombre}','esp': '${info}'
261 
-                            //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
262 
-                            //And puts this into the 'item' variable
263 
-                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre.replace(/"/g, " ")}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
264 
-                        <div class="title">${Artesano.Nombre}</div>
265 
-                    </ons-list-item>`);
266 
-
267 
-                            //If it didn't find 'municipios', telephone numbers, emails and 'especificaciones' of that artists then it wont include it on the 'artesanos-list' (variable: 'lista')
268 
-                            //If it found that it has at least one of them then it will include it into the list.
269 
-                            if(cont == 0){
270 
-                                //console.log(Artesano.Nombre+' no tiene ningun tipo de informacion.');
271 
-                                //return ons.createElement(``);
272 
-                            }
273 
-                            else {
274 
-                                lista.appendChild(item);
275 
-                            }
276 
-
277 
-                        };
278 
-
279 
-                    };
280 
-                </script>
281 
-
282 
-                <style>
283 
-                    .pull-hook-content {
284 
-                        color: #333;
285 
-                        transition: transform .25s ease-in-out;
286 
-                    }
287 
-                </style>
288 
-
289 
-            </ons-page>
290 
-
291 
-        </template>
292 
-
293 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
294 
-
295 
-         <template id="artesanias.html">
296 
-             <ons-page id="artesanias">
297 
-
298 
-                 <ons-toolbar>
299 
-                     <div class="left"><ons-back-button>Atrás</ons-back-button></div>
300 
-                     <div class="center"></div>
301 
-                 </ons-toolbar>
302 
-
303 
-                 <ons-pull-hook id="pull-hook" threshold-height="120px">
304 
-                     <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
305 
-                 </ons-pull-hook>
306 
-
307 
-                 <ons-list id="artesania-list" src="">
308 
-                     <ons-list-header>Artesanias</ons-list-header>
309 
-                 </ons-list>
310 
-
311 
-                 <script>
312 
-
313 
-                     ons.getScriptPage().onInit = function () {
314 
-                         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
315 
-
316 
-                         //var File = this.data.title.toUpperCase() + '.json' ;
317 
-                         var Esp = this.data.esp.split(', ');
318 
-                         var artesanos_json = this.data.json;
319 
-
320 
-                         //Convertir en mayuscula primera letra del string.
321 
-                         for(var i=0; i<Esp.length; i++) {
322 
-                             Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
323 
-                         };
324 
-
325 
-                         var pullHook = document.getElementById('pull-hook');
326 
-                         var icon = document.getElementById('pull-hook-icon');
327 
-                         pullHook.addEventListener('changestate', function (event) {
328 
-                             switch (event.state) {
329 
-                                 case 'initial':
330 
-                                     icon.setAttribute('icon', 'fa-arrow-down');
331 
-                                     icon.removeAttribute('rotate');
332 
-                                     icon.removeAttribute('spin');
333 
-                                     break;
334 
-                                 case 'preaction':
335 
-                                     icon.setAttribute('icon', 'fa-arrow-down');
336 
-                                     icon.setAttribute('rotate', '180');
337 
-                                     icon.removeAttribute('spin');
338 
-                                     break;
339 
-                                 case 'action':
340 
-                                     icon.setAttribute('icon', 'fa-spinner');
341 
-                                     icon.removeAttribute('rotate');
342 
-                                     icon.setAttribute('spin', true);
343 
-                                     break;
344 
-                             }
345 
-                         });
346 
-
347 
-                         var getArtesania = function (num) {
348 
-
349 
-                             var Artesanos = ``,
350 
-                                 ArtesanosInfo = ``;
351 
-
352 
-                             //console.log('Filtrado de ',Esp[num])
353 
-
354 
-                             var results = [];
355 
-                             var searchVal = "my Name";
356 
-                             for (var i=0 ; i < artesanos_json.length ; i++)
357 
-                             {
358 
-                                 if (artesanos_json[i].Especificacion.includes(Esp[num])) {
359 
-                                     results.push(artesanos_json[i]);
360 
-                                 }
361 
-                             }
362 
-
363 
-                             /*var arr1=artesanos_json.filter(function(item){
364 
-                             return item.Nombre=="Ana";
365 
-                             });*/
366 
-
367 
-                             for(var i=0; i<results.length; i++) {
368 
-
369 
-                                 //if(Esp[num] in artesanos_json.) {}
370 
-                                 //results[i].Nombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
371 
-                                 ANombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
372 
-                                 Artesanos+=`${ANombre}|`
373 
-                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["Email"]}|${results[i].Especificacion}|${results[i]["Tecnica"]}&&`
374 
-                                 //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
375 
-                             }
376 
-
377 
-                             return {
378 
-                                 name: Esp[num],
379 
-                                 artesan: Artesanos,
380 
-                                 info: ArtesanosInfo
381 
-                             };
382 
-                         };
383 
-
384 
-                         var getData = function () {
385 
-                             const data = [];
386 
-                             for (var i = 0; i < Esp.length; i++) {
387 
-                                 data.push(getArtesania(i));
388 
-                             }
389 
-                             return data;
390 
-                         };
391 
-                         var createArtesania = function (Artesania) {
392 
-
393 
-                             //console.log('Devuelto elemento')
394 
-                             var listaArt=``;
395 
-                             var arts = Artesania.artesan.split('|');
396 
-                             var artsInfo = Artesania.info.split('&&');
397 
-
398 
-                             for(var i=0; i<arts.length; i++) {
399 
-                                 var lot = artsInfo[i].split('|'),
400 
-                                     mun = lot[0],
401 
-                                     tel = lot[1],
402 
-                                     email = lot[2],
403 
-                                     esp = lot[3],
404 
-                                     redes = lot[4],
405 
-                                     tecnicas = lot[5];
406 
-
407 
-                                 listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i]}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}', redes: '${redes}', tecnicas: '${tecnicas}' }} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
408 
-                             }
409 
-
410 
-                             if (Artesania.name == "Figuras y simbolos indigenas") {
411 
-                                 Artesania.name = "Figuras y símbolos indígenas";
412 
-                             }
413 
-
414 
-                             console.log(Artesania.name);
415 
-
416 
-                             return ons.createElement(`
417 
-              <ons-list-item expandable tappable>
418 
-                <div class="center" >${Artesania.name}</div>
419 
-                <div class="expandable-content">Artesanos que trabajan con ${Artesania.name}
420 
-                <ons-card>${listaArt}</ons-card></div>
421 
-                </ons-list-item>`
422 
-                                                     );
423 
-                         };
424 
-
425 
-                         var Artesanias = getData();
426 
-
427 
-                         for (Art of Artesanias) {
428 
-
429 
-                             var Artesania = createArtesania(Art);
430 
-                             document.getElementById('artesania-list').appendChild(Artesania);
431 
-                         };
432 
-                         pullHook.onAction = function (done) {
433 
-
434 
-                             setTimeout(function() {
435 
-                                 document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
436 
-                                 done();
437 
-                             }, 400);
438 
-                         }
439 
-
440 
-                     };
441 
-                 </script>
442 
-
443 
-                 <style>
444 
-                     .pull-hook-content {
445 
-                         color: #333;
446 
-                         transition: transform .25s ease-in-out;
447 
-                     }
448 
-                 </style>
449 
-             </ons-page>
450 
-        </template>
451 
-
452 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
453 
-<!----------------------------------------------------------------------------------->
454 
-        <!--
455 
-            The searchfunctions.js file is just a file that has all the definitions of the functions used later on in the switch
456 
-        -->
457 
-        <script src = "js/searchfunctions.js"></script>
458 
-        <script>
459 
-            //'all_artesanos' is the variable containing the JSON file that has all the artesanos with their data
460 
-
461 
-
462 
-            var all_artesanos = JSON.parse(window.localStorage.getItem('TODOS'));
463 
-            function filter(){
464 
-                //finds the values of the search bar which are sent from the block of code after this script
465 
-                //input is the one you use to filter by any parameter
466 
-                //inputarte is the one you use to filter by the type of art the artists make
467 
-                //inputmuni is the one you use to filter by municipio
468 
-                //informacion is the variable that has all the information that will be sent to this tab, what we're going to use here is just to declare which artists are seen (informacion[i].style.display = "list-item") and which are not seen (informacion[i].style.display = "none")
469 
-                var input = document.getElementById('searchbar').value;
470 
-                var inputarte = document.getElementById('searchartesania').value;
471 
-                var inputmuni = document.getElementById('searchbarmunicipio').value;
472 
-                var x = document.getElementsByClassName('artists');
473 
-                //just making sure everything is at the same format by taking out special characters, trimming it and putting it in lowercase (same thing will be done to the arguments it's being compared to later on)
474 
-                //acento_replace(): it's a function I made that takes out any special characters of a word and changes them back to the plain ones (quitar acentos o cosas asi)
475 
-                input = input.trim().toLowerCase();
476 
-                inputarte = inputarte.trim().toLowerCase();
477 
-                inputmuni = inputmuni.trim().toLowerCase();
478 
-                input = acento_replace(input);
479 
-                inputarte = acento_replace(inputarte);
480 
-                inputmuni = acento_replace(inputmuni);
481 
-                //default case is where evey one of them has nothing or less than 3 characters (displays every artist until it passes that length)
482 
-                if (input.length <= 3 && inputarte.length <= 3 && inputmuni.length <= 3){
483 
-                    for (var i = 0; all_artesanos.length; i++){
484 
-                        x[i].style.display = "list-item";
485 
-                    }
486 
-                }
487 
-                else{
488 
-                    var cases = 0;
489 
-                    cases = getcasenum(input,inputarte,inputmuni);
490 
-                    //take every one of them out first (dont display any)
491 
-                    for (var i = 0; i < all_artesanos.length; i++){
492 
-                        x[i].style.display = "none";
493 
-                    }
494 
-                    switch(cases){
495 
-                        //cases == 1 when only inputmuni has been writen on
496 
-                        case 1:
497 
-                            filter_municipios(inputmuni);
498 
-                            break;
499 
-                        //cases == 2 when only inputarte has been written on
500 
-                        case 2:
501 
-                            filter_artesanias(inputarte);
502 
-                            break;
503 
-                        //cases == 3 when inputarte and inputmuni has been written on
504 
-                        case 3:
505 
-                            search_art_mun(inputarte,inputmuni);
506 
-                            break;
507 
-                        //cases == 4 when input has been writen on
508 
-                        case 4:
509 
-                            filter_any(input);
510 
-                            break;
511 
-                        //cases == 5 when input and inputmuni has been written on
512 
-                        case 5:
513 
-                            search_any_mun(input,inputmuni);
514 
-                            break;
515 
-                        //cases == 6 when input and inputart has been written on
516 
-                        case 6:
517 
-                            search_any_art(input,inputarte);
518 
-                            break;
519 
-                        //cases == 7 when input, inputart and inputmuni has been writen on
520 
-                        case 7:
521 
-                            search_any_art_mun(input,inputarte,inputmuni);
522 
-                            break;
523 
-                    }
524 
-                }
525 
-            }
526 
-        </script>
527 
-
528 
-        <template id="search.html">
529 
-          <ons-navigator swipeable animation="slide" id="SNavigator">
530 
-            <ons-page id="Buscar">
531 
-                <!--
532 
-                    This is the search bars, each time you type a character into any of the search bars, they will run the filter() function with what they all have as arguments (even if the other search bars have nothing in them)
533 
-                    The first search bar is to find by any information related to the artist
534 
-                    The second searchbar is to find by the type of artwork they work on
535 
-                    The third searchbar is to find by the municipio where the artists works or lives
536 
-                -->
537 
-                <p style="text-align: center; margin-top: 10px;">
538 
-                    <ons-search-input placeholder="Búsqueda con cualquier término" id = "searchbar"
539 
-                        onkeyup = "filter()" style = "width: 300px;" ></ons-search-input>
540 
-                    <ons-search-input placeholder="Búsqueda por artesanias" id = "searchartesania"
541 
-                        onkeyup = "filter()" style = "width: 300px;"></ons-search-input>
542 
-                    <ons-search-input placeholder = "Búsqueda por municipio" id = "searchbarmunicipio"
543 
-                        onkeyup = "filter()" style = "width: 300px;"></ons-search-input>
544 
-                </p>
545 
-
546 
-                <ons-list id="results" src="">
547 
-                </ons-list>
548 
-
549 
-                <script>
550 
-                    //This is basically declaring what we refer to as informacion in the filter() function
551 
-                    //It iterates though each artists in the all_artesanos json file from before, it displays their name in the "Buscar" page, and it gets prepared so that when its clicked it redirects to the "artesano.html" page with the other aditional information that we have other than the name.
552 
-                    for (i = 0; i < all_artesanos.length;i++){
553 
-                        all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
554 
-                        var artesano = ons.createElement(`<ons-list-item class = "artists"
555 
-                        onclick="SNavigator.pushPage('artesano_s.html', { data: {title: '${all_artesanos[i].Nombre.replace(/"/g, " ")}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
556 
-                        <div>${all_artesanos[i].Nombre}</div>
557 
-                    </ons-list-item>`);
558 
-                        document.getElementById('results').appendChild(artesano);
559 
-                    }
560 
-                </script>
561 
-
562 
-            </ons-page>
563 
-            </ons-navigator>
564 
-        </template>
565 
-
566 
-        <!-- ---------------------------------------------------------------------------------------------------------------------------------------- -->
567 
-        <!--This page is used so that we can display the information of a specific artists, and whenever the artists is missing information then we just dont include that in the page-->
568 
-        <template id= "artesano.html">
569 
-            <ons-page id = "artesano">
570 
-                <ons-toolbar>
571 
-                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
572 
-                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
573 
-                    <div class = "center"></div>
574 
-                </ons-toolbar>
575 
-                <body>
576 
-                    <!-- This is where we'll put all the information of that artsts -->
577 
-                    <font size="+1">
578 
-                        <ons-card id="all"></ons-card>
579 
-                    </font>
580 
-                </body>
581 
-                <script>
582 
-                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
583 
-                    ons.getScriptPage().onInit = function () {
584 
-                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
585 
-
586 
-                        var data = '',
587 
-                            mun = this.data.mun,
588 
-                            tel = this.data.tel,
589 
-                            em = this.data.email,
590 
-                            esp = this.data.esp,
591 
-                            redes = this.data.redes,
592 
-                            tecnicas = this.data.tecnicas;
593 
-
594 
-                        //here the email is the string made from the start to where the '#' is.
595 
-
596 
-
597 
-                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
598 
-                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
599 
-                        //but if theres only one then you just write it into the page
600 
-                        if(esp.trim() != ""){
601 
-                            if(esp.includes(";", 0)){
602 
-                                esp=esp.replace(/;/g,", ");
603 
-                                data+='Tipos de artesanías: '+esp+'<br>';
604 
-                            }
605 
-                            else {
606 
-                                data+='Tipo de artesanía: '+esp+'<br>';
607 
-                            }
608 
-                        }
609 
-
610 
-                        if(tecnicas.trim() != ''){
611 
-                            if(tecnicas.includes(";", 0)){
612 
-                                tecnicas = tecnicas.replace(/;/g,", ");
613 
-                                data+='Técnicas que usan: '+tecnicas+'<br>';
614 
-                            }
615 
-                            else {
616 
-                                data+='Técnicas que usan: '+tecnicas+'<br>';
617 
-                            }
618 
-                        }
619 
-                        //console.log("Las redes son..."+this.data.redes);
620 
-                        //Here it's making sure theres something in municipio and writing their municipio into the page
621 
-                        if(mun.trim() != ""){
622 
-                            data+='Municipio: '+ mun +'<br>';
623 
-                        }
624 
-
625 
-                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
626 
-                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
627 
-                        if(em.trim() != "" & em.toUpperCase().trim() != "NO TIENE"){
628 
-                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+em+'"><u>'+em+'</u></a><br>';
629 
-                        }
630 
-
631 
-                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
632 
-                        if(tel.trim() != "" ){
633 
-                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
634 
-                        }
635 
-
636 
-                        console.log("Redes: "+redes);
637 
-
638 
-                        //Here it has to decide what to do depending on the links they give to their social media pages
639 
-                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
640 
-                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
641 
-                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
642 
-                        //If it's none of them then it will not display anything
643 
-                        if(redes.includes("facebook")){
644 
-
645 
-                            console.log(redes.substring(1,redes.length-2));
646 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
647 
-                        }
648 
-                        else if(redes.includes("instagram")){
649 
-                            console.log(redes.substring(1,redes.length-2));
650 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
651 
-                        }
652 
-                        else if(redes.includes("myspace")){
653 
-                            console.log(redes.substring(1,redes.length-2));
654 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
655 
-                        }
656 
-                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
657 
-                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
658 
-                            redes = redes.substr(0, redes.length-1);
659 
-                            console.log(redes);
660 
-                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
661 
-                        }
662 
-                        else if(redes.includes("#") || redes.includes("mailto")){
663 
-                            console.log("tiene un disparate");
664 
-                        } else {
665 
-                            console.log("no tiene nada");
666 
-                        }
667 
-
668 
-                        //This is the part that allows eveything (data) to be displayed
669 
-                        document.getElementById("all").innerHTML = `${data}`;
670 
-
671 
-                    }
672 
-                </script>
673 
-            </ons-page>
674 
-        </template>
675 
-
676 
-         <template id= "artesano_s.html">
677 
-            <ons-page id = "artesano_s">
678 
-                <ons-toolbar>
679 
-                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
680 
-                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
681 
-                    <div class = "center"></div>
682 
-                </ons-toolbar>
683 
-                <body>
684 
-                    <!-- This is where we'll put all the information of that artsts -->
685 
-                    <font size="+1">
686 
-                        <ons-card id="all2"></ons-card>
687 
-                    </font>
688 
-                </body>
689 
-                <script>
690 
-                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
691 
-                    ons.getScriptPage().onInit = function () {
692 
-                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
693 
-
694 
-                        var data = '',
695 
-                            mun = this.data.mun,
696 
-                            tel = this.data.tel,
697 
-                            em = this.data.email,
698 
-                            esp = this.data.esp,
699 
-                            redes = this.data.redes,
700 
-                            tecnicas = this.data.tecnicas;
701 
-
702 
-                        //here the email is the string made from the start to where the '#' is.
703 
-
704 
-
705 
-                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
706 
-                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
707 
-                        //but if theres only one then you just write it into the page
708 
-                        if(esp.trim() != ""){
709 
-                            if(esp.includes(";", 0)){
710 
-                                esp=esp.replace(/;/g,", ");
711 
-                                data+='Tipos de artesanías: '+esp+'<br>';
712 
-                            }
713 
-                            else {
714 
-                                data+='Tipo de artesanía: '+esp+'<br>';
715 
-                            }
716 
-                        }
717 
-
718 
-                        if(tecnicas.trim() != ''){
719 
-                            if(tecnicas.includes(";", 0)){
720 
-                                tecnicas = tecnicas.replace(/;/g,", ");
721 
-                                data+='Técnicas que usan: '+tecnicas+'<br>';
722 
-                            }
723 
-                            else {
724 
-                                data+='Técnicas que usan: '+tecnicas+'<br>';
725 
-                            }
726 
-                        }
727 
-                        //console.log("Las redes son..."+this.data.redes);
728 
-                        //Here it's making sure theres something in municipio and writing their municipio into the page
729 
-                        if(mun.trim() != ""){
730 
-                            data+='Municipio: '+ mun +'<br>';
731 
-                        }
732 
-
733 
-                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
734 
-                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
735 
-                        if(em.trim() != "" & em.toUpperCase().trim() != "NO TIENE"){
736 
-                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+em+'"><u>'+em+'</u></a><br>';
737 
-                        }
738 
-
739 
-                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
740 
-                        if(tel.trim() != "" ){
741 
-                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
742 
-                        }
743 
-
744 
-                        console.log("Redes: "+redes);
745 
-
746 
-                        //Here it has to decide what to do depending on the links they give to their social media pages
747 
-                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
748 
-                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
749 
-                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
750 
-                        //If it's none of them then it will not display anything
751 
-                        if(redes.includes("facebook")){
752 
-
753 
-                            console.log(redes.substring(1,redes.length-2));
754 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
755 
-                        }
756 
-                        else if(redes.includes("instagram")){
757 
-                            console.log(redes.substring(1,redes.length-2));
758 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
759 
-                        }
760 
-                        else if(redes.includes("myspace")){
761 
-                            console.log(redes.substring(1,redes.length-2));
762 
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
763 
-                        }
764 
-                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
765 
-                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
766 
-                            redes = redes.substr(0, redes.length-1);
767 
-                            console.log(redes);
768 
-                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
769 
-                        }
770 
-                        else if(redes.includes("#") || redes.includes("mailto")){
771 
-                            console.log("tiene un disparate");
772 
-                        } else {
773 
-                            console.log("no tiene nada");
774 
-                        }
775 
-
776 
-                        //This is the part that allows eveything (data) to be displayed
777 
-                        document.getElementById("all2").innerHTML = `${data}`;
778 
-
779 
-                    }
780 
-                </script>
781 
-            </ons-page>
782 
-        </template>
783 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
784 
-
785 
-        <template id="renglones.html">
786 
-          <ons-navigator swipeable animation="slide" id="myNavigator">
787 
-            <ons-page id="renglones">
788 
-
789 
-            <ons-card id="list">
790 
-              <script type="text/javascript" src="js/renglones.js"></script>
791 
-            </ons-card>
792 
-
793 
-                <!--Javascript function to hide other open expandables-->
794 
-                <script>
795 
-                    const hideAll = () => {
796 
-                        Array.from(document.querySelector('#list').children)
797 
-                            .forEach(item => {
798 
-                                if (item.expanded) {
799 
-                                    item.hideExpansion();
800 
-                                }
801 
-                            });
802 
-                        };
803 
-                </script>
804 
-
805 
-                <style>
806 
-                    .intro {
807 
-                        text-align: center;
808 
-                        padding: 20px;
809 
-                        margin-top: 30px;
810 
-                    }
811 
-
812 
-                    ons-card {
813 
-                        cursor: pointer;
814 
-                        color: #333;
815 
-                    }
816 
-
817 
-                    .card__title,
818 
-                    .card--material__title {
819 
-                        font-size: 15px;
820 
-                    }
821 
-                </style>
822 
-            </ons-page>
823 
-            </ons-navigator>
824 
-
825 
-        </template>
826 
-
827 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
828 
-
829 
-        <template id="ferias.html">
830 
-            <ons-page id="ferias">
831 
-
832 
-                <ons-card>
833 
-                <div id="logo" style="text-align: center">
834 
-                    <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">
835 
-                </div>
836 
-                <br><br>
837 
-                <div id="button" style="text-align: center">
838 
-                <button onclick="redirect()">Pasar a la página de eventos</button>
839 
-                </div>
840 
-                <br><br>
841 
-                <div id="Mensaje">
842 
-                    El Instituto de Cultura Puertorriqueña, el Gobierno de Puerto Rico, los Colaboradores de esta aplicación, así como los funcionarios, empleados y contratistas de los anteriores, no se hacen responsables de los mensajes, imágenes, opiniones, servicios, declaraciones, representaciones o cualquier forma de contenido incluido en cualquiera de los enlaces accesibles, vinculados o referidos a través de ArtesaníasICP.
843 
-                </div>
844 
-                </ons-card>
845 
-
846 
-              <script>
847 
-              function redirect() {
848 
-                location.replace("https://facebook.com/icppr")
849 
-              }
850 
-              </script>
851 
-            </ons-page>
852 
-        </template>
853 
-
854 
-<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
855 
-
856 
-        <template id="colaboradores.html">
857 
-            <ons-page id="colaboradores">
858 
-                <ons-card>
859 
-
860 
-                    <h1>Colaboradores</h1>
861 
-
862 
-                    <style>
863 
-                        .column {
864 
-                            float: left;
865 
-                            width: 50%;
866 
-                        }
867 
-                        .row {
868 
-                            width: 100%;
869 
-                        }
870 
-                    </style>
871 
-                    <h2>SINFINESPR</h2>
872 
-                    <div class = "column">
873 
-                        SINFINESPR es un programa de Titín Foundation que responde a nuestro interés y compromiso con el fortalecimiento del tercer sector.
874 
-                        <br><br>
875 
-                        En esta plataforma agrupamos herramientas que permitirán que tu organización adquiera mayor visibilidad, recursos, conexiones, capacidad para una operación más eficiente y efectiva.
876 
-                        <br><br>
877 
-                        Saludos Cordiales,
878 
-                                Aziria
879 
-                    </div>
880 
-                    <div class = "column">
881 
-                        <img src="img/sfpr.svg" style="width:150px;height:100px">
882 
-                    </div>
883 
-                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
884 
-                    Visita nuesta Página Web o siguenos en nuestras redes sociales <br> <br>
885 
-                    <a href="https://twitter.com/SINFINESPR"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
886 
-                    </a>
887 
-                    <a href="https://www.facebook.com/sinfinespr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
888 
-                    </a>
889 
-                    <a href="https://www.linkedin.com/company/sinfinespr/"><img src="img/linkedin.png" alt="Linkedin" style="width:35px;height:35px;border:0;">
890 
-                    </a>
891 
-                    <a href="https://www.instagram.com/sinfinespr/"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
892 
-                    </a>
893 
-                    <br><br>
894 
-                    <h2>Centro de Desarrollo y Consultoría Computacional</h2>
895 
-                    El Centro de Desarrollo y Consultoría Computacional está compuesto por profesores y estudiantes del departamento de Ciencia de Cómputos de la Universidad de Puerto Rico Recinto de Río Piedras. Nuestra meta es aportar al desarrollo computacional de la Universidad y de Puerto Rico al proveer servicios al día, de calidad y con precios accesibles, a la misma vez que se le ofrece experiencias prácticas a los estudiantes del departamento de Ciencia de Cómputos.
896 
-                    <br><br>
897 
-
898 
-                    <img src="img/logo_cdcc.png" style="width: 150px; height: 100px">
899 
-
900 
-                    <br><br>
901 
-                    Si tiene alguna duda nos puede contactar por:
902 
-                    <br>
903 
-                    Teléfono: 787-764-0000 Ext. 88341, 88349
904 
-                    <br>
905 
-                    o
906 
-                    <br>
907 
-                    Correo electrónico: <a href = "mailto:carlos.corrada2@upr.edu" style ="color:#0000EE;text-decoration: underline;">carlos.corrada2@upr.edu</a>
908 
-
909 
-                </ons-card>
910 
-            </ons-page>
911 
-        </template>
912 
-  <script src="js/load.js"></script>
913 
-
914 
-
915 
-        <script type="text/javascript" src="cordova.js"></script>
916 
-        <script type="text/javascript" src="js/index.js"></script>
917 
-    </body>
918 
-</html>