pokeapi is now plugged

hugues-jpg · hugues-jpg · commit 6830aa198a1a · 2019-12-11T08:48:42.000+01:00
diff --git a/front/index.html b/front/index.html
@@ -9,12 +9,13 @@
     <body>
     	<h1>Javascript workers in action</h1>
     	<div class="container">
-    		<button id="refresh" class="btn">Génerer de nouvelles données</button>
+    		<button id="refresh" class="btn">Générer un Pokémon</button>
             <div id="text-placeholder" class="is-empty">
-                <div>Nom : <span class="name"></span></div>
-                <div>Age : <span class="age"></span></div>
-                <div>Ville : <span class="city"></span></div>
-                <div>Biographie : <span class="bio"></span></div>
+                <img class="sprite" src="">
+                <div>Name : <span class="name"></span></div>
+                <div>Types : <span class="types"></span></div>
+                <div>Height : <span class="height"></span> ft</div>
+                <div>Weight : <span class="weight"></span> kg</div>
             </div>
             <div class="loader">
                 <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
diff --git a/front/javascript/dist/worker-bundled.js b/front/javascript/dist/worker-bundled.js
@@ -1,12 +1,11 @@
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 const axios = require('axios');
 
-const apiMaxId = 54;
-
+const apiMaxId = 150;
+const baseUrl = "https://pokeapi.co/api/v2/pokemon/"
 onmessage = (e) => {
-	console.log('here')
 	let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
-  	axios.get('http://js-worker.local/' + id)
+  	axios.get(baseUrl + id)
      	 .then(response => (postMessage(response.data)))
 }
 },{"axios":2}],2:[function(require,module,exports){
diff --git a/front/javascript/script.js b/front/javascript/script.js
@@ -1,32 +1,25 @@
-const fields = ['name', 'age', 'city', 'bio']
+const fields = ['name', 'height', 'weight']
 
 document.addEventListener("DOMContentLoaded",() => {
-	if (window.Worker) {
-		let worker = new Worker('./javascript/dist/worker-bundled.js');
+    if (window.Worker) {
+        let worker = new Worker('./javascript/dist/worker-bundled.js');
 
-		let btnRefresh = document.getElementById("refresh");
-		let container = document.getElementsByClassName("container")[0];
-
-		btnRefresh.addEventListener("click",() => {
-		  cleanEntries();
-		  container.classList.add('is-loading');
-		  worker.postMessage('test');
-		});
-
-		worker.onmessage = function(e) {
-	  		let jsonFetched = e.data;
-	  		for(let fieldName of fields) {
-				document.getElementsByClassName(fieldName)[0].innerHTML = jsonFetched[fieldName];
-			}
-	  		container.classList.remove('is-loading');
-		}
-	}
-})
-
-function cleanEntries() {
-	for(let fieldName of fields) {
-		document.getElementsByClassName(fieldName)[0].innerHTML = '';
-	}
-}
+        let btnRefresh = document.getElementById("refresh");
+        let container = document.getElementsByClassName("container")[0];
 
+        btnRefresh.addEventListener("click",() => {
+            container.classList.add('is-loading');
+            worker.postMessage('go');
+        });
 
+        worker.onmessage = function(e) {
+            let jsonFetched = e.data;
+            for(let fieldName of fields) {
+                document.getElementsByClassName(fieldName)[0].innerHTML = jsonFetched[fieldName];
+            }
+            document.getElementsByClassName('types')[0].innerHTML = jsonFetched['types'].map(x => x.type.name)
+            document.getElementsByClassName('sprite')[0].src = jsonFetched['sprites'].front_default;
+            container.classList.remove('is-loading');
+        }
+    }
+})
diff --git a/front/javascript/worker.js b/front/javascript/worker.js
@@ -1,10 +1,10 @@
 const axios = require('axios');
 
-const apiMaxId = 49;
+const apiMaxId = 150;
+const baseUrl = "https://pokeapi.co/api/v2/pokemon/"
 
 onmessage = (e) => {
-	console.log('here')
-	let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
-  	axios.get('http://js-worker.local/' + id)
-     	 .then(response => (postMessage(response.data)))
+    let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
+    axios.get(baseUrl + id)
+         .then(response => (postMessage(response.data)))
 }
