Christian Matos 3 years ago
parent
commit
90d231ec0a

+ 115
- 21
platforms/android/app/src/main/assets/www/index.html View File

@@ -86,7 +86,7 @@
86 86
                 <ons-card id="azar"><!--style="height: 100%"-->
87 87
 
88 88
                     <!--<div class="title" id="Title"></div>-->
89
-                    <div id="image" style= "max-height:500px"></div><br>
89
+                    <div id="image" style= "max-height:450px"></div><br>
90 90
                     <div class="content" id="Content"></div>
91 91
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 92
                     <!--For now all this information is stored inside a .csv file-->
@@ -260,7 +260,7 @@
260 260
                             //'title':'${Artesano.Nombre}','esp': '${info}'
261 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 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>
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 264
                         <div class="title">${Artesano.Nombre}</div>
265 265
                     </ons-list-item>`);
266 266
 
@@ -552,7 +552,7 @@
552 552
                     for (i = 0; i < all_artesanos.length;i++){
553 553
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
554 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>
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 556
                         <div>${all_artesanos[i].Nombre}</div>
557 557
                     </ons-list-item>`);
558 558
                         document.getElementById('results').appendChild(artesano);
@@ -573,8 +573,10 @@
573 573
                     <div class = "center"></div>
574 574
                 </ons-toolbar>
575 575
                 <body>
576
-                    <!-- This is where we'll put all the information of that artsts -->
577
-                    <ons-card id="all"></ons-card>
576
+                	<font size="+1">
577
+                    	<!-- This is where we'll put all the information of that artsts -->
578
+                    	<ons-card id="all"></ons-card>
579
+                    </font>
578 580
                 </body>
579 581
                 <script>
580 582
                     //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
@@ -670,20 +672,120 @@
670 672
                 </script>
671 673
             </ons-page>
672 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
+                        }
673 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>
674 783
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
675 784
 
676 785
         <template id="renglones.html">
677 786
           <ons-navigator swipeable animation="slide" id="myNavigator">
678 787
             <ons-page id="renglones">
679 788
 
680
-            <!--div class="search-bar">
681
-                 <p style="text-align: center; margin-top: 10px;">
682
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
683
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
684
-                </p>
685
-            </div-->
686
-
687 789
             <ons-card id="list">
688 790
               <script type="text/javascript" src="js/renglones.js"></script>
689 791
             </ons-card>
@@ -726,15 +828,7 @@
726 828
 
727 829
         <template id="ferias.html">
728 830
             <ons-page id="ferias">
729
-                <!--<ons-card>
730
-
731
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
732
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
733
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
734
-                </div>
735
-
736
-                </ons-card>--
737
-                <br><br><br>-->
831
+                
738 832
                 <ons-card>
739 833
                 <div id="logo" style="text-align: center">
740 834
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">

+ 10
- 8
platforms/android/app/src/main/assets/www/js/azar.js View File

@@ -3,22 +3,24 @@
3 3
 // begin accessing JSON data here
4 4
 var data = JSON.parse(localStorage.getItem("AZAR"));
5 5
 
6
+// grabs the page with home id
6 7
 var page = document.getElementById("home");
7 8
 
9
+// assigns a random number to randomly determine which image and information to display in the home page.
10
+// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
11
+// and puts the corresponding title and description. This section activates on application startup.
8 12
 var aleatorio = Math.floor(Math.random()*52);
9
-document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
10
-document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 
13
+document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
14
+document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 
11 15
 
16
+// This section activates every time you switch back to the home tab. It first empties the content on the card
17
+// and then it newly assigns a new random number to fetch a new random image and description to display on home.
12 18
 page.addEventListener("show", function(event){
13 19
     document.getElementById("image").innerHTML='';
14 20
     document.getElementById("Content").innerHTML='';
15 21
     var aleatorio = Math.floor(Math.random()*32);
16
-    //var azar = document.getElementById("azar");
17
-    //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
18
-    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
19
-    //document.getElementById("Title").innerHTML = data[aleatorio].Renglones;
20
-    document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
21
-    //azar.appendChild(img);
22
+    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
23
+    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
22 24
     });
23 25
 
24 26
                            

+ 119
- 24
platforms/browser/www/index.html View File

@@ -86,7 +86,7 @@
86 86
                 <ons-card id="azar"><!--style="height: 100%"-->
87 87
 
88 88
                     <!--<div class="title" id="Title"></div>-->
89
-                    <div id="image" style= "max-height:500px"></div><br>
89
+                    <div id="image" style= "max-height:450px"></div><br>
90 90
                     <div class="content" id="Content"></div>
91 91
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 92
                     <!--For now all this information is stored inside a .csv file-->
@@ -260,7 +260,7 @@
260 260
                             //'title':'${Artesano.Nombre}','esp': '${info}'
261 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 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["E-mail"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica 1"]}' } })" tappable>
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 264
                         <div class="title">${Artesano.Nombre}</div>
265 265
                     </ons-list-item>`);
266 266
 
@@ -367,9 +367,10 @@
367 367
                              for(var i=0; i<results.length; i++) {
368 368
 
369 369
                                  //if(Esp[num] in artesanos_json.) {}
370
-                                 results[i].Nombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
371
-                                 Artesanos+=`${results[i].Nombre}|`
372
-                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["E-mail"]}|${results[i].Especificacion}|${results[i]["Tecnica 1"]}&&`
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"]}&&`
373 374
                                  //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
374 375
                              }
375 376
 
@@ -551,7 +552,7 @@
551 552
                     for (i = 0; i < all_artesanos.length;i++){
552 553
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
553 554
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
554
-                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["E-mail"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica 1"]}' } })" tappable>
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>
555 556
                         <div>${all_artesanos[i].Nombre}</div>
556 557
                     </ons-list-item>`);
557 558
                         document.getElementById('results').appendChild(artesano);
@@ -572,8 +573,10 @@
572 573
                     <div class = "center"></div>
573 574
                 </ons-toolbar>
574 575
                 <body>
575
-                    <!-- This is where we'll put all the information of that artsts -->
576
-                    <ons-card id="all"></ons-card>
576
+                	<font size="+1">
577
+                    	<!-- This is where we'll put all the information of that artsts -->
578
+                    	<ons-card id="all"></ons-card>
579
+                    </font>
577 580
                 </body>
578 581
                 <script>
579 582
                     //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
@@ -669,20 +672,120 @@
669 672
                 </script>
670 673
             </ons-page>
671 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
+                        }
672 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>
673 783
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
674 784
 
675 785
         <template id="renglones.html">
676 786
           <ons-navigator swipeable animation="slide" id="myNavigator">
677 787
             <ons-page id="renglones">
678 788
 
679
-            <!--div class="search-bar">
680
-                 <p style="text-align: center; margin-top: 10px;">
681
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
682
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
683
-                </p>
684
-            </div-->
685
-
686 789
             <ons-card id="list">
687 790
               <script type="text/javascript" src="js/renglones.js"></script>
688 791
             </ons-card>
@@ -725,15 +828,7 @@
725 828
 
726 829
         <template id="ferias.html">
727 830
             <ons-page id="ferias">
728
-                <!--<ons-card>
729
-
730
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
731
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
732
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
733
-                </div>
734
-
735
-                </ons-card>--
736
-                <br><br><br>-->
831
+                
737 832
                 <ons-card>
738 833
                 <div id="logo" style="text-align: center">
739 834
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">

+ 10
- 8
platforms/browser/www/js/azar.js View File

@@ -3,22 +3,24 @@
3 3
 // begin accessing JSON data here
4 4
 var data = JSON.parse(localStorage.getItem("AZAR"));
5 5
 
6
+// grabs the page with home id
6 7
 var page = document.getElementById("home");
7 8
 
9
+// assigns a random number to randomly determine which image and information to display in the home page.
10
+// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
11
+// and puts the corresponding title and description. This section activates on application startup.
8 12
 var aleatorio = Math.floor(Math.random()*52);
9
-document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
10
-document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 
13
+document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
14
+document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 
11 15
 
16
+// This section activates every time you switch back to the home tab. It first empties the content on the card
17
+// and then it newly assigns a new random number to fetch a new random image and description to display on home.
12 18
 page.addEventListener("show", function(event){
13 19
     document.getElementById("image").innerHTML='';
14 20
     document.getElementById("Content").innerHTML='';
15 21
     var aleatorio = Math.floor(Math.random()*32);
16
-    //var azar = document.getElementById("azar");
17
-    //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
18
-    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
19
-    //document.getElementById("Title").innerHTML = data[aleatorio].Renglones;
20
-    document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
21
-    //azar.appendChild(img);
22
+    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
23
+    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
22 24
     });
23 25
 
24 26
                            

+ 2
- 2
platforms/browser/www/js/searchfunctions.js View File

@@ -123,7 +123,7 @@ function find_artesania(i,input){
123 123
 
124 124
 
125 125
 function find_tecnicas(i,input){
126
-    var tecnicas = all_artesanos[i]["Tecnica 1"];
126
+    var tecnicas = all_artesanos[i]["Tecnica"];
127 127
     tecnicas = tecnicas.trim().toLowerCase();
128 128
     tecnicas = acento_replace(tecnicas);
129 129
     if(tecnicas.search(input) != -1){
@@ -170,7 +170,7 @@ function find_telefono(i,input){
170 170
 //trata de ver si el input es parte del email del artista i
171 171
 //Mayuscula and acento proof
172 172
 function find_email(i,input){
173
-    var email = all_artesanos[i]["E-mail"];
173
+    var email = all_artesanos[i]["Email"];
174 174
     email = email.trim().toLowerCase();
175 175
     email = acento_replace(email);
176 176
     if(email.search(input) != -1){

+ 115
- 21
www/index.html View File

@@ -86,7 +86,7 @@
86 86
                 <ons-card id="azar"><!--style="height: 100%"-->
87 87
 
88 88
                     <!--<div class="title" id="Title"></div>-->
89
-                    <div id="image" style= "max-height:500px"></div><br>
89
+                    <div id="image" style= "max-height:450px"></div><br>
90 90
                     <div class="content" id="Content"></div>
91 91
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 92
                     <!--For now all this information is stored inside a .csv file-->
@@ -260,7 +260,7 @@
260 260
                             //'title':'${Artesano.Nombre}','esp': '${info}'
261 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 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>
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 264
                         <div class="title">${Artesano.Nombre}</div>
265 265
                     </ons-list-item>`);
266 266
 
@@ -552,7 +552,7 @@
552 552
                     for (i = 0; i < all_artesanos.length;i++){
553 553
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
554 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>
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 556
                         <div>${all_artesanos[i].Nombre}</div>
557 557
                     </ons-list-item>`);
558 558
                         document.getElementById('results').appendChild(artesano);
@@ -573,8 +573,10 @@
573 573
                     <div class = "center"></div>
574 574
                 </ons-toolbar>
575 575
                 <body>
576
-                    <!-- This is where we'll put all the information of that artsts -->
577
-                    <ons-card id="all"></ons-card>
576
+                	<font size="+1">
577
+                    	<!-- This is where we'll put all the information of that artsts -->
578
+                    	<ons-card id="all"></ons-card>
579
+                    </font>
578 580
                 </body>
579 581
                 <script>
580 582
                     //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
@@ -670,20 +672,120 @@
670 672
                 </script>
671 673
             </ons-page>
672 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
+                        }
673 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>
674 783
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
675 784
 
676 785
         <template id="renglones.html">
677 786
           <ons-navigator swipeable animation="slide" id="myNavigator">
678 787
             <ons-page id="renglones">
679 788
 
680
-            <!--div class="search-bar">
681
-                 <p style="text-align: center; margin-top: 10px;">
682
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
683
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
684
-                </p>
685
-            </div-->
686
-
687 789
             <ons-card id="list">
688 790
               <script type="text/javascript" src="js/renglones.js"></script>
689 791
             </ons-card>
@@ -726,15 +828,7 @@
726 828
 
727 829
         <template id="ferias.html">
728 830
             <ons-page id="ferias">
729
-                <!--<ons-card>
730
-
731
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
732
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
733
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
734
-                </div>
735
-
736
-                </ons-card>--
737
-                <br><br><br>-->
831
+                
738 832
                 <ons-card>
739 833
                 <div id="logo" style="text-align: center">
740 834
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">

+ 10
- 8
www/js/azar.js View File

@@ -3,22 +3,24 @@
3 3
 // begin accessing JSON data here
4 4
 var data = JSON.parse(localStorage.getItem("AZAR"));
5 5
 
6
+// grabs the page with home id
6 7
 var page = document.getElementById("home");
7 8
 
9
+// assigns a random number to randomly determine which image and information to display in the home page.
10
+// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
11
+// and puts the corresponding title and description. This section activates on application startup.
8 12
 var aleatorio = Math.floor(Math.random()*52);
9
-document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
10
-document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 
13
+document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
14
+document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto; 
11 15
 
16
+// This section activates every time you switch back to the home tab. It first empties the content on the card
17
+// and then it newly assigns a new random number to fetch a new random image and description to display on home.
12 18
 page.addEventListener("show", function(event){
13 19
     document.getElementById("image").innerHTML='';
14 20
     document.getElementById("Content").innerHTML='';
15 21
     var aleatorio = Math.floor(Math.random()*32);
16
-    //var azar = document.getElementById("azar");
17
-    //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
18
-    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
19
-    //document.getElementById("Title").innerHTML = data[aleatorio].Renglones;
20
-    document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
21
-    //azar.appendChild(img);
22
+    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
23
+    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
22 24
     });
23 25
 
24 26