cool dashboard changes with a rad sidebar

webapp/routes.py

@@ -85,24 +85,117 @@ async def dashboard():
         else:
             return False
 
+    # TODO: Make this shit cache or something in future before production
     oauth_token = session.get('oauth2_token')
     discord_session = oauth.make_session(token=oauth_token)
     guilds = discord_session.get(app.config["API_BASE_URL"] + '/users/@me/guilds').json()
     guilds = list(filter(filter_guilds, guilds))
     logged_in_user = discord_session.get(app.config["API_BASE_URL"] + '/users/@me').json()
 
+    # TODO: We could probably make the sidebar used for the dashboard render from cogs enabled and all that fancy dynamic jazz
     return await render_template(
-        "dashboard.html",
+        "dashboard/index.html",
         oauth_token=oauth_token,
         logged_in_user=logged_in_user,
         guilds=sorted(guilds, key=lambda k: k['name']),
         IMAGE_BASE_URL=app.config["IMAGE_BASE_URL"],
         invite_url=discord.utils.oauth_url(app.discord_client.user.id, permissions=discord.Permissions(1983245558),
-                                           redirect_uri=url_for("index", _external=True))
+                                           redirect_uri=url_for("index", _external=True)),
+        owner_id=app.config["INSTANCE_OWNER_ID"]
     )
 
 
-@app.route('/guilds/<guild_id>')
+@app.route('/dashboard/roles')
+@requires_login
+async def dashboard_selfassign():
+    roxbot_guilds = app.discord_client.guilds
+
+    def filter_guilds(guild):
+        g_ids = [str(x.id) for x in roxbot_guilds]
+        if guild.get('id', 0) in g_ids:
+            return True
+        else:
+            return False
+
+    oauth_token = session.get('oauth2_token')
+    discord_session = oauth.make_session(token=oauth_token)
+    guilds = discord_session.get(app.config["API_BASE_URL"] + '/users/@me/guilds').json()
+    guilds = list(filter(filter_guilds, guilds))
+    logged_in_user = discord_session.get(app.config["API_BASE_URL"] + '/users/@me').json()
+
+    return await render_template(
+        "dashboard/roles.html",
+        oauth_token=oauth_token,
+        logged_in_user=logged_in_user,
+        guilds=sorted(guilds, key=lambda k: k['name']),
+        IMAGE_BASE_URL=app.config["IMAGE_BASE_URL"],
+        invite_url=discord.utils.oauth_url(app.discord_client.user.id, permissions=discord.Permissions(1983245558),
+                                           redirect_uri=url_for("index", _external=True)),
+        owner_id=app.config["INSTANCE_OWNER_ID"]
+    )
+
+
+@app.route('/dashboard/guilds')
+@requires_login
+async def dashboard_guilds():
+    roxbot_guilds = app.discord_client.guilds
+
+    def filter_guilds(guild):
+        g_ids = [str(x.id) for x in roxbot_guilds]
+        if guild.get('id', 0) in g_ids:
+            return True
+        else:
+            return False
+
+    oauth_token = session.get('oauth2_token')
+    discord_session = oauth.make_session(token=oauth_token)
+    guilds = discord_session.get(app.config["API_BASE_URL"] + '/users/@me/guilds').json()
+    guilds = list(filter(filter_guilds, guilds))
+    logged_in_user = discord_session.get(app.config["API_BASE_URL"] + '/users/@me').json()
+
+    return await render_template(
+        "dashboard/guilds.html",
+        oauth_token=oauth_token,
+        logged_in_user=logged_in_user,
+        guilds=sorted(guilds, key=lambda k: k['name']),
+        IMAGE_BASE_URL=app.config["IMAGE_BASE_URL"],
+        invite_url=discord.utils.oauth_url(app.discord_client.user.id, permissions=discord.Permissions(1983245558),
+                                           redirect_uri=url_for("index", _external=True)),
+        owner_id=app.config["INSTANCE_OWNER_ID"]
+    )
+
+
+@app.route('/dashboard/instance')
+@requires_login
+async def dashboard_instance():
+    roxbot_guilds = app.discord_client.guilds
+
+    def filter_guilds(guild):
+        g_ids = [str(x.id) for x in roxbot_guilds]
+        if guild.get('id', 0) in g_ids:
+            return True
+        else:
+            return False
+
+    oauth_token = session.get('oauth2_token')
+    discord_session = oauth.make_session(token=oauth_token)
+    guilds = discord_session.get(app.config["API_BASE_URL"] + '/users/@me/guilds').json()
+    guilds = list(filter(filter_guilds, guilds))
+    logged_in_user = discord_session.get(app.config["API_BASE_URL"] + '/users/@me').json()
+
+    return await render_template(
+        "dashboard/instance.html",
+        oauth_token=oauth_token,
+        logged_in_user=logged_in_user,
+        guilds=sorted(guilds, key=lambda k: k['name']),
+        IMAGE_BASE_URL=app.config["IMAGE_BASE_URL"],
+        invite_url=discord.utils.oauth_url(app.discord_client.user.id, permissions=discord.Permissions(1983245558),
+                                           redirect_uri=url_for("index", _external=True)),
+        owner_id=app.config["INSTANCE_OWNER_ID"]
+    )
+
+
+@app.route('/dashboard/guilds/<guild_id>')
 @requires_login
 async def guild_page(guild_id):
     oauth_token = session.get('oauth2_token')

webapp/templates/base/nav.html

@@ -13,13 +13,13 @@
       </div>
       <div id="navbarBasicExample" class="navbar-menu">
         <div class="navbar-start">
-          <a class="navbar-item" href="{{ url_for('.about') }}">
+          <a class="navbar-item{% if request.path == url_for('.about') %} is-active{% endif %}" href="{{ url_for('.about') }}">
             About
           </a>
           <a class="navbar-item" href="{{ url_for('.docs') }}">
             Docs
           </a>
-          <a class="navbar-item" href="{{ url_for('.dashboard') }}">
+          <a class="navbar-item{% if url_for('.dashboard') in request.path %} is-active{% endif %}" href="{{ url_for('.dashboard') }}">
             Dashboard
           </a>
           </div>

webapp/templates/base/styles.html

@@ -7,7 +7,7 @@
   #nav-ava {
     height: 82px !important;
   }
-  .guild-card {
+  .guild-content {
     margin: auto;
   }
   .guild-icon {

webapp/templates/dashboard.html

@@ -1,57 +0,0 @@
-{% extends "base/base.html" %}
-
-{% block page_name %}Dashboard{% endblock page_name %}
-
-{% block content %}
-<main>
-  <section id="header" class="hero is-dark is-bold">
-    <div class="hero-body">
-      <div class="container">
-        <h1 class="title">
-          Dashboard
-        </h1>
-        <h2 class="subtitle">
-          Edit all of Roxbot's settings from here!
-        </h2>
-      </div>
-    </div>
-  </section>
-  <section id="instance" class="section"></section>
-  <section id="guilds" class="section">
-    <div class="container">
-      <h2 class="title">Guilds</h2>
-      <h3 class="subtitle">
-        Click on a guild to edit it's settings! Don't see the guild you want? <a href="{{ invite_url }}">Invite Roxbot!</a>
-      </h3>
-      <div class="columns is-desktop is-multiline">
-        {% for guild in guilds  %}
-          <div class="column is-one-quarter">
-            <a class="box guild-card" href="{{ url_for('guild_page', guild_id=guild['id']) }}">
-              <article class="media">
-                <figure class="media-left">
-                    {% if guild['icon'] != none %}
-                      {% if guild['icon'].startswith('a_') %}
-                        <img class="avatar guild-icon" src="{{ IMAGE_BASE_URL }}icons/{{ guild['id'] }}/{{ guild['icon'] }}.gif?size=64" alt="{{ guild['name'][0].upper() }}">
-                      {% else %}
-                        <img class="avatar guild-icon" src="{{ IMAGE_BASE_URL }}icons/{{ guild['id'] }}/{{ guild['icon'] }}.webp?size=64" alt="{{ guild['name'][0].upper() }}">
-                      {% endif %}
-                    {% else %}
-                      <div class="avatar guild-icon guild-icon-backup"></div>
-                    {% endif %}
-                </figure>
-                <div class="media-content guild-content">
-                  <div class="content">
-                    <p >{{ guild['name'] }}</p>
-                  </div>
-                </div>
-                <div class="media-right">
-                </div>
-              </article>
-            </a>
-          </div>
-        {% endfor %}
-      </div>
-    </div>
-  </section>
-</main>
-{% endblock content %}

webapp/templates/dashboard/base.html

@@ -0,0 +1,56 @@
+{% extends "base/base.html" %}
+
+{% block page_name %}Dashboard{% endblock page_name %}
+
+{% block content %}
+<main>
+  <section id="header" class="hero is-dark is-bold">
+    <div class="hero-body">
+      <div class="container">
+        <h1 class="title">
+          Dashboard
+        </h1>
+        <h2 class="subtitle">
+          Edit all of Roxbot's settings from here!
+        </h2>
+      </div>
+    </div>
+  </section>
+  <div class="container">
+    <div class="columns is-fullheight">
+      <div class="column is-2">
+        <aside class="menu column section">
+          <p class="menu-label">
+            General
+          </p>
+          <ul class="menu-list">
+            <li>
+                <a class="{% if request.path == url_for('dashboard') %}is-active{% endif %}" href="{{ url_for('dashboard') }}">Overview</a>
+            </li>
+            <li>
+                <a class="{% if request.path == url_for('dashboard_selfassign') %}is-active{% endif %}" href="{{ url_for('dashboard_selfassign') }}">Self Assign Roles</a>
+            </li>
+          </ul>
+          <p class="menu-label">
+            Settings
+          </p>
+          <ul class="menu-list">
+            {% if owner_id == logged_in_user.get('id') %}
+            <li>
+                <a class="{% if request.path == url_for('dashboard_instance') %}is-active{% endif %}" href="{{ url_for('dashboard_instance') }}">Instance</a>
+            </li>
+            {% endif %}
+            <li>
+                <a class="{% if request.path == url_for('dashboard_guilds') %}is-active{% endif %}" href="{{ url_for('dashboard_guilds') }}">Guilds</a>
+            </li>
+          </ul>
+        </aside>
+      </div>
+      <div class="column is-10">
+        {% block settings %}
+        {% endblock settings %}
+      </div>
+    </div>
+  </div>
+</main>
+{% endblock content %}

webapp/templates/dashboard/guilds.html

@@ -0,0 +1,37 @@
+{% extends "dashboard/base.html" %}
+
+{% block settings %}
+<section id="guilds" class="section">
+  <h2 class="title">Guilds</h2>
+  <h3 class="subtitle">
+    Click on a guild to edit it's settings! Don't see the guild you want? <a href="{{ invite_url }}">Invite Roxbot!</a>
+  </h3>
+  <div class="columns is-desktop is-multiline">
+    {% for guild in guilds  %}
+    <div class="column is-one-third">
+      <a class="box guild-card" href="{{ url_for('guild_page', guild_id=guild['id']) }}">
+        <article class="media">
+          <figure class="media-left">
+            {% if guild['icon'] != none %}
+              {% if guild['icon'].startswith('a_') %}
+                <img class="avatar guild-icon" src="{{ IMAGE_BASE_URL }}icons/{{ guild['id'] }}/{{ guild['icon'] }}.gif?size=64" alt="{{ guild['name'][0].upper() }}">
+              {% else %}
+                <img class="avatar guild-icon" src="{{ IMAGE_BASE_URL }}icons/{{ guild['id'] }}/{{ guild['icon'] }}.webp?size=64" alt="{{ guild['name'][0].upper() }}">
+              {% endif %}
+            {% else %}
+            <div class="avatar guild-icon guild-icon-backup"></div>
+            {% endif %}
+          </figure>
+          <div class="media-content guild-content">
+            <div class="content">
+              <p >{{ guild['name'] }}</p>
+            </div>
+          </div>
+          <div class="media-right"></div>
+        </article>
+      </a>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+{% endblock settings %}

webapp/templates/dashboard/index.html

@@ -0,0 +1,11 @@
+{% extends "dashboard/base.html" %}
+
+
+{% block settings %}
+<section id="instance" class="section">
+    <h2 class="title">Overview</h2>
+    <h3 class="subtitle">
+        View all of the dashboard or something
+    </h3>
+</section>
+{% endblock settings %}

webapp/templates/dashboard/instance.html

@@ -0,0 +1,11 @@
+{% extends "dashboard/base.html" %}
+
+
+{% block settings %}
+<section id="instance" class="section">
+    <h2 class="title">Instance</h2>
+    <h3 class="subtitle">
+        Edit this instance of Roxbot
+    </h3>
+</section>
+{% endblock settings %}

webapp/templates/dashboard/selfassign.html

@@ -0,0 +1,11 @@
+{% extends "dashboard/base.html" %}
+
+
+{% block settings %}
+<section id="instance" class="section">
+    <h2 class="title">Instance</h2>
+    <h3 class="subtitle">
+        Edit this instance of Roxbot
+    </h3>
+</section>
+{% endblock settings %}