From 0a418363b0abdf2f04a7c066b90ec0a6ffc119f2 Mon Sep 17 00:00:00 2001
From: Silversthorn <nakor.silverton@gmail.com>
Date: Sat, 21 Jan 2023 12:29:08 +0100
Subject: [PATCH] Improving Display of Panel Config Pages

---
 app/classes/web/panel_handler.py              |  2 +
 app/frontend/templates/panel/config_json.html | 56 +++++++++---------
 .../templates/panel/panel_config.html         | 57 +++++++++----------
 .../panel/parts/crafty_config_list.html       | 10 ++++
 app/translations/en_EN.json                   |  3 +-
 5 files changed, 68 insertions(+), 60 deletions(-)
 create mode 100644 app/frontend/templates/panel/parts/crafty_config_list.html

diff --git a/app/classes/web/panel_handler.py b/app/classes/web/panel_handler.py
index 6d94cab6..ef52dbe9 100644
--- a/app/classes/web/panel_handler.py
+++ b/app/classes/web/panel_handler.py
@@ -895,6 +895,7 @@ class PanelHandler(BaseHandler):
                     exec_user["user_id"]
                 )
 
+            page_data["active_link"] = "panel_config"
             template = "panel/panel_config.html"
 
         elif page == "config_json":
@@ -917,6 +918,7 @@ class PanelHandler(BaseHandler):
                             page_data["availables_languages"].append(file.split(".")[0])
                         page_data["all_languages"].append(file.split(".")[0])
 
+                page_data["active_link"] = "config_json"
                 template = "panel/config_json.html"
 
         elif page == "add_user":
diff --git a/app/frontend/templates/panel/config_json.html b/app/frontend/templates/panel/config_json.html
index 67a34779..9f7e78f7 100644
--- a/app/frontend/templates/panel/config_json.html
+++ b/app/frontend/templates/panel/config_json.html
@@ -6,33 +6,20 @@
 {% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}
 
 {% block content %}
-<link rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">
 
 
 <div class="content-wrapper">
-  {% if data['superuser'] %}
-  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
-    <li class="nav-item term-nav-item">
-      <a class="nav-link" href="/panel/panel_config" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Panel Config</a>
-    </li>
-    <li class="nav-item term-nav-item">
-      <a class="nav-link active" href="/panel/config_json" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Config.json</a>
-    </li>
-  </ul>
-  {% end %}
-
   <!-- Page Title Header Starts-->
   <div class="row page-title-header">
     <div class="col-12">
       <div class="page-header">
-        <!-- TODO: Translate the following -->
-        <h4 class="page-title">Config.json</h4>
+        <h4 class="page-title">
+          {{ translate('panelConfig', 'title', data['lang']) }}
+          <br />
+        </h4>
       </div>
     </div>
-
   </div>
   <!-- Page Title Header Ends-->
 
@@ -40,6 +27,23 @@
     <div class="col-md-12 grid-margin">
       <div class="card">
         <div class="card-body">
+
+          {% if data['superuser'] %}
+          {% include "parts/crafty_config_list.html %}
+          {% end %}
+
+          <!-- Page Title Header Starts-->
+          <div class="row page-title-header">
+            <div class="col-12">
+              <div class="page-header">
+                <!-- TODO: Translate the following -->
+                <h4 class="page-title">Config.json</h4>
+              </div>
+            </div>
+
+          </div>
+          <!-- Page Title Header Ends-->
+
           <form id="config-form" class="forms-sample" method="post" action="/panel/config_json">
             {% raw xsrf_form_html() %}
 
@@ -63,8 +67,7 @@
                 <button type="button" class="btn btn-outline-default custom-picker" onclick="$('option', $('#lang_select')).each(function(element) {
                 $(this).removeAttr('selected').prop('selected', false); $('.selectpicker').selectpicker('refresh')
             });">Enable all Languages</button>
-                <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas" data-tick-icon="fa-check"
-                        multiple data-style="custom-picker">
+                <select id="lang_select" class="form-control selectpicker show-tick" data-icon-base="fas" data-tick-icon="fa-check" multiple data-style="custom-picker">
                   {% for lang in data['all_languages'] %}
                   {% if lang in item[1] %}
                   <option selected>{{lang}}</option>
@@ -73,13 +76,10 @@
                   {% end %}
                   {% end %}
                 </select>
-                <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden"
-                          rows="{{ len(data['all_languages']) }}" value="{{','.join(item[1])}}"
-                          hidden>{{','.join(item[1])}}</textarea>
+                <textarea id="disabled_lang" name="{{item[0]}}" class="form-control list hidden" rows="{{ len(data['all_languages']) }}" value="{{','.join(item[1])}}" hidden>{{','.join(item[1])}}</textarea>
               </div>
               {% elif isinstance(item[1], list) %}
-              <textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}"
-                        class="form-control list">{{','.join(item[1])}}</textarea>
+              <textarea value="{{','.join(item[1])}}" type="text" name="{{item[0]}}" class="form-control list">{{','.join(item[1])}}</textarea>
               {% elif isinstance(item[1], bool) %}
               {% if item[1] == True %}
               <div style="margin-left: 30px;">
@@ -97,11 +97,9 @@
               </div>
               {% end %}
               {% elif isinstance(item[1], int) %}
-              <input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}"
-                     step="1" min="0" required>
+              <input type="number" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}" step="1" min="0" required>
               {% else %}
-              <input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}"
-                     step="2" min="0" required>
+              <input type="text" class="form-control" name="{{item[0]}}" id="{{item[0]}}" value="{{ item[1]  }}" step="2" min="0" required>
               {% end %}
             </div>
             {% end %}
diff --git a/app/frontend/templates/panel/panel_config.html b/app/frontend/templates/panel/panel_config.html
index 15f0a269..4079fc20 100644
--- a/app/frontend/templates/panel/panel_config.html
+++ b/app/frontend/templates/panel/panel_config.html
@@ -8,28 +8,16 @@
 {% block content %}
 
 <div class="content-wrapper">
-  {% if data['superuser'] %}
-  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
-    <li class="nav-item term-nav-item">
-      <a class="nav-link active" href="/panel/panel_config" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Panel Config</a>
-    </li>
-    <li class="nav-item term-nav-item">
-      <a class="nav-link" href="/panel/config_json" role="tab" aria-selected="false">
-        <i class="fas fa-file-signature"></i>Config.json</a>
-    </li>
-  </ul>
-  {% end %}
-
   <!-- Page Title Header Starts-->
   <div class="row page-title-header">
     <div class="col-12">
       <div class="page-header">
-        <!-- TODO: Translate the following -->
-        <h4 class="page-title">{{ translate('panelConfig', 'pageTitle', data['lang']) }}</h4>
+        <h4 class="page-title">
+          {{ translate('panelConfig', 'title', data['lang']) }}
+          <br />
+        </h4>
       </div>
     </div>
-
   </div>
   <!-- Page Title Header Ends-->
 
@@ -38,6 +26,23 @@
       <div class="card">
         <div class="card-body">
 
+
+          {% if data['superuser'] %}
+          {% include "parts/crafty_config_list.html %}
+          {% end %}
+
+          <!-- Page Title Header Starts-->
+          <div class="row page-title-header">
+            <div class="col-12">
+              <div class="page-header">
+                <!-- TODO: Translate the following -->
+                <h4 class="page-title">{{ translate('panelConfig', 'pageTitle', data['lang']) }}</h4>
+              </div>
+            </div>
+
+          </div>
+          <!-- Page Title Header Ends-->
+
           <div class="row">
             <div class="col-md-12 col-lg-12 grid-margin stretch-card">
               <div class="card">
@@ -45,9 +50,7 @@
                   <h4 class="card-title"><i class="fas fa-users"></i> {{ translate('panelConfig', 'users', data['lang'])
                     }}</h4>
                   {% if data['user_data']['hints'] %}
-                  <span class="too_small" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
-                    data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
-                    data-placement="top"></span>
+                  <span class="too_small" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" , data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" , data-placement="top"></span>
                   {% end %}
                   <!-- TODO: Translate the following -->
                   <div><a class="nav-link" href="/panel/add_user"><i class="fas fa-plus-circle"></i> &nbsp; {{
@@ -145,9 +148,7 @@
                   <h4 class="card-title"><i class="fas fa-user-tag"></i> {{ translate('panelConfig', 'roles',
                     data['lang']) }}</h4>
                   {% if data['user_data']['hints'] %}
-                  <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
-                    data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
-                    data-placement="top"></span>
+                  <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" , data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" , data-placement="top"></span>
                   {% end %}
                   <div><a class="nav-link" href="/panel/add_role"><i class="fas fa-plus-circle"></i> &nbsp; {{
                       translate('panelConfig', 'newRole', data['lang']) }}</a></div>
@@ -262,10 +263,8 @@
                             <label for="server">{{ translate('panelConfig', 'backgroundUpload', data['lang'])
                               }}</label><br>
                             <span id="upload_input">
-                              <input type="file" multiple="false" class="form-control" id="file" name="file" required
-                                style="width: 70%;">
-                              <button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()"
-                                disabled>UPLOAD</button>
+                              <input type="file" multiple="false" class="form-control" id="file" name="file" required style="width: 70%;">
+                              <button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()" disabled>UPLOAD</button>
                             </span>
                           </div>
                         </div>
@@ -281,8 +280,7 @@
                 <div class="card-body">
                   <h4>{{ translate('panelConfig', 'loginBackground', data['lang']) }}</h4><br /><br><br />
                   <form id="photo_form">
-                    <select class="form-select form-control form-control-lg select-css" id="photo" name="photo"
-                      form="photo_form">
+                    <select class="form-select form-control form-control-lg select-css" id="photo" name="photo" form="photo_form">
                       {% for image in data["backgrounds"] %}
                       <option value="{{image}}">{{image}}</option>
                       {% end %}
@@ -290,8 +288,7 @@
                     <div>
                       <br>
                       <h6>{{ translate('panelConfig', 'preview', data['lang']) }}:</h6>
-                      <img style="width: 200px; height: 113px;"
-                        src="../../static/assets/images/auth/{{ data['background'] }}">
+                      <img style="width: 200px; height: 113px;" src="../../static/assets/images/auth/{{ data['background'] }}">
                     </div>
                     <br />
                     <br />
diff --git a/app/frontend/templates/panel/parts/crafty_config_list.html b/app/frontend/templates/panel/parts/crafty_config_list.html
new file mode 100644
index 00000000..1781ce85
--- /dev/null
+++ b/app/frontend/templates/panel/parts/crafty_config_list.html
@@ -0,0 +1,10 @@
+<ul class="nav nav-tabs col-md-12 tab-simple-styled" role="tablist" style="margin-top: 0;">
+    <li class="nav-item term-nav-item">
+        <a class="nav-link {% if data['active_link'] == 'panel_config' %}active{% end %}" href="/panel/panel_config" role="tab" aria-selected="false">
+            <i class="fas fa-file-signature"></i>Panel Config</a>
+    </li>
+    <li class="nav-item term-nav-item">
+        <a class="nav-link {% if data['active_link'] == 'config_json' %}active{% end %}" href="/panel/config_json" role="tab" aria-selected="false">
+            <i class="fas fa-file-signature"></i>Config.json</a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/app/translations/en_EN.json b/app/translations/en_EN.json
index 49271004..b92928d1 100644
--- a/app/translations/en_EN.json
+++ b/app/translations/en_EN.json
@@ -233,7 +233,8 @@
         "loginBackground": "Login Background Image",
         "select": "Select",
         "selectImage": "Select an image",
-        "preview": "Preview"
+        "preview": "Preview",
+        "title": "Crafty Configuration"
     },
     "rolesConfig": {
         "config": "Role Config",