From 6622875703c864caa5742947883b13dca490450f Mon Sep 17 00:00:00 2001
From: itdominator <1itdominator@gmail.com>
Date: Sat, 13 Nov 2021 13:41:05 -0600
Subject: [PATCH] Updated ui and scripts

---
 src/dropper/config.py              |   3 +-
 src/dropper/static/js/post-ajax.js |   2 +-
 src/dropper/templates/index.html   | 140 +++++++++++++----------------
 3 files changed, 67 insertions(+), 78 deletions(-)

diff --git a/src/dropper/config.py b/src/dropper/config.py
index 70544a0..4b48dc7 100644
--- a/src/dropper/config.py
+++ b/src/dropper/config.py
@@ -18,7 +18,8 @@ class Config(object):
     DEBUG      = False
     TESTING    = False
     THREADED   = True
-    SECRET_KEY = secrets.token_hex(32)
+    SECRET_KEY = "2A#GQafbREoblgMSQYomZSxbaPE6dt#"
+    # SECRET_KEY = secrets.token_hex(32)
 
     HOME_PTH      = os.path.expanduser("~")
     ROOT_FILE_PTH = os.path.dirname(os.path.realpath(__file__))
diff --git a/src/dropper/static/js/post-ajax.js b/src/dropper/static/js/post-ajax.js
index 02adf1f..2be20c7 100644
--- a/src/dropper/static/js/post-ajax.js
+++ b/src/dropper/static/js/post-ajax.js
@@ -26,7 +26,7 @@ const postAjaxController = (data, action, hash, fname) => {
         if (action === "delete") {
             query = '[fileHash="' + hash + '"]';
             elm   = document.querySelector(query);
-            while ( !elm.className.includes("row r") ) {
+            while ( !elm.className.includes("list-group-item") ) {
                 elm = elm.parentElement;
             }
             elm.parentElement.removeChild(elm);
diff --git a/src/dropper/templates/index.html b/src/dropper/templates/index.html
index abc9357..2d010f9 100644
--- a/src/dropper/templates/index.html
+++ b/src/dropper/templates/index.html
@@ -2,116 +2,105 @@
 {% block content %}
 <div class="container">
     <!-- Upload controls -->
-    <div class="row sticky-top">
-        <div class="col">
-            <div class="row controls-secondary">
-                <div class="col">
-                    <button class="btn btn-info" data-toggle="modal"
-                        data-target="#uploaderModal">Upload...</button>
+    <div class="col sticky-top">
+        <div class="row">
+            <div class="col">
+                <div class="row controls-secondary">
+                    <div class="col">
+                        <button class="btn btn-info" data-toggle="modal"
+                            data-target="#uploaderModal">Upload...</button>
+                    </div>
+                    {% if oidc_isAdmin() %}
+                        <div class="col">
+                            <button id="googlePicker" class="btn btn-success">GDrive</button>
+                        </div>
+                        <div class="col">
+                            <button id="notesToViewBtn" class="btn btn-secondary">Notes</button>
+                        </div>
+                        <div class="col">
+                            <button id="filesToViewBtn" class="btn btn-secondary">Files</button>
+                        </div>
+                    {% endif %}
+                    {% if oidc_loggedin() %}
+                        <a href="/logout">
+                            <button title="Logout..." class="btn btn-danger">
+                                Logout
+                            </button>
+                        </a>
+                    {% else %}
+                        <a href="/login">
+                            <button title="Login..." class="btn btn-success">
+                                Login
+                            </button>
+                        </a>
+                    {% endif %}
                 </div>
-                {% if oidc_isAdmin() %}
-                    <div class="col">
-                        <button id="googlePicker" class="btn btn-success">GDrive</button>
-                    </div>
-                    <div class="col">
-                        <button id="notesToViewBtn" class="btn btn-secondary">Notes</button>
-                    </div>
-                    <div class="col">
-                        <button id="filesToViewBtn" class="btn btn-secondary">Files</button>
-                    </div>
-                {% endif %}
-                {% if oidc_loggedin() %}
-                    <a href="/logout">
-                        <button title="Logout..." class="btn btn-danger">
-                            Logout
-                        </button>
-                    </a>
-                {% else %}
-                    <a href="/login">
-                        <button title="Login..." class="btn btn-success">
-                            Login
-                        </button>
-                    </a>
-                {% endif %}
-            </div>
 
-            <div class="row">
-                <div class="col">
-                    <!-- Message zone -->
-                    <div id="page-alert-zone"></div>
+                <div class="row">
+                    <div class="col">
+                        <!-- Message zone -->
+                        <div id="page-alert-zone"></div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
     <!-- Google Drive Picker -->
-    <div class="row">
+    <div class="col">
         <div id="result"></div>
     </div>
 
     <!-- Upload(ed) List -->
-        <div class="row">
-            <h3 style="width: 100%;">Server Files:</h3>
+        <div class="col">
             {% if oidc_isAdmin() %}
             <div class="col scroller" style="height:80vh; overflow-y: scroll;">
                 <!-- Uploadeed Files List -->
                 <ul class="list-group" style="">
                     <span id="notesToView"></span>
                     {% for note in notes %}
-                    <li class="row rtext t{{ loop.index }}" textStrID="{{note['id']}}">
-                        <div class="col-sm-2 list-group-item text-center">
-                            <p class="server-file-card text-left">
-                            <img class="menu-item" src="{{ url_for('static', filename='imgs/octicons/trashcan.svg')}}" title="Delete..."
-                                alt="Delete" data-toggle="modal" data-target="#deleteDialogModalText"
-                                onclick="preDeleteText(this.parentElement.parentElement.parentElement)" />
-                            </p>
-                        </div>
-
-                        <div class="col-md-10 list-group-item">
-                        {% if "youtu.be" in note["string"].strip().lower() or "www.youtube.com/watch?v=" in note["string"].strip().lower() %}
-                            {% if "youtu.be" in note["string"].strip() %}
-                                <span class="list-group-item list-group-item-action justify-content-center text-center">
+                        <li class="list-group-item card-text t{{ loop.index }}" textStrID="{{note['id']}}">
+                            <span class="badge badge-primary badge-pill">
+                                <img class="menu-item" src="{{ url_for('static', filename='imgs/octicons/trashcan.svg')}}" title="Delete..."
+                                    alt="Delete" data-toggle="modal" data-target="#deleteDialogModalText"
+                                    onclick="preDeleteText(this.parentElement.parentElement)" />
+                            </span>
+                            {% if "youtu.be" in note["string"].strip().lower() or "www.youtube.com/watch?v=" in note["string"].strip().lower() %}
+                                {% if "youtu.be" in note["string"].strip() %}
                                     {{note["string"]}}
                                     <iframe class="card-img-top"
                                         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                         autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0"
                                         src="{{note['string'] | replace('youtu.be/', 'www.youtube.com/embed/')}}">
                                     </iframe>
-                                </span>
-                            {% elif "www.youtube.com/watch?v=" in note["string"].strip().lower() %}
-                                <span class="list-group-item list-group-item-action justify-content-center text-center">
+                                {% elif "www.youtube.com/watch?v=" in note["string"].strip().lower() %}
                                     {{note["string"]}}
                                     <iframe class="card-img-top"
                                         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                         autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0"
                                         src="{{note['string'] | replace('www.youtube.com/watch?v=', 'www.youtube.com/embed/')}}">
                                     </iframe>
-                                </span>
-                            {% endif %}
-                        {% elif note["string"].strip().startswith( ("http:", "https:", "ftp:", "file:") ) %}
-                            {% if note["string"].strip().endswith( (".jpg", ".jpeg", ".png", ".gif") ) %}
-                                <div class="list-group-item list-group-item-action justify-content-center text-center">
+                                {% endif %}
+                            {% elif note["string"].strip().startswith( ("http:", "https:", "ftp:", "file:") ) %}
+                                {% if note["string"].strip().endswith( (".jpg", ".jpeg", ".png", ".gif") ) %}
                                     <a href="{{note['string']}}" target="_blank">
                                         {{note["string"]}}
                                     </a>
                                     <img class="card-img-top server-image" src="{{note['string']}}" width="650px" height="auto" />
-                                </div>
-                            {% else %}
-                                <a class="list-group-item list-group-item-action" href="{{note['string']}}" target="_blank">
-                                    {{note["string"]}}
-                                </a>
+                                {% else %}
+                                    <a href="{{note['string']}}" target="_blank">
+                                        {{note["string"]}}
+                                    </a>
+                                {% endif %}
+                            {% elif note["string"].strip() %}
+                                <pre>{{note["string"]}}</pre>
                             {% endif %}
-                        {% elif note["string"].strip() %}
-                            <pre class="list-group-item list-group-item-action">{{note["string"]}}</pre>
-                        {% endif %}
-                        </div>
-                    </li>
+                        </li>
                     {% endfor %}
 
                     <span id="filesToView"></span>
                     {% for file in files %}
-                    <li class="row r{{ loop.index }}">
-                        <div class="col list-group-item text-center">
+                        <li class="list-group-item r{{ loop.index }}">
                             <p class="server-file-card text-right" fileName="{{file[0]}}" fileHash="{{file[1]}}">
                                 <span class="file-name" style="float:left;">{{file[0]}}</span>
                                 <img class="menu-item" src="{{ url_for('static', filename='imgs/octicons/pencil.svg')}}" title="Edit..."
@@ -122,16 +111,15 @@
                                     onclick="preDeleteFile(this.parentElement)" />
                             </p>
                             {% if file[0].lower().endswith( (".png", ".jpg", ".jpeg") ) %}
-                                <a class="list-group-item-action content-align-center" href="{{ url_for('uploads')}}/{{file[0]}}" target="_blank">
-                                    <img class="card-img-top server-image" src="{{ url_for('uploads')}}/{{file[0]}}" alt="{{file[0]}}" />
+                                <a href="{{ url_for('uploads')}}/{{file[0]}}" target="_blank">
+                                    <img class="card-img-top" src="{{ url_for('uploads')}}/{{file[0]}}" alt="{{file[0]}}" />
                                 </a>
                             {% elif file[0].lower().endswith( (".mp4", ".webm") ) %}
                                 <video class="card-img-top" src="{{ url_for('uploads')}}/{{file[0]}}" controls></video>
                             {% else %}
-                                <a class="list-group-item list-group-item-action" href="{{ url_for('uploads')}}/{{file[0]}}" target="_blank">{{file[0]}}</a>
+                                <a href="{{ url_for('uploads')}}/{{file[0]}}" target="_blank">{{file[0]}}</a>
                             {% endif %}
-                        </div>
-                    </li>
+                        </li>
                     {% endfor %}
                 </ul>
             </div>