modify web ui
This commit is contained in:
神楽坂·喵
parent
3e0d7fc14e
commit
6701f86390
@ -1,21 +1,23 @@
|
|||||||
{% 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 }}/ </span>
|
<span>{{ subdirpath }}/ </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>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{{- dirlisting(subdirobj, subdirpath) -}}
|
{{- dirlisting(subdirobj, subdirpath) -}}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
@ -23,104 +25,191 @@
|
|||||||
{%- 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>
|
||||||
{{ file }}
|
|
||||||
</form>
|
</form>
|
||||||
|
</div> {{ filepath }}
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% 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>
|
|
||||||
<a href="."><h5>Refresh</h5></a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div id="upload">
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div id="playlist" class="card">
|
||||||
|
<div class="card-head">
|
||||||
|
<h2 class="card-title">Play List</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<div>
|
||||||
|
Currently Playing :
|
||||||
|
{% if playlist|length > 0 %}
|
||||||
|
{% if 'url' in playlist[0] %}
|
||||||
|
(<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a>)
|
||||||
|
{% elif 'path' in playlist[0] %}
|
||||||
|
({{ playlist[0]['path'] }})
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
No music
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
Playlist :
|
||||||
|
<form method="post">
|
||||||
|
<input type="text" value="randomize" name="action" hidden>
|
||||||
|
<button type="submit" class="btn btn-primary">Randomize playlist</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Type</th>
|
||||||
|
<th scope="col">Title</th>
|
||||||
|
<th scope="col">Url/Path</th>
|
||||||
|
<th scope="col">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for m in playlist[1:] %}
|
||||||
|
<tr>
|
||||||
|
<th>{{ m['type'] }}</th>
|
||||||
|
<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 class="row">
|
||||||
|
<div id="browser" class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h2 class="card-title">Music library</h2>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="btn-group" role="group">
|
||||||
|
<form action="./download" method="get" class="directory form1">
|
||||||
|
<input type="text" value="./" name="directory" hidden>
|
||||||
|
<button type="submit" class="btn btn-primary">Download entire music library</button>
|
||||||
|
</form>
|
||||||
|
<form method="post" class="directory form3">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div id="upload" class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h5 class="card-title">Upload File</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
<form action="./upload" method="post" enctype="multipart/form-data">
|
<form action="./upload" method="post" enctype="multipart/form-data">
|
||||||
<input type="file" name="file" value="Browse Music file"/>
|
<div class="input-group">
|
||||||
Upload into
|
<div class="custom-file">
|
||||||
<input list="targetdirs" id="targetdir" name="targetdir" placeholder="uploads" />
|
<input type="file" name="file" class="custom-file-input" id="uploadSelectFile"
|
||||||
|
aria-describedby="uploadSubmit" value="Browse Music file" />
|
||||||
|
<label class="custom-file-label" for="uploadSelectFile">Choose file</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<input class="form-control" list="targetdirs" id="targetdir" name="targetdir"
|
||||||
|
placeholder="uploads" />
|
||||||
<datalist id="targetdirs">
|
<datalist id="targetdirs">
|
||||||
<option value="uploads">
|
<option value="uploads">
|
||||||
{% for dir in music_library.get_subdirs_recursively() %}
|
{% for dir in music_library.get_subdirs_recursively() %}
|
||||||
<option value="{{ dir }}">
|
<option value="{{ dir }}">
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</datalist>
|
</datalist>
|
||||||
<input type="submit" value="Upload"/>
|
<button class="btn btn-outline-secondary" type="submit"
|
||||||
|
id="uploadSubmit">Button</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="url">
|
</div>
|
||||||
Add Youtube/Soundcloud URL :
|
</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">
|
<form method="post">
|
||||||
<input type=text name="add_url">
|
<label>Add Youtube/Soundcloud URL :</label>
|
||||||
<input type="submit" value="Add URL">
|
<input class="form-control" type="text" name="add_url">
|
||||||
|
<button type="submit" class="btn btn-primary">Add URL</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="radio">
|
</div>
|
||||||
Add Radio URL :
|
</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">
|
<form method="post">
|
||||||
<input type=text name="add_radio">
|
<label>Add Radio URL :</label>
|
||||||
<input type="submit" value="Add Radio">
|
<input class="form-control" type="text" name="add_radio">
|
||||||
|
<button type="submit" class="btn btn-primary">Add Radio</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="playlist">
|
<script src="/static/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||||
Currently Playing :
|
|
||||||
{% if playlist|length > 0 %}
|
|
||||||
{{ playlist[0]['title'] }} {{ playlist[0]['user'] }}
|
|
||||||
{% if 'url' in playlist[0] %}
|
|
||||||
(<a href="{{ playlist[0]['url'] }}">{{ playlist[0]['url'] }}</a>)
|
|
||||||
{% endif %}
|
|
||||||
{% else %}
|
|
||||||
No music
|
|
||||||
{% endif %}
|
|
||||||
<br />
|
|
||||||
Playlist :
|
|
||||||
<form method="post"><input type="text" value="randomize" name="action" hidden><input type="submit" value="Randomize playlist"></form>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{% for m in playlist[1:] %}
|
|
||||||
<li>[{{ m['type'] }}]] {{ m['title'] }} - {{ m['url'] }}
|
|
||||||
<form method="post"><input type="text" value="{{ loop.index }}" name="delete_music" hidden><input type="submit" value="X"></form>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
<h2>Music library:</h2>
|
|
||||||
<form action="./download" method="get" class="directory form1">
|
|
||||||
<input type="text" value="./" name="directory" hidden>
|
|
||||||
<input type="submit" value="Download entire music library">
|
|
||||||
</form>
|
|
||||||
<form method="post" class="directory form3">
|
|
||||||
<input type="text" value="./" name="add_folder_recursively" hidden>
|
|
||||||
<input type="submit" value="Add all tracks from music library (recursively)">
|
|
||||||
</form>
|
|
||||||
<br />
|
|
||||||
{{ dirlisting(music_library) }}
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="browser">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="upload">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user