Merge pull request #95 from emxsys/web-interface-improvements

Web interface improvements
emxsys · Aug 30, 2020 · a2e8819 · a2e8819
2 parents 0e1e292 + 97779da
commit a2e8819
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 15 deletions.
diff --git a/callattendant/userinterface/static/info-circle.svg b/callattendant/userinterface/static/info-circle.svg
diff --git a/callattendant/userinterface/templates/callers_blocked.html b/callattendant/userinterface/templates/callers_blocked.html
@@ -3,13 +3,18 @@
 {% block title %}Blocked{% endblock %}
 
 {% block content %}
-<div class="container">
-  <h2><span class="bg-danger text-white px-2">Blocked Numbers</span></h2>
+<div class="container mb-2">
+  <h2><span class="bg-danger text-white px-2">Blocked Numbers</span>
+   <a href="https://github.com/emxsys/callattendant/wiki/User-Guide#managing-blocked-numbers">
+    <img class="float-right" src="../static/info-circle.svg" alt="" width="32" height="32">
+   </a>
+  </h2>
   <div>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add New</button>
   </div>
   <br/>
-  {% if blacklist %}
+  <div class="mb-2">
+    {% if blacklist %}
     {{ pagination.links }}
     <table id='blocked-table' class="table table-striped table-sm table-responsive-sm">
       <thead>
@@ -24,7 +29,7 @@ <h2><span class="bg-danger text-white px-2">Blocked Numbers</span></h2>
         {% for row in blacklist %}
         <tr>
           <td class="manage-caller">
-            <b>{{ row.Phone_Number }}</b> -
+            <a href="/calls?search={{ row.Phone_Number }}&submit=phone"><b>{{ row.Phone_Number }}</b></a> -
             <span class="d-lg-none"><br></span>
             <i>{{ row.Name }}</i>
           </td>
@@ -46,6 +51,8 @@ <h2><span class="bg-danger text-white px-2">Blocked Numbers</span></h2>
     </table>
     {{ pagination.links }}
     {% endif %}
+  </div>
+  <button id="back-button" type="button" class="btn btn-secondary">Back</button>
 </div>
 
 <!-- Add Modal-->
@@ -116,6 +123,11 @@ <h5 class="modal-title" id="updateModalLabel">Update Blocked Number: </h5>
 
 {% block js %}
 <script>
+// Go back to the original referrer
+$('#back-button').on('click', function (event) {
+    history.back()
+});
+
 // Add
 $('#addModal').on('show.bs.modal', function (event) {
   var modal = $(this)

diff --git a/callattendant/userinterface/templates/callers_permitted.html b/callattendant/userinterface/templates/callers_permitted.html
@@ -3,13 +3,17 @@
 {% block title %}Permitted{% endblock %}
 
 {% block content %}
-<div class="container">
-  <h2><span class="bg-success text-white px-2">Permitted Numbers</span></h2>
+<div class="container mb-2">
+  <h2><span class="bg-success text-white px-2">Permitted Numbers</span>
+   <a href="https://github.com/emxsys/callattendant/wiki/User-Guide#managing-permitted-numbers">
+    <img class="float-right" src="../static/info-circle.svg" alt="" width="32" height="32">
+   </a>
+  </h2>
   <div>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add New</button>
   </div>
   <br/>
-  <div>
+  <div class="mb-2">
   {% if whitelist %}
     {{ pagination.links }}
     <table id="permitted-table" class="table table-striped table-sm table-responsive-sm">
@@ -28,7 +32,7 @@ <h2><span class="bg-success text-white px-2">Permitted Numbers</span></h2>
         {% for item in whitelist %}
         <tr>
           <td class="manage-caller">
-            <b>{{ item.Phone_Number }}</b> -
+            <a href="/calls?search={{ item.Phone_Number }}&submit=phone"><b>{{ item.Phone_Number }}</b></a> -
             <span class="d-md-none"><br></span>
             <i>{{ item.Name }}</i>
           </td>
@@ -54,6 +58,7 @@ <h2><span class="bg-success text-white px-2">Permitted Numbers</span></h2>
     {{ pagination.links }}
     {% endif %}
   </div>
+  <button id="back-button" type="button" class="btn btn-secondary">Back</button>
 </div>
 <!-- Add Modal-->
 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
@@ -123,6 +128,10 @@ <h5 class="modal-title" id="updateModalLabel">Update Permitted Number: </h5>
 
 {% block js %}
 <script>
+// Go back to the original referrer
+$('#back-button').on('click', function (event) {
+    history.back()
+});
 // Add
 $('#addModal').on('show.bs.modal', function (event) {
   var modal = $(this)

diff --git a/callattendant/userinterface/templates/calls.html b/callattendant/userinterface/templates/calls.html
@@ -4,7 +4,12 @@
 
 {% block content %}
 <div class="container">
-  <h2>Call Log <img src="../static/telephone-inbound.svg" alt="" width="32" height="32"></h2>
+  <h2>Call Log
+    <img src="../static/telephone-inbound.svg" alt="" width="32" height="32">
+    <a href="https://github.com/emxsys/callattendant/wiki/User-Guide#viewing-call-history">
+      <img class="float-right" src="../static/info-circle.svg" alt="" width="32" height="32">
+    </a>
+  </h2>
   {% if search_criteria %}
       <strong>Search: {{ search_criteria }}&nbsp;&nbsp;</strong>
       <button id="cancel-search" type="button" class="btn btn-secondary btn-sm" aria-label="Cancel">Cancel</button>
@@ -66,12 +71,18 @@ <h2>Call Log <img src="../static/telephone-inbound.svg" alt="" width="32" height
     {{ pagination.links }}
     {% endif %}
   </div>
+  <button id="back-button" type="button" class="btn btn-secondary">Back</button>
 </div>
 {% include 'modal_play_message.html' %}
 {% endblock %}
 
 {% block js %}
 <script>
+  // Go back to the original referrer
+  $('#back-button').on('click', function (event) {
+      history.back()
+  });
+
   // Cancel call-log history display and revert to full log
   $('#cancel-search').on('click', function (event) {
     window.location.href = "/calls"

diff --git a/callattendant/userinterface/templates/calls_view.html b/callattendant/userinterface/templates/calls_view.html
@@ -53,6 +53,7 @@ <h5 class="mb-0">Voice Message</b></h5>
             Your browser does not support the audio element.
           </audio>
         </p>
+        <button id="play-button" type="button" class="btn btn-primary">Play</button>
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-delete-message">Delete</button>
       </div>
     </div>
@@ -94,7 +95,17 @@ <h6>Delete voice message from {{ caller.phone_no }}?</h6>
     history.back()
 });
 
-// Open the Messages page
+
+// Play the message
+$('#play-button').on('click', function (event) {
+  // It doesn't work with $("#audio").play() like you would expect. The official reason is that
+  // incorporating it into jQuery would add a play() to every element. So instead you have to refer
+  // to it by its position in the array of DOM elements
+  // https://stackoverflow.com/a/38547039/4797523
+  $("#audio")[0].play()
+});
+
+// Delete the messages
 $('#delete-message').on('click', function (event) {
   window.location.href = "/messages/delete/{{ caller.msg_no }}"
 });

diff --git a/callattendant/userinterface/templates/dashboard.html b/callattendant/userinterface/templates/dashboard.html
@@ -54,8 +54,11 @@ <h3 class="font-weight-bolder">{{ percent_blocked }}</h3>
       <div class="row">
         <div class="m-2 col-lg border border-info">
 
-          <h4 class="pt-2">Recent Calls</h4>
-
+          <h4 class="pt-2">Recent Calls
+           <a href="https://github.com/emxsys/callattendant/wiki/User-Guide#recent-calls">
+            <img class="float-right" src="../static/info-circle.svg" alt="" width="24" height="24">
+           </a>
+          </h4>
           {% if recent_calls %}
           <table id="recent-calls" class="table table-hover table-sm table-responsive-sm" width="100%">
             <thead>
@@ -127,7 +130,7 @@ <h4  class="pt-2">Top Permitted Callers</h4>
             <tbody>
             {% for item in top_permitted %}
                 <td>
-                  <b>{{ item.phone_no }}</b> -
+                  <a href="/calls?search={{ item.phone_no }}&submit=phone"><b>{{ item.phone_no }}</b></a> -
                   <span class="d-sm-none"><br></span>
                   <i>{{ item.name }}</i>
                 </td>
@@ -155,7 +158,7 @@ <h4 class="pt-2">Top Blocked Callers</h4>
             <tbody>
             {% for item in top_blocked %}
                 <td>
-                  <b>{{ item.phone_no }}</b> -
+                  <a href="/calls?search={{ item.phone_no }}&submit=phone"><b>{{ item.phone_no }}</b></a> -
                   <span class="d-sm-none"><br></span>
                   <i>{{ item.name }}</i>
                 </td>

diff --git a/callattendant/userinterface/templates/messages.html b/callattendant/userinterface/templates/messages.html
@@ -8,7 +8,9 @@ <h2>Voice Messages <img src="../static/chat-left-text.svg" alt="" width="32" hei
   {% if total_unplayed > 0 %}
     <i><span class="badge badge-primary"><span id="total-unplayed">{{ total_unplayed }}</span> New </span></i>
   {% endif %}
-  </h2>
+   <a href="https://github.com/emxsys/callattendant/wiki/User-Guide#managing-voice-messages">
+    <img class="float-right" src="../static/info-circle.svg" alt="" width="32" height="32">
+   </a>  </h2>
 
   {% if total_messages == 0 %}
   <h4><i>None</i></h4>