JSFiddle - React, Tailwind, and code Playground

by leeroy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<form id="callApiForm">
<p>
    <input id="inputDate" type="text" title="Date au format YYYY-MM-JJ" pattern="^[0-9]{4}-[0-9]{2}-[0-9]{2}$" value="2015-02-17"><br />
    <label>Type: </label>
    <select id="inputType">
        <option value="products">Produits</option>
        <option value="categories">Catégories</option>
    </select><br />
    <button type="submit">Lancer la mise à jour des images</button>
</p>
    </form>
    
    <p>Status : <span id="currStatus">pas encore lancé</span></p>
    <p id="status2" style="display:none">
        Progrès : <span id="currProgress"></span><br />
        Vitesse : <span id="currSpeed"></span><br />
        ETA : <span id="currETA"></span><br />
        Taille totale : <span id="totalSize"></span><br />
        Téléchargé : <span id="currSize"></span>
    </p>
    <p id="urlBLock" style="display:none">URL : <span id="zipURL"></span></p>
    <p id="returnedDataArea" style="display:none"><textarea style="width:400px; height:100px;" id="returnedData">Le JSON retourné par l'API sera affiché ici.</textarea></p>

JavaScript

var formatSize = function(size) {
    return Math.floor(size/1024/1024);
}

var timer = null;

var downloadImages = function(type, date) {
	var apiEndpoint = 'https://app.batiplus.ch:8196/api/v2/'+ type +'/images/update/'+ date;
    
    // Fonction récursive qui va s'appeler elle-même jusqu'à ce que le fichier soit prêt à être téléchargé
    // Permet de mettre à jour le status et le "progress" sur à afficher à l'utilisateur
	function _callApi(callback) {
		$.get(apiEndpoint).done(function(data) {
			if(data.status === 1) {
				// En attente du ZIP du serveur (préparation)
                // Le JSON retourné ressemblera à ça : {"status": 1, "progress": 0}
				
				// On attend 5 secondes et on relance la requête (voir si le status a bougé)
				timer = setTimeout(function() {
					_callApi(callback);
				}, 5000);

				// On oublie pas d'appeler le callback pour mettre à jour les infos sur la page web
				callback(data);
			} else if(data.status === 2) {
                // Le ZIP a fini d'être réparé sur le serveur, 
                // le backend de l'app est en train de le télécharger en local.
                // Le JSON retourné ressemblera à ça : {"status": 2, "progress": 0.34}
                
                // On attend 5 secondes et on relance la requête (voir si le status a bougé)
                timer = setTimeout(function() {
					_callApi(callback);
				}, 5000);

				// On oublie pas d'appeler le callback pour mettre à jour les infos sur la page web
				callback(data);
			} else if(data.status === 3) {
                // Le ZIP a été téléchargé en local, il est prêt pour les iPads.
                // Le JSON retourné ressemblera à ça : {"status": 3, "progress": 1, "url": "https://app.batiplus.ch:8196/..."}
                
                // On a plus besoin de mettre à jour le status, on retourne directement les infos.
                callback(data);
			} else if(data.status === 4) {
                // Le ZIP était vide, aucune image à mettre à...