Merge pull request #80 from emxsys/settings

Added Settings page to display the current configuration and the config file
emxsys · Aug 20, 2020 · 9fc76e1 · 9fc76e1
2 parents 84fcf11 + 5902af5
commit 9fc76e1
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 12 deletions.
diff --git a/requirements.txt b/requirements.txt
@@ -13,6 +13,7 @@ Jinja2==2.11.2
 lxml==4.5.2
 MarkupSafe==1.1.1
 pigpio==1.46
+pygments
 pyserial==3.4
 pytest=6.0.1
 PyYAML==5.3.1

diff --git a/src/callattendant.py b/src/callattendant.py
@@ -282,6 +282,7 @@ def make_config(filename=None):
     # Load the config file, which may overwrite defaults
     if filename is not None:
         cfg.from_pyfile(filename)
+        cfg["CONFIG_FILE"] = filename
     # Always print the configuration
     print_config(cfg)
 

diff --git a/src/userinterface/static/css/pygments.css b/src/userinterface/static/css/pygments.css
@@ -0,0 +1,68 @@
+.hll { background-color: #ffffcc }
+.c { color: #408080; font-style: italic } /* Comment */
+.err { border: 1px solid #FF0000 } /* Error */
+.k { color: #008000; font-weight: bold } /* Keyword */
+.o { color: #666666 } /* Operator */
+.ch { color: #408080; font-style: italic } /* Comment.Hashbang */
+.cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.cp { color: #BC7A00 } /* Comment.Preproc */
+.cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
+.c1 { color: #408080; font-style: italic } /* Comment.Single */
+.cs { color: #408080; font-style: italic } /* Comment.Special */
+.gd { color: #A00000 } /* Generic.Deleted */
+.ge { font-style: italic } /* Generic.Emph */
+.gr { color: #FF0000 } /* Generic.Error */
+.gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.gi { color: #00A000 } /* Generic.Inserted */
+.go { color: #888888 } /* Generic.Output */
+.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.gt { color: #0044DD } /* Generic.Traceback */
+.kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.kp { color: #008000 } /* Keyword.Pseudo */
+.kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.kt { color: #B00040 } /* Keyword.Type */
+.m { color: #666666 } /* Literal.Number */
+.s { color: #BA2121 } /* Literal.String */
+.na { color: #7D9029 } /* Name.Attribute */
+.nb { color: #008000 } /* Name.Builtin */
+.nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.no { color: #880000 } /* Name.Constant */
+.nd { color: #AA22FF } /* Name.Decorator */
+.ni { color: #999999; font-weight: bold } /* Name.Entity */
+.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.nf { color: #0000FF } /* Name.Function */
+.nl { color: #A0A000 } /* Name.Label */
+.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.nt { color: #008000; font-weight: bold } /* Name.Tag */
+.nv { color: #19177C } /* Name.Variable */
+.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mb { color: #666666 } /* Literal.Number.Bin */
+.mf { color: #666666 } /* Literal.Number.Float */
+.mh { color: #666666 } /* Literal.Number.Hex */
+.mi { color: #666666 } /* Literal.Number.Integer */
+.mo { color: #666666 } /* Literal.Number.Oct */
+.sa { color: #BA2121 } /* Literal.String.Affix */
+.sb { color: #BA2121 } /* Literal.String.Backtick */
+.sc { color: #BA2121 } /* Literal.String.Char */
+.dl { color: #BA2121 } /* Literal.String.Delimiter */
+.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.s2 { color: #BA2121 } /* Literal.String.Double */
+.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.sh { color: #BA2121 } /* Literal.String.Heredoc */
+.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.sx { color: #008000 } /* Literal.String.Other */
+.sr { color: #BB6688 } /* Literal.String.Regex */
+.s1 { color: #BA2121 } /* Literal.String.Single */
+.ss { color: #19177C } /* Literal.String.Symbol */
+.bp { color: #008000 } /* Name.Builtin.Pseudo */
+.fm { color: #0000FF } /* Name.Function.Magic */
+.vc { color: #19177C } /* Name.Variable.Class */
+.vg { color: #19177C } /* Name.Variable.Global */
+.vi { color: #19177C } /* Name.Variable.Instance */
+.vm { color: #19177C } /* Name.Variable.Magic */
+.il { color: #666666 } /* Literal.Number.Integer.Long */
diff --git a/src/userinterface/static/gear.svg b/src/userinterface/static/gear.svg
diff --git a/src/userinterface/static/question-circle.svg b/src/userinterface/static/question-circle.svg
diff --git a/src/userinterface/templates/base.html b/src/userinterface/templates/base.html
@@ -10,6 +10,8 @@
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <link rel="stylesheet" href="{{ url_for('static',filename='css/custom.css') }}">
+  {% block stylesheet %}
+  {% endblock %}
 </head>
 <body>
   <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
@@ -28,11 +30,6 @@
 
       <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav bd-navbar mr-auto">
-<!--
-          <li class="nav-item" id="dashboard">
-            <a class="nav-link" href="/">Dashboard</a>
-          </li>
--->
           <li class="nav-item" id="calls">
             <a class="nav-link" href="/calls">Calls</a>
           </li>
@@ -47,11 +44,7 @@
           </li>
         </ul>
 
-        <ul class="navbar-nav mr-2">
-          <li class="nav-item" id="help">
-            <a class="nav-link" href="https://github.com/emxsys/callattendant/wiki/User-Guide" target="_blank">Help</a>
-          </li>
-        </ul>
+
         <form class="form-inline my-2 my-lg-0" action="/calls" method="get">
           <input class="form-control mr-sm-2" type="search" name="search" id="input-search" placeholder="Phone number" aria-label="Search">
           <div class="btn-group">
@@ -66,6 +59,29 @@
             </div>
           </div>
         </form>
+        <ul class="navbar-nav mr-2">
+          <li class="nav-item" id="settings">
+            <a class="nav-link" href="/settings">
+              <span>
+                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
+                  <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
+                </svg>
+              </span>
+            </a>
+          </li>
+         <li class="nav-item" id="help">
+            <a class="nav-link" href="https://github.com/emxsys/callattendant/wiki/User-Guide" target="_blank">
+              <span>
+                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                  <path d="M5.25 6.033h1.32c0-.781.458-1.384 1.36-1.384.685 0 1.313.343 1.313 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.007.463h1.307v-.355c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.326 0-2.786.647-2.754 2.533zm1.562 5.516c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+                </svg>
+              </span>
+            </a>
+          </li>
+
+        </ul>
       </div>
     </div>
   </nav>

diff --git a/src/userinterface/templates/settings.html b/src/userinterface/templates/settings.html
@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block title %}Settings{% endblock %}
+
+{% block stylesheet %}
+<link rel="stylesheet" href="{{ url_for('static',filename='css/pygments.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="container">
+  <h2>Settings <img src="../static/gear.svg" alt="" width="32" height="32"></h2>
+
+  <h5>Current Configuration</h5>
+  {{ curr_settings|safe }}
+
+  <h5>Config File: {{ config_file }}</h5>
+  {{ file_settings|safe }}
+
+</div>
+{% endblock %}
+
diff --git a/src/userinterface/webapp.py b/src/userinterface/webapp.py
@@ -37,13 +37,16 @@
 import string
 import _thread
 from datetime import datetime, timedelta
-from pprint import pprint
+from pprint import pprint, pformat
 from glob import glob
 
+import sqlite3
 from flask import Flask, request, g, current_app, render_template, redirect, \
     jsonify, url_for, flash
 from flask_paginate import Pagination, get_page_args
-import sqlite3
+from pygments import highlight
+from pygments.lexers import PythonLexer
+from pygments.formatters import HtmlFormatter
 
 from screening.query_db import query_db
 from screening.blacklist import Blacklist
@@ -831,6 +834,40 @@ def messages_played():
     return jsonify(success=success, msg_no=msg_no, unplayed_count=unplayed_count)
 
 
+@app.route('/settings', methods=['GET'])
+def settings():
+    """
+    Display the current settings.
+
+    CSS: pygmentize -S colorful -f html > pygments.css
+    """
+    # Get the application-wide config object
+    config = current_app.config.get("APPLICATION_CONFIG")
+
+    # Read the current config into a str for display
+    config_contents = pformat(config)
+
+    # Read the config file contents into a buffer for display
+    file_contents = ""
+    file_name = config.get("CONFIG_FILE")
+    if file_name:
+        file_path = os.path.join(config["ROOT_PATH"], file_name)
+        with open(file_path, mode="r") as f:
+            file_contents += f.read()
+
+    # Convert the strings to pretty HTML
+    curr_settings = highlight(config_contents, PythonLexer(), HtmlFormatter())
+    file_settings = highlight(file_contents, PythonLexer(), HtmlFormatter())
+
+
+    return render_template(
+            "settings.html",
+            active_nav_item='settings',
+            config_file=file_name,
+            curr_settings=curr_settings,
+            file_settings=file_settings)
+
+
 def format_phone_no(number):
     return'{}-{}-{}'.format(number[0:3], number[3:6], number[6:])
 
@@ -912,6 +949,8 @@ def run_flask(config):
     '''
     app.secret_key = get_random_string()
     with app.app_context():
+        # Application-wide config dict
+        app.config["APPLICATION_CONFIG"] = config
         # Override Flask settings with CallAttendant config settings
         app.config["DEBUG"] = config["DEBUG"]
         app.config["TESTING"] = config["TESTING"]