Added bootstrap 4 to Web ui, along w/ basic template/asset structure

3 years ago · fae5802abc
3 changed files with 68 additions and 3 deletions
--- a/cogs/web/assets/style.css
+++ b/cogs/web/assets/style.css
--- a/cogs/web/templates/index.html
+++ b/cogs/web/templates/index.html
@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Rooster Web UI</title>
+    <link rel="stylesheet" href="/assets/style.css">
+</head>
+<body>
+
+<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
+    <h5 class="my-0 mr-md-auto font-weight-normal">Rooster Web UI</h5>
+</div>
+
+<div class="container">
+    <p>Rooster is currently in <span class="badge">{{ guilds|length }}</span> guilds and is serving
+        <span class="badge">{{ users|length }}</span> users.</p>
+
+    <table class="table table-bordered table-striped">
+        <thead>
+        <tr>
+            <th scope="col">Id</th>
+            <th scope="col">Name</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for user in users %}
+        <tr>
+            <td>{{ user.id }}</td>
+            <td>{{ user.name }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+
+    <table class="table table-bordered table-striped">
+        <thead>
+        <tr>
+            <th scope="col">Id</th>
+            <th scope="col">Name</th>
+            <th scope="col">Members</th>
+            <th scope="col">Channels</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for guild in guilds %}
+        <tr>
+            <td>{{ guild.id }}</td>
+            <td>{{ guild.name }}</td>
+            <td>{{ guild.members|length }}</td>
+            <td>{{ guild.channels|length }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+</div>
+</body>
+</html>
--- a/cogs/webserver.py
+++ b/cogs/webserver.py
@ -1,10 +1,10 @@
 import logging
 import config
 from discord.ext import commands, tasks
-from quart import Quart
+from quart import Quart, render_template

 log = logging.getLogger(__name__)
-app = Quart(__name__)
+app = Quart(__name__, static_url_path='/assets/', static_folder='web/assets', template_folder='web/templates')


 class Webserver(commands.Cog):
@ -14,7 +14,7 @@ class Webserver(commands.Cog):

        @app.route('/')
        async def welcome():
-            return f'Rooster is currently in {len(self.bot.guilds)} servers, serving {len(self.bot.users)} users!'
+            return await render_template('index.html', guilds=self.bot.guilds, users=self.bot.users)

        @app.route('/send-message/<channel_id>')
        async def test_message(channel_id):