From 4e541a762288a4edc7060fc621b099c00d21c925 Mon Sep 17 00:00:00 2001 From: Terry Geng Date: Sun, 12 Jul 2020 11:38:19 +0800 Subject: [PATCH] refactor: Separate backend and frontend, avoid template-filling on the fly. Resolve #158. --- .gitignore | 4 +- interface.py | 37 +++++++++++------- templates/index.html | 1 - templates/need_token.html | 1 - web/js/main.mjs | 81 ++++++++++++++++++++++++++++++++------- web/js/util.js | 38 +++++++++++++++++- web/templates/index.html | 25 +++--------- 7 files changed, 137 insertions(+), 50 deletions(-) delete mode 100644 templates/index.html delete mode 100644 templates/need_token.html diff --git a/.gitignore b/.gitignore index bb304f94..e649d17a 100644 --- a/.gitignore +++ b/.gitignore @@ -116,5 +116,7 @@ tmp/ *.db +templates/* + # Pycharm -.idea/ \ No newline at end of file +.idea/ diff --git a/interface.py b/interface.py index 310f5f0f..f9135f39 100644 --- a/interface.py +++ b/interface.py @@ -207,7 +207,7 @@ def build_tags_color_lookup(): def get_all_dirs(): - dirs = [] + dirs = ["."] paths = var.music_db.query_all_paths() for path in paths: pos = 0 @@ -225,18 +225,7 @@ def get_all_dirs(): @web.route("/", methods=['GET']) @requires_auth def index(): - while var.cache.dir_lock.locked(): - time.sleep(0.1) - - tags_color_lookup = build_tags_color_lookup() - max_upload_file_size = util.parse_file_size(var.config.get("webinterface", "max_upload_file_size", fallback="30MB")) - - return render_template('index.html', - dirs=get_all_dirs(), - upload_enabled=var.config.getboolean("webinterface", "upload_enabled", fallback=True), - tags_color_lookup=tags_color_lookup, - max_upload_file_size=max_upload_file_size - ) + return open('templates/index.html', "r").read() @web.route("/playlist", methods=['GET']) @@ -527,6 +516,8 @@ def build_library_query_condition(form): if form['type'] == 'file': folder = form['dir'] + if folder == ".": + folder = "" if not folder.endswith('/') and folder: folder += '/' condition.and_like('path', folder + '%') @@ -552,6 +543,26 @@ def build_library_query_condition(form): abort(400) +@web.route("/library/info", methods=['GET']) +@requires_auth +def library_info(): + global log + + while var.cache.dir_lock.locked(): + time.sleep(0.1) + + tags = var.music_db.query_all_tags() + max_upload_file_size = util.parse_file_size(var.config.get("webinterface", "max_upload_file_size", fallback="30MB")) + + print(get_all_dirs()) + return jsonify(dict( + dirs=get_all_dirs(), + upload_enabled=var.config.getboolean("webinterface", "upload_enabled", fallback=True), + tags=tags, + max_upload_file_size=max_upload_file_size + )) + + @web.route("/library", methods=['POST']) @requires_auth def library(): diff --git a/templates/index.html b/templates/index.html deleted file mode 100644 index c22c3b00..00000000 --- a/templates/index.html +++ /dev/null @@ -1 +0,0 @@ -botamusique web interface
#TitleUrl/PathAction
A loading spinner
A drawing of an empty box.
See item on the playlist.

Music Library

Filters

Type
Tags{% for tag in tags_color_lookup.keys() %} {{ tag }} {% endfor %}
A loading spinner
{% if upload_enabled %}
{% else %}

Add URL

Add Radio

\ No newline at end of file diff --git a/templates/need_token.html b/templates/need_token.html deleted file mode 100644 index 7453429d..00000000 --- a/templates/need_token.html +++ /dev/null @@ -1 +0,0 @@ -botamusique web interface
Token Required

Token Required!

You are accessing the web interface of {{ name }}. A token is needed to grant you access.
Please send "{{ command }}" to the bot in mumble to acquire one.
\ No newline at end of file diff --git a/web/js/main.mjs b/web/js/main.mjs index ce1300fd..7299f47b 100644 --- a/web/js/main.mjs +++ b/web/js/main.mjs @@ -7,6 +7,7 @@ import { Tooltip, } from 'bootstrap/js/src/index'; import { + getColor, isOverflown, setProgressBar, secondsToStr, @@ -416,18 +417,6 @@ function setFilterType(event, type) { updateResults(); } -// Bind Event -$('.filter-tag').click(function (e) { - const tag = $(e.currentTarget); - if (!tag.hasClass('tag-clicked')) { - tag.addClass('tag-clicked'); - tag.removeClass('tag-unclicked'); - } else { - tag.addClass('tag-unclicked'); - tag.removeClass('tag-clicked'); - } - updateResults(); -}); filter_dir.change(function () { updateResults(); @@ -501,6 +490,9 @@ function bindLibraryResultEvent() { ); } +const lib_filter_tag_group = $("#filter-tags"); +const lib_filter_tag_element = $(".filter-tag"); + const lib_group = $('#library-group'); const id_element = $('.library-item-id'); const title_element = $('.library-item-title'); @@ -513,6 +505,65 @@ const tag_edit_element = $('.library-item-edit'); // var notag_element = $(".library-item-notag"); // var tag_element = $(".library-item-tag"); +function updateLibraryControls(){ + $.ajax({ + type: 'GET', + url: 'library/info', + statusCode: { + 200: displayLibraryControls, + 403: function () { + location.reload(true); + }, + }, + }); +} + +function displayLibraryControls(data){ + $("#maxUploadFileSize").val(data.max_upload_file_size); + if (data.upload_enabled) { + $("#uploadDisabled").val("false"); + $("#upload").show(); + } else { + $("#uploadDisabled").val("true"); + $("#upload").hide(); + } + + let select = $("#filter-dir"); + let dataList = $("#upload-target-dirs"); + select.find("option").remove(); + dataList.find("option").remove(); + if (data.dirs.length > 0) { + console.log(data.dirs); + data.dirs.forEach(function (dir) { + $("").appendTo(select); + $("