diff options
| author | Jokler <jokler@protonmail.com> | 2020-02-22 22:46:06 +0100 |
|---|---|---|
| committer | Jokler <jokler@protonmail.com> | 2020-02-22 23:20:10 +0100 |
| commit | 84804836f5c1e782c77f1bbf676177151558e008 (patch) | |
| tree | 55f0ee9664018f6ed0cc41d2cfcf13ca3e0ffe60 /templates | |
| parent | 5eea11a03c11551091b2c72f48590aec7f5410f0 (diff) | |
| download | pokebot-84804836f5c1e782c77f1bbf676177151558e008.tar.gz pokebot-84804836f5c1e782c77f1bbf676177151558e008.zip | |
Add tmtu mode as a front-end
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.htm | 5 | ||||
| -rw-r--r-- | templates/song.htm | 11 | ||||
| -rw-r--r-- | templates/tmtu/index.htm | 145 |
3 files changed, 154 insertions, 7 deletions
diff --git a/templates/index.htm b/templates/index.htm index 2584603..3183b52 100644 --- a/templates/index.htm +++ b/templates/index.htm @@ -4,6 +4,11 @@ {% block content %} <h1>Bots</h1> +<form action="/front-end" method="POST"> + <input type="hidden" placeholder="Enter front end" name="front-end" value="tmtu"> + <button type="submit">tmtu-mode</button> +</form> + <ul> {% for bot in bots %} <h2>{{ bot.name }}</h1> diff --git a/templates/song.htm b/templates/song.htm index 93f4fec..072567a 100644 --- a/templates/song.htm +++ b/templates/song.htm @@ -1,10 +1,7 @@ <a href="{{ item.webpage_url }}">{{ item.title }}</a> -{% match item.duration %} - {% when Some with (duration) %} - {% let secs = duration.as_secs() %} - {% let mins = secs / 60 %} - {% let submin_secs = secs % 60 %} - <span>({{ "{:02}"|format(mins) }}:{{ "{:02}"|format(submin_secs) }})</span> +<span>({{ item.duration|fmt_duration }})</span> +{% match item.thumbnail %} + {% when Some with (thumbnail) %} + <img src="{{ thumbnail }}" height="128"> {% when None %} - <span>(--:--)</span> {% endmatch %} diff --git a/templates/tmtu/index.htm b/templates/tmtu/index.htm new file mode 100644 index 0000000..e7d1922 --- /dev/null +++ b/templates/tmtu/index.htm @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> + <head> + <title>tmtu mode</title> + <style type="text/css"> + body { + margin: 16px; + } + td { + padding-right: 16px; + padding-top: 1px; + padding-bottom: : 1px; + } + td, th { + vertical-align:top; + } + .tableheader td { + color: gray; + border-bottom: 1px solid gray; + } + .stat { + color: gray; + text-align: right; + white-space: nowrap; + padding-left: 8px + } + .tracktable { + border-left: 1px solid gray; + } + .tracktable tr:hover { + background-color: #E0E0E0; + } + .bottable tr:hover { + background-color: #E0E0E0; + } + #test:hover { + background: 2px solid red; + } + a { + color: teal; + } + a:hover { + color: red; + } + a[visited] { + color: navy + } + .addedby { + color: darkorange; + } + .botname { + } + .selected { + font-weight: 700; + } + .playing { + background: PaleGreen; + } + </style> + </head> + <body> + <table> + <tr> + <td colspan="2"> + <h1>PokeBot</h1> + <p>A web interface for inspecting currently playing audio in PokeBot. Select an instance of the bot to view it's playlist and history.</p> + <nav style="display: inline-block;"> + <ol> + {% let bot_name %} + {% match bot %} + {% when Some with (bot) %} + {% let bot_name = bot.name.clone() %} + {% when None %} + {% let bot_name = "".to_owned() %} + {% endmatch %} + {% for name in bot_names %} + {% if name.clone() == bot_name %} + <li><a href="/tmtu/{{ name }}" class="botname selected">{{ name }}</a></li> + {% else %} + <li><a href="/tmtu/{{ name }}" class="botname">{{ name }}</a></li> + {% endif %} + {% endfor %} + </ol> + </nav> + </td> + </tr> + {% match bot %} + {% when Some with (bot) %} + <tr> + <td colspan="2"> + <h2>Status</h2> + <div class="{{ bot.state|lower }}" style="padding: 5px;"> + {% match bot.currently_playing %} + {% when Some with (current) %} + <p>Currently playing: <a href="{{ current.webpage_url }}">{{ current.title }}</a></p> + <p><strong>{{ bot.position|fmt_duration }} / {{ current.duration|fmt_duration }}</strong> + {% match current.duration %} + {% when Some with (duration) %} + {% let position %} + {% match bot.position %} + {% when Some with (pos) %} + {% let position = pos.as_secs_f64() %} + {% when None %} + {% let position = 0.0 %} + {% endmatch %} + {% let progress = position / duration.as_secs_f64() %} + {% let percent = progress * 100.0 %} + <progress value="{{ percent }}" max="100" title="test"></progress></p> + {% when None %} + <progress value="0" max="100" title="test"></progress></p> + {% endmatch %} + {% when None %} + {% endmatch %} + </div> + </td> + </tr> + <tr> + <td> + <h2>Playlist</h2> + <table class="tracktable" cellspacing="0" cellpadding="0"> + <tr class="tableheader"> + <td class="stat">#</td> + <td>track</td> + <td>length</td> + <td>added by</td> + </tr> + {% for item in bot.playlist %} + <tr> + <td class="stat">{{ loop.index }}</td> + <td><a href="{{ item.webpage_url }}">{{ item.title }}</a></td> + <td> + {% let duration = item.duration %} + {{ duration|fmt_duration }} + </td> + <td>{{ item.added_by }}</td> + </tr> + {% endfor %} + </table> + </td> + </tr> + {% when None %} + {% endmatch %} + </table> + </body> +</html> |