From 578cd73fe4bb7aea7ab9a2f116c218887f5e5f33 Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Wed, 14 Aug 2024 21:51:14 +0200
Subject: [PATCH] Fixing Terminal and a little more

---
 app/frontend/static/assets/css/crafty.css     |  24 ++++
 .../assets/css/partial/crafty-terminal.css    |  38 ++++++
 .../assets/css/partial/crafty-wizard.css      |   4 +-
 .../templates/panel/server_backup.html        |   2 +-
 .../templates/panel/server_backup_edit.html   |   2 +-
 app/frontend/templates/panel/server_term.html | 108 ++++++------------
 .../templates/server/bedrock_wizard.html      |   2 +-
 app/frontend/templates/server/wizard.html     |   2 +-
 8 files changed, 100 insertions(+), 82 deletions(-)
 create mode 100644 app/frontend/static/assets/css/partial/crafty-terminal.css

diff --git a/app/frontend/static/assets/css/crafty.css b/app/frontend/static/assets/css/crafty.css
index ad373446..a66632f7 100644
--- a/app/frontend/static/assets/css/crafty.css
+++ b/app/frontend/static/assets/css/crafty.css
@@ -30,6 +30,30 @@ body.sidebar-icon-only .navbar-toggler .mdi-chevron-double-left {
     text-transform: none;
 }
 
+.mw-25 {
+    max-width: 25% !important;
+}
+
+.mh-25 {
+    max-height: 25% !important;
+}
+
+.mw-50 {
+    max-width: 50% !important;
+}
+
+.mh-50 {
+    max-height: 50% !important;
+}
+
+.mw-75 {
+    max-width: 75% !important;
+}
+
+.mh-75 {
+    max-height: 75% !important;
+}
+
 /**************************************************************/
 
 /**************************************************************/
diff --git a/app/frontend/static/assets/css/partial/crafty-terminal.css b/app/frontend/static/assets/css/partial/crafty-terminal.css
new file mode 100644
index 00000000..24a43672
--- /dev/null
+++ b/app/frontend/static/assets/css/partial/crafty-terminal.css
@@ -0,0 +1,38 @@
+#virt_console::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+#virt_console {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+    white-space: pre-wrap;
+    width: 100%;
+    font-size: .8em;
+    padding: 5px 10px;
+    border: 1px solid var(--outline);
+    background-color: var(--card-banner-bg);
+    height: 500px;
+    overflow: scroll;
+}
+
+#to-bottom {
+    visibility: hidden;
+    float: right;
+}
+
+.term-btn {
+    max-width: 12rem;
+    white-space: nowrap;
+}
+
+div.server_command {
+    gap: 0.5rem;
+}
+
+input.server_command {
+    min-width: 10rem;
+}
\ No newline at end of file
diff --git a/app/frontend/static/assets/css/partial/crafty-wizard.css b/app/frontend/static/assets/css/partial/crafty-wizard.css
index b27f9c40..b5135b25 100644
--- a/app/frontend/static/assets/css/partial/crafty-wizard.css
+++ b/app/frontend/static/assets/css/partial/crafty-wizard.css
@@ -1,6 +1,6 @@
-#creation_wizard {
+/*#creation_wizard {
     -webkit-filter: grayscale(1);
-}
+}*/
 
 .api-alert {
     position: absolute;
diff --git a/app/frontend/templates/panel/server_backup.html b/app/frontend/templates/panel/server_backup.html
index 599f26d4..4dce1bd7 100644
--- a/app/frontend/templates/panel/server_backup.html
+++ b/app/frontend/templates/panel/server_backup.html
@@ -171,7 +171,7 @@
 
 
 </div>
-<style rel="stylesheet" href="/static/assets/css/partial/crafty-backup.css"></style>
+<link rel="stylesheet" href="/static/assets/css/partial/crafty-backup.css">
 <!-- content-wrapper ends -->
 
 {% end %}
diff --git a/app/frontend/templates/panel/server_backup_edit.html b/app/frontend/templates/panel/server_backup_edit.html
index b8ae102c..4ce6846f 100644
--- a/app/frontend/templates/panel/server_backup_edit.html
+++ b/app/frontend/templates/panel/server_backup_edit.html
@@ -242,7 +242,7 @@
 
 
 </div>
-<style rel="stylesheet" href="/static/assets/css/partial/crafty-backup.css"></style>
+<link rel="stylesheet" href="/static/assets/css/partial/crafty-backup.css">
 <!-- content-wrapper ends -->
 
 {% end %}
diff --git a/app/frontend/templates/panel/server_term.html b/app/frontend/templates/panel/server_term.html
index 7467781a..cd0b9a1a 100644
--- a/app/frontend/templates/panel/server_term.html
+++ b/app/frontend/templates/panel/server_term.html
@@ -41,96 +41,66 @@
           </span>
 
           <div class="col-md-12">
-            <button id="to-bottom" style="visibility: hidden; float: right;" class="btn btn-outline-success" hidden>{{
-              translate('serverDetails', 'reset', data['lang']) }}</button>
+            <button id="to-bottom" class="btn btn-outline-success" hidden>
+              {{ translate('serverDetails', 'reset', data['lang']) }}
+            </button>
 
             <div class="input-group">
-              <div id="virt_console" class=""
-                style="width: 100%; font-size: .8em; padding: 5px 10px; border: 1px solid var(--outline); background-color:var(--card-banner-bg);height:500px; overflow: scroll;">
+              <div id="virt_console">
               </div>
             </div>
             <br />
 
-            <div style="gap: 0.5rem;" class="input-group flex-wrap">
-              <input style="min-width: 10rem;" type="text" class="form-control" id="server_command"
-                name="server_command" placeholder="{{ translate('serverTerm', 'commandInput', data['lang']) }}"
-                autofocus="">
+            <div class="input-group flex-wrap server_command">
+              <input type="text" class="form-control server_command" id="server_command" name="server_command" placeholder="{{ translate('serverTerm', 'commandInput', data['lang']) }}" autofocus="">
               <span class="input-group-btn ml-5">
-                <button id="submit" class="btn btn-sm btn-info" type="button">{{ translate('serverTerm', 'sendCommand',
-                  data['lang']) }}</button>
+                <button id="submit" class="btn btn-sm btn-info" type="button">{{ translate('serverTerm', 'sendCommand', data['lang']) }}</button>
               </span>
             </div>
             {% if data['permissions']['Commands'] in data['user_permissions'] %}
             {% if data['importing'] and data['server_stats']['running']%}
-            <div id="update_control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
-              <button onclick="" id="start-btn" style="max-width: 7rem;"
-                class="btn btn-warning m-1 flex-grow-1 disabled"><i
-                  class="fa fa-spinner fa-spin"></i>&nbsp;{{translate('serverTerm', 'installing', data['lang'])
+            <div id="update_control_buttons" class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
+              <button onclick="" id="start-btn" class="btn btn-warning m-1 flex-grow-1 term-btn disabled"><i class="fa fa-spinner fa-spin"></i>&nbsp;{{translate('serverTerm', 'installing', data['lang'])
                 }}</button>
-              <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+              <button onclick="" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
-              <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+              <button onclick="" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% elif data['server_stats']['updating']%}
-            <div id="update_control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
-              <button onclick="" id="start-btn" style="max-width: 7rem;"
-                class="btn btn-warning m-1 flex-grow-1 disabled"><i class="fa fa-spinner fa-spin"></i>&nbsp;{{
+            <div id="update_control_buttons" class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
+              <button onclick="" id="start-btn" class="btn btn-warning m-1 flex-grow-1 term-btn disabled"><i class="fa fa-spinner fa-spin"></i>&nbsp;{{
                 translate('serverTerm', 'updating', data['lang']) }}</button>
-              <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+              <button onclick="" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
-              <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+              <button onclick="" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% elif data['waiting_start'] %}
-            <div id="control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
-              <button onclick="" id="start-btn" style="max-width: 7rem; white-space: nowrap;"
-                class="btn btn-secondary m-1 flex-grow-1 disabled" data-toggle="tooltip"
-                title="{{ translate('serverTerm', 'delay-explained', data['lang'])}}">{{ translate('serverTerm',
+            <div id="control_buttons" class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
+              <button onclick="" id="start-btn" class="btn btn-secondary m-1 flex-grow-1 term-btn disabled" data-toggle="tooltip" title="{{ translate('serverTerm', 'delay-explained', data['lang'])}}">{{ translate('serverTerm',
                 'starting', data['lang']) }}</button>
-              <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+              <button onclick="" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
-              <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+              <button onclick="" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% elif data['importing'] %}
-            <div id="control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
-              <button onclick="" id="start-btn" style="max-width: 12rem; white-space: nowrap;"
-                class="btn btn-secondary m-1 flex-grow-1 disabled"><i class="fa fa-spinner fa-spin"></i> {{
+            <div id="control_buttons" class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
+              <button onclick="" id="start-btn" class="btn btn-secondary m-1 flex-grow-1 term-btn disabled"><i class="fa fa-spinner fa-spin"></i> {{
                 translate('serverTerm', 'importing',
                 data['lang']) }}</button>
-              <button onclick="" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1 disabled">{% raw translate('serverTerm', 'restart',
+              <button onclick="" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn disabled">{% raw translate('serverTerm', 'restart',
                 data['lang']) %}</button>
-              <button onclick="" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate('serverTerm', 'stop', data['lang'])
+              <button onclick="" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn disabled">{{ translate('serverTerm', 'stop', data['lang'])
                 }}</button>
             </div>
             {% else %}
-            <div id="control_buttons"
-              class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0"
-              style="visibility: visible">
-              <button onclick="send_command(serverId, 'start_server');" id="start-btn" style="max-width: 7rem;"
-                class="btn btn-primary m-1 flex-grow-1">{{ translate('serverTerm', 'start', data['lang']) }}</button>
-              <button onclick="send_command(serverId, 'restart_server');" id="restart-btn" style="max-width: 7rem;"
-                class="btn btn-outline-primary m-1 flex-grow-1">{% raw translate('serverTerm', 'restart', data['lang'])
+            <div id="control_buttons" class="mt-4 flex-wrap d-flex justify-content-between justify-content-md-center align-items-center px-5 px-md-0">
+              <button onclick="send_command(serverId, 'start_server');" id="start-btn" class="btn btn-primary m-1 flex-grow-1 term-btn">{{ translate('serverTerm', 'start', data['lang']) }}</button>
+              <button onclick="send_command(serverId, 'restart_server');" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn">{% raw translate('serverTerm', 'restart', data['lang'])
                 %}</button>
-              <button onclick="send_command(serverId, 'stop_server');" id="stop-btn" style="max-width: 7rem;"
-                class="btn btn-danger m-1 flex-grow-1">{{ translate('serverTerm', 'stop', data['lang']) }}</button>
+              <button onclick="send_command(serverId, 'stop_server');" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn">{{ translate('serverTerm', 'stop', data['lang']) }}</button>
             </div>
             {% end %}
             {% end %}
@@ -140,21 +110,7 @@
     </div>
   </div>
 </div>
-<style>
-  #virt_console::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  #virt_console {
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */
-    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
-    white-space: pre-wrap;
-  }
-</style>
+<link rel="stylesheet" href="/static/assets/css/partial/crafty-terminal.css">
 <!-- content-wrapper ends -->
 
 {% end %}
@@ -200,13 +156,13 @@
       if (updateButton.isUpdating) {
         if (updateButton.server_id == serverId) {
           console.log(updateButton.isUpdating)
-          document.getElementById('control_buttons').innerHTML = '<button onclick="" id="start-btn" style="max-width: 7rem;" class="btn btn-primary m-1 flex-grow-1">{{ translate("serverTerm", "updating", data["lang"]) }}</button><button onclick="" id="restart-btn" style="max-width: 7rem;" class="btn btn-outline-primary m-1 flex-grow-1">{% raw translate("serverTerm", "restart", data["lang"]) %}</button><button onclick="" id="stop-btn" style="max-width: 7rem;" class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate("serverTerm", "stop", data["lang"]) }}</button>';
+          document.getElementById('control_buttons').innerHTML = '<button onclick="" id="start-btn" class="btn btn-primary m-1 flex-grow-1 term-btn">{{ translate("serverTerm", "updating", data["lang"]) }}</button><button onclick="" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn">{% raw translate("serverTerm", "restart", data["lang"]) %}</button><button onclick="" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn disabled">{{ translate("serverTerm", "stop", data["lang"]) }}</button>';
         }
       }
       else if (updateButton.server_id == serverId) {
-          window.location.reload()
-          document.getElementById('update_control_buttons').innerHTML = '<button onclick="send_command(serverId, "start_server");" id="start-btn" style="max-width: 7rem;" class="btn btn-primary m-1 flex-grow-1">{{ translate("serverTerm", "start", data["lang"]) }}</button><button onclick="send_command(serverId, "restart_server");" id="restart-btn" style="max-width: 7rem;" class="btn btn-outline-primary m-1 flex-grow-1">{% raw translate("serverTerm", "restart", data["lang"]) %}</button><button onclick="" id="stop-btn" style="max-width: 7rem;" class="btn btn-danger m-1 flex-grow-1 disabled">{{ translate("serverTerm", "stop", data["lang"]) }}</button>';
-        }
+        window.location.reload()
+        document.getElementById('update_control_buttons').innerHTML = '<button onclick="send_command(serverId, "start_server");" id="start-btn" class="btn btn-primary m-1 flex-grow-1 term-btn">{{ translate("serverTerm", "start", data["lang"]) }}</button><button onclick="send_command(serverId, "restart_server");" id="restart-btn" class="btn btn-outline-primary m-1 flex-grow-1 term-btn">{% raw translate("serverTerm", "restart", data["lang"]) %}</button><button onclick="" id="stop-btn" class="btn btn-danger m-1 flex-grow-1 term-btn disabled">{{ translate("serverTerm", "stop", data["lang"]) }}</button>';
+      }
     });
   }
   // Convert running to lower case (example: 'True' converts to 'true') and
diff --git a/app/frontend/templates/server/bedrock_wizard.html b/app/frontend/templates/server/bedrock_wizard.html
index 2e6c851c..2eefaa94 100644
--- a/app/frontend/templates/server/bedrock_wizard.html
+++ b/app/frontend/templates/server/bedrock_wizard.html
@@ -329,7 +329,7 @@
     </div>
   </div>
 </div>
-<style rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css"></style>
+<link rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css">
 
 {% end %}
 
diff --git a/app/frontend/templates/server/wizard.html b/app/frontend/templates/server/wizard.html
index 922868d3..163703a1 100644
--- a/app/frontend/templates/server/wizard.html
+++ b/app/frontend/templates/server/wizard.html
@@ -514,7 +514,7 @@
     </div>
   </div>
 </div>
-<style rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css"></style>
+<link rel="stylesheet" href="/static/assets/css/partial/crafty-wizard.css">
 
 {% end %}