From 829a98d76ba17c9aaa21c1c8de6471e3fcb84458 Mon Sep 17 00:00:00 2001
From: TolaMironcenko <mironcenkotola@gmail.com>
Date: Wed, 3 Jul 2024 09:07:58 +0700
Subject: [PATCH] menubutton on small screen and syslog refresh button

---
 src/web/css/header.css | 41 +++++++++++++++++++++++++++++++++++++++++
 src/web/css/syslog.css |  6 ++++++
 src/web/index.html     |  6 +++++-
 src/web/js/header.js   | 24 ++++++++++++++++++++++++
 src/web/js/login.js    |  1 +
 src/web/js/syslog.js   |  5 ++++-
 6 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/src/web/css/header.css b/src/web/css/header.css
index 66c0404..bd86c4f 100644
--- a/src/web/css/header.css
+++ b/src/web/css/header.css
@@ -13,6 +13,18 @@ header {
     gap: 10px;
 }
 
+#headermenubutton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    transition: 0.3s;
+}
+
 .userbuttons {
     display: flex;
     align-items: center;
@@ -27,3 +39,32 @@ header {
         font-size: 15px;
     }
 }
+
+@media screen and (max-width: 600px) {
+    .links {
+        position: absolute;
+        top: 10px;
+        left: 10;
+        height: 0;
+        overflow: hidden;
+        flex-direction: column;
+        transition: 0.3s;
+    }
+
+    .links.active {
+        height: max-content;
+        background-color: gray;
+        z-index: 10;
+        border-radius: 10px;
+    }
+
+    #headermenubutton {
+        position: relative;
+        width: fit-content;
+        height: fit-content;
+        overflow: hidden;
+        padding: 10px;
+        /* margin: 0; */
+
+    }
+}
diff --git a/src/web/css/syslog.css b/src/web/css/syslog.css
index 9364167..1649ee9 100644
--- a/src/web/css/syslog.css
+++ b/src/web/css/syslog.css
@@ -15,6 +15,12 @@
     pointer-events: all;
 }
 
+.syslogheader {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 .syslogdata {
     width: 100%;
     max-height: 85vh;
diff --git a/src/web/index.html b/src/web/index.html
index 87afea8..f15ee64 100644
--- a/src/web/index.html
+++ b/src/web/index.html
@@ -17,6 +17,7 @@
     <section class="adminpanel">
         <!-- header -->
         <header class="header">
+            <button id="headermenubutton">&#9636;</button>
             <div class="links">
                 <button class="linkbutton" id="syslogbutton">Syslog</button>
                 <button class="linkbutton" id="settingsbutton">Settings</button>
@@ -147,7 +148,10 @@
             </section>
             <!-- syslog block -->
             <section class="syslogsection">
-                <h2 class="syslogheader">Syslog</h2>
+                <div class="syslogheader">
+                    <h2 class="syslogheader">Syslog</h2>
+                    <button id="refreshbutton">&#8634;</button>
+                </div>
                 <div class="syslogdata"></div>
             </section>
             <!-- syslog block -->
diff --git a/src/web/js/header.js b/src/web/js/header.js
index 1d9ed88..ea87216 100644
--- a/src/web/js/header.js
+++ b/src/web/js/header.js
@@ -3,6 +3,10 @@ const settingsbutton = document.querySelector('#settingsbutton')
 const syslogsection = document.querySelector('.syslogsection')
 const syslogbutton = document.querySelector('#syslogbutton')
 
+const headermenubutton = document.querySelector('#headermenubutton')
+const headerlinks = document.querySelector('.links')
+// const header = document.querySelector('.header')
+
 settingsbutton.addEventListener('click', () => {
     settingssection.classList.add('active')
     syslogsection.classList.remove('active')
@@ -13,3 +17,23 @@ syslogbutton.addEventListener('click', () => {
     settingssection.classList.remove('active')
     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')
+    }
+})
+
+// if (window.screenX > 600) {
+//     header.removeChild(headermenubutton)
+// } else {
+//     header.prepend(headermenubutton)
+// }
diff --git a/src/web/js/login.js b/src/web/js/login.js
index 1ca3249..f5f805b 100644
--- a/src/web/js/login.js
+++ b/src/web/js/login.js
@@ -12,6 +12,7 @@ if (localStorage.getItem("token") === null) {
 } else {
     get_all_settings()
     adminpanelsection.classList.add('active')
+    settingssection.classList.add('active')
     headerusername.innerHTML = JSON.parse(localStorage.getItem('userdata')).username
 }
 
diff --git a/src/web/js/syslog.js b/src/web/js/syslog.js
index 952a5fc..7c9d16f 100644
--- a/src/web/js/syslog.js
+++ b/src/web/js/syslog.js
@@ -1,4 +1,5 @@
 const syslogdata = document.querySelector('.syslogdata')
+const refreshbutton = document.querySelector('#refreshbutton')
 
 const get_syslog_data = () => {
     console.log("get_syslog_data")
@@ -6,8 +7,10 @@ const get_syslog_data = () => {
         method: 'GET',
         // body: `{"token":"${localStorage.getItem("token")}"}`
     }).then(data => data.text()).then(textdata => {
-        syslogdata.innerHTML = textdata.replace('/\n/g','<br>')
+        syslogdata.innerHTML = textdata.replace(/\n/g,'<br>')
     }).catch((error) => {
         notification(`Ошибка на сервере: ${error}`, "error")
     })
 }
+
+refreshbutton.addEventListener('click', get_syslog_data)