storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modify web ui

Browse Source
This commit is contained in:
神楽坂·喵 2019-11-21 17:59:37 +08:00
parent 3e0d7fc14e
commit 6701f86390
1 changed files with 183 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

277
templates/index.html
View File

@ -1,126 +1,215 @@
{% macro dirlisting(dir, path='') -%} {% macro dirlisting(dir, path='') -%}
<ul> <ul class="list-group">
{% for subdirname, subdirobj in dir.get_subdirs().items() %} {% for subdirname, subdirobj in dir.get_subdirs().items() %}
{%- set subdirpath = os.path.relpath(subdirobj.fullpath, music_library.fullpath) %} {%- set subdirpath = os.path.relpath(subdirobj.fullpath, music_library.fullpath) %}
<li class="directory"> <li class="directory list-group-item list-group-item-primary">
<span>{{ subdirname }}/&nbsp;</span> <span>{{ subdirpath }}/&nbsp;</span>
<form method="post" class="directory form1"> <div class="btn-group" role="group">
<form method="post" class="directory">
<input type="text" value="{{ subdirpath }}" name="add_folder" hidden> <input type="text" value="{{ subdirpath }}" name="add_folder" hidden>
<input type="submit" value="Add all tracks from this folder"> <button type="submit" class="btn btn-secondary">Add all tracks from this folder</button>
</form> </form>
<form method="post" class="directory form2"> <form method="post" class="directory">
<input type="text" value="{{ subdirpath }}" name="add_folder_recursively" hidden> <input type="text" value="{{ subdirpath }}" name="add_folder_recursively" hidden>
<input type="submit" value="Add all tracks from this folder (recursively)"> <button type="submit" class="btn btn-secondary">Add all tracks from this folder (recursively)</button>
</form> </form>
<form action="./download" method="get" class="directory form3"> <form action="./download" method="get" class="directory">
<input type="text" value="{{ subdirpath }}" name="directory" hidden> <input type="text" value="{{ subdirpath }}" name="directory" hidden>
<input type="submit" value="Download entire directory"> <button type="submit" class="btn btn-secondary">Download entire directory</button>
</form> </form>
</li> </div>
{{- dirlisting(subdirobj, subdirpath) -}} </li>
{{- dirlisting(subdirobj, subdirpath) -}}
{% endfor %} {% endfor %}
{%- set files = dir.get_files() %} {%- set files = dir.get_files() %}
{%- if files %} {%- if files %}
{% for file in files %} {% for file in files %}
{% set filepath = os.path.relpath(os.path.join(dir.fullpath, file), music_library.fullpath) %} {% set filepath = os.path.relpath(os.path.join(dir.fullpath, file), music_library.fullpath) %}
<li class="file"> <li class="file list-group-item">
<div class="btn-group" role="group">
<form method="post" class="file file_add"> <form method="post" class="file file_add">
<input type="text" value="{{ filepath }}" name="add_file" hidden> <input type="text" value="{{ filepath }}" name="add_file" hidden>
<input type="submit" value="Add"> <button type="submit" class="btn btn-primary">Add</button>
</form> </form>
<form action="./download" method="get" class="file file_download"> <form action="./download" method="get" class="file file_download">
<input type="text" value="{{ filepath }}" name="file" hidden> <input type="text" value="{{ filepath }}" name="file" hidden>
<input type="submit" value="Download"> <button type="submit" class="btn btn-primary">Download</button>
&nbsp;{{ file }}
</form> </form>
</li> </div>&nbsp;{{ filepath }}
{% endfor %} </li>
{% endfor %}
{%- endif %} {%- endif %}
</ul> </ul>
{%- endmacro %} {%- endmacro %}
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title></title> <title>botamusique web interface</title>
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}"> <link rel="stylesheet" href="/static/css/bootstrap.min.css">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1"> <META HTTP-EQUIV="Expires" CONTENT="-1">
</head> </head>
<body> <body>
<a href="."><h5>Refresh</h5></a> <div class="container">
<br> <div class="row">
<div id="playlist" class="card">
<div class="card-head">
<h2 class="card-title">Play List</h2>
</div>
<div id="upload"> <div class="card-body">
<form action="./upload" method="post" enctype="multipart/form-data"> <div>
<input type="file" name="file" value="Browse Music file"/> Currently Playing :
Upload into {% if playlist|length > 0 %}
<input list="targetdirs" id="targetdir" name="targetdir" placeholder="uploads" /> {% if 'url' in playlist[0] %}
<datalist id="targetdirs"> (<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a>)
<option value="uploads"> {% elif 'path' in playlist[0] %}
{% for dir in music_library.get_subdirs_recursively() %} ({{ playlist[0]['path'] }})
<option value="{{ dir }}"> {% endif %}
{% endfor %} {% else %}
</datalist> No music
<input type="submit" value="Upload"/> {% endif %}
</form> </div>
</div> Playlist :
<form method="post">
<input type="text" value="randomize" name="action" hidden>
<button type="submit" class="btn btn-primary">Randomize playlist</button>
</form>
<div id="url"> <table class="table">
Add Youtube/Soundcloud URL : <thead>
<form method="post"> <tr>
<input type=text name="add_url"> <th scope="col">Type</th>
<input type="submit" value="Add URL"> <th scope="col">Title</th>
</form> <th scope="col">Url/Path</th>
</div> <th scope="col">Action</th>
<div id="radio"> </tr>
Add Radio URL : </thead>
<form method="post"> <tbody>
<input type=text name="add_radio"> {% for m in playlist[1:] %}
<input type="submit" value="Add Radio"> <tr>
</form> <th>{{ m['type'] }}</th>
</div> <th>
{% if 'title' in m %}
({{ m['title'] }})
{% else %}
No title
{% endif %}
</th>
<th>
{% if 'url' in m %}
(<a href="{{ m['url'] }}">{{ m['url'] }}</a>)
{% elif 'path' in m %}
({{ m['path'] }})
{% endif %}
</th>
<th>
<form method="post">
<input type="text" value="{{ loop.index }}" name="delete_music" hidden>
<button type="submit" class="btn btn-primary">Remove</button>
</form>
</th>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div id="playlist"> <div class="row">
Currently Playing : <div id="browser" class="card">
{% if playlist|length > 0 %} <div class="card-header">
{{ playlist[0]['title'] }} {{ playlist[0]['user'] }} <h2 class="card-title">Music library</h2>
{% if 'url' in playlist[0] %} </div>
(<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a>) <div class="card-body">
{% endif %} <div class="btn-group" role="group">
{% else %} <form action="./download" method="get" class="directory form1">
No music <input type="text" value="./" name="directory" hidden>
{% endif %} <button type="submit" class="btn btn-primary">Download entire music library</button>
<br /> </form>
Playlist : <form method="post" class="directory form3">
<form method="post"><input type="text" value="randomize" name="action" hidden><input type="submit" value="Randomize playlist"></form> <input type="text" value="./" name="add_folder_recursively" hidden>
<button type="submit" class="btn btn-primary">Add all tracks from music library
(recursively)</button>
</form>
</div>
<br />
{{ dirlisting(music_library) }}
</div>
</div>
</div>
</div>
<ul> <div id="upload" class="container">
{% for m in playlist[1:] %} <div class="row">
<li>[{{ m['type'] }}]] {{ m['title'] }} - {{ m['url'] }} <div class="col">
<form method="post"><input type="text" value="{{ loop.index }}" name="delete_music" hidden><input type="submit" value="X"></form> <div class="card">
</li> <div class="card-header">
{% endfor %} <h5 class="card-title">Upload File</h5>
</ul> </div>
<h2>Music library:</h2> <div class="card-body">
<form action="./download" method="get" class="directory form1"> <form action="./upload" method="post" enctype="multipart/form-data">
<input type="text" value="./" name="directory" hidden> <div class="input-group">
<input type="submit" value="Download entire music library"> <div class="custom-file">
</form> <input type="file" name="file" class="custom-file-input" id="uploadSelectFile"
<form method="post" class="directory form3"> aria-describedby="uploadSubmit" value="Browse Music file" />
<input type="text" value="./" name="add_folder_recursively" hidden> <label class="custom-file-label" for="uploadSelectFile">Choose file</label>
<input type="submit" value="Add all tracks from music library (recursively)"> </div>
</form> <div class="input-group-append">
<br /> <input class="form-control" list="targetdirs" id="targetdir" name="targetdir"
{{ dirlisting(music_library) }} placeholder="uploads" />
<datalist id="targetdirs">
<option value="uploads">
{% for dir in music_library.get_subdirs_recursively() %}
<option value="{{ dir }}">
{% endfor %}
</datalist>
<button class="btn btn-outline-secondary" type="submit"
id="uploadSubmit">Button</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add URL</h5>
</div>
<div class="card-body">
<form method="post">
<label>Add Youtube/Soundcloud URL :</label>
<input class="form-control" type="text" name="add_url">
<button type="submit" class="btn btn-primary">Add URL</button>
</form>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Radio</h5>
</div>
<div class="card-body">
<form method="post">
<label>Add Radio URL :</label>
<input class="form-control" type="text" name="add_radio">
<button type="submit" class="btn btn-primary">Add Radio</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</div>
<div id="browser">
</div>
<div id="upload">
</div>
</body> </body>
</html>
</html>