const settingssection = document.querySelector('.settingssection')
const settingsbutton = document.querySelector('#settingsbutton')
const syslogsection = document.querySelector('.syslogsection')
const syslogbutton = document.querySelector('#syslogbutton')
const infobutton = document.querySelector('#infobutton')
const infosection = document.querySelector('.infosection')
const headermenubutton = document.querySelector('#headermenubutton')
const headerlinks = document.querySelector('.links')

let uptimeintervalid

settingsbutton.addEventListener('click', () => {
    syslogsection.classList.remove('active')
    infosection.classList.remove('active')
    updatesection.classList.remove('active');
    backupsection.classList.remove('active');
    settingssection.classList.add('active')
    clearInterval(uptimeintervalid)
    get_all_settings()
})

syslogbutton.addEventListener('click', () => {
    settingssection.classList.remove('active')
    infosection.classList.remove('active')
    updatesection.classList.remove('active');
    backupsection.classList.remove('active');
    syslogsection.classList.add('active')
    clearInterval(uptimeintervalid)
    get_syslog_data()
})

// headermenubutton.addEventListener('click', () => {
//     if (headerlinks.classList.contains('active')) {
//         headerlinks.classList.remove('active')
//         return
//     }
//     headerlinks.classList.add('active')
// })

window.addEventListener('click', (e) => {
    if (e.target.id !== "headermenubutton" && !e.target.classList.contains('links')) {
        // headerlinks.classList.remove('active')
    }
})

infobutton.addEventListener('click', () => {
    syslogsection.classList.remove('active')
    settingssection.classList.remove('active')
    updatesection.classList.remove('active');
    backupsection.classList.remove('active');
    infosection.classList.add('active')
    uptimeintervalid = setInterval(get_uptime, 1000)
})

const updatesectionbutton = document.querySelector('#updatesectionbutton');
const updatesection = document.querySelector('#updatesection');

updatesectionbutton.addEventListener('click', () => {
    infosection.classList.remove('active');
    settingssection.classList.remove('active');
    syslogsection.classList.remove('active');
    backupsection.classList.remove('active');
    updatesection.classList.add('active');
})

const backupsectionbutton = document.querySelector('#backupsectionbutton');
const backupsection = document.querySelector('#backupsection');

backupsectionbutton.addEventListener('click', () => {
    infosection.classList.remove('active');
    settingssection.classList.remove('active');
    syslogsection.classList.remove('active');
    updatesection.classList.remove('active');
    backupsection.classList.add('active');
})