# Petit memo js

### Bonnes pratiques :
#### Général
- Variables en ``camelCase``
- Noms de fonctions ``explicites``
- Espaces autours des opérateurs ``=+-*/``
- Indentation à 3 espaces
#### Spécifique IB :
- Eviter champs formule en page de liste (ralentis le changement de la page)

<b><span style="color:red">PLUS D'INFOS SUR LE WIKI</span></b> ← c'est pas un lien cliquable

### Fonctions utiles
#### On ready :

$(function(){
   console.log("Hello world")
})

#### Event listener :

$("#origine-0").on('event1 event2', () => {
    console.log("Hello")
})

Events :
| Mouse | Keyboard | Form | Document/Window |
|--------------|-----------------|-------------|-------------------------|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | | blur | unload |

#### Array to associative array

function traiterResultatRequete(arrayChamps, arrayResult){
   var res = {}
   for(var j=0; j<arrayChamps.length; j++){
      res[arrayChamps[j]] = arrayResult[j] != null ? arrayResult[j] : '';
   }
   return res
}

##### Exemple :

var champsARequeter = [
   "id",
   "status",
   "clientNom",
   "clientPrenom",
];

rbf_selectQuery("SELECT "+champsARequeter.join(", ")+" FROM object WHERE id=12345",1000,function(res){
      var resAssociative = traiterResultatRequete(champsARequeter, res);
      /*
        res : [
            "12345",
            "V",
            "BON",
            "Jean"
        ]
        resAssociative :
        {
            "id": "12345",
            "status": "V",
            "clientNom": "BON",
            "clientPrenom": "Jean"
         }
     */
   }
);

#### Object sort :

const personne = [
   { "nom": "Dupont", "prenom": "Jean", "age": 25 },
   { "nom": "Durand", "prenom": "Pierre", "age": 30 },
   { "nom": "Cerise", "prenom": "Adèle", "age": 35 },
   { "nom": "Fruit", "prenom": "Antoine", "age": 35 },
]

// Fonctionne aussi sur les nombres (ordre croissant)
function triAlphabetique(arr, cle) {
   arr.sort(function (a, b) {
      if (a[cle] < b[cle]) {
         return -1;
      }
      if (a[cle] > b[cle]) {
         return 1;
      }
      return 0;
   });
   return arr;
}

triAlphabetique(personne, "prenom");

// Return
[
    {"nom": "Dupont","prenom": "Jean","age": 25},
    {"nom": "Durand","prenom": "Pierre","age": 30},
    {"nom": "Cerise","prenom": "Adèle","age": 35},
    {"nom": "Fruit","prenom": "Antoine","age": 35}
]

#### No callback :

async function main(){
   let resultatAwait = await new Promise(resolve => {
      setTimeout(() => {
         resolve("Hello");
      }, 1000)
   })
   console.log(resultatAwait);
   console.log("World")
}

main()

#### IIFE (solution alternative aux promise / callback dans boucle for)

const names = [
   "John",
   "Paul",
]

// Console log 2 undefined car au moment du timeout le for sera fini et i sera egal a 1
for(var i = 0; i < names.length; i++) {
   setTimeout(function() {
      console.log(names[i])
   }, 1000)
}

// Solution, utiliser IIFE (Immediately Invoked Function Expression)
for(var i = 0; i < names.length; i++) {
   ((name) => {
      setTimeout(function() {
         console.log(name)
      }, 1000)
   })(names[i])
}

<br>
<br>
<br>
<br>
<br>

---
---
---

#### Progress bar

<!-- SCRIPT IMPORT QUERY A SUPPRIMER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- STYLE A SUPPRIMER -->
<style>:root {--primary-color: #5D2C7B;}</style>

<!-- HTML PROGRESSBAR -->
<div style="display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;position: fixed;left: 0px;top: 0px;background-color: #fafafa;">
<div id="spinnerParsing" style="text-align: center;align-content: center;margin: auto;">
   <span class="fas fa-spinner fa-spin" style="font-size:60px;margin-top:60px;" aria-hidden="true"></span>
   <p class="patience" style="text-align:center;padding-top:40px;font-size:14px;">Veuillez patienter ...</p>
</div>
</div>
<div style="display: flex;justify-content: center;align-items: center;width: 100vw;height: 100vh;position: fixed;left: 0px;top: 124px;">
   <div id="progressBarConversion" style="width: 40%;background-color: grey;">
      <div id="conversionBar" style="width: 0%;height: 30px;background-color: var(--primary-color);">
      <div id="textProgressBar" style="position: absolute;color: #FFF;padding: 8px;left: calc(50% - 150px);text-align: center;width: 300px;">Action en cours de traitement</div>
      </div>
   </div>
</div>

<!-- SCRIPT PROGRESSBAR -->
<script>
   var nbElementTraite = 0;
   var nbTotalElement = -50;
   var pourcentActuel = 0;
   var urlRedirection = ""


   $(function() {
      auChargement()
   })

   function auChargement(){
      console.log("AuChargement")
      lancerTraitement()
   }

   async function lancerTraitement(){
      console.log("LancerTraitement")
      // Query des elements a traiter, le setTimeout peut être remplacé par un selectQuery et resolve() le retour de la query
      let resultatRequeteDesElementsATraiter = await new Promise(resolve => {
         setTimeout(() => {
            resolve([981651,819561,516816,849586,849955,681815,491687,851981,998453,137510]);
         }, 2000)
      })
      nbTotalElement = resultatRequeteDesElementsATraiter.length || 0;
      startProgressBar()

      // Actions de la query a traiter
      for(let i in resultatRequeteDesElementsATraiter){
         console.log("Lancement du traitement de l'element "+resultatRequeteDesElementsATraiter[i]+" en async")
         // idPersonne = resultatRequeteDesElementsATraiter[i]
         // pour test :
         idPersonne = i

         /* Version async pour executer dans l'ordre */
         // Simuler un selectValue("SELECT nom FROM personnes WHERE id="+idPersonne)
         let nomPersonne = await new Promise(resolve => {
            setTimeout((idPersonne) => {
               nbElementTraite++
               let namearray = ["Jean","Bon","Paul","Pierre","John","Cyril","Julien","Frank","Antoine","Fabrice"]
               resolve(namearray[idPersonne]);
            }, Math.floor(Math.random() * 10000) + 1000, idPersonne)
         })

         /* Version non async. Boucle sur tous les elements puis les elements sont traités un par un
         setTimeout(function(){
            nbElementTraite++
            console.log("Traitement d'un element")
         }, Math.floor(Math.random() * 10000) + 1000);
         */
         console.log("Personne : "+nomPersonne+" traité")
      }
   }


   function startProgressBar(){
      setDureeSecurite(nbTotalElement)
      var progressBarInterval = setInterval(function(){
         if(nbTotalElement != null){
            var pourcent = (nbElementTraite / nbTotalElement) * 100
            console.log("Pourcent : "+pourcent)
            if(pourcent > pourcentActuel){
               changeProgressBarValue(pourcent)
            }
            if(nbElementTraite == nbTotalElement){
               changeProgressBarValue(100, "Redirection en cours...")
               nbTotalElement = null
               clearInterval(progressBarInterval)
               setTimeout(function(){
                  alert("Redirection")
                  window.location.href = urlRedirection;
               }, 300)
            }
         }else{
            clearInterval(progressBarInterval)
         }
      }, 300); // progressInterval
   }

   function changeProgressBarValue(goal, text){
      pourcentActuel = goal
      $('#conversionBar').animate({ width: goal+"%" }, 400);
      if(text){
         $('#textProgressBar').text(text)
      }
   }

   // Sécurité si traitement trop long
   function setDureeSecurite(nbElements){
      let dureeSecurite = nbElements * 15000 // 15 secondes par element
      console.log("dureeSecurite = "+dureeSecurite)
      setTimeout(function() {
         if (nbElementTraite < nbElements) {
            // alert("Le traitement a été interrompu car trop long. Veuillez réessayer plus tard.")
            alert("Redirection sécurité")
            window.location.href = urlRedirection
         }
      }, dureeSecurite)
   }
</script>