Add column for permissions

Author: dmptrluke

cloudbot/web/main.py

@@ -64,9 +64,11 @@ def get(self):
                 doc = "Command has no documentation.".format(command)
 
             if plugin.permissions:
-                doc += " (Permission required: {})\n\n".format(", ".join(plugin.permissions))
+                perm = ", ".join(plugin.permissions)
+            else:
+                perm = None
 
-            commands.append((cmd, doc))
+            commands.append((cmd, doc, perm))
 
         args = {
             'bot_name': wi.config.get('bot_name', 'CloudBot'),

cloudbot/web/templates/commands.html

@@ -5,23 +5,32 @@
     <div class="row">
         <div class="col-lg-12">
             <div class="page-header">
-                <h2 id="container">Commands</h2>
+                <h2 id="container">Command List</h2>
             </div>
-            <!--<p class="lead">How to use {{ bot_name }} commands.</p>-->
-            <table class="table table-striped sortable">
+            <p class="lead">{{ bot_name }} has a large selection of commands that can do all kinds of useful tasks.
+                Below is an automatically-generated list of every command the bot currently knows.</p>
+            <table class="table table-striped sortable" id="commands">
                 <thead>
                 <tr>
-                    <th class='az' data-defaultsign="nospan" data-defaultsort="asc"><i class="fa fa-map-marker fa-fw"></i>Command</th>
+                    <th class='az' data-defaultsign="nospan" data-defaultsort="asc">Command</th>
                     <th data-defaultsort='disabled'>Description</th>
+                    <th><i class ="glyphicon glyphicon-lock"></i></th>
                 </tr>
                 </thead>
-                {% for cmd, doc in commands %}
+                {% for cmd, doc, perm in commands %}
                     <tr>
                         <td>{{ cmd | e }}</td>
                         <td>{{ doc | e }}</td>
+                        {% if perm %}
+                            <td data-value="{{ perm|truncate(6, True, '') }}">
+                                <i class ="glyphicon glyphicon-lock" data-toggle="tooltip" data-placement="left" title="{{ perm }}"></i>
+                            </td>
+                        {% else %}
+                            <td data-value="zzzz"></td>
+                        {%  endif %}
                     </tr>
                 {% endfor %}
             </table>
         </div>
     </div>
-{% endblock %}
+{% endblock %}

cloudbot/web/templates/layout.html

@@ -42,7 +42,7 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand" href="#">{{ bot_name }}</a>
+            <a class="navbar-brand" data-toggle="tooltip" data-placement="bottom" title="Return to top" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">{{ bot_name }}</a>
         </div>
         <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
@@ -55,7 +55,7 @@
                 <li>
                     <a href="#" data-toggle="modal" data-target="#about-dialog">About</a>
                 </li>
-             </ul>
+            </ul>
         </div>
         <!--/.nav-collapse -->
     </div>
@@ -66,28 +66,35 @@
 </div>
 
 <div class="modal fade" id="about-dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h4 class="modal-title">About Me</h4>
-      </div>
-      <div class="modal-body">
-        <p><strong>{{ bot_name }}</strong> is running version <strong>{{ bot_version }}</strong> of CloudBot.
-        </p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h4 class="modal-title">About Me</h4>
+            </div>
+            <div class="modal-body">
+                <p><strong>{{ bot_name }}</strong> is running version <strong>{{ bot_version }}</strong> of CloudBot.
+                </p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
     </div>
-  </div>
 </div>
 
 <!-- javascript -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-<script src="/s/js/bootstrap.min.js"></script>
-<script src="/s/js/moment.min.js"></script>
-<script src="/s/js/bootstrap-sortable.js"></script>
+{% block scripts %}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script src="/s/js/bootstrap.min.js"></script>
+    <script src="/s/js/moment.min.js"></script>
+    <script src="/s/js/bootstrap-sortable.js"></script>
+    <script>
+        $(function () {
+            $('[data-toggle="tooltip"]').tooltip()
+        })
+    </script>
+{% endblock %}
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="/s/js/ie10-viewport-bug-workaround.js"></script>
 </body>