Order HTML divs to their corresponding div with JavaScript

Question

In this image

,

you can see a side menu. There is an offline, online and construction panel. Also there are a few locations, each location is a block(the two buttons are attached to its div). These are hardcoded, I'm trying to automate them instead. based on some values in my code "OFF", "ON" or "construction" the blocks should be ordered to their corresponding panel. What's the best way to do this? I want to see the blocks reposition without having to refresh.

This is a basic Jsfiddle of the menu above: https://jsfiddle.net/3zq4Lpxb/
Entire HTML for the site menu: https://pastebin.com/e8VKmLZH

FYI: I'm creating a webapplication, using MVC5, ASP.net.

Basic snippet of HTML:


  
  
    
  

  
    
      
      
                        
      
    
  

  
    
      
        Offline
      
      
        
          Isfanbul
          
            
            
          
        
        
          Monolith
          
            
            
          
        
      
    
    
      
        Under Construction
      
      
        
          New Haven
          
            
            
          
        
      
    
    
      
        Online
      
      
        
          JejuIsland

mplungjan · Accepted Answer

This works as specified if the item-group gets one of the 3 classes matching the ID of the panel

const reorderDivs = () => {
  [...document.querySelectorAll(".panel")].forEach(panel => {
    const id = panel.id;
    [...document.querySelectorAll("." + id)].forEach(item => {
      const parentContainer = panel.querySelector(".panel-body");
      // console.log(item.querySelector(".item-title").textContent,"moved to",id);
      parentContainer.appendChild(item);
    })
  })
};

// example toggle code

const classes = ['offline', 'construction', 'online'];

window.addEventListener("load", () => {
  reorderDivs(); // initialise
  document.getElementById("rightMenu").addEventListener("click", function(e) { // example of a toggle
    const tgt = e.target;
    if (tgt.classList.contains("toggle")) {
      const item = tgt.closest(".item-group");
      const classList = item.classList;
      for (let cl of classList) {
        const idx = classes.indexOf(cl);
        if (idx !== -1) { // found
          classList.remove(cl);
          newClass = classes[(idx + 1) % classes.length];
        }
      }
      classList.add(newClass)
      reorderDivs();
    }
  })
})



  
  
    
  

  
    
      
      
                        
      
    
  

  
    
      
        Offline
      
      
        
          Isfanbul 
          
            
            
          
        
        
          Monolith CONSTRUCTION
          
            
            
          
        
      
    
    
      
        Under Construction
      
      
        
          New Haven ONLINE
          
            
            
          
        
      
    
    
      
        Online
      
      
        
          JejuIsland OFFLINE

Order HTML divs to their corresponding div with JavaScript

Answers (1)

Related Questions