[Filtre sélection scénario] Ajout du tri par groupes de scénarios

Utilisation du core de Jeedom Scénarios
1

Salut,

Dans la continuité de ce post (Ajout d'un filtre pour la sélection d'un scénario dans un scénario),
je propose une nouvelle évolution : afficher la liste des scénarios en les affichant par groupes de scénarios.

On aurait alors un affichage comme ci-dessous lors de la sélection d’un scénario depuis un scénario :

image
image2238×972 140 KB

Dans le fichier html/core/template/scenario/scenario.default.html du core de Jeedom, le code suivant :

Ancien code 
  let newOption
  for (let i in scenarios) {
    newOption = document.createElement('option')
    newOption.text = scenarios[i].humanName
    newOption.value = scenarios[i].id
    select.appendChild(newOption)
  }

est remplacé par :

Nouveau code 
  const groupedScenarios = {}
  for (let i in scenarios) {
    const match = scenarios[i].humanName.match(/^\[(.*?)\]/)
    if (match) {
      const obj = match[1]
      if (!groupedScenarios[obj]) {
        groupedScenarios[obj] = []
      }
      groupedScenarios[obj].push(scenarios[i])
    }
  }

  for (let group in groupedScenarios) {
    const optgroup = document.createElement('optgroup')
    optgroup.label = group

    groupedScenarios[group].forEach(scenario => {
      const newOption = document.createElement('option')
      newOption.text = scenario.humanName.replace(/^\[.*?\]/, '').trim()
      newOption.value = scenario.id
      optgroup.appendChild(newOption)
    })

    select.appendChild(optgroup);
  }

Attention, c’est une modification du core de Jeedom donc vous êtes seul responsable si vous tentez la modification par vous-même :wink:
Mais je compte bien entendu faire un PR.

7 « J'aime »
2

Ajout d’une optimisation sur le filtre pour ne pas afficher les groupes sans scénario suite à l’application du filtre :

Nouveau code pour le filtre 
  const filter = document.querySelector('.expressionAttr[data-uid="#uid#"][data-l1key="options"][data-l2key="filter"]')
  filter.addEventListener('keyup', function(event) {
    const text = event.target.value
    const options = Array.from(select.options)
    const regex = new RegExp("^" + text, "i")
    const lowerText = text.toLowerCase()

    options.forEach(option => {
      const optionText = option.text
      const lowerOptionText = optionText.toLowerCase()
      const match = optionText.match(regex)
      const contains = lowerOptionText.indexOf(lowerText) !== -1
      option.hidden = !(match || contains)
    });

    Array.from(select.getElementsByTagName('optgroup')).forEach(optgroup => {
      const visibleOptions = Array.from(optgroup.children).some(option => !option.hidden)
      optgroup.hidden = !visibleOptions
    })
  })
3

PR regroupant ces 2 améliorations fait :

2 « J'aime »