Setup endpoint modal, allow direct links to modal

Add config
Add jquery and bootstrap for proper modal support
Remove Rainbow 6 as it's broken

build/webpack.dev.conf.js

@@ -30,6 +30,10 @@ module.exports = merge(baseWebpackConfig, {
       template: 'index.html',
       inject: true
     }),
-    new FriendlyErrorsPlugin()
+    new FriendlyErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      jQuery: 'jquery',
+      $: 'jquery',
+    })
   ]
 })

build/webpack.prod.conf.js

@@ -90,7 +90,11 @@ var webpackConfig = merge(baseWebpackConfig, {
         to: config.build.assetsSubDirectory,
         ignore: ['.*']
       }
-    ])
+    ]),
+    new webpack.ProvidePlugin({
+      jQuery: 'jquery',
+      $: 'jquery',
+    })
   ]
 })
 

package.json

@@ -11,6 +11,8 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "bootstrap": "^3.3.7",
+    "jquery": "^3.2.1",
     "js-yaml": "^3.8.4",
     "vue": "^2.3.3",
     "vue-resource": "^1.3.4",

src/components/Endpoint.vue

@@ -1,110 +1,10 @@
-<template>
-    <div class="panel panel-success" id="endpoint-template">
-        <div class="panel-heading">
-            <h3 class="panel-title" id="title">
-                <a href="#{{ route }}">{{ route }}</a>
-            </h3>
-        </div>
-        <div class="panel-body" id="main-body">
-            <p class="text-warning">Notes:</p>
-            <ul id="description" class="list-group text-primary"></ul>
-            <strong class="text-primary">Standard request:</strong>
-            <pre id="http"><strong class="text-primary"></strong> <code></code></pre>
-
-            <div id="bots">
-                <template v-if="bot-nightbot">
-                    <!-- Nightbot -->
-                    <strong class="text-primary"><a href="https://beta.nightbot.tv/">Nightbot</a> command:</strong>
-                    <pre><code>$(urlfetch {{ url }})</code></pre>
-                </template>
-
-                <template v-if="bot-ankhbot">
-                    <!-- Ankhbot -->
-                    <strong class="text-primary"><a href="http://marcinswierzowski.com/Gallery/Projects/AnkhBotR2/">Ankhbot</a> command:</strong>
-                    <pre><code>$readapi({{ url }})</code></pre>
-                </template>
-
-                <template v-if="bot-deepbot">
-                    <!-- Deepbot -->
-                    <strong class="text-primary"><a href="https://deepbot.deep.sg/">Deepbot</a> command:</strong>
-                    <pre><code>@customapi@[{{ url }}]</code></pre>
-                </template>
-
-                <template v-if="bot-phantombot">
-                    <!-- PhantomBot -->
-                    <strong class="text-primary"><a href="https://phantombot.tv/">PhantomBot</a> command:</strong>
-                    <pre><code>(customapi {{ url }})</code></pre>
-                </template>
-
-                <template v-if="bot-ohbot">
-                    <!-- Ohbot -->
-                    <strong class="text-primary"><a href="https://ohbot.3v.fi/">Ohbot</a> command:</strong>
-                    <pre><code>[customapi {{ url }}]</code></pre>
-                </template>
-            </div>
-
-            <div id="routes" v-if="parameters.length > 0">
-                <p class="text-warning">Route parameters:</p>
-
-                <table class="table table-bordered" id="route-body">
-                    <thead>
-                        <tr>
-                            <th>Parameter name:</th>
-                            <th>Description:</th>
-                            <th>Required:</th>
-                            <th>Type:</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="p in parameters">
-                            <th>{{ p.name }}</th>
-
-                            <td v-if="Array.isArray(p.description)">{{ p.description.join("<br>") }}</td>
-                            <td v-else>{{ p.description }}</td>
-
-                            <td><i class="fa fa-1x" v-bind:class="p.optional ? 'fa-times' : 'fa-check'"></i></td>
-                            <td><code>{{ p.type || 'string' }}</code></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <div id="qs" v-if="qs.length > 0">
-                <p class="text-warning">Query string parameters:</p>
-
-                <table class="table table-bordered table-striped table-hover" id="qs-body">
-                    <thead>
-                        <tr>
-                            <th>Parameter name:</th>
-                            <th>Description:</th>
-                            <th>Required:</th>
-                            <th>Type:</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="p in qs">
-                            <th>{{ p.name }}</th>
-
-                            <td v-if="Array.isArray(p.description)">{{ p.description.join("<br>") }}</td>
-                            <td v-else>{{ p.description }}</td>
-
-                            <td><i class="fa fa-1x" v-bind:class="p.required ? 'fa-check' : 'fa-times'"></i></td>
-                            <td><code>{{ p.type || 'string' }}</code></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</template>
+<template></template>
 
 <script>
     export default {
         name: 'Endpoint',
         data() {
-            return {
-
-            };
+            return {};
         },
     };
 </script>

src/components/EndpointList.vue

@@ -4,8 +4,121 @@
             {{ this.$route.name }}
         </h2>
 
+        <div class="modal fade" id="endpoint">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                        <h4><a v-bind:href="'?endpoint=' + route">{{ route }}</a></h4>
+                    </div>
+
+                    <div class="modal-body">
+                        <div class="panel-body" id="main-body">
+                            <template v-if="e.notes && e.notes.length > 0">
+                                <h4 class="text-muted">Notes:</h4>
+                                <ul class="list-group text-primary" v-for="note in e.notes">
+                                    <li class="list-group-item" v-html="note"></li>
+                                </ul>
+                            </template>
+
+                            <h4 class="text-muted">Standard request:</h4>
+                            <pre><strong class="text-primary">{{ e.method || 'GET' }}</strong> <code>{{ config.baseUrl + route }}</code></pre>
+
+                            <div id="bots">
+                                <template v-if="bots.nightbot">
+                                    <!-- Nightbot -->
+                                    <strong class="text-primary"><a href="https://beta.nightbot.tv/">Nightbot</a> command:</strong>
+                                    <pre><code>$(urlfetch {{ e.url }})</code></pre>
+                                </template>
+
+                                <template v-if="bots.ankhbot">
+                                    <!-- Ankhbot -->
+                                    <strong class="text-primary"><a href="http://marcinswierzowski.com/Gallery/Projects/AnkhBotR2/">Ankhbot</a> command:</strong>
+                                    <pre><code>$readapi({{ e.url }})</code></pre>
+                                </template>
+
+                                <template v-if="bots.deepbot">
+                                    <!-- Deepbot -->
+                                    <strong class="text-primary"><a href="https://deepbot.deep.sg/">Deepbot</a> command:</strong>
+                                    <pre><code>@customapi@[{{ e.url }}]</code></pre>
+                                </template>
+
+                                <template v-if="bots.phantombot">
+                                    <!-- PhantomBot -->
+                                    <strong class="text-primary"><a href="https://phantombot.tv/">PhantomBot</a> command:</strong>
+                                    <pre><code>(customapi {{ e.url }})</code></pre>
+                                </template>
+
+                                <template v-if="bots.ohbot">
+                                    <!-- Ohbot -->
+                                    <strong class="text-primary"><a href="https://ohbot.3v.fi/">Ohbot</a> command:</strong>
+                                    <pre><code>[customapi {{ e.url }}]</code></pre>
+                                </template>
+                            </div>
+
+                            <div id="routes" v-if="e.parameters && e.parameters.length > 0">
+                                <h4 class="text-muted">Route parameters:</h4>
+
+                                <table class="table table-bordered" id="route-body">
+                                    <thead>
+                                        <tr>
+                                            <th>Parameter name:</th>
+                                            <th>Description:</th>
+                                            <th>Required:</th>
+                                            <th>Type:</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="p in e.parameters">
+                                            <th>{{ p.name }}</th>
+
+                                            <td v-if="Array.isArray(p.description)" v-html="p.description.join('<br>')"></td>
+                                            <td v-else v-html="p.description"></td>
+
+                                            <td><i class="fa fa-1x" v-bind:class="p.optional ? 'fa-times' : 'fa-check'"></i></td>
+                                            <td><code>{{ p.type || 'string' }}</code></td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+
+                            <div id="qs" v-if="e.qs && e.qs.length > 0">
+                                <h4 class="text-muted">Query string parameters:</h4>
+
+                                <table class="table table-bordered table-striped table-hover" id="qs-body">
+                                    <thead>
+                                        <tr>
+                                            <th>Parameter name:</th>
+                                            <th>Description:</th>
+                                            <th>Required:</th>
+                                            <th>Type:</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="p in e.qs">
+                                            <th>{{ p.name }}</th>
+
+                                            <td v-if="Array.isArray(p.description)">{{ p.description.join("<br>") }}</td>
+                                            <td v-else v-html="p.description"></td>
+
+                                            <td><i class="fa fa-1x" v-bind:class="p.required ? 'fa-check' : 'fa-times'"></i></td>
+                                            <td><code>{{ p.type || 'string' }}</code></td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times fa-1x"></i> Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="list-group" v-if="endpoints.length > 0">
-            <a class="list-group-item" v-for="endpoint in endpoints">
+            <a class="list-group-item" v-for="endpoint in endpoints" v-on:click="openModal(endpoint.route)">
                 {{ basePath }}/{{ endpoint.route }}
             </a>
         </div>
@@ -14,18 +127,69 @@
 
 <script>
     import yaml from 'js-yaml';
+    import jQuery from 'jquery';
+    import 'bootstrap';
+    import config from '../config';
+
+    const $ = jQuery;
 
     export default {
         name: 'EndpointList',
         data() {
             return {
                 basePath: '',
+                bots: {
+                    ankhbot: false,
+                    deepbot: false,
+                    nightbot: false,
+                    ohbot: false,
+                    phantombot: false,
+                },
+                config,
+                // Endpoint data
+                e: {
+                    bots: true,
+                    method: 'GET',
+                    notes: [],
+                    parameters: [],
+                    qs: [],
+                    url: '',
+                },
                 endpoints: [],
+                route: this.$route.path,
             };
         },
 
+        methods: {
+            openModal(route) {
+                this.route = `${this.$route.path}/${route}`;
+
+                this.endpoints.forEach((end) => {
+                    if (route !== end.route) {
+                        return;
+                    }
+
+                    Object.keys(end).forEach((name) => {
+                        if (this.e[name] !== undefined) {
+                            this.e[name] = end[name];
+                        }
+                    });
+
+                    this.$router.push({
+                        query: {
+                            endpoint: route || '/',
+                        },
+                    });
+
+                    $('#endpoint').modal('toggle');
+                });
+            },
+        },
+
         mounted() {
             const path = this.$route.path.replace('/', '');
+            const endpoint = this.$route.query.endpoint || '';
+
             this.$http.get(`/static/yaml/endpoints/${path}.yaml`).then((response) => {
                 const { body } = response;
                 const data = yaml.load(body);
@@ -35,6 +199,25 @@
 
                 this.basePath = basePath;
                 this.endpoints = endpoints;
+
+                endpoints.forEach((end) => {
+                    const route = decodeURIComponent(endpoint);
+                    if (route === '') {
+                        return;
+                    }
+
+                    if (end.route === '' && route !== '/' && end.route !== route) {
+                        return;
+                    }
+
+                    this.openModal(end.route);
+                });
+            });
+
+            $('#endpoint').on('hidden.bs.modal', () => {
+                this.$router.push({
+                    query: {},
+                });
             });
         },
     };

src/components/Home.vue

@@ -144,11 +144,13 @@
 </template>
 
 <script>
+    import config from '../config';
+
     export default {
         data() {
             return {
                 baseEndpoints: [],
-                baseUrl: 'https://decapi.me',
+                baseUrl: config.baseUrl,
             };
         },
 

src/config.js

@@ -0,0 +1,3 @@
+export default {
+    baseUrl: 'https://decapi.me',
+};

static/yaml/base/base_endpoints.yaml

@@ -16,9 +16,6 @@
   icon: "calculator"
 - name: misc
   title: "Miscellaneous"
-- name: r6
-  title: "Rainbow 6"
-  icon: "gamepad"
 - name: random
   title: "Random"
   icon: "random"

static/yaml/endpoints/twitch.yaml

@@ -156,7 +156,7 @@ endpoints:
       notes:
         - 'Generates a "multi stream" URL based on the channel names passed to it.'
         - 'While the <code>streams</code> <strong>query</strong> parameter is optional, you have to specify the streams as <strong>either</strong> a <strong>route</strong> parameter or as the <code>streams</code> <strong>query</strong> parameter.'
-    - route: "random_sub"
+    - route: "random_sub/:channel"
       qs:
         - name: "token"
           required: true
@@ -208,7 +208,7 @@ endpoints:
           description: 'The team identifier.'
       qs:
         - name: "sort"
-          description: 'If this is specified, it will sort the members of the team alphabetically. &mdash; Recommended for a consistent list between requests.'
+          description: 'If this is specified, it will sort the members of the team alphabetically.<br><strong>Recommended for a consistent list between requests.</strong>'
         - name: "text"
           description: 'If this is specified, the list will be returned in plaintext compared to a JSON array.'
         - name: "implode"