More docs work - Page for Document types and done LocateUser

dashboard/package.json

@@ -17,6 +17,7 @@
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
+    "buefy": "^0.7.10",
     "bulma": "^0.7.5",
     "bulmaswatch": "^0.7.2",
     "js-cookie": "^2.2.0",

dashboard/src/components/docs/Layout.vue

@@ -29,8 +29,14 @@
               <li><router-link to="/docs/permissions">Permissions</router-link></li>
             </ul>
 
+            <p class="menu-label">Descriptions</p>
+            <ul class="menu-list">
+              <li><router-link to="/docs/descriptions/argument-types">Argument Types</router-link></li>
+            </ul>
+
             <p class="menu-label">Plugins</p>
             <ul class="menu-list">
+              <li><router-link to="/docs/plugins/locate-user">Locate user</router-link></li>
               <li><router-link to="/docs/plugins/mod-actions">Mod actions</router-link></li>
             </ul>
           </aside>

dashboard/src/components/docs/descriptions/ArgumentTypes.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h1>Argument Types</h1>
+This page details the different argument types available for commands.
+    <h2 id="delay">Delay</h2>A delay is used to specify an amount of time. It uses simple letters to specify time durations:
+    <br />
+    <br />Example:
+    <code>2d15h27m3s</code> Would be 2 days, 15 hours, 27 minutes and 3 seconds.
+    <br />
+    <br />It is important to note that spaces are not supported!
+    <br />
+    <br />
+    <b-collapse :open="false" class="card">
+      <div slot="trigger" slot-scope="props" class="card-header" role="button">
+        <p class="card-header-title">Additional Information</p>
+        <a class="card-header-icon">
+          <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
+        </a>
+      </div>
+      <div class="card-content">
+        <div class="content">
+          Durations:
+          <ul>
+            <li>
+              <code>d</code> Day
+            </li>
+            <li>
+              <code>h</code> Hour
+            </li>
+            <li>
+              <code>m</code> Minute
+            </li>
+            <li>
+              <code>s</code> Seconds
+            </li>
+          </ul>
+        </div>
+      </div>
+    </b-collapse>
+    <h2 id="string">String</h2>
+
+    <h2 id="user">User</h2>
+  </div>
+</template>
+
+<script>
+import CodeBlock from "../CodeBlock";
+
+export default {
+  components: { CodeBlock },
+};
+</script>

dashboard/src/components/docs/descriptions/Layout.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

dashboard/src/components/docs/plugins/LocateUser.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <h1>Locate user</h1>
+    <p>
+      Name in config: <code>locate_user</code>
+    </p>
+
+    <h2>Description</h2>
+    <p>
+      This plugin allows users with access to the commands the following:
+      <ul>
+          <li>Instantly receive an invite to the voice channel of a user</li>
+          <li>Be notified as soon as a user switches or joins a voice channel</li>
+      </ul>
+    </p>
+
+    <h2>Default configuration</h2>
+    <CodeBlock lang="yaml" trim="4">
+      config:
+        can_where: false
+        can_alert: false
+      overrides:
+        - level: ">=50"
+          config:
+            can_where: true
+            can_alert: true
+    </CodeBlock>
+
+    <h2>Commands</h2>
+    <h3>!where</h3>
+    <p>
+      Permission: <code>can_where</code><br>
+      Arguments: 
+      <ul>
+          <li><code>&lt;User&gt;</code> The user we want to find</li>
+      </ul>
+
+      Sends an instant invite to the voice channel the user from the <code>&lt;User&gt;</code> argument is in.
+    </p>
+    <h3>!vcalert</h3>
+    <p>
+      Permission: <code>can_alert</code><br>
+
+      Basic usage: <code>!vcalert 108552944961454080</code><br>
+
+      
+      Shortcut: <code>!vca</code><br><br>
+
+      Sends an instant invite along with a specified reminder once the user switches or joins a voice channel.<br><br>
+
+      <b-collapse :open="false" class="card">
+            <div
+                slot="trigger" 
+                slot-scope="props"
+                class="card-header"
+                role="button">
+                <p class="card-header-title">
+                    Additional Information
+                </p>
+                <a class="card-header-icon">
+                    <b-icon
+                        :icon="props.open ? 'menu-down' : 'menu-up'">
+                    </b-icon>
+                </a>
+            </div>
+            <div class="card-content">
+                <div class="content">
+                  
+                  Signatures:
+                    <ul>
+                     <li><code>!vcalert &lt;user&gt;</code></li>
+                     <li><code>!vcalert &lt;user&gt; [delay] [reminderString]</code></li>
+                    </ul>
+
+                  Arguments:
+                    <ul>
+                     <li><code>&lt;user&gt;</code> The user we want to find</li>
+                     <li><code>[delay]</code> How long the alert should be active, following the default <router-link to="/docs/descriptions/argument-types#Delay">Delay format</router-link>. Default: <code>10 minutes</code></li>
+                     <li><code>[reminderString]</code> Any text we want to receive once the alert triggers. Default: <code>None</code></li>
+                    </ul>
+                </div>
+            </div>
+        </b-collapse>
+
+    </p>
+  </div>
+</template>
+
+<script>
+  import CodeBlock from "../CodeBlock";
+
+  export default {
+    components: { CodeBlock },
+  };
+</script>

dashboard/src/main.ts

@@ -1,6 +1,8 @@
 import "./style/base.scss";
+import "buefy/dist/buefy.css";
 
 import Vue from "vue";
+import Buefy from "buefy";
 import { RootStore } from "./store";
 import { router } from "./routes";
 
@@ -19,6 +21,7 @@ Vue.mixin({
 
 import App from "./components/App.vue";
 
+Vue.use(Buefy);
 const app = new Vue({
   router,
   store: RootStore,

dashboard/src/routes.ts

@@ -35,6 +35,16 @@ export const router = new VueRouter({
           path: "plugin-configuration",
           component: () => import("./components/docs/PluginConfiguration.vue"),
         },
+        {
+          path: "descriptions",
+          component: () => import("./components/docs/descriptions/Layout.vue"),
+          children: [
+            {
+              path: "argument-types",
+              component: () => import("./components/docs/descriptions/ArgumentTypes.vue"),
+            },
+          ],
+        },
         {
           path: "plugins",
           component: () => import("./components/docs/plugins/Layout.vue"),
@@ -43,6 +53,10 @@ export const router = new VueRouter({
               path: "mod-actions",
               component: () => import("./components/docs/plugins/ModActions.vue"),
             },
+            {
+              path: "locate-user",
+              component: () => import("./components/docs/plugins/LocateUser.vue"),
+            },
           ],
         },
       ],
@@ -65,4 +79,12 @@ export const router = new VueRouter({
       ],
     },
   ],
+
+  scrollBehavior: function(to) {
+    if (to.hash) {
+      return {
+        selector: to.hash,
+      };
+    }
+  },
 });

dashboard/src/style/base.scss

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap');
+@import url('https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css');
 @import "~bulma/sass/base/minireset";
 
 body {