update front & morning push

Author: Hugues Signamarcheix

2019-12-05/hugues.txt

@@ -0,0 +1 @@
+Je suis présent

front/index.html

@@ -10,11 +10,16 @@
     	<h1>Javascript workers in action</h1>
     	<div class="container">
     		<button id="refresh" class="btn">Génerer de nouvelles données</button>
-            <div id="text-placeholder" class="is-empty"></div>
+            <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>
+            </div>
             <div class="loader">
                 <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
             </div>
     	</div>
         <script src="javascript/script.js"></script>
     </body>
-</html>
+</html>

front/javascript/dist/worker-bundled.js

@@ -1,9 +1,14 @@
 (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;
+
 onmessage = (e) => {
-  	axios.get('https://baconipsum.com/api/?type=meat-and-filler')
-      	 .then(response => (postMessage(response.data)))
+	console.log('here')
+	let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
+  	postMessage('a')
+  	//axios.get('http://js-worker.local/' + id)
+    //  	 .then(response => (postMessage(response.data)))
 }
 },{"axios":2}],2:[function(require,module,exports){
 module.exports = require('./lib/axios');

front/javascript/script.js

@@ -1,23 +1,40 @@
+const fields = ['name', 'age', 'city', 'bio']
+
 document.addEventListener("DOMContentLoaded",() => {
 	if (window.Worker) {
 		let worker = new Worker('./javascript/dist/worker-bundled.js');
 
 		let btnRefresh = document.getElementById("refresh");
-		let textPlaceholder = document.getElementById("text-placeholder");
 		let container = document.getElementsByClassName("container")[0];
 
 		btnRefresh.addEventListener("click",() => {
-		  textPlaceholder.innerHTML = '';
-		  textPlaceholder.classList.add('is-empty');
+		  cleanEntries();
 		  container.classList.add('is-loading');
 		  worker.postMessage('test');
 		});
 
 		worker.onmessage = function(e) {
-	  		let textContent = e.data;
-	  		textPlaceholder.innerHTML = textContent;
+			let jsonTest = {
+				'id': '50',
+				'name': 'Kamren Carter',
+				'age': '74',
+				'city': '525 Hand Loop',
+				'bio': 'Eos voluptatibus neque et qui aperiam. Fuga et nostrum expedita commodi maxime porro.'
+			}
+	  		//let textContent = e.data;
+	  		//textPlaceholder.innerHTML = textContent;
+	  		for(let fieldName of fields) {
+				document.getElementsByClassName(fieldName)[0].innerHTML = jsonTest[fieldName];
+			}
 	  		container.classList.remove('is-loading');
-	  		textPlaceholder.classList.remove('is-empty');
 		}
 	}
 })
+
+function cleanEntries() {
+	for(let fieldName of fields) {
+		document.getElementsByClassName(fieldName)[0].innerHTML = '';
+	}
+}
+
+

front/javascript/worker.js

@@ -1,6 +1,11 @@
 const axios = require('axios');
 
+const apiMaxId = 54;
+
 onmessage = (e) => {
-  	axios.get('https://baconipsum.com/api/?type=meat-and-filler')
-      	 .then(response => (postMessage(response.data)))
+	console.log('here')
+	let id = (Math.floor(Math.random() * Math.floor(apiMaxId))) + 1
+  	postMessage('a')
+  	//axios.get('http://js-worker.local/' + id)
+    //  	 .then(response => (postMessage(response.data)))
 }

front/scss/pages/index.scss

@@ -17,14 +17,17 @@ h1 {
 	    margin-bottom: 20px;
 	}
 	#text-placeholder {
-		&.is-empty { padding: 100px 20px; }
 		background-color: lightgray;
 	    padding: 20px 20px;
 	    line-height: 20px;
 	    letter-spacing: 1px;
 	    font-family: sans-serif;
 	    border-radius: 5px;
 	    width: 96%;
+	    > div { 
+	    	font-weight: bold;
+	    	span { font-weight: normal; }
+	    }
 	}
 	.loader {
 		position: absolute;