web ui redesign/not done

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.12" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12" project-jdk-type="Python SDK" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/terradash.iml" filepath="$PROJECT_DIR$/.idea/terradash.iml" />
+    </modules>
+  </component>
+</project>

.idea/terradash.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

app.py

@@ -1,4 +1,5 @@
 #!/usr/bi/python3
+import flask
 from flask import *
 from main import launchserver
 import libtmux
@@ -31,7 +32,7 @@ def getlpane() -> libtmux.Pane:
     return lpane
 
 
-@app.route("/term", methods=["GET", "POST"])
+@app.route("/termapi", methods=["GET", "POST"])
 def get_terminal_output():
     if request.method == "POST":
         data = request.get_json()#json.loads(request.data.decode())
@@ -55,9 +56,43 @@ def get_terminal_output():
             return ["Server not running."]
 
 
+
+
 @app.route("/")
 def root():
-    return render_template("index.html")
+    return flask.redirect("/dash")
+
+@app.errorhandler(404)
+def e404(e):
+    return render_template("404.html")
+
+
+## sites
+
+@app.route("/dash")
+def dash():
+    navbar = render_template("navbar.html")
+    return render_template("sites/dash.html",navbar=navbar)
+
+@app.route("/config")
+def configs():
+    navbar = render_template("navbar.html")
+    return render_template("sites/config.html",navbar=navbar)
+
+@app.route("/worlds")
+def worlds():
+    navbar = render_template("navbar.html")
+    return render_template("sites/worlds.html",navbar=navbar)
+
+@app.route("/log")
+def logs():
+    navbar = render_template("navbar.html")
+    return render_template("sites/log.html",navbar=navbar)
+
+@app.route("/terminal")
+def term():
+    navbar = render_template("navbar.html")
+    return render_template("sites/terminal.html",navbar=navbar)
 
 
 if __name__ == "__main__":

main.py

@@ -3,6 +3,7 @@ import libtmux
 import settings
 import libtmux.constants
 
+#<img src="{{ url_for('static', filename='logo.png') }}" alt="Terra-Dash">
 
 def launchserver(lpane: libtmux.Pane):
     lpane.send_keys(settings.RUN_SERVER_COMMAND)

recycle.txt

@@ -0,0 +1,9 @@
+        <div id="dash-content">
+            <div id="buttons">
+                <button style="margin-bottom: 10px;" 
+                        class="button" 
+                        onclick="sendcommand([COMMAND,`start`]);timer=2">start</button>
+                <button style="margin-bottom: 10px; background-color: rgb(255, 0, 0);" 
+                        class="button" 
+                        onclick="sendcommand([COMMAND,`stop`]);timer=1">stop</button>
+            </div>

static/icons/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>

static/icons/paper.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M240-80q-50 0-85-35t-35-85v-120h120v-560l60 60 60-60 60 60 60-60 60 60 60-60 60 60 60-60 60 60 60-60v680q0 50-35 85t-85 35H240Zm480-80q17 0 28.5-11.5T760-200v-560H320v440h360v120q0 17 11.5 28.5T720-160ZM360-600v-80h240v80H360Zm0 120v-80h240v80H360Zm320-120q-17 0-28.5-11.5T640-640q0-17 11.5-28.5T680-680q17 0 28.5 11.5T720-640q0 17-11.5 28.5T680-600Zm0 120q-17 0-28.5-11.5T640-520q0-17 11.5-28.5T680-560q17 0 28.5 11.5T720-520q0 17-11.5 28.5T680-480ZM240-160h360v-80H200v40q0 17 11.5 28.5T240-160Zm-40 0v-80 80Z"/></svg>

static/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>

static/icons/terminal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/></svg>

static/icons/world.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"/></svg>

static/navbar.css

@@ -0,0 +1,64 @@
+:root {
+    font-size: 16px;
+    color: black;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+a {
+    font-size: 16px;
+    color: black;
+    text-decoration: none;
+}
+
+
+body {
+    display: flex;
+    justify-content: start;
+}
+
+.navbar {
+    border-style: solid;
+    border-color: #ced4da;
+    border-radius: 1rem;
+    width: 19rem;
+    height: 100vh;
+    background-color: #ced4da;
+    padding-top: 5%;
+}
+
+.navbar-cont {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    gap: 1.5rem;
+    justify-content: start;
+    align-items:center;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-item {
+    width: 15rem;
+    height: 3rem;
+	display: flex;
+	align-items: center;
+    justify-content: center;
+
+    border-style: solid;
+    border-color:  rgb(255, 255, 255);
+    border-radius: 20px;
+    transition: background-color 0.4s ;
+}
+.nav-item a {
+    padding-left: 1rem;
+}
+
+.nav-item:hover {
+    background-color: rgb(255, 255, 255);
+}
+
+.icon {
+    width: 2rem;
+    filter: invert(100%) 
+}

static/style.css

@@ -1,52 +1,48 @@
-a {
-    color: chartreuse;
-}
 
-body {
-    color: chartreuse;
-}
-
-#dash {
+.main {
+    padding: 5%;
     display: flex;
-    align-content: center;
-    justify-content: start;
+    flex-direction: column;
 }
 
 .button {
     color: black;
-    background-color: chartreuse;
-    border-color: chartreuse;
+    background-color: rgb(0, 0, 0);
+    border-color: rgb(0, 0, 0);
     padding: 10px;
     border-radius: 20px;
     border-style:hidden;
-    
 }
 #buttons {
     display: flex;
     flex-direction: column;
     padding: 10px;
 }
-input {
-    color: chartreuse;
-    background-color: rgba(0, 0, 0, 0.1);
-    border-color: chartreuse;
+#term-input {
+    color: rgb(0, 0, 0);
+    background-color: rgba(166, 166, 166, 0.1);
+    border-color: white;
     padding: 10px;
     border-style: solid;
     border-width: 1px;
     border-radius: 20px;
 }
-
-
 #terminal {
-    background-color: rgba(0, 0, 0, 0.1);
-    color: chartreuse;
+    background-color: black;
+    color: white;
     border-style: solid;
-    border-color: chartreuse;
+    border-color: rgb(0, 0, 0);
     border-radius: 20px;
     padding: 15px;
-    font-family: 'Courier New', Courier, monospace;
     font-size: 16px;
     height: 100%;
+    width: 50%;
     overflow-y: auto;
-    box-shadow: 0 0 10px rgb(0, 255, 0);
+    box-shadow: 0 0 10px rgb(0, 0, 0);
+}
+
+#timer {
+    font-size: 11px;
+    margin: 0px;
+    margin-left: 15px;
 }

templates/404.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1 style="font-size: 80vh;
+    padding: 0;
+    margin: 0;
+    text-decoration: none;">404</h1>
+</body>
+</html>

templates/navbar.html

@@ -0,0 +1,30 @@
+<div class="navbar">
+    
+    <ul class="navbar-cont">
+        <li>
+            <img style="width: 80%;" src="{{ url_for('static', filename='logo.png') }}" alt="Terra-Dash">
+            <hr>
+        </li>
+        <li class="nav-item">
+            <img class="icon" src="{{ url_for('static', filename='icons/home.svg') }}" alt="">
+            <a  href="/dash">Home</a>
+        </li>
+        <li class="nav-item">
+            <img class="icon" src="{{ url_for('static', filename='icons/settings.svg') }}" alt="">
+            <a href="/config">Config</a>
+        </li>
+        <li class="nav-item">
+            <img class="icon" src="{{ url_for('static', filename='icons/world.svg') }}" alt="">
+            <a href="/worlds">Worlds</a>
+        </li>
+        <li class="nav-item">
+            <img class="icon" src="{{ url_for('static', filename='icons/paper.svg') }}" alt="">
+            <a href="/log">Logs</a>
+        </li>
+        <li class="nav-item">
+            <img class="icon" src="{{ url_for('static', filename='icons/terminal.svg') }}" alt="">
+            <a href="/terminal">Terminal</a>
+        </li>
+        <h6>TerraDash v1.0.0</h6>
+    </ul>
+</div>

templates/sites/dash.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <script>
+        let termdiv;
+        let terminput;
+        let timer;
+        let timertext;
+        const COMMAND = "command";
+
+
+        function sendcommand(contentlist) {
+            fetch("/term",{
+                method:"POST",
+                body: JSON.stringify({"content":contentlist}),
+                headers: {"Content-type":"application/json; charset=UTF-8"}
+            }).then(getterm());
+        }
+        function sendtermcommand() {
+            sendcommand([COMMAND,
+                            `terminal-command`,
+                            terminput.value]
+            );
+            terminput.value = "";
+            
+        }
+
+        function getterm() {
+            let tmpterm = "";
+            fetch("/term", { method: "GET" })
+                .then(response => response.json())
+                .then(termarray => {
+                    console.log(termarray);
+                    for (let line of termarray) {
+                        tmpterm += `${line}<br>`;
+                    }
+                    termdiv.innerHTML = tmpterm;
+                })
+                .catch(termdiv.innerHTML = 'Fehler beim Abrufen der Daten');
+        }
+        function getterminterval() {
+            timer -= 1
+            timertext.innerHTML = `Reload in ${timer} Seconds`
+            if (timer == 0) {
+                getterm()
+                timer = 5
+            }
+        }
+
+
+        function initstuff() {
+            timer = 5
+            timertext = document.getElementById("timer")
+            termdiv = document.getElementById("terminaltext");
+            terminput = document.getElementById("terminalinput");
+            getterm();
+            setInterval(getterminterval,1000)
+        }
+
+        window.onload = initstuff;
+    </script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terradash</title>
+</head>
+<body>
+    {{ navbar | safe }}
+    <div class="main">
+        <h1>Dash</h1>
+        <div id="dash-content">
+            <div id="buttons">
+                <button style="margin-bottom: 10px;" 
+                        class="button" 
+                        onclick="sendcommand([COMMAND,`start`]);timer=2">start</button>
+                <button style="margin-bottom: 10px; background-color: rgb(255, 0, 0);" 
+                        class="button" 
+                        onclick="sendcommand([COMMAND,`stop`]);timer=1">stop</button>
+            </div>
+            <div style="width: 100%;height: 100%;">
+                <p style="font-size: 11px;margin: 0px;margin-left: 15px;" id="timer">Reload in _ Seconds</p>
+                <div id="terminal">
+                    <div id="terminaltext"></div>
+                    <input id="terminalinput" type="text">
+                    <button
+                    style="margin-top: 15px;"
+                    class="button"
+                    onclick="sendtermcommand();
+                    terminput.value = ``">send</button>
+                </div>
+            </div>
+        </div>
+    </div> 
+</body>
+</html>

templates/sites/terminal.html

@@ -10,7 +10,7 @@
 
 
         function sendcommand(contentlist) {
-            fetch("/term",{
+            fetch("/termapi",{
                 method:"POST",
                 body: JSON.stringify({"content":contentlist}),
                 headers: {"Content-type":"application/json; charset=UTF-8"}
@@ -59,25 +59,19 @@
 
         window.onload = initstuff;
     </script>
-    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='navbar.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Terradash</title>
 </head>
-<body style="background-size: cover; background-image: url({{ url_for('static', filename='background.png') }});">
-    <img src="{{ url_for('static', filename='logo.png') }}" alt="Terra-Dash">
-    <div id="dash">
-        <div id="buttons">
-            <button style="margin-bottom: 10px;" 
-                    class="button" 
-                    onclick="sendcommand([COMMAND,`start`]);timer=2">start</button>
-            <button style="margin-bottom: 10px; background-color: rgb(255, 0, 0);" 
-                    class="button" 
-                    onclick="sendcommand([COMMAND,`stop`]);timer=1">stop</button>
-        </div>
-        <div style="width: 100%;height: 100%;">
-            <p style="font-size: 11px;margin: 0px;margin-left: 15px;" id="timer">Reload in _ Seconds</p>
+<body>
+    {{ navbar | safe }}
+    <div class="main" style="width: 100%;height: 100vh;">
+        <h1>Terminal</h1>
+        <div>
+            <p id="timer">Reload in _ Seconds</p>
             <div id="terminal">
                 <div id="terminaltext"></div>
                 <input id="terminalinput" type="text">