web day 14 + 15 + 16

Bumer-32 · Jan 4, 2025 · ed2ac18 · ed2ac18
1 parent 2a73d1e
commit ed2ac18
Show file tree

Hide file tree

Showing 25 changed files with 391 additions and 181 deletions.
diff --git a/devRunner.bat b/devRunner.bat
@@ -15,12 +15,12 @@ exit /b
 
 :compileTS
 echo Compiling TS
-npx tsc --outDir "run/config/iwtcms/dev-web"
+npx tsc --outDir "run/iwtcms/dev-web"
 exit /b
 
 :compileSASS
 echo Compiling SASS
-npx sass src/main/web/sass:run/config/iwtcms/dev-web/sass
+npx sass src/main/web/sass:run/iwtcms/dev-web/sass
 exit /b
 
 :start

diff --git a/devRunner.sh b/devRunner.sh
@@ -13,12 +13,12 @@ npmInstall() {
 
 compileTS() {
   echo "Compiling TS"
-  npx tsc --outDir "run/config/iwtcms/dev-web"
+  npx tsc --outDir "run/iwtcms/dev-web"
 }
 
 compileSASS() {
   echo "Compiling SASS"
-  npx sass src/main/web/sass:run/config/iwtcms/dev-web/sass
+  npx sass src/main/web/sass:run/iwtcms/dev-web/sass
 }
 
 for arg in "$@"; do

diff --git a/src/main/kotlin/ua/pp/lumivoid/iwtcms/Constants.kt b/src/main/kotlin/ua/pp/lumivoid/iwtcms/Constants.kt
@@ -7,7 +7,7 @@ object Constants {
     const val MOD_ID = "iwtcms"
     val LOGGER = LoggerFactory.getLogger(MOD_ID)
     val EMBEDDED_SERVER_LOGGER = LoggerFactory.getLogger("iwtcms embedded server")
-    val CONFIG_FOLDER = "${System.getProperty("user.dir")}/config/$MOD_ID" // FabricLoader.getInstance().configDir.toString() // Temporary, idk why but FabricLoader works wrong at jar https://github.com/Bumer-32/I-Want-To-Control-My-Server/issues/7
+    val CONFIG_FOLDER = "${System.getProperty("user.dir")}/$MOD_ID" // FabricLoader.getInstance().configDir.toString() // Temporary, idk why but FabricLoader works wrong at jar https://github.com/Bumer-32/I-Want-To-Control-My-Server/issues/7
     val CONFIG_FILE = CONFIG_FOLDER + "/iwtcms.conf"
     val SSL_SERTIFICATE_FILE = CONFIG_FOLDER + "/keystore.jks"
     const val SPARK_FABRIC_ID = "spark"

diff --git a/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/dev/DevReloadWS.kt b/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/dev/DevReloadWS.kt
@@ -11,10 +11,10 @@ import kotlinx.coroutines.channels.consumeEach
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.runBlocking
 import ua.pp.lumivoid.iwtcms.Constants
-import ua.pp.lumivoid.iwtcms.ktor.api.websockets.WS
+import ua.pp.lumivoid.iwtcms.ktor.api.websockets.WebSocket
 import ua.pp.lumivoid.iwtcms.ktor.api.websockets.WebSocketBaseInterface
 
-object DevReloadWS: WS() {
+object DevReloadWS: WebSocket() {
     override val logger = Constants.EMBEDDED_SERVER_LOGGER
     override var WSinterface: WebSocketBaseInterface? = null
     override val PATH = "/dev/reloadWS"

diff --git a/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/dev/WebCompile.kt b/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/dev/WebCompile.kt
@@ -52,6 +52,11 @@ object WebCompile {
         val newContent = htmlContent.toMutableList()
         val bodyCloserIndex = htmlContent.indexOf("</body>")
 
+        if (bodyCloserIndex == -1) {
+            logger.error("Can't find </body> tag in ${html.name}")
+            return
+        }
+
         val jsScript = """
             <!--INSERTED BY IWTCMS DEV MODE-->
             <script>

diff --git a/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/websockets/ConsoleWS.kt b/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/websockets/ConsoleWS.kt
@@ -12,7 +12,7 @@ import ua.pp.lumivoid.iwtcms.ktor.api.UserAuthentication
 import ua.pp.lumivoid.iwtcms.ktor.api.requests.ApiListGET.registerAPI
 import ua.pp.lumivoid.iwtcms.util.MinecraftServerHandler
 
-object ConsoleWS: WS() {
+object ConsoleWS: WebSocket() {
     override val logger = Constants.EMBEDDED_SERVER_LOGGER
     override var WSinterface: WebSocketBaseInterface? = null
     override val PATH = "/ws/console" // why console? because we use this socket same as console, receive logs and send commands

diff --git a/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/websockets/ServerStatsWS.kt b/src/main/kotlin/ua/pp/lumivoid/iwtcms/ktor/api/websockets/ServerStatsWS.kt
@@ -18,7 +18,7 @@ import ua.pp.lumivoid.iwtcms.ktor.api.requests.ApiListGET.registerAPI
 import ua.pp.lumivoid.iwtcms.util.Config
 import ua.pp.lumivoid.iwtcms.util.ServerStats
 
-object ServerStatsWS: WS() {
+object ServerStatsWS: WebSocket() {
     override val logger = Constants.EMBEDDED_SERVER_LOGGER
     override var WSinterface: WebSocketBaseInterface? = null
     override val PATH = "/ws/serverStats"
@@ -83,7 +83,7 @@ object ServerStatsWS: WS() {
                     }
                 }
             }.onFailure { exception ->
-                logger.error("WebSocket exception: ${exception}")
+                logger.error("WebSocket exception: $exception")
             }.also {
                 job.cancel()
             }

diff --git a/...lumivoid/iwtcms/ktor/api/websockets/WS.kt → ...d/iwtcms/ktor/api/websockets/WebSocket.kt b/...lumivoid/iwtcms/ktor/api/websockets/WS.kt → ...d/iwtcms/ktor/api/websockets/WebSocket.kt
@@ -3,7 +3,7 @@ package ua.pp.lumivoid.iwtcms.ktor.api.websockets
 import io.ktor.server.routing.Routing
 import org.slf4j.Logger
 
-abstract class WS {
+abstract class WebSocket {
     protected abstract val logger: Logger
     protected abstract var WSinterface: WebSocketBaseInterface?
     protected abstract val PATH: String

diff --git a/src/main/web/index.html b/src/main/web/index.html
@@ -122,7 +122,8 @@
                 <span class="material-symbols-rounded" id="header-settings">settings</span>
             </div>
             <div class="center">
-                <span class="material-symbols-rounded" id="header-console">terminal</span>
+                <!-- ! DEFAULT TAB -->
+                <span class="material-symbols-rounded hover-holo-effect" id="header-console">terminal</span>
             </div>
             <div class="right">
                 <span class="material-symbols-rounded" id="header-players">group</span>
@@ -159,25 +160,77 @@
 
     <div class="container">
         <div class="tabs">
-            <div id="console-tab" class="tab">
+            <div id="console-tab" class="tab" style="display: block; /* DEFAULT TAB */">
+                <!-- ! DEFAULT TAB -->
                 <div class="container">
                     <h1>Console</h1>
-                    <div class="console">
-                        <div class="console-text"></div>
-                        <div class="total-messages">
-                            <span>Total messages: </span>
-                            <span class="count"></span>
+                    <div class="windows">
+                        <div class="statistics">
+                            <h3>Statistics</h3>
+                            <div class="cpuload">
+                                <span>CPU Load: </span>
+                                <span class="value">0%</span>
+                            </div>
+                            <div class="ramusage">
+                                <span>RAM Usage: </span>
+                                <span class="value">0%</span>
+                                <span class="value">0/16000</span>
+                            </div>
+                            <div class="uptime">
+                                <span>Uptime: </span>
+                                <span class="value">0s</span>
+                            </div>
+                            <div class="players">
+                                <span>Players: </span>
+                                <span class="value">0</span>
+                                <span>/</span>
+                                <span class="max">0</span>
+                            </div>
+                            <div class="ipaddr">
+                                <span>IP: </span>
+                                <span class="value">127.0.0.1</span>
+                            </div>
+                            <div class="tps">
+                                <span>TPS: </span>
+                                <span class="value">0</span>
+                            </div>
+
                         </div>
-                        <div class="input disabled">
-                            <span class="material-symbols-rounded">keyboard_arrow_right</span>
-                            <input class="input-field" type="text" placeholder="help"></input>
+                        <div class="console">
+                            <div class="console-text"></div>
+                            <div class="total-messages">
+                                <span>Total messages: </span>
+                                <span class="count"></span>
+                            </div>
+                            <div class="input disabled">
+                                <span class="material-symbols-rounded">keyboard_arrow_right</span>
+                                <input class="input-field" type="text" placeholder="help"></input>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div id="settings-tab" class="tab">
                 <div class="container">
-                    Settings
+                    <div class="dev-menu disabled">
+                        <h3>Developer mode settings</h3>
+                        <hr>
+                        <span>Default tab</span>
+                        <input type="text" name="default tab (id)" id="dev-set-default-tab-input">
+                        <button id="dev-set-default-tab-button">Set default tab</button>
+
+                        <hr>
+
+                        <span>Notification testing</span>
+                        <input type="type" name="notification text" id="dev-notification-info-input" value="This is a info notification">
+                        <button id="dev-notification-info-button">Test info notification</button>
+
+                        <input type="type" name="notification text" id="dev-notification-warning-input" value="This is a warning notification">
+                        <button id="dev-notification-warning-button">Test warning notification</button>
+
+                        <input type="type" name="notification text" id="dev-notification-error-input" value="This is a error notification">
+                        <button id="dev-notification-error-button">Test error notification</button>
+                    </div>
                 </div>
             </div>
             <div id="players-tab" class="tab">
@@ -194,10 +247,10 @@ <h1>Console</h1>
             <h1>Login</h1>
             <a href="https://modrinth.com/mod/i-want-to-control-my-server"><img src="icon_clearbg.png" alt="IWTCMS logo"></a>
             <form id="loginForm">
-                <label for="username">Username:</label>
+                <label for="username" id="username">Username:</label>
                 <input type="text" name="username" required>
                 <br>
-                <label for="password">Password:</label>
+                <label for="password" id="password">Password:</label>
                 <input type="password" name="password" required>
                 <br>
                 <button type="submit">Login</button>

diff --git a/src/main/web/sass/_all_tabs.scss b/src/main/web/sass/_all_tabs.scss
diff --git a/src/main/web/sass/_container.scss b/src/main/web/sass/_container.scss
@@ -1,5 +1,4 @@
 @use "variables" as vars;
-@use "all_tabs" as tabs;
 
 .container {
     display: flex;
@@ -10,36 +9,23 @@
     position: absolute;
     top: vars.$header-height;
 
-    .tabs {
+  .tabs {
+    width: 100%;
+    height: 100%;
+
+    .tab {
+      display: none;
       width: 100%;
       height: 100%;
-
-      .tab {
-        display: none;
-        width: 100%;
-        height: 100%;
-
-        .container {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: var(--main-text-color);
-          transition: color 0.3s ease;
-          top: 0;
-        }
-      }
-
-      #console-tab {
-        display: block; // visible by default
-        @include tabs.console-tab
-      }
-
-      #settings-tab {
-        @include tabs.settings-tab
-      }
 
-      #players-tab {
-        @include tabs.players-tab
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--main-text-color);
+        transition: color 0.3s ease;
+        top: 0;
       }
     }
+  }
 }
diff --git a/src/main/web/sass/_header.scss b/src/main/web/sass/_header.scss
@@ -1,4 +1,5 @@
 @use "variables" as vars;
+@use "stuff";
 
 .header {
     position: absolute;
@@ -11,14 +12,15 @@
     justify-content: center;
     align-items: center;
     transition: background-color 0.3s ease;
+    border-bottom: solid var(--header-bottom-border-color);
 
     .material-symbols-rounded,
     .download-iwtcms-cli,
     .color-mode,
     .menu .menu-button { // hover holo effect
         transition: filter 0.3s ease, box-shadow 0.3s ease;
         &:hover {
-            filter: drop-shadow(0 0 10px var(--holo-effect-color));
+            @extend .hover-holo-effect;
         }
     }