Moved viewer queue to it's own page, removed auto-refresh from viewer panel

TODO.md

@@ -2,7 +2,6 @@
  * Modify references to Ko-fi on any other templates. Include GiveButter.
  * Test secret verification.
 * Fix upgrader not handling empty config.py variables correctly.
-* Move viewerpanel queue to it's own page, with it's own auto-refresh.
-* Fix positioning of Ko-fi subscription notice on the OwnchatBot info page.
+* Viewerqueue doesn't always go to the correct viewerpanel tab.
 * Screen reader - how to deal with auto refresh
 * Short video tutorials on configuring OwnchatBot.

ownchatbot/static/style.css

@@ -87,6 +87,14 @@ img {
     background-color: #002e63;
     text-align: left;
 }
+    
+.queuecontent {
+    display: block;
+    padding: 6px 12px;
+    border-top: none;
+    background-color: #002e63;
+    text-align: left;
+}
 
 .button {
     border-radius: 25px;

ownchatbot/templates/userpanel.html

@@ -11,7 +11,7 @@
         <div class="tab">
             <button class="tablinks" data-tab="ocbinfo" onclick="openTab(event, 'ocbinfo')">OwnchatBot Info</button>
             <button class="tablinks" data-tab="rewards" onclick="openTab(event, 'rewards')">Points and Rewards</button>
-            <button class="tablinks" data-tab="queue" onclick="openTab(event, 'queue')">Rewards Queue</button>
+            <button class="tablinks" onclick="window.location.href='{{ url_for('web_panels.user_queue') }}'">Rewards Queue</button>
         </div>
         <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
     </div>
@@ -36,23 +36,34 @@
         
         <hr>
         <table>
+            <thead>
+                <tr style="border-bottom: none;">
+                    <th></th>
+                    <th></th>
+                </tr>
+            </thead>
         {% if kofi_settings['donations'] %}
             <tr style="border-bottom: none;">
-            <td><h4><a href="{{ kofi_settings['kofi_url'] }}/donate" target="new"><img style="height: 25px; width: auto; padding-right: 8px; !important" alt="Coffee Cup Logo" src="/static/img/kofi_symbol.png"></a> Ko-fi</h4></td>
+                <td rowspan="2"><h4><a href="{{ kofi_settings['kofi_url'] }}/donate" target="new"><img style="height: 25px; width: auto; padding-right: 8px; !important" alt="Coffee Cup Logo" src="/static/img/kofi_symbol.png"></a> Ko-fi</h4></td>
             
             {% if kofi_settings['donations'] %}
                 {% set d_points_label = 'point' if kofi_settings['donation_points'] == 1 else 'points' %}
                 <td>You are awarded {{ kofi_settings['donation_points'] }} {{ d_points_label }} for every dollar donated.<br></td>
             {% endif %}
             </tr>
-            <tr style="border-bottom: none;">            
-            {% if kofi_settings['subs'] %}
-                {% set s_points_label = 'point' if kofi_settings['sub_points'] == 1 else 'points' %}
-                <td>Ko-fi subscribers get {{ kofi_settings['sub_points'] }} {{ s_points_label }} every month.<br></td>
-            {% endif %}
+        {% if gb_settings['integration'] %}
+            <tr>
+        {% else %}
+            <tr style="border-bottom: none;">
+        {% endif %}           
+        {% if kofi_settings['subs'] %}
+            {% set s_points_label = 'point' if kofi_settings['sub_points'] == 1 else 'points' %}
+            <td>Subscribers get {{ kofi_settings['sub_points'] }} {{ s_points_label }} every month.<br></td>
+        {% endif %}
             </tr>
         {% endif %}
         
+        {% if gb_settings['integration'] %}
         {% if gb_settings['donations'] %}
             <tr style="border-bottom: none;">
             <td><h4><a href="{{ gb_settings['gb_url'] }}" target="new"><img style="height: 25px; width: auto; padding-right: 8px; !important" alt="Give Butter Logo" src="/static/img/givebutter.png"></a> GiveButter</h4></td>
@@ -60,6 +71,7 @@
             <td>You are awarded {{ gb_settings['donation_points'] }} {{ d_points_label }} for every dollar donated.<br></td>
             </tr>
         {% endif %}
+        {% endif %}
         </table>
             <br><i> You must be authenticated with Owncast to earn points for donations.</i><br>
             {% for user in users %}
@@ -219,8 +231,7 @@
             &nbsp;&nbsp;There are currently no active goals
             <br>
             {% endif %}
-        </body>
-        <body>
+            
             <h3>Active Rewards</h3>
             {% if rewards %}
             <table>
@@ -304,9 +315,5 @@
         </body>
         <br><br>
     </div>
-    
-    <script>
-        setTimeout(refreshPage, 30 * 1000);
-    </script>
 
 </html>

ownchatbot/templates/userqueue.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>OwnchatBot</title>
+    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+    <script src="/static/viewerpanel.js"></script>
+    
+    <div class="navbar">
+        <div class="tab">
+            <button class="tablinks" onclick="window.location.href='{{ url_for('web_panels.user_panel', instance=instance, username=username, activeTab='ocbinfo') }}'">OwnchatBot Info</button>
+            <button class="tablinks" onclick="window.location.href='{{ url_for('web_panels.user_panel', instance=instance, username=username, activeTab='rewards') }}'">Points and Rewards</button>
+            <button class="tablinks" onclick="window.location.href='{{ url_for('web_panels.user_queue') }}'">Rewards Queue</button>
+        </div>
+        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
+    </div>
+
+    <div class="queuecontent">
+
+        <body>
+            <h3>Queue</h3>
+            {% if queue %}
+            <table>
+                <thead>
+                    <tr>
+                        <th>Time</th>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>User</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                {% for row in queue %}
+                <tr>
+                    <td>{{ row[1].replace(tzinfo=utc_timezone).astimezone().strftime("%H:%M") }}</td>
+                    {% if row[4] %}
+                        <td><s>{{ prefix }}{{ row[2] }}</s></td>
+                    {% else %}
+                        <td>{{ prefix }}{{ row[2] }}</td>
+                    {% endif %}
+                    <td>{{ all_rewards[row[2]]["info"] }}</td>
+                    {% if row[6] %}
+                    <td>{{ row[6] }}</td>
+                    {% else %}
+                    <td></td>
+                    {% endif %}
+                </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+            {% else %}
+            &nbsp;&nbsp;The queue is currently empty
+            {% endif %}
+        </body>
+        <br><br>
+    </div>
+    
+    <script>
+        setTimeout(refreshPage, 30 * 1000);
+    </script>
+
+</html>

ownchatbot/web_panels.py

@@ -176,7 +176,6 @@ def user_panel():
         users = []
     utc_timezone = timezone.utc
     return render_template('userpanel.html',
-                           queue=get_queue(db),
                            votes=all_active_votes(db),
                            goals=all_active_goals(db),
                            rewards=all_active_rewards(),
@@ -192,6 +191,20 @@ def user_panel():
                            utc_timezone=utc_timezone)
 
 
+@ocb.route('/userqueue', methods=['GET'])  # The viewers panel
+def user_queue():
+    db = get_db()
+    instance = request.args.get('instance')
+    all_rewards = rewards = current_app.config['REWARDS']
+    utc_timezone = timezone.utc
+    return render_template('userqueue.html',
+                           queue=get_queue(db),
+                           all_rewards=all_rewards,
+                           prefix=current_app.config['PREFIX'],
+                           instance=instance,
+                           utc_timezone=utc_timezone)
+
+
 @ocb.route('/mgmt/fulfill', methods=['GET'])
 @requires_login
 def fulfilled():

upgrade.sh

@@ -22,9 +22,9 @@ update_config() {
     cp ownchatbot/defaults/givebutter.py instance/  # Copy the default givebutter config file into instance/
 }
 
-# activate_venv
-# update_modules
-# deactivate
+activate_venv
+update_modules
+deactivate
 update_config
 
 echo -e "\nYour OwnchatBot configuration has been upgraded. Look for GiveButter integration settings in the OCB Management Panel.\nHappy streaming!"