diff options
Diffstat (limited to 'web_server')
| -rw-r--r-- | web_server/static/fonts/.gitkeep | 0 | ||||
| -rw-r--r-- | web_server/static/style.css | 63 | ||||
| -rw-r--r-- | web_server/templates/base.htm | 15 | ||||
| -rw-r--r-- | web_server/templates/docs/api.htm | 126 | ||||
| -rw-r--r-- | web_server/templates/index.htm | 36 | ||||
| -rw-r--r-- | web_server/templates/song.htm | 7 | ||||
| -rw-r--r-- | web_server/templates/tmtu/index.htm | 145 |
7 files changed, 392 insertions, 0 deletions
diff --git a/web_server/static/fonts/.gitkeep b/web_server/static/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/web_server/static/fonts/.gitkeep diff --git a/web_server/static/style.css b/web_server/static/style.css new file mode 100644 index 0000000..09a985c --- /dev/null +++ b/web_server/static/style.css @@ -0,0 +1,63 @@ +@font-face { + font-family: 'roboto-regular'; + src: url('fonts/Roboto-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'roboto-light'; + src: url('fonts/Roboto-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'roboto-bold'; + src: url('fonts/Roboto-Bold.ttf') format('truetype'); +} + +body { + background-color: #151515; +} + +main { + margin: auto; + max-width: 800px; + padding: 1em; + background-color: #202020; + color: #eee; + font-family: 'roboto-regular', Arial; +} + +nav > a { + font-size: 1.4rem; +} + +a, a:visited { + color: #eee; +} + +a:hover { + color: #ccc; +} + +pre { + font-size: 0.9rem; + font-family: monospace; + background-color: #151515; + overflow: auto; + padding: 1em; +} + +.code-background { + background-color: #151515; +} + +.code-normal { + color: #c0c5ce; +} + +.code-string { + color:#a3be8c; +} + +.code-number { + color: #d08770; +} diff --git a/web_server/templates/base.htm b/web_server/templates/base.htm new file mode 100644 index 0000000..b8b2f49 --- /dev/null +++ b/web_server/templates/base.htm @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <link href="/static/style.css" rel="stylesheet"> + <title>{% block title %}{{ title }} - PokeBot{% endblock %}</title> + </head> + <body> + <main> + {% block content %}{% endblock %} + </main> + </body> +</html> diff --git a/web_server/templates/docs/api.htm b/web_server/templates/docs/api.htm new file mode 100644 index 0000000..a973272 --- /dev/null +++ b/web_server/templates/docs/api.htm @@ -0,0 +1,126 @@ +{% extends "base.htm" %} + +{% block title %}API Documentation{% endblock %} + +{% block content %} +<h1>API Documentation</h1> +<nav> + <a href="/">Bots</a> + <a href="/docs/api">API</a> +</nav> + +<h2>Bot list</h2> +<p>Show a list of all bots.</p> + +<p><b>URL</b>: <span class="code-background">/api/bots</span></p> +<p><b>Method</b>: <span class="code-background">GET</span></p> +<p><b>Auth required</b>: <span class="code-background">NO</span></p> + +<h3>Success Response</h3> + +<p><b>Code</b>: <span class="code-background">200 OK</span></p> + +<h3>Content example</h3> + +<!-- Generated with syntect and adjusted --> +<pre> +<span class="code-normal">[ +</span><span class="code-normal"> { +</span><span class="code-normal"> "</span><span class="code-string">name</span><span class="code-normal">": "</span><span class="code-string">MusicBot</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">state</span><span class="code-normal">": "</span><span class="code-string">Playing</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">volume</span><span class="code-normal">": </span><span class="code-number">0.5</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">position</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">secs</span><span class="code-normal">": </span><span class="code-number">10</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">nanos</span><span class="code-normal">": </span><span class="code-number">63573687 +</span><span class="code-normal"> }, +</span><span class="code-normal"> "</span><span class="code-string">currently_playing</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">url</span><span class="code-normal">": "</span><span class="code-string"><temp_url></span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">webpage_url</span><span class="code-normal">": "</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">title</span><span class="code-normal">": "</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">thumbnail</span><span class="code-normal">": "</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">duration</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">secs</span><span class="code-normal">": </span><span class="code-number">212</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">nanos</span><span class="code-normal">": </span><span class="code-number">0 +</span><span class="code-normal"> } +</span><span class="code-normal"> }, +</span><span class="code-normal"> "</span><span class="code-string">playlist</span><span class="code-normal">": [ +</span><span class="code-normal"> { +</span><span class="code-normal"> "</span><span class="code-string">url</span><span class="code-normal">": "</span><span class="code-string"><temp_url></span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">webpage_url</span><span class="code-normal">": "</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">title</span><span class="code-normal">": "</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">thumbnail</span><span class="code-normal">": "</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">duration</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">secs</span><span class="code-normal">": </span><span class="code-number">212</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">nanos</span><span class="code-normal">": </span><span class="code-number">0 +</span><span class="code-normal"> } +</span><span class="code-normal"> } +</span><span class="code-normal"> ] +</span><span class="code-normal"> } +</span><span class="code-normal">] +</span></pre> + + +<h2>Show Bot</h2> +<p>Show a specific bot.</p> + +<p><b>URL</b>: <span class="code-background">/api/bots/:botname</span></p> +<p><b>Method</b>: <span class="code-background">GET</span></p> +<p><b>Auth required</b>: <span class="code-background">NO</span></p> + +<h3>Success Response</h3> +<p><b>Code</b>: <span class="code-background">200 OK</span></p> + +<h3>Content example</h3> + +<!-- Generated with syntect and adjusted --> +<pre> +<span class="code-normal">{ +</span><span class="code-normal"> "</span><span class="code-string">name</span><span class="code-normal">": "</span><span class="code-string">MusicBot</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">state</span><span class="code-normal">": "</span><span class="code-string">Playing</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">volume</span><span class="code-normal">": </span><span class="code-number">0.5</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">position</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">secs</span><span class="code-normal">": </span><span class="code-number">142</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">nanos</span><span class="code-normal">": </span><span class="code-number">690911766 +</span><span class="code-normal"> }, +</span><span class="code-normal"> "</span><span class="code-string">currently_playing</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">url</span><span class="code-normal">": "</span><span class="code-string"><temp_url></span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">webpage_url</span><span class="code-normal">": "</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">title</span><span class="code-normal">": "</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">thumbnail</span><span class="code-normal">": "</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">duration</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">secs</span><span class="code-normal">": </span><span class="code-number">212</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">nanos</span><span class="code-normal">": </span><span class="code-number">0 +</span><span class="code-normal"> } +</span><span class="code-normal"> }, +</span><span class="code-normal"> "</span><span class="code-string">playlist</span><span class="code-normal">": [ +</span><span class="code-normal"> { +</span><span class="code-normal"> "</span><span class="code-string">url</span><span class="code-normal">": "</span><span class="code-string"><temp_url></span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">webpage_url</span><span class="code-normal">": "</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">title</span><span class="code-normal">": "</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">thumbnail</span><span class="code-normal">": "</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">duration</span><span class="code-normal">": { +</span><span class="code-normal"> "</span><span class="code-string">secs</span><span class="code-normal">": </span><span class="code-number">212</span><span class="code-normal">, +</span><span class="code-normal"> "</span><span class="code-string">nanos</span><span class="code-normal">": </span><span class="code-number">0 +</span><span class="code-normal"> } +</span><span class="code-normal"> } +</span><span class="code-normal"> ] +</span><span class="code-normal">} +</span></pre> + +<h3>Error Response</h3> + +<p><b>Condition</b>: If ':botname' is not connected to TeamSpeak.</p> + +<p><b>Code</b>: <span class="code-background">404 NOT FOUND</span></p> + +<b>Content</b>: + +<!-- Generated with syntect and adjusted --> +<pre> +<span class="code-normal">{ +</span><span class="code-normal"> "</span><span class="code-string">error</span><span class="code-normal">": "</span><span class="code-string">Not Found</span><span class="code-normal">", +</span><span class="code-normal"> "</span><span class="code-string">description</span><span class="code-normal">": "</span><span class="code-string">The requested resource was not found</span><span class="code-normal">" +</span><span class="code-normal">} +</span></pre> + +{% endblock %} diff --git a/web_server/templates/index.htm b/web_server/templates/index.htm new file mode 100644 index 0000000..eed31f3 --- /dev/null +++ b/web_server/templates/index.htm @@ -0,0 +1,36 @@ +{% extends "base.htm" %} + +{% block title %}Overview{% endblock %} + +{% 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> +<nav> + <a href="/">Bots</a> + <a href="/docs/api">API</a> +</nav> + +<ul> + {% for bot in bots %} + <h2>{{ bot.name }}</h1> + <div>State: {{ bot.state }}</div> + <div>Volume: {{ bot.volume * 100.0 }}%</div> + {% match bot.currently_playing %} + {% when Some with (current) %} + <span>Currently playing:</span> + {% let item = current %} + {% include "song.htm" %} + {% when None %} + {% endmatch %} + + {% for item in bot.playlist %} + <li> + {% include "song.htm" %} + </li> + {% endfor %} + {% endfor %} +</ul> +{% endblock %} diff --git a/web_server/templates/song.htm b/web_server/templates/song.htm new file mode 100644 index 0000000..072567a --- /dev/null +++ b/web_server/templates/song.htm @@ -0,0 +1,7 @@ +<a href="{{ item.webpage_url }}">{{ item.title }}</a> +<span>({{ item.duration|fmt_duration }})</span> +{% match item.thumbnail %} + {% when Some with (thumbnail) %} + <img src="{{ thumbnail }}" height="128"> + {% when None %} +{% endmatch %} diff --git a/web_server/templates/tmtu/index.htm b/web_server/templates/tmtu/index.htm new file mode 100644 index 0000000..785e653 --- /dev/null +++ b/web_server/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="/bot/{{ name }}" class="botname selected">{{ name }}</a></li> + {% else %} + <li><a href="/bot/{{ 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> |