From f5ca09716b3e3cd522af77989bd937441a04c258 Mon Sep 17 00:00:00 2001 From: Terry Geng Date: Wed, 5 Feb 2020 15:25:38 +0800 Subject: [PATCH] web interface add ajax feature --- interface.py | 67 ++++++++++----- media/playlist.py | 14 +++ templates/index.html | 201 +++++++++++++++++++++---------------------- 3 files changed, 161 insertions(+), 121 deletions(-) diff --git a/interface.py b/interface.py index e00db07..c8cab3b 100644 --- a/interface.py +++ b/interface.py @@ -1,7 +1,7 @@ #!/usr/bin/python3 from functools import wraps -from flask import Flask, render_template, request, redirect, send_file, Response +from flask import Flask, render_template, request, redirect, send_file, Response, jsonify import variables as var import util from datetime import datetime @@ -90,7 +90,7 @@ def requires_auth(f): return decorated -@web.route("/", methods=['GET', 'POST']) +@web.route("/", methods=['GET']) @requires_auth def index(): folder_path = var.music_folder @@ -99,6 +99,40 @@ def index(): for file in files: music_library.add_file(file) + + return render_template('index.html', + all_files=files, + music_library=music_library, + os=os, + playlist=var.playlist, + user=var.user + ) + +@web.route("/playlist", methods=['GET']) +@requires_auth +def playlist(): + if var.playlist.length() == 0: + return jsonify([render_template('playlist.html', + m=False, + index=-1 + )] + ) + + data = [] + + for index, item in enumerate(var.playlist.playlist): + data.append(render_template('playlist.html', + index=index, + m=item, + playlist=var.playlist + ) + ) + + return jsonify(data) + +@web.route("/post", methods=['POST']) +@requires_auth +def post(): if request.method == 'POST': logging.debug("Post request: "+ str(request.form)) if 'add_file_bottom' in request.form and ".." not in request.form['add_file_bottom']: @@ -149,17 +183,17 @@ def index(): elif 'add_url' in request.form: var.playlist.append({'type':'url', - 'url': request.form['add_url'], - 'user': 'Web', - 'ready': 'validation'}) + 'url': request.form['add_url'], + 'user': 'Web', + 'ready': 'validation'}) logging.info("web: add to playlist: " + request.form['add_url']) media.url.get_url_info() var.playlist.playlist[-1]['ready'] = "no" elif 'add_radio' in request.form: var.playlist.append({'type': 'radio', - 'path': request.form['add_radio'], - 'user': "Web"}) + 'path': request.form['add_radio'], + 'user': "Web"}) logging.info("web: add to playlist: " + request.form['add_radio']) elif 'delete_music' in request.form: @@ -194,7 +228,7 @@ def index(): elif 'action' in request.form: action = request.form['action'] if action == "randomize": - random.shuffle(var.playlist.playlist) + var.playlist.randomize() elif action == "stop": var.botamusique.pause() elif action == "clear": @@ -212,14 +246,7 @@ def index(): var.botamusique.volume = 0 logging.info("web: volume down to %d" % (var.botamusique.volume * 100)) - return render_template('index.html', - all_files=files, - music_library=music_library, - os=os, - playlist=var.playlist, - user=var.user - ) - + return jsonify({'ver': var.playlist.version}) @web.route('/upload', methods=["POST"]) def upload(): @@ -239,9 +266,9 @@ def upload(): return redirect("./", code=406) logging.info('Uploading file:') - logging.info(' - filename:', filename) - logging.info(' - targetdir:', targetdir) - logging.info(' - mimetype:', file.mimetype) + logging.info(' - filename: ' + filename) + logging.info(' - targetdir: ' + targetdir) + logging.info(' - mimetype: ' + file.mimetype) if "audio" in file.mimetype: storagepath = os.path.abspath(os.path.join(var.music_folder, targetdir)) @@ -256,7 +283,7 @@ def upload(): return redirect("./", code=500) filepath = os.path.join(storagepath, filename) - logging.info(' - filepath: ', filepath) + logging.info(' - filepath: ' + filepath) if os.path.exists(filepath): return redirect("./", code=406) diff --git a/media/playlist.py b/media/playlist.py index b688732..f67d91d 100644 --- a/media/playlist.py +++ b/media/playlist.py @@ -4,11 +4,15 @@ import variables as var class PlayList: playlist = [] current_index = 0 + version = 0 # increase by one after each change def append(self, item): + self.version += 1 self.playlist.append(item) def insert(self, index, item): + self.version += 1 + if index == -1: index = self.current_index @@ -21,9 +25,11 @@ class PlayList: return len(self.playlist) def extend(self, items): + self.version += 1 self.playlist.extend(items) def next(self): + self.version += 1 if len(self.playlist) == 0: return False @@ -32,11 +38,13 @@ class PlayList: return self.playlist[self.current_index] def update(self, item, index=-1): + self.version += 1 if index == -1: index = self.current_index self.playlist[index] = item def remove(self, index=-1): + self.version += 1 if index > len(self.playlist) - 1: return False @@ -66,10 +74,16 @@ class PlayList: return self.playlist[self.next_index()] def jump(self, index): + self.version += 1 self.current_index = index return self.playlist[index] + def randomize(self): + random.shuffle(self.playlist) + self.version += 1 + def clear(self): + self.version += 1 self.playlist = [] self.current_index = 0 diff --git a/templates/index.html b/templates/index.html index 1e91e9d..7ae5ac5 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,21 +6,21 @@
  • -
    - - -
    +
    -
    - - Entire folder -
    -
    - - Entire folder and sub-folders -
    + + Entire folder + + + Entire folder and sub-folders +
    @@ -54,21 +54,21 @@
  • -
    - - -
    +
    -
    - - To bottom of play list -
    -
    - - After current song -
    + + To bottom of play list + + + After current song +
    @@ -120,25 +120,25 @@
    -
    - - -
    -
    - - -
    + +
    -
    - - -
    -
    - - -
    + +
    @@ -150,72 +150,18 @@ - - {% if playlist.length() == 0 %} - - - - {% else %} - {% for m in playlist.playlist %} - {% if loop.index0 == playlist.current_index %} - - {% else %} - - {% endif %} - - - - + + + - {% endfor %} - {% endif %}
    Action
    Play list is empty.
    {{ loop.index }} -
    - {% if 'thumbnail' in m %} - - {% else %} - - {% endif %} -
    -
    - {% if 'title' in m and m['title'].strip() %} - {{ m['title'] }} - {% else %} - {{ m['url'] }} - {% endif %} - {{ m['type'].capitalize() }} -
    - {% if 'artist' in m %} - {{ m['artist'] }} - {% else %} - Unknown Artist - {% endif %} -
    -     		- {% if 'url' in m %} - {{ m['url']|truncate(50) }} - {% elif 'path' in m %} - {{ m['path']|truncate(50) }} - {% endif %} - -
    -
    - - -
    -
    - - -
    -
    -
    Play list is empty.
    -
    - - -
    +
    @@ -341,6 +287,59 @@ $('a.a-submit, button.btn-submit').on('click', function (event) { $(event.target).closest('form').submit(); }); + + var playlist_ver = 0; + + function request(url, _data){ + $.ajax({ + type: 'POST', + url: '/post', + data : _data, + statusCode : { + 200 : function(data) { + if (data.ver > playlist_ver) { + updatePlaylist(); + playlist_ver = data.ver; + } + } + } + }); + } + + function displayPlaylist(data){ + $("#playlist-table tr").remove(); + $.each(data, function(index, item){ + $("#playlist-table").append(item); + }) + } + + function updatePlaylist(){ + $.ajax({ + type: 'GET', + url: '/playlist', + statusCode : { + 200 : displayPlaylist + } + }); + } + + + // Check the version of playlist to see if update is needed. + setInterval(function(){ + $.ajax({ + type: 'POST', + url : '/post', + statusCode : { + 200 : function(data){ + if(data.ver > playlist_ver){ + updatePlaylist(); + playlist_ver = data.ver; + } + } + } + }); + } , 3000); +