Merge pull request #76 from PhoenixTwoFive/PhoenixTwoFive-patch-1

Update devcontainer.json

.devcontainer/devcontainer.json

@@ -6,10 +6,6 @@
   "waitFor": "onCreateCommand",
   "onCreateCommand": "curl -LsS https://r.mariadb.com/downloads/mariadb_repo_setup | sudo bash && sudo apt install -y libmariadb3 libmariadb-dev",
   "updateContentCommand": "pip install -r backend/requirements.txt",
-    "postCreateCommand": "",
-    "postAttachCommand": {
-      "server": "flask --debug run"
-    },
   "portsAttributes": {
     "5000": {
       "label": "Application",
@@ -24,10 +20,21 @@
     },
     "vscode": {
       "extensions": [
-          "ms-python.python"
+		"ms-python.python",
+		"batisteo.vscode-django",
+		"ms-python.flake8",
+		"ms-python.isort",
+		"ms-python.vscode-pylance",
+		"redhat.vscode-yaml",
+		"ms-azuretools.vscode-docker",
+		"donjayamanne.python-extension-pack"
 	]
     }
   },
-    "forwardPorts": [5000]
+"forwardPorts": [
+  5000
+],
+"features": {
+  "ghcr.io/devcontainers-contrib/features/angular-cli:2": {}
+}
 }
-  

Dockerfile

@@ -17,4 +17,7 @@ RUN pip install --no-cache-dir --upgrade -r /app/requirements.txt
 
 RUN pip install --no-cache-dir -U meinheld
 
+ARG SOURCE_VERSION
+ENV SOURCE_VERSION ${SOURCE_VERSION:-unknown}
+
 COPY ./backend /app

backend/app.py

@@ -16,9 +16,9 @@ accept_entries = True
 @app.route("/")
 def home():
     if basic_auth.authenticate():
-        return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate())
+        return render_template('main_admin.html', list=database.get_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
     else:
-        return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate())
+        return render_template('main.html', list=database.get_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
 
 
 @app.route("/favicon.ico")
@@ -67,14 +67,14 @@ def enqueue():
 
 @app.route("/list")
 def songlist():
-    return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate())
+    return render_template('songlist.html', list=database.get_song_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
 
 
 @app.route("/settings")
 @nocache
 @basic_auth.required
 def settings():
-    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
+    return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes(), debug=app.config['DEBUG'])
 
 
 @app.route("/settings", methods=['POST'])
@@ -109,7 +109,7 @@ def settings_post():
     if changed_credentials:
         return redirect("/")
     else:
-        return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes())
+        return render_template('settings.html', app=app, auth=basic_auth.authenticate(), themes=helpers.get_themes(), debug=app.config['DEBUG'])
 
 
 @app.route("/api/queue")
@@ -123,7 +123,7 @@ def queue_json():
 @nocache
 @basic_auth.required
 def played_list():
-    return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate())
+    return render_template('played_list.html', list=database.get_played_list(), auth=basic_auth.authenticate(), debug=app.config['DEBUG'])
 
 
 @app.route("/api/songs")
@@ -157,6 +157,28 @@ def get_song_completions(input_string=""):
         return 400
 
 
+@app.route("/api/songs/search")
+@nocache
+def query_songs_with_details(input_string=""):
+    input_string = request.args.get("q", input_string)
+    if input_string == "":
+        return Response(status=400)
+    result = []
+    for x in database.get_songs_with_details(input_string):
+        # Turn row into dict. Add field labels.
+        result.append(dict(zip(['karafun_id', 'title', 'artist', 'year', 'duo', 'explicit', 'styles', 'languages'], x)))
+    return jsonify(result)
+
+
+@app.route("/api/songs/details/<song_id>")
+def get_song_details(song_id):
+    result = database.get_song_details(song_id)
+    if result is None:
+        abort(404)
+    else:
+        return jsonify(dict(zip(['karafun_id', 'title', 'artist', 'year', 'duo', 'explicit', 'styles', 'languages'], result[0])))
+
+
 @app.route("/api/entries/delete/<entry_id>", methods=['GET'])
 @nocache
 @basic_auth.required
@@ -272,8 +294,8 @@ def get_current_event():
     return Response('{"status": "OK", "event": "' + helpers.get_current_event_id(app) + '"}', mimetype='text/json')
 
 
-@app.before_first_request
 def activate_job():
+    with app.app_context():
         helpers.load_dbconfig(app)
         helpers.load_version(app)
         database.create_entry_table()
@@ -301,5 +323,5 @@ def inject_version():
     return dict(karaoqueue_version=app.config['VERSION'])
 
 
-if __name__ == "__main__":
+# Perform setup here so it will be executed when the module is imported by the WSGI server.
-    app.run(host='127.0.0.1', port=8080, debug=True)
+activate_job()

backend/database.py

@@ -28,6 +28,11 @@ def import_songs(song_csv):
     with get_db_engine().connect() as conn:
         df.to_sql(song_table, conn, if_exists='replace',
                   index=False)
+        try:
+            cur = conn.execute(text("ALTER TABLE songs ADD FULLTEXT(Title,Artist)"))
+            conn.commit()
+        except Exception:
+            pass
         cur = conn.execute(text("SELECT Count(Id) FROM songs"))
         num_songs = cur.fetchone()[0]  # type: ignore
         conn.commit()
@@ -62,7 +67,9 @@ def create_song_table():
         `Explicit` INTEGER,
         `Date Added` TIMESTAMP,
         `Styles` TEXT,
-        `Languages` TEXT
+        `Languages` TEXT,
+        PRIMARY KEY (`Id`),
+        FULLTEXT KEY (`Title`,`Artist`)
         )""")
         conn.execute(stmt)
         conn.commit()
@@ -123,11 +130,46 @@ def get_song_list():
 
 def get_song_completions(input_string):
     with get_db_engine().connect() as conn:
-        prepared_string = f"%{input_string.upper()}%"
+        prepared_string = f"{input_string}"
+        prepared_string_with_wildcard = f"%{input_string}%"
         stmt = text(
-            "SELECT CONCAT(Artist, ' - ', Title) AS Song, Id FROM songs WHERE CONCAT(Artist, ' - ', Title) LIKE :prepared_string LIMIT 20;")
+            """
+            SELECT CONCAT(Artist, ' - ', Title) AS Song, Id FROM songs
+            WHERE MATCH(Artist, Title)
+            AGAINST (:prepared_string IN NATURAL LANGUAGE MODE)
+            LIMIT 20;
+            """)
         cur = conn.execute(
-            stmt, {"prepared_string": prepared_string})  # type: ignore
+            stmt, {"prepared_string": prepared_string, "prepared_string_with_wildcard": prepared_string_with_wildcard})  # type: ignore
+        return cur.fetchall()
+
+
+def get_songs_with_details(input_string: str):
+    with get_db_engine().connect() as conn:
+        prepared_string = f"%{input_string}"
+        stmt = text(
+            """
+            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs
+            WHERE MATCH(Artist, Title)
+            AGAINST (:prepared_string IN NATURAL LANGUAGE MODE)
+            LIMIT 20;
+            """
+        )
+        cur = conn.execute(
+            stmt, {"prepared_string": prepared_string})
+        return cur.fetchall()
+
+
+def get_song_details(song_id: int):
+    with get_db_engine().connect() as conn:
+        stmt = text(
+            """
+            SELECT Id, Title, Artist, Year, Duo, Explicit, Styles, Languages FROM songs
+            WHERE Id = :song_id;
+            """
+        )
+        cur = conn.execute(
+            stmt, {"song_id": song_id})
         return cur.fetchall()
 
 
@@ -250,7 +292,6 @@ def get_config(key: str) -> str:
 
 
 def set_config(key: str, value: str) -> bool:
-    print(f"Setting config {key} to {value}")
     with get_db_engine().connect() as conn:
         conn.execute(text(
             "INSERT INTO config (`Key`, `Value`) VALUES ( :par_key , :par_value) ON DUPLICATE KEY UPDATE `Value`= :par_value"),

backend/helpers.py

@@ -1,5 +1,6 @@
 import requests
 from bs4 import BeautifulSoup
+import subprocess
 import os
 import uuid
 from flask import make_response, Flask
@@ -34,17 +35,14 @@ def check_config_exists():
 
 
 def load_version(app: Flask):
+    if app.config['DEBUG'] is True:
+        app.config['VERSION'] = subprocess.Popen("echo \"$(git rev-parse --abbrev-ref HEAD)-$(git describe)\"", shell=True, stdout=subprocess.PIPE).stdout.read().decode('utf-8').strip() + " (debug)"  # noqa: E501 # type: ignore
+        return
     if os.environ.get("SOURCE_VERSION"):
-        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")[0:7]  # type: ignore # noqa: E501
+        app.config['VERSION'] = os.environ.get("SOURCE_VERSION")  # type: ignore # noqa: E501
-    elif os.path.isfile(".version"):
+        return
-        with open('.version', 'r') as file:
-            data = file.read().replace('\n', '')
-            if data:
-                app.config['VERSION'] = data
     else:
-                app.config['VERSION'] = ""
+        app.config['VERSION'] = "Unknown"
-    else:
-        app.config['VERSION'] = ""
 
 
 def load_dbconfig(app: Flask):

backend/requirements.txt

@@ -1,36 +1,36 @@
-autopep8==2.0.2
+autopep8~=2.0.2
-beautifulsoup4==4.12.0
+beautifulsoup4~=4.12.0
-bs4==0.0.1
+bs4~=0.0.1
-certifi==2022.12.7
+certifi~=2022.12.7
-charset-normalizer==3.1.0
+charset-normalizer~=3.1.0
-click==8.1.3
+click~=8.1.3
-flake8==6.0.0
+flake8~=6.0.0
-Flask==2.3.2
+Flask~=2.3.2
-Flask-BasicAuth==0.2.0
+Flask-BasicAuth~=0.2.0
-greenlet==2.0.2
+greenlet~=2.0.2
-gunicorn==20.1.0
+gunicorn~=20.1.0
-idna==3.4
+idna~=3.4
-itsdangerous==2.1.2
+itsdangerous~=2.1.2
-Jinja2==3.1.2
+Jinja2~=3.1.2
-mariadb==1.1.6
+mariadb~=1.1.6
-MarkupSafe==2.1.2
+MarkupSafe~=2.1.2
-mccabe==0.7.0
+mccabe~=0.7.0
-mysql==0.0.3
+mysql~=0.0.3
-mysqlclient==2.1.1
+mysqlclient~=2.1.1
-numpy==1.24.2
+numpy~=1.24.2
-packaging==23.0
+packaging~=23.0
-pandas==1.5.3
+pandas~=1.5.3
-pycodestyle==2.10.0
+pycodestyle~=2.10.0
-pyflakes==3.0.1
+pyflakes~=3.0.1
-PyMySQL==1.0.3
+PyMySQL~=1.0.3
-python-dateutil==2.8.2
+python-dateutil~=2.8.2
-pytz==2023.3
+pytz~=2023.3
-requests==2.31.0
+requests~=2.31.0
-six==1.16.0
+six~=1.16.0
-soupsieve==2.4
+soupsieve~=2.4
-SQLAlchemy==2.0.7
+SQLAlchemy~=2.0.7
-toml==0.10.2
+toml~=0.10.2
-tomli==2.0.1
+tomli~=2.0.1
-typing_extensions==4.5.0
+typing_extensions~=4.5.0
-urllib3==1.26.15
+urllib3~=1.26.15
-Werkzeug==2.2.3
+Werkzeug~=3.0.0

backend/static/css/style.css

@@ -4,12 +4,14 @@
   --navbar-text-color: rgba(255, 255, 255, .5);
   --navbar-text-color-hover: rgba(255, 255, 255, .75);
   --navbar-text-color-active: rgba(255, 255, 255, 1);
+  --navbar-padding: 4.5rem;
 
   /* Common */
   --background-color: #ffffff;
   --background-color-var: #f5f5f5;
   --text-color: #212529;
   --text-color-var: #343a40;
+  --text-color-light: #6c757d;
 
   /* Modals */
   --modal-background-color: #ffffff;
@@ -24,11 +26,18 @@
 
   /* Misc */
   --copy-highlight-color: rgba(251, 255, 0, 0.6);
+
+  /* Toasts */
+  --toast-background-color: #ffffff;
+  --toast-text-color: #212529;
+
+  /* Footer */
+  --footer-height: 80px;
 }
 
 
 body {
-  padding-top: 5rem;
+  padding-top: var(--navbar-padding);
   background-color: var(--background-color);
 }
 
@@ -38,21 +47,15 @@ body {
 }
 
 .site {
-  height: auto;
+  min-height: calc(100vh - var(--navbar-padding) - var(--footer-height));
-  min-height: 100%;
+  margin-bottom: -var(--footer-height);
-}
-
-main {
-  padding-bottom: 60px;
-  /* Höhe des Footers */
 }
 
 .footer {
-  margin-top: -60px;
+  /*margin-top: var(--footer-height);*/
   width: 100%;
-  height: 60px;
+  height: var(--footer-height);
-  /* Set the fixed height of the footer here */
+
-  /*line-height: 60px; /* Vertically center the text there */
   background-color: var(--background-color-var);
 }
 
@@ -129,13 +132,13 @@ body {
 .modal-header {
   background-color: var(--background-color);
   color: var(--text-color-var);
-  border-color: var(var(--modal-separator-color));
+  border-color: var(--modal-separator-color);
 }
 
 .modal-footer {
   background-color: var(--background-color);
   color: var(--text-color-var);
-  border-color: var(var(--modal-separator-color));
+  border-color: var(--modal-separator-color);
 }
 
 .form-control {
@@ -173,6 +176,35 @@ pre {
   background-color: var(--copy-highlight-color);
 }
 
+.list-indicator {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+#songYear {
+  font-size: small;
+  font-weight: 400;
+  color: var(--text-color-light);
+}
+
+.construction_bg {
+  background: repeating-linear-gradient(45deg,
+      #222200,
+      #222200 10px,
+      #000000 10px,
+      #000000 20px) !important;
+}
+
+.toast {
+  background-color: var(--toast-background-color);
+  color: var(--toast-text-color);
+}
+
+.toast-header {
+  background-color: var(--toast-background-color);
+  color: var(--toast-text-color);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     /* Navbar */
@@ -186,6 +218,7 @@ pre {
     --background-color-var: #232323;
     --text-color: #f5f5f5;
     --text-color-var: #a2a2a2;
+    --text-color-light: #6c757d;
 
     /* Modals */
     --modal-background-color: #121212;
@@ -197,5 +230,9 @@ pre {
 
     /* Input */
     --input-background-color: #343434;
+
+    /* Toasts */
+    --toast-background-color: #232323;
+    --toast-text-color: #f5f5f5;
   }
 }

backend/templates/base.html

@@ -16,11 +16,14 @@
     <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">
 
     <!-- Bootstrap-Toaster-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/css/bootstrap-toaster.min.css"
+    <link rel="stylesheet"
-        integrity="sha512-kYPLvO+Bu+xttOhbQvxs9nx7XSdxrb2JexRxQ3CpJQ7EtmlkBsWyOjlinLgiLWeLxuupFYB4cPqLOo0gnBnzeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/css/bootstrap-toaster.min.css"
+        integrity="sha512-kYPLvO+Bu+xttOhbQvxs9nx7XSdxrb2JexRxQ3CpJQ7EtmlkBsWyOjlinLgiLWeLxuupFYB4cPqLOo0gnBnzeQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <!-- Bootstrap core CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css"
+        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
     <!-- Custom styles for this template -->
     <link href="static/css/style.css" rel="stylesheet">
@@ -76,13 +79,13 @@
         </main><!-- /.container -->
     </div>
     <!-- Footer -->
-    <footer class="footer">
+    <footer class="footer {% if debug %} construction_bg {% endif %}">
         <div class="container text-center py-3">
             {% if not auth %}
             <a href="/login" class="ml-1 mr-1"><i class="fas fa-sign-in-alt mr-1"></i><span>Login</span></a>
             {% endif %}
-            <a href="https://github.com/PhoenixTwoFive/karaoqueue"
+            <a href="https://github.com/PhoenixTwoFive/karaoqueue" class="ml-1 mr-1"><i
-                class="ml-1 mr-1"><i class="fab fa-github mr-1"></i><span>Github</span></a>
+                    class="fab fa-github mr-1"></i><span>Github</span></a>
             <span class="text-muted"> {{karaoqueue_version}} -&nbsp;2019-23 - Phillip
                 Kühne</span>
         </div>
@@ -95,8 +98,12 @@
         integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js"
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js"
+        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
+        crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"
         integrity="sha256-4F7e4JsAJyLUdpP7Q8Sah866jCOhv72zU5E8lIRER4w=" crossorigin="anonymous">
         </script>
@@ -106,7 +113,8 @@
     <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toaster/4.1.2/js/bootstrap-toaster.min.js"
-        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        integrity="sha512-Ur6jgeoP3jnn38C7oBzDqMLRb+wxG2PXLKqgx2vgQ1ePFvbJ28f9iQSJplHD0APFHELOeS/df+RPNeENFtLrYw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     {% block extrajs %}{% endblock %}
     <script>
         $(document).ready(function () {

backend/templates/main.html

@@ -1,5 +1,3 @@
-
-
 {% extends 'base.html' %}
 {% block title %}Warteliste{% endblock %}
 {% block content %}

backend/templates/songlist.html

@@ -11,21 +11,52 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Auf Liste setzen</h5>
+                <h5 class="modal-title" id="exampleModalLabel">Auf die Liste setzen</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
+            <div class="songinfo container">
+                <div class="row">
+                    <div class="col">
+                        <h5 id="songTitle"></h5>
+                        <p><span id="songArtist"></span>&nbsp;<span id="songYear"></span></p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-1">
+                        <p><i class="fas fa-info"></i></p>
+                    </div>
+                    <div class="col" id="indicators">
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-1">
+                        <p><i class="fas fa-file-audio"></i></p>
+                    </div>
+                    <div class="col">
+                        <p id="songGenres"></p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-1">
+                        <p><i class="fas fa-language"></i></p>
+                    </div>
+                    <div class="col">
+                        <p id="songLanguages"></p>
+                    </div>
+                </div>
+            </div>
             <div class="form-group">
                 <form id="nameForm">
                     <div class="modal-body">
-                        <label for="singerNameInput">Sängername</label>
+                        <label for="singerNameInput">Dein Name:</label>
                         <input type="text" class="form-control" id="singerNameInput" placeholder="Max Mustermann"
                             required>
                         <input id="selectedId" name="selectedId" type="hidden" value="">
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
                         <button type="submit" class="btn btn-primary" id="submitSongButton">Anmelden</button>
                     </div>
                 </form>
@@ -38,30 +69,7 @@
 <script>
     $(document).ready(function () {
         $("#filter").focus();
-        $("#filter").keyup(function () {
+        $("#filter").keyup(debounce(() => songSearch()));
-            var value = $(this).val().toLowerCase();
-            //alert(value);
-            if (value.length >= 1) {
-                $.getJSON("/api/songs/compl", { search: value }, function (data) {
-                    var items = [];
-                    $.each(data, function (key, val) {
-                        items.push("<tr><td>" + val[0] + `</td>
-                            <td class='buttoncell'><button type='button'
-                                    class='btn btn-primary justify-content-center align-content-between enqueueButton'
-                                    data-toggle='modal'
-                                    data-target='#enqueueModal' onclick='setSelectedId(`+ val[1] + `)'><i
-                                        class="fas fa-plus"></i></button></td>
-                        </tr>`)
-                    });
-
-                    $("#songtable").html("")
-                    $(items.join("")).appendTo("#songtable");
-                    entriesAccepted()
-                });
-            } else {
-                $("#songtable").html("")
-            }
-        });
 
         $("#nameForm").submit(function (e) {
             e.preventDefault();
@@ -93,7 +101,90 @@
     }
 
     function setSelectedId(id) {
+        $("#songArtist").html("");
+        $("#songTitle").html("");
+        $("#songYear").html("");
+        $("#indicators")[0].innerHTML = "";
+
         $("#selectedId").attr("value", id);
+        $.getJSON("/api/songs/details/" + id, function (data) {
+            console.log(data);
+            $("#songTitle").html(data["title"]);
+            $("#songArtist").html(data["artist"]);
+            $("#songYear").html(data["year"]);
+            $("#indicators")[0].innerHTML = "";
+
+            let duoindicator_badge = document.createElement("span");
+            duoindicator_badge.classList.add("badge");
+            duoindicator_badge.classList.add("badge-secondary");
+            duoindicator_badge.classList.add("badge-pill");
+            duoindicator_badge.classList.add("mx-1");
+            duoindicator_badge.classList.add("p-2");
+
+            if (data["duo"] == 0) {
+                duoindicator_badge.innerHTML = "Solo";
+                let duoindicator = document.createElement("i");
+                duoindicator.classList.add("fas");
+                duoindicator.classList.add("fa-user");
+                duoindicator.classList.add("ml-1");
+                duoindicator_badge.appendChild(duoindicator);
+                $("#indicators")[0].appendChild(duoindicator_badge)
+            }
+
+            if (data["duo"] == 1) {
+                duoindicator_badge.innerHTML = "Duo";
+                let duoindicator = document.createElement("i");
+                duoindicator.classList.add("fas");
+                duoindicator.classList.add("fa-user-friends");
+                duoindicator.classList.add("ml-1");
+                duoindicator_badge.appendChild(duoindicator);
+                $("#indicators")[0].appendChild(duoindicator_badge)
+            }
+
+            if (data["explicit"] == 1) {
+                let explicitindicator_badge = document.createElement("span");
+                explicitindicator_badge.classList.add("badge");
+                explicitindicator_badge.classList.add("badge-secondary");
+                explicitindicator_badge.classList.add("badge-pill");
+                explicitindicator_badge.classList.add("mx-1");
+                explicitindicator_badge.classList.add("p-2");
+                explicitindicator_badge.innerHTML = "Explicit";
+                let explicitindicator = document.createElement("i");
+                explicitindicator.classList.add("fas");
+                explicitindicator.classList.add("fa-e");
+                explicitindicator.classList.add("ml-1");
+                explicitindicator_badge.appendChild(explicitindicator);
+                $("#indicators")[0].appendChild(explicitindicator_badge)
+            }
+
+            let styles = data["styles"].split(",");
+            let languages = data["languages"].split(",");
+
+            $("#songGenres").html("");
+            $("#songLanguages").html("");
+
+            for (let i = 0; i < styles.length; i++) {
+                let badge = document.createElement("span");
+                badge.classList.add("badge");
+                badge.classList.add("badge-secondary");
+                badge.classList.add("badge-pill");
+                badge.classList.add("mx-1");
+                badge.classList.add("p-2");
+                badge.innerHTML = styles[i];
+                $("#songGenres")[0].appendChild(badge);
+            }
+
+            for (let i = 0; i < languages.length; i++) {
+                let badge = document.createElement("span");
+                badge.classList.add("badge");
+                badge.classList.add("badge-secondary");
+                badge.classList.add("badge-pill");
+                badge.classList.add("mx-1");
+                badge.classList.add("p-2");
+                badge.innerHTML = languages[i];
+                $("#songLanguages")[0].appendChild(badge);
+            }
+        });
     }
 
     function submitModal() {
@@ -125,6 +216,76 @@
 
     }
 
+    function songSearch() {
+        let value = $("#filter").val()
+        if (value.length >= 1) {
+            $.getJSON("/api/songs/search", { q: value }, function (data) {
+                var items = [];
+                $("#songtable").html("")
+                $.each(data, function (key, val) {
+                    let itemRow = document.createElement("tr")
+                    let itemCell = document.createElement("td")
+                    itemCell.innerHTML = val["artist"] + ` - ` + val["title"]
+                    itemRow.appendChild(itemCell)
+                    let infoCell = document.createElement("td")
+                    let duoindicator = document.createElement("i")
+                    duoindicator.classList.add("fas")
+                    if (val["duo"] == 0) {
+                        duoindicator.classList.add("fa-user")
+
+                    }
+                    if (val["duo"] == 1) {
+                        duoindicator.classList.add("fa-user-friends")
+                    }
+                    duoindicator.classList.add("ml-1")
+                    duoindicator.classList.add("list-indicator")
+                    infoCell.appendChild(duoindicator)
+                    if (val["explicit"] == 1) {
+                        let explicitindicator = document.createElement("i")
+                        explicitindicator.classList.add("fas")
+                        explicitindicator.classList.add("fa-e")
+                        explicitindicator.classList.add("ml-1")
+                        infoCell.appendChild(explicitindicator)
+                    }
+                    itemRow.appendChild(infoCell)
+                    let buttonCell = document.createElement("td")
+                    let button = document.createElement("button")
+                    button.classList.add("btn")
+                    button.classList.add("btn-primary")
+                    button.classList.add("justify-content-center")
+                    button.classList.add("align-content-between")
+                    button.classList.add("enqueueButton")
+                    button.setAttribute("type", "button")
+                    button.setAttribute("data-toggle", "modal")
+                    button.setAttribute("data-target", "#enqueueModal")
+                    button.setAttribute("onclick", "setSelectedId(" + val["karafun_id"] + ")")
+                    let buttonIcon = document.createElement("i")
+                    buttonIcon.classList.add("fas")
+                    buttonIcon.classList.add("fa-plus")
+                    button.appendChild(buttonIcon)
+                    buttonCell.appendChild(button)
+                    itemRow.appendChild(buttonCell)
+                    $("#songtable").append(itemRow)
+                });
+
+
+                $(items.join("")).appendTo("#songtable");
+                entriesAccepted()
+            });
+        } else {
+            $("#songtable").html("")
+        }
+    }
+
+    function debounce(func, timeout = 300) {
+        let timer;
+        return (...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => { func.apply(this, args); }, timeout);
+        };
+    }
+
+
     {% if not auth %}
     function entriesAccepted() {
         $.getJSON("/api/entries/accept", (data, out) => {
@@ -136,6 +297,7 @@
                 $('[data-toggle="tooltip"]').tooltip()
             } else {
                 $(".enqueueButton").prop("disabled", false)
+
             }
 
         })

build_container.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+# Get username from command line
+if [ $# -eq 0 ]; then
+    echo "No username supplied. Please supply a github username as the first argument."
+    exit 1
+fi
+
+# Store username in variable
+USERNAME=$1
+
+# Check for uncommitted changes
+if ! git diff-index --quiet HEAD --; then
+    echo "You have uncommitted changes. Please commit or stash them and try again."
+    exit 1
+fi
+
+# Get the appropriate version of the container using git
+VERSION=$(git rev-parse --abbrev-ref HEAD)-$(git describe)
+
+# Build the container. Add the version as a tag and as ENV variable SOURCE_VERSION
+docker build -t ghcr.io/$USERNAME/karaoqueue:$VERSION --build-arg SOURCE_VERSION=$VERSION .
+
+# Ask the user if they want to push the container. Confirm Version.
+read -p "Push container to ghcr.io/$USERNAME/karaoqueue:$VERSION? [y/n] " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+    docker push ghcr.io/$USERNAME/karaoqueue:$VERSION
+fi
+
+# Ask the user if they want to push the container as latest
+read -p "Push container to ghcr.io/$USERNAME/karaoqueue:latest? [y/n] " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+    docker tag ghcr.io/$USERNAME/karaoqueue:$VERSION ghcr.io/$USERNAME/karaoqueue:latest
+    docker push ghcr.io/$USERNAME/karaoqueue:latest
+fi