const account = document.getElementById("account")
const menu = document.getElementById("accmenu")
const sidebar = document.getElementById("sidebar")
const content = document.getElementById("content")

getPage("home.html")




function getPage(name) {
    fetch('/get', {
      method: 'POST',
      redirect: 'follow',
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({"request":"page", "name": name})
    })
    .then(response => response.json())
    .then(response => load(response))

    function load(response) {
      if(response.result == "failed") {
          content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
          
 
      } else if(response.result == "success") {

        function setInnerHTML(elm, html) {
          elm.innerHTML = html;
          
          Array.from(elm.querySelectorAll("script"))
            .forEach( oldScriptEl => {
              const newScriptEl = document.createElement("script");
              
              Array.from(oldScriptEl.attributes).forEach( attr => {
                newScriptEl.setAttribute(attr.name, attr.value) 
              });
              
              const scriptText = document.createTextNode(oldScriptEl.innerHTML);
              newScriptEl.appendChild(scriptText);
              
              oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
          });
        }

          setInnerHTML(content, response.content)
          
          

          

          const accountpicture = document.getElementById("*accountpicture")
          const accountname = document.getElementById("*accountname")

          if(accountpicture != null) {

          
            fetch('/get', {
              method: 'POST',
              redirect: 'follow',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify({"request":"username", "name": ""})
            })
            .then(response => response.json())
            .then(response => load(response))
          
            function load(response) {
              if(response.result == "failed") {
                  content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                  console.log("FAILED")
          
              } else if(response.result == "success") {
          
                
                accountpicture.innerHTML = "<img width='200' height='200' style='border-radius: 100%;' src='/images/userspics/" + response.content +  ".png'>"
              }
          
            
          
            } 
             
          }

          if(accountname != null) {

          
            fetch('/get', {
              method: 'POST',
              redirect: 'follow',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify({"request":"fullname", "name": ""})
            })
            .then(response => response.json())
            .then(response => load(response))
          
            function load(response) {
              if(response.result == "failed") {
                  content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                  console.log("FAILED")
          
              } else if(response.result == "success") {
          
                
                accountname.innerHTML = response.content
              }
          
            
          
            } 
             
          }
             

            }

          
            
            

          }
      }

    

    




const b1 = document.getElementById("s-home")
const b2 = document.getElementById("s-files")
const b3 = document.getElementById("s-users")
const b4 = document.getElementById("s-moni")
const b5 = document.getElementById("s-device")
const b6 = document.getElementById("s-cv")
const b7 = document.getElementById("s-link")
const settings = document.getElementById("settingsBtn")

b1.addEventListener("click", () => {
    getPage("home.html")

    

})
b2.addEventListener("click", () => {
  getPage("files.html")

})

b3.addEventListener("click", () => {
  getPage("users.html")

})

b4.addEventListener("click", () => {
  getPage("monitor.html")

})

b5.addEventListener("click", () => {
  getPage("devices.html")

})

b6.addEventListener("click", () => {
  getPage("cv.html")

})

b7.addEventListener("click", () => {
  getPage("link.html")

})

settings.addEventListener("click", () => {
  getPage("settings.html")

   
})

sidebar.addEventListener("mouseleave", () => {



    menu.classList.remove("viewbar")
    content.classList.remove("sidecontent")

  
})

sidebar.addEventListener("click", (event) => {

  if(menu.classList.contains("viewbar") && !(event.target.classList.contains("noside"))) {
      menu.classList.remove("viewbar")

  }
  
})

account.addEventListener("click", () => {

  menu.classList.add("viewbar")

}) 


sidebar.addEventListener("mouseenter", () => {

  content.classList.add("sidecontent")

  
})