Modification menus custom pour les Designs

Petite modification du menu de F$B33 que beaucoup utilise pour les Designs.
Adaptez les chemins en fonction de votre organisation, pour moi tous ce que je fais est das un répertoire custom à la racine de Jeedom.

L’avantage de cette modification, c’est d’avoir un seul et même fichier qui gère les menus de toutes les pages des designs.
Dans un Design, Ajouter un text/Html avec le contenu Suivant :

<script>
  $(function () {
    $("#menu-custom").load("custom/theme/menu.html");
  });
  var idIs = 1; // value of plan_id for active link
</script>

<div id="menu-custom"></div>v>

Dans chaque page, changer l’idIs par l’id de la page en cours (se voit dans l’URL)

Dans le répertoire /custom/theme/ copier le fichier menu.html
Dans ce fichier modifier la variable links avec les valeur des plan_id et les noms des images associées dans le répertoire /custom/theme/images/

  var links = {
    1: { plan_id: 1, img: "icon_home.png"},
    2: { plan_id: 3, img: "icon_skydive.png"},
    3: { plan_id: 8, img: "icon_light.png"},
    4: { plan_id: 7, img: "icon_planning2.png"},
    5: { plan_id: 7, img: "icon_graff.png"},
    6: { plan_id: 9, img: "icon_volets.png"},
    7: { plan_id: 7, img: "icon_chauffage.png"},
    8: { plan_id: 7, img: "icon_reseau.png"},
  };

Contenu du fichier : menu.html


<ul class="nav custom-menu flex-column"></ul>

<script>
  $.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results == null) {
      return null;
    }
    return decodeURI(results[1]) || 0;
  };
  var links = {
    1: { plan_id: 1, img: "icon_home.png"},
    2: { plan_id: 11, img: "icon_skydive.png"},
    3: { plan_id: 8, img: "icon_light.png"},
    4: { plan_id: 0, img: "icon_planning2.png"},
    5: { plan_id: 13, img: "icon_graff.png"},
    6: { plan_id: 9, img: "icon_volets.png"},
    7: { plan_id: 0, img: "icon_chauffage.png"},
    8: { plan_id: 12, img: "icon_reseau.png"},
  };
console.log(idIs);
  $.each( links, function (key, val) {
    if (idIs === val.plan_id)  {
      active_class = 'active';
    } else {
      active_class = 'podzob';
    }
    $('ul.nav.custom-menu').append('  <li class="nav-item">\n' +
      '    <a class="nav-link '+active_class+'" href="index.php?v=d&p=plan&plan_id='+val.plan_id+'">\n' +
      '      <img height=100px  width=100px src="custom/theme/images/'+val.img+'">\n' +
      '    </a>\n' +
      '  </li>')
  });
  $(".nav-link").click(function () {
    let id_is = $(this).attr('href');
    var current = (id_is[id_is.length -1]);
  });
</script>
3 J'aimes

en V4 avec le plugin HTML je pense que du coup on peut faire plus simple encore sans utiliser de Javascript

Possible sauf que je n’arrive pas à comprendre comment ce plugIn fonctionne, la Doc est un peu light …

Merci exactement ce que je cherchais !

Bonjour

bon maintenant j’aimerai rajouter en plus dans le menu la température par exemple, sauf qu’a part ajouter l’équipement dans chaque page je vois pas trop comment fiare, une idée pour ajouter en html ou js une info d’un équipement ?

Bonjour,

Non pas d’autre solution que d’ajouter l’équipement dans chaque page.

Alors entre temps j’ai trouvé !
Je fais une requête GET en ajax (au sein d’une balise script html) sur les 3 URL des équipements qui me donnent la température !
Du coup j’ai un composant via le plugin Html que je peut mettre sur chaque design et modifier que en une fois !