Despliegue de informacion de artesanias y artesanos en renglones. Cada artesano y artesania se oprime para obtener mas informacion. El boton de artesania ofrece cuales artesanos trabajan la artesania y de que municipio son. El boton de artesano despliega informacion basica y necesaria del artesano. Entiendase municipio, telefono, correo electronico y con que artesanias trabaja.

platforms/browser/www/index.html

@@ -31,6 +31,7 @@
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:;">
         <!--these three for the calendar-->
         <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+        <link href="css/robotocondensed.css" rel="stylesheet">
         <link rel="stylesheet" href="calendar_files/css/demo.css"/>
         <link rel="stylesheet" href="css/file.css"/>
         <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
@@ -68,6 +69,31 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   <template id="artesanias.html">
     <ons-page id="artesanias">
 
@@ -81,7 +107,11 @@
     </ons-pull-hook>
 
     <ons-list id="artesania-list" src="">
-      <ons-list-header>Pull to refresh</ons-list-header>
+      <ons-list-header>Artesanias</ons-list-header>
+    </ons-list>
+
+    <ons-list id="artesanos-list" src="">
+      <ons-list-header>Artesanos</ons-list-header>
     </ons-list>
 
     <script>
@@ -89,68 +119,70 @@
       ons.getScriptPage().onInit = function () {
         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
 
-    var File = this.data.title.toUpperCase() + '.json' ;
+    //var File = this.data.title.toUpperCase() + '.json' ;
     var Esp = this.data.esp.split(', ');
-    var art=new Array('Ta\u00edno - Ram\u00f3n Rivera','Aladino Mu\u00f1iz Ram\u00edrez','Alma L. Albino Ortiz','Jeanette H. Figueroa','Sonia Noem\u00ed Rodr\u00edguez Salgado');
-    var mun=new Array('Vega Baja PR','Sabana Grande PR','Naguabo PR','Ceiba PR','Fajardo PR');
-
-
-    var request = new XMLHttpRequest();
-    request.open('GET', 'Server/'+File, true);
-    request.onload = function() {
-    var info = JSON.parse(this.response)
-    var list = document.getElementById("artesania-list");
-    for (var i = 0; i < info.length; i++) {
-
-      art.push(info[i].Nombre);
-      mun.push(info[i].Municipio);
-        
-      /*var item = ons.createElement(`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}', 
-      'esp': '${info[i].Especificaciones}'})">
-                    <div class="title">${info[i].Renglones}</div>
-                </ons-card>`);
-        list.appendChild(item);*/
-    }
-    console.log('Termino funcion',art)
-    }
-    //<div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
-    request.send();
-
-    console.log('Fuera del codigo',art)
+    var artesanos_json = this.data.json;
 
     //Convertir en mayuscula primera letra del string.
     for(var i=0; i<Esp.length; i++) { 
       Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
     };
 
-        var pullHook = document.getElementById('pull-hook');
-        var icon = document.getElementById('pull-hook-icon');
-        pullHook.addEventListener('changestate', function (event) {
-          switch (event.state) {
-            case 'initial':
-              icon.setAttribute('icon', 'fa-arrow-down');
-              icon.removeAttribute('rotate');
-              icon.removeAttribute('spin');
-              break;
-            case 'preaction':
-              icon.setAttribute('icon', 'fa-arrow-down');
-              icon.setAttribute('rotate', '180');
-              icon.removeAttribute('spin');
-              break;
-            case 'action':
-              icon.setAttribute('icon', 'fa-spinner');
-              icon.removeAttribute('rotate');
-              icon.setAttribute('spin', true);
-              break;
-          } 
-
-        });
+    var pullHook = document.getElementById('pull-hook');
+    var icon = document.getElementById('pull-hook-icon');
+    pullHook.addEventListener('changestate', function (event) {
+      switch (event.state) {
+        case 'initial':
+          icon.setAttribute('icon', 'fa-arrow-down');
+          icon.removeAttribute('rotate');
+          icon.removeAttribute('spin');
+          break;
+        case 'preaction':
+          icon.setAttribute('icon', 'fa-arrow-down');
+          icon.setAttribute('rotate', '180');
+          icon.removeAttribute('spin');
+          break;
+        case 'action':
+          icon.setAttribute('icon', 'fa-spinner');
+          icon.removeAttribute('rotate');
+          icon.setAttribute('spin', true);
+          break;
+      } 
+    });
 
     var getArtesania = function (num) {
+
+          var Artesanos = ``;
+
+          console.log('Filtrado de ',Esp[num])
+
+          var results = [];
+          var searchVal = "my Name";
+          for (var i=0 ; i < artesanos_json.length ; i++)
+          {
+              if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
+                  results.push(artesanos_json[i]);
+              }
+          }
+
+          /*var arr1=artesanos_json.filter(function(item){
+              return item.Nombre=="Ana";       
+          });*/
+
+          for(var i=0; i<results.length; i++) {
+
+            //if(Esp[num] in artesanos_json.) {}
+            Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
+            //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
+          }
+
+
           return {
-            name: Esp[num]
+            name: Esp[num],
+            artesan: Artesanos
           };
         };
+
         var getData = function () {
           const data = [];
           for (var i = 0; i < Esp.length; i++) {
@@ -160,23 +192,20 @@
         };
         var createArtesania = function (Artesania) {
 
-      var Artesanos = ``;
-      for(var i=0; i<5; i++) {
-        Artesanos=Artesanos+`<a id='home.html'>${art[i]} | ${mun[i]}<br>`
-        //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
-      }
-        console.log('Devuelto elemento')
+        //console.log('Devuelto elemento')
+
             return ons.createElement(`
               <ons-list-item expandable tappable>
                 <div class="center" >${Artesania.name}</div>
-                <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>
-        ${Artesanos}</div></ons-list-item>` 
+                <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>${Artesania.artesan}</div>
+                </ons-list-item>` 
           );
         };
+                
         var Artesanias = getData();
 
         for (Art of Artesanias) {
-  
+        
           var Artesania = createArtesania(Art);
           document.getElementById('artesania-list').appendChild(Artesania);
         };
@@ -187,6 +216,40 @@
             done();
           }, 400);
         }
+
+
+
+
+
+
+
+
+
+
+
+        var createArtesano = function (Artesano) {
+
+            return ons.createElement(`
+              <ons-list-item expandable tappable>
+                <div class="center" >${Artesano.Nombre}</div>
+                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
+                                                 Tel\u00e9fono: ${Artesano["Tel\u00e9fono 1"]}<br>
+                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
+                                                 Trabaja con: ${Artesano.Especificaciones}<br>
+                                                 </div>
+              </ons-list-item>` 
+          );
+        };
+
+        //var Artesanias = getData();
+        //artesanos_json
+
+        for (arte of artesanos_json) {
+        
+          var Artesano = createArtesano(arte);
+          document.getElementById('artesanos-list').appendChild(Artesano);
+        };
+        
       };
      </script>
 
@@ -201,6 +264,25 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         <template id="home.html">
         <ons-page id="home">
                 <p style="text-align: center;">

platforms/browser/www/js/load.js

@@ -14,10 +14,17 @@ window.fn.loadLink = function (url) {
 };
 
 window.fn.pushPage = function (page, anim) {
+
+	//Open and send json file that is equivalent with the especification.
+	var request = new XMLHttpRequest();
+	request.open("GET", "Server/" + page.title.toUpperCase() + ".json", false);
+	request.send(null)
+	var artesanos = JSON.parse(request.responseText);
+
   if (anim) {
-    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp } , animation: anim });
+    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp, json: artesanos } , animation: anim });
   } else {
-    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp } });
+    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp, json: artesanos } });
   }
 };
 

www/index.html

@@ -31,6 +31,7 @@
         <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:;">
         <!--these three for the calendar-->
         <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+        <link href="css/robotocondensed.css" rel="stylesheet">
         <link rel="stylesheet" href="calendar_files/css/demo.css"/>
         <link rel="stylesheet" href="css/file.css"/>
         <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
@@ -68,6 +69,31 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
   <template id="artesanias.html">
     <ons-page id="artesanias">
 
@@ -81,7 +107,11 @@
     </ons-pull-hook>
 
     <ons-list id="artesania-list" src="">
-      <ons-list-header>Pull to refresh</ons-list-header>
+      <ons-list-header>Artesanias</ons-list-header>
+    </ons-list>
+
+    <ons-list id="artesanos-list" src="">
+      <ons-list-header>Artesanos</ons-list-header>
     </ons-list>
 
     <script>
@@ -89,68 +119,70 @@
       ons.getScriptPage().onInit = function () {
         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
 
-    var File = this.data.title.toUpperCase() + '.json' ;
+    //var File = this.data.title.toUpperCase() + '.json' ;
     var Esp = this.data.esp.split(', ');
-    var art=new Array('Ta\u00edno - Ram\u00f3n Rivera','Aladino Mu\u00f1iz Ram\u00edrez','Alma L. Albino Ortiz','Jeanette H. Figueroa','Sonia Noem\u00ed Rodr\u00edguez Salgado');
-    var mun=new Array('Vega Baja PR','Sabana Grande PR','Naguabo PR','Ceiba PR','Fajardo PR');
-
-
-    var request = new XMLHttpRequest();
-    request.open('GET', 'Server/'+File, true);
-    request.onload = function() {
-    var info = JSON.parse(this.response)
-    var list = document.getElementById("artesania-list");
-    for (var i = 0; i < info.length; i++) {
-
-      art.push(info[i].Nombre);
-      mun.push(info[i].Municipio);
-        
-      /*var item = ons.createElement(`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}', 
-      'esp': '${info[i].Especificaciones}'})">
-                    <div class="title">${info[i].Renglones}</div>
-                </ons-card>`);
-        list.appendChild(item);*/
-    }
-    console.log('Termino funcion',art)
-    }
-    //<div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
-    request.send();
-
-    console.log('Fuera del codigo',art)
+    var artesanos_json = this.data.json;
 
     //Convertir en mayuscula primera letra del string.
     for(var i=0; i<Esp.length; i++) { 
       Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
     };
 
-        var pullHook = document.getElementById('pull-hook');
-        var icon = document.getElementById('pull-hook-icon');
-        pullHook.addEventListener('changestate', function (event) {
-          switch (event.state) {
-            case 'initial':
-              icon.setAttribute('icon', 'fa-arrow-down');
-              icon.removeAttribute('rotate');
-              icon.removeAttribute('spin');
-              break;
-            case 'preaction':
-              icon.setAttribute('icon', 'fa-arrow-down');
-              icon.setAttribute('rotate', '180');
-              icon.removeAttribute('spin');
-              break;
-            case 'action':
-              icon.setAttribute('icon', 'fa-spinner');
-              icon.removeAttribute('rotate');
-              icon.setAttribute('spin', true);
-              break;
-          } 
-
-        });
+    var pullHook = document.getElementById('pull-hook');
+    var icon = document.getElementById('pull-hook-icon');
+    pullHook.addEventListener('changestate', function (event) {
+      switch (event.state) {
+        case 'initial':
+          icon.setAttribute('icon', 'fa-arrow-down');
+          icon.removeAttribute('rotate');
+          icon.removeAttribute('spin');
+          break;
+        case 'preaction':
+          icon.setAttribute('icon', 'fa-arrow-down');
+          icon.setAttribute('rotate', '180');
+          icon.removeAttribute('spin');
+          break;
+        case 'action':
+          icon.setAttribute('icon', 'fa-spinner');
+          icon.removeAttribute('rotate');
+          icon.setAttribute('spin', true);
+          break;
+      } 
+    });
 
     var getArtesania = function (num) {
+
+          var Artesanos = ``;
+
+          console.log('Filtrado de ',Esp[num])
+
+          var results = [];
+          var searchVal = "my Name";
+          for (var i=0 ; i < artesanos_json.length ; i++)
+          {
+              if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
+                  results.push(artesanos_json[i]);
+              }
+          }
+
+          /*var arr1=artesanos_json.filter(function(item){
+              return item.Nombre=="Ana";       
+          });*/
+
+          for(var i=0; i<results.length; i++) {
+
+            //if(Esp[num] in artesanos_json.) {}
+            Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
+            //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
+          }
+
+
           return {
-            name: Esp[num]
+            name: Esp[num],
+            artesan: Artesanos
           };
         };
+
         var getData = function () {
           const data = [];
           for (var i = 0; i < Esp.length; i++) {
@@ -160,27 +192,20 @@
         };
         var createArtesania = function (Artesania) {
 
-        var jqxhr = $.getJSON( "Server/"+File, function() {
-          console.log( "success" );
-        });
+        //console.log('Devuelto elemento')
 
-      var Artesanos = ``;
-      for(var i=0; i<10; i++) {
-        Artesanos=Artesanos+`<a id='home.html'>${art[i]} | ${mun[i]}<br>`
-        //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
-      }
-        console.log('Devuelto elemento')
             return ons.createElement(`
               <ons-list-item expandable tappable>
                 <div class="center" >${Artesania.name}</div>
-                <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>
-        ${Artesanos}</div></ons-list-item>` 
+                <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>${Artesania.artesan}</div>
+                </ons-list-item>` 
           );
         };
+                
         var Artesanias = getData();
 
         for (Art of Artesanias) {
-  
+        
           var Artesania = createArtesania(Art);
           document.getElementById('artesania-list').appendChild(Artesania);
         };
@@ -191,6 +216,40 @@
             done();
           }, 400);
         }
+
+
+
+
+
+
+
+
+
+
+
+        var createArtesano = function (Artesano) {
+
+            return ons.createElement(`
+              <ons-list-item expandable tappable>
+                <div class="center" >${Artesano.Nombre}</div>
+                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
+                                                 Tel\u00e9fono: ${Artesano["Tel\u00e9fono 1"]}<br>
+                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
+                                                 Trabaja con: ${Artesano.Especificaciones}<br>
+                                                 </div>
+              </ons-list-item>` 
+          );
+        };
+
+        //var Artesanias = getData();
+        //artesanos_json
+
+        for (arte of artesanos_json) {
+        
+          var Artesano = createArtesano(arte);
+          document.getElementById('artesanos-list').appendChild(Artesano);
+        };
+        
       };
      </script>
 
@@ -205,6 +264,25 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         <template id="home.html">
         <ons-page id="home">
                 <p style="text-align: center;">

www/js/load.js

@@ -14,10 +14,17 @@ window.fn.loadLink = function (url) {
 };
 
 window.fn.pushPage = function (page, anim) {
+
+	//Open and send json file that is equivalent with the especification.
+	var request = new XMLHttpRequest();
+	request.open("GET", "Server/" + page.title.toUpperCase() + ".json", false);
+	request.send(null)
+	var artesanos = JSON.parse(request.responseText);
+
   if (anim) {
-    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp } , animation: anim });
+    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp, json: artesanos } , animation: anim });
   } else {
-    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp } });
+    document.getElementById('myNavigator').pushPage(page.id, { data: { title: page.title, esp: page.esp, json: artesanos } });
   }
 };