add index.html

5 anos atrás · 474fb451cb
--- a/index.html
+++ b/index.html
@ -0,0 +1,136 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
    <head>
        <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>SMETI store ITEMS</title>
 <link rel="stylesheet" href="css/carets.css">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 </head>
 <body>

 <h2>SMETI store ITEMS</h2>

 <ul class="ul_no_list" id="smeti_list"></ul>

 <script>
 /*
 *  A récuperer en JSON
 */
 var liste_instructions = null;

 /* 
 * Créer la hierarchie
 */
 function setHierarchy() {
  liste_instructions.forEach(function(element1){
    liste_instructions.forEach(function(element2){
      if (element1.parent == element2.id)
      {
        element1.parent_code = element2.code;
        return false;
      }
    });
  });
 }

 function afficherArbre()
 {
  var heritage  = [ 'XXX' ];
  var m14_ul    = [ document.getElementById('smeti_list') ];
  var m14_span  = [ null ];

  while(m14_ul[0].firstChild) m14_ul[0].removeChild(m14_ul[0].firstChild);

  liste_instructions.forEach(function(element){
    // if (element.instruction != 'M14')  return true;
    // if (element.type != courant)  return true;

    var letexte = '';
      var li = document.createElement('li');
      var span = document.createElement('span');
      var ul = document.createElement('ul');
      var len = heritage.length;
      while(len-- > 1) {
        if (element.parent_code == heritage[len]) 
          break;
        heritage.pop();
        m14_ul.pop();
        m14_span.pop();
      }

      span.setAttribute('class','caret_gris');
      letexte += ' { '+element.id + ' } ';
      letexte += '[ '+element.code + ' ]'
      letexte += ' - ';
      letexte += element.libelle
      span.appendChild(document.createTextNode(letexte));
      if (element.link == 1) span.setAttribute('style','color:grey');
      li.appendChild(span);

      ul.setAttribute('class','nested ul_no_list');
      li.appendChild(ul);

      m14_ul[m14_ul.length-1].appendChild(li);
      if (m14_span.length > 1) 
        m14_span[m14_span.length-1].setAttribute('class','caret');
      m14_ul.push(ul);
      m14_span.push(span);
      heritage.push(element.code);
  });

  var toggler = document.getElementsByClassName("caret");
  for (var i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function() {
      this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle("caret-down");
    });
  }
 }

 $( document ).ready(function() {

  $.getJSON( "api/get.php", function( data ) {

    liste_instructions = data;

    liste_instructions.forEach(function(element){
      element.instruction = 'M14';
      element.type = 'Chapitre';
      element.exercice = 2019;
      element.libelle = element.name;
    });

    liste_instructions.sort(function(a, b) {

      if (a.path < b.path) return -1;
      if (a.path > b.path) return 1;

      if (a.instruction < b.instruction) return -1;
      if (a.instruction > b.instruction) return 1;

      if (a.exercice < b.exercice) return -1;
      if (a.exercice > b.exercice) return 1;

      if (a.type < b.type) return -1;
      if (a.type > b.type) return 1;

      if (a.parent < b.parent) return -1;
      if (a.parent > b.parent) return 1;

      if (a.code < b.code) return -1;
      if (a.code > b.code) return 1;

      return 0;
    });

    setHierarchy();
    afficherArbre();
  });

 });

 </script>

 </body>
 </html>