Browse Source

Added some comments

carlos.diaz44 4 years ago
parent
commit
7965238908
3 changed files with 104 additions and 37 deletions
  1. 2
    2
      .idea/workspace.xml
  2. 26
    12
      platforms/android/app/src/main/assets/www/index.html
  3. 76
    23
      www/index.html

+ 2
- 2
.idea/workspace.xml View File

@@ -96,10 +96,10 @@
96 96
     <servers />
97 97
   </component>
98 98
   <component name="WindowStateProjectService">
99
-    <state x="1060" y="100" width="721" height="853" key="com.android.tools.idea.avdmanager.AvdListDialog" timestamp="1601055392605">
99
+    <state x="1060" y="100" width="721" height="853" key="com.android.tools.idea.avdmanager.AvdListDialog" timestamp="1602265665313">
100 100
       <screen x="0" y="0" width="1920" height="1053" />
101 101
     </state>
102
-    <state x="1060" y="100" width="721" height="853" key="com.android.tools.idea.avdmanager.AvdListDialog/0.0.1920.1053@0.0.1920.1053" timestamp="1601055392605" />
102
+    <state x="1060" y="100" width="721" height="853" key="com.android.tools.idea.avdmanager.AvdListDialog/0.0.1920.1053@0.0.1920.1053" timestamp="1602265665313" />
103 103
     <state x="1103" y="354" key="com.intellij.ide.util.TipDialog" timestamp="1601055351725">
104 104
       <screen x="0" y="0" width="1920" height="1053" />
105 105
     </state>

+ 26
- 12
platforms/android/app/src/main/assets/www/index.html View File

@@ -65,11 +65,10 @@
65 65
                 <ons-tab page="home.html" label="Hogar" active></ons-tab>
66 66
                 <ons-tab page="renglones.html" label="Artesanías"></ons-tab>
67 67
                 <ons-tab page ="search.html" label="Buscar"> </ons-tab>
68
-                <ons-tab page="ferias.html" label="Eventos"></ons-tab>
69
-                <ons-tab page="instituto.html" label="ICP"></ons-tab>
68
+                <!--<ons-tab page="ferias.html" label="Eventos"></ons-tab>-->
69
+                <ons-tab page="instituto.html" label="Colab"></ons-tab>
70 70
             </ons-tabbar>
71 71
         </ons-page>
72
-        </ons-navigator>
73 72
 
74 73
 
75 74
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
@@ -78,7 +77,7 @@
78 77
 
79 78
             <ons-page id="home" class="red">
80 79
 
81
-                <ons-card id="azar">
80
+                <ons-card id="azar"><!--style="height: 100%"-->
82 81
 
83 82
                     <!--<div class="title" id="Title"></div>-->
84 83
                     <div id="image"></div><br>
@@ -505,6 +504,7 @@
505 504
                 </script>
506 505
 
507 506
             </ons-page>
507
+            </ons-navigator>
508 508
         </template>
509 509
 
510 510
         <!-- ---------------------------------------------------------------------------------------------------------------------------------------- -->
@@ -639,13 +639,13 @@
639 639
                     }
640 640
                 </style>
641 641
             </ons-page>
642
-
642
+            </ons-navigator>
643 643
 
644 644
         </template>
645 645
 
646 646
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
647 647
 
648
-        <template id="ferias.html">
648
+        <!--<template id="ferias.html">
649 649
             <ons-page id="ferias">
650 650
                 <!--<ons-card>
651 651
 
@@ -654,7 +654,7 @@
654 654
                     <script type="text/javascript" src="calendar_files/js/events.js"></script>
655 655
                 </div>
656 656
 
657
-                </ons-card>-->
657
+                </ons-card>--
658 658
                 <br><br><br>
659 659
                 <button onclick="redirect()">Pasar a la pagina de eventos</button>
660 660
 
@@ -664,15 +664,16 @@
664 664
               }
665 665
               </script>
666 666
             </ons-page>
667
-        </template>
667
+        </template>-->
668 668
 
669 669
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
670 670
 
671 671
         <template id="instituto.html">
672 672
             <ons-page id="instituto">
673 673
                 <ons-card>
674
-
675
-                    <h1>Instituto de Cultura Puertorriqueña</h1>
674
+                    
675
+                    <h1>Colaboradores</h1>
676
+                    <h2>Instituto de Cultura Puertorriqueña</h2>
676 677
                     <h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
677 678
                     </h3>
678 679
 
@@ -699,8 +700,21 @@
699 700
                     </a>
700 701
                     <a href="https://instagram.com/icppr"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
701 702
                     </a>
702
-                    <!--</div>
703
-                <!--</p>-->
703
+                    
704
+                    <br><br><br>
705
+                    <button onclick="redirect()">Pasar a la pagina de eventos</button>
706
+
707
+                    <script>
708
+                        function redirect() {
709
+                            location.replace("https://facebook.com/icppr")
710
+                        }
711
+                    </script>
712
+                    
713
+                    <br><br>
714
+                    <h2>SINFINESPR</h2>
715
+                    <br><br>
716
+                    <h2>Fundación Titín</h2>
717
+                    
704 718
                 </ons-card>
705 719
             </ons-page>
706 720
         </template>

+ 76
- 23
www/index.html View File

@@ -55,12 +55,14 @@
55 55
 
56 56
 
57 57
 
58
-
58
+            <!--the toolbar is where it will have the main name of the app and the ICP logo (top center)-->
59 59
            <ons-page>
60 60
             <ons-toolbar>
61 61
                 <div class="center">Artesanias PR</div>
62 62
                 <div class="right"><img class="list-item__thumbnail" src="img/ICP.png"></div>
63 63
             </ons-toolbar>
64
+            <!--The tabbar is the place where the user can get acces to the different sections of the app-->
65
+            <!--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-->
64 66
             <ons-tabbar swipeable position="bottom" modifier="autogrow">
65 67
                 <ons-tab page="home.html" label="Hogar" active></ons-tab>
66 68
                 <ons-tab page="renglones.html" label="Artesanías"></ons-tab>
@@ -82,7 +84,8 @@
82 84
                     <!--<div class="title" id="Title"></div>-->
83 85
                     <div id="image"></div><br>
84 86
                     <div class="content" id="Content"></div>
85
-
87
+                    <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
88
+                    <!--For now all this information is stored inside a .csv file-->
86 89
                     <script type="text/javascript" src="js/azar.js"> </script>
87 90
 
88 91
                 </ons-card>
@@ -93,19 +96,23 @@
93 96
         </template>
94 97
 
95 98
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
96
-
99
+        <!-- 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
100
+        -->
97 101
         <template id="artesanos.html">
98 102
             <ons-page id="artesanos">
99
-
103
+                <!-- This button lets the user go back to the previous page of the artesanias tab-->
100 104
                 <ons-toolbar>
101 105
                     <div class="left"><ons-back-button>Atrás</ons-back-button></div>
102 106
                     <div class="center"></div>
103 107
                 </ons-toolbar>
104 108
 
109
+                <!--Not sure what this does....-->
110
+                <!-- when you pull down and are already at the top of the artesanos list then you see that fa-arrow-down on the top-->
105 111
                 <ons-pull-hook id="pull-hook" threshold-height="120px">
106 112
                     <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
107 113
                 </ons-pull-hook>
108 114
 
115
+                <!--This is where it will make the list, so the function that puts the artists here should reference this -->
109 116
                 <ons-list id="artesanos-list" src="">
110 117
                     <ons-list-header>Artesanos</ons-list-header>
111 118
                 </ons-list>
@@ -113,19 +120,26 @@
113 120
                 <script>
114 121
 
115 122
                     ons.getScriptPage().onInit = function () {
123
+                        //not sure what this does, because I dont really know what this.data.title have inside 
124
+                        //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
116 125
                         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
117 126
 
118 127
 
119 128
                         //var File = this.data.title.toUpperCase() + '.json' ;
129
+                        //seperates all different types of especificaciones
120 130
                         var Esp = this.data.esp.split(', ');
131
+                        //Puts the json file of all the artesanos into this variable
121 132
                         var artesanos_json = this.data.json;
122 133
 
123
-
134
+                        //Turns the first character into an upper case
124 135
                         //Convertir en mayuscula primera letra del string.
125 136
                         for(var i=0; i<Esp.length; i++) {
126 137
                             Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
127 138
                         };
128 139
 
140
+                        //This is what happens when you scroll the list of names down when its already at the top
141
+                        //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
142
+                        //or if their finger goes back down.
129 143
                         var pullHook = document.getElementById('pull-hook');
130 144
                         var icon = document.getElementById('pull-hook-icon');
131 145
                         pullHook.addEventListener('changestate', function (event) {
@@ -148,12 +162,17 @@
148 162
                             }
149 163
                         });
150 164
 
165
+                        //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
166
+                        //Then it finds and copies all the information of the artists that work on that type of artesania
167
+                        //It ends up returning the especificacion in 'name' and retuns all the names and municipios of the artists that it found in 'artesan'    
151 168
                         var getArtesania = function (num) {
152
-
169
+                            //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
153 170
                             var Artesanos = ``;
154 171
 
155 172
                             console.log('Filtrado de ',Esp[num])
156 173
 
174
+                            //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.
175
+                            //I dont think its using 'searchVal' for anything....
157 176
                             var results = [];
158 177
                             var searchVal = "my Name";
159 178
                             for (var i=0 ; i < artesanos_json.length ; i++)
@@ -166,7 +185,8 @@
166 185
           /*var arr1=artesanos_json.filter(function(item){
167 186
               return item.Nombre=="Ana";
168 187
           });*/
169
-
188
+                            //After going through the whole json file
189
+                            //It adds the names and municipios of the ones found and later stored in 'results' to the 'Artesanos' variable
170 190
                             for(var i=0; i<results.length; i++) {
171 191
 
172 192
                                 //if(Esp[num] in artesanos_json.) {}
@@ -181,6 +201,8 @@
181 201
                             };
182 202
                         };
183 203
 
204
+                        //Then this function returns the name of the Especificacion that was searched in 'name'
205
+                        //And it also returns all the names and municipios of the artesanos that work with that especificacion
184 206
                         var getData = function () {
185 207
                             const data = [];
186 208
                             for (var i = 0; i < Esp.length; i++) {
@@ -189,7 +211,8 @@
189 211
                             return data;
190 212
                         };
191 213
 
192
-
214
+                        //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
215
+                        //This will create a new tab with the information of the arteanos?
193 216
                         var createArtesano = function (Artesano) {
194 217
 
195 218
                             return ons.createElement(`
@@ -212,6 +235,8 @@
212 235
                             var lista = document.getElementById('artesanos-list');
213 236
 
214 237
                             //Recopilar datos no vacios.
238
+                            //Counts all the tyoes of data that the artists don't have
239
+                            //Later on, if you discover that they didn't have 'municipios', telephone numbers, emails and especificaciones then you wont display it.
215 240
                             if (Artesano.Municipio.trim().length != 0) {
216 241
                                 cont ++;
217 242
                             }
@@ -228,11 +253,14 @@
228 253
 
229 254
                             //info a pasar
230 255
                             //'title':'${Artesano.Nombre}','esp': '${info}'
256
+                            //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)
257
+                            //And puts this into the 'item' variable
231 258
                             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"]}' } })" tappable>
232 259
                         <div class="title">${Artesano.Nombre}</div>
233 260
                     </ons-list-item>`);
234 261
 
235
-
262
+                            //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')
263
+                            //If it found that it has at least one of them then it will include it into the list.
236 264
                             if(cont == 0){
237 265
                                 console.log(Artesano.Nombre+' no tiene ningun tipo de informacion.');
238 266
                                 //return ons.createElement(``);
@@ -410,23 +438,32 @@
410 438
 
411 439
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
412 440
 <!----------------------------------------------------------------------------------->
441
+        <!--
442
+            The searchfunctions.js file is just a file that has all the definitions of the functions used later on in the switch
443
+        -->
413 444
         <script src = "js/searchfunctions.js"></script>
414 445
         <script>
415
-            //JSON file that has all the artesanos
446
+            //'all_artesanos' is the variable containing the JSON file that has all the artesanos with their data
416 447
             var all_artesanos = JSON.parse(window.localStorage.getItem("TODOS"));
417 448
             function filter(){
449
+                //finds the values of the search bar which are sent from the block of code after this script
450
+                //input is the one you use to filter by any parameter
451
+                //inputarte is the one you use to filter by the type of art the artists make
452
+                //inputmuni is the one you use to filter by municipio
453
+                //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")
418 454
                 var input = document.getElementById('searchbar').value;
419 455
                 var inputarte = document.getElementById('searchartesania').value;
420 456
                 var inputmuni = document.getElementById('searchbarmunicipio').value;
421 457
                 var x = document.getElementsByClassName('artists');
422
-                //making sure they're all in the same format
458
+                //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)
459
+                //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)
423 460
                 input = input.trim().toLowerCase();
424 461
                 inputarte = inputarte.trim().toLowerCase();
425 462
                 inputmuni = inputmuni.trim().toLowerCase();
426 463
                 input = acento_replace(input);
427 464
                 inputarte = acento_replace(inputarte);
428 465
                 inputmuni = acento_replace(inputmuni);
429
-                //default case is where evey one of them has nothing or less than 3 characters (displays every artist)
466
+                //default case is where evey one of them has nothing or less than 3 characters (displays every artist until it passes that length)
430 467
                 if (input.length <= 3 && inputarte.length <= 3 && inputmuni.length <= 3){
431 468
                     for (var i = 0; all_artesanos.length; i++){
432 469
                         x[i].style.display = "list-item";
@@ -476,6 +513,12 @@
476 513
         <template id="search.html">
477 514
           <ons-navigator swipeable animation="slide" id="SNavigator">
478 515
             <ons-page id="Buscar">
516
+                <!--
517
+                    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)
518
+                    The first search bar is to find by any information related to the artist
519
+                    The second searchbar is to find by the type of artwork they work on
520
+                    The third searchbar is to find by the municipio where the artists works or lives
521
+                -->
479 522
                 <p style="text-align: center; margin-top: 10px;">
480 523
                     <ons-search-input placeholder="Busqueda en cualquiera" id = "searchbar"
481 524
                         onkeyup = "filter()"></ons-search-input>
@@ -489,16 +532,13 @@
489 532
                 </ons-list>
490 533
 
491 534
                 <script>
535
+                    //This is basically declaring what we refer to as informacion in the filter() function
536
+                    //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.
492 537
                     for (i = 0; i < all_artesanos.length;i++){
493 538
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
494 539
                         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"]}' } })" tappable>
495 540
                         <div>${all_artesanos[i].Nombre}</div>
496 541
                     </ons-list-item>`);
497
-                        // var artesano = ons.createElement(`
498
-                        //   <ons-list-item class = "artists">
499
-                        //     <div class="center" >${all_artesanos[i].Nombre}</div>
500
-                        //   </ons-list-item>`
501
-                        // );
502 542
                         document.getElementById('results').appendChild(artesano);
503 543
                     }
504 544
                 </script>
@@ -508,17 +548,20 @@
508 548
         </template>
509 549
 
510 550
         <!-- ---------------------------------------------------------------------------------------------------------------------------------------- -->
511
-
551
+        <!--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-->
512 552
         <template id= "artesano.html">
513 553
             <ons-page id = "artesano">
514 554
                 <ons-toolbar>
555
+                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
515 556
                     <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
516 557
                     <div class = "center"></div>
517 558
                 </ons-toolbar>
518 559
                 <body>
560
+                    <!-- This is where we'll put all the information of that artsts -->
519 561
                     <ons-card id="all"></ons-card>
520 562
                 </body>
521 563
                 <script>
564
+                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
522 565
                     ons.getScriptPage().onInit = function () {
523 566
                         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
524 567
 
@@ -529,7 +572,12 @@
529 572
                             esp = this.data.esp,
530 573
                             redes = this.data.redes;
531 574
 
575
+                        //here the email is the string made from the start to where the '#' is.
532 576
                         email = em.slice(0, em.search("#"));
577
+
578
+                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
579
+                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
580
+                        //but if theres only one then you just write it into the page
533 581
                         if(esp.trim() != ""){
534 582
                             if(esp.includes(";", 0)){
535 583
                                 esp=esp.replace(/;/g,", ");
@@ -541,24 +589,29 @@
541 589
                         }
542 590
 
543 591
                         //console.log("Las redes son..."+this.data.redes);
544
-
592
+                        //Here it's making sure theres something in municipio and writing their municipio into the page
545 593
                         if(mun.trim() != ""){
546 594
                             data+='Municipio: '+ mun +'<br>';
547 595
                         }
548 596
 
597
+                        //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
598
+                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
549 599
                         if(email.trim() != "" & email.toUpperCase().trim() != "NO TIENE"){
550 600
                             data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+email+'"><u>'+email+'</u></a><br>';
551 601
                         }
552 602
 
553
-                        //Underlined <u></u>
554
-                        //Color blue <p style="color:blue"></p>
555
-
603
+                        //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
556 604
                         if(tel.trim() != "" ){
557 605
                             data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
558 606
                         }
559 607
 
560 608
                         console.log("Redes: "+redes);
561 609
 
610
+                        //Here it has to decide what to do depending on the links they give to their social media pages
611
+                        //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.
612
+                        //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
613
+                        //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.
614
+                        //If it's none of them then it will not display anything
562 615
                         if(redes.includes("facebook")){
563 616
 
564 617
                             console.log(redes.substring(1,redes.length-2));
@@ -584,7 +637,7 @@
584 637
                             console.log("no tiene nada");
585 638
                         }
586 639
 
587
-
640
+                        //This is the part that allows eveything (data) to be displayed
588 641
                         document.getElementById("all").innerHTML = `${data}`;
589 642
 
590 643
                     }