Core UI changes

fHDHR_web/__init__.py

@@ -3,6 +3,7 @@ from flask import Flask, request, session
 
 from .pages import fHDHR_Pages
 from .files import fHDHR_Files
+from .brython import fHDHR_Brython
 from .hdhr import fHDHR_HDHR
 from .rmg import fHDHR_RMG
 from .api import fHDHR_API
@@ -38,6 +39,10 @@ class fHDHR_HTTP_Server():
         self.files = fHDHR_Files(fhdhr)
         self.add_endpoints(self.files, "files")
 
+        self.fhdhr.logger.info("Loading HTTP Brython Endpoints.")
+        self.brython = fHDHR_Brython(fhdhr)
+        self.add_endpoints(self.brython, "brython")
+
         self.fhdhr.logger.info("Loading HTTP HDHR Endpoints.")
         self.hdhr = fHDHR_HDHR(fhdhr)
         self.add_endpoints(self.hdhr, "hdhr")

fHDHR_web/api/channels.py

@@ -111,7 +111,7 @@ class Channels():
             self.fhdhr.device.channels.set_channel_status("id", channel_id, updatedict)
 
         elif method == "modify":
-            channels_list = request.form.get('channels', [])
+            channels_list = eval(request.form.get('channels', []))
             for channel in channels_list:
                 updatedict = {}
                 for key in list(channel.keys()):
@@ -134,6 +134,8 @@ class Channels():
                             updatedict[key] = confvalue
                         elif key in ["favorite", "HD"]:
                             updatedict[key] = int(channel[key])
+                    else:
+                        channel_id = str(channel[key])
                 self.fhdhr.device.channels.set_channel_status("id", channel_id, updatedict)
 
         elif method == "scan":

fHDHR_web/brython/brython.py

@@ -0,0 +1,20 @@
+from flask import send_from_directory
+
+import pathlib
+
+class Brython():
+    endpoints = ["/brython.js"]
+    endpoint_name = "file_brython_js"
+
+    def __init__(self, fhdhr):
+        self.fhdhr = fhdhr
+        self.brython_path = pathlib.Path(self.fhdhr.config.internal["paths"]["fHDHR_web_dir"]).joinpath('brython')
+
+    def __call__(self, *args):
+        return self.get(*args)
+
+    def get(self, *args):
+
+        return send_from_directory(self.brython_path,
+                                   'brython.js',
+                                   mimetype='text/javascript')

fHDHR_web/brython/brython_stdlib.py

@@ -0,0 +1,21 @@
+from flask import send_from_directory
+
+import pathlib
+
+class Brython_stdlib():
+    endpoints = ["/brython_stdlib.js"]
+    endpoint_name = "file_brython_stdlib_js"
+
+    def __init__(self, fhdhr):
+        self.fhdhr = fhdhr
+
+        self.brython_path = pathlib.Path(self.fhdhr.config.internal["paths"]["fHDHR_web_dir"]).joinpath('brython')
+
+    def __call__(self, *args):
+        return self.get(*args)
+
+    def get(self, *args):
+
+        return send_from_directory(self.brython_path,
+                                   'brython_stdlib.js',
+                                   mimetype='text/javascript')

fHDHR_web/templates/channels.html

@@ -9,25 +9,28 @@
     </div>
     <br>
 
-    <table class="center" style="width:50%">
+    <div class="container">
-      <tr>
+    <table class="table-small center">
-        <th></th>
+    <tbody>
-        <th></th>
-      </tr>
-
     {% for key in list(channels_dict.keys()) %}
-      <tr>
+    <tr>
         <td>{{ key }}</td>
         <td>{{ channels_dict[key] }}</td>
       </tr>
     {% endfor %}
+    </tbody>
+    </table>
+    </div>
 
+    <br>
     <div style="text-align: center;">
       <button onclick="OpenLink('/channels_editor')">Edit Channels</a></button>
     </div>
     <br>
 
-    <table class="center" style="width:100%">
+    <div class="container">
+    <table class="table-scroll center small-first-col">
+      <thead>
       <tr>
         <th>Play</th>
         <th>Channel Name</th>
@@ -37,38 +40,44 @@
         <th>Enabled</th>
         <th>Favorite</th>
       </tr>
+      </thead>
 
+    <tbody class="body-half-screen">
     {% for chan_dict in channelslist %}
-      <tr>
+    <tr>
-        <td>
+
+         <td>
           {% if chan_dict["enabled"] %}
             <a href="{{ chan_dict["play_url"] }}">Play</a>
+	  {% else %}
+	    <a href="{{ chan_dict["play_url"] }}" style="visibility:hidden">Play</a>
           {% endif %}
-
+         </td>
-        </td>
 
         <td>{{ chan_dict["name"] }}</td>
         <td>{{ chan_dict["callsign"] }}</td>
         <td>{{ chan_dict["number"] }}</td>
 
         {% if chan_dict["thumbnail"]  %}
-          <td><img src="{{ chan_dict["thumbnail"] }}" alt="{{ chan_dict["name"] }}" width="100" height="100"></td>
+        <td><img src="{{ chan_dict["thumbnail"] }}" alt="{{ chan_dict["name"] }}" width="100" height="100"></td>
         {% else %}
-          <td>No Image Available</td>
+        <td>No Image Available</td>
         {% endif %}
 
         {% if chan_dict["enabled"]  %}
-          <td>Enabled</td>
+        <td>Enabled</td>
         {% else %}
-          <td>Disabled</td>
+        <td>Disabled</td>
         {% endif %}
 
         {% if chan_dict["favorite"]  %}
-          <td>Yes</td>
+        <td>Yes</td>
         {% else %}
-          <td>No</td>
+         <td>No</td>
         {% endif %}
-
+      </tr>
     {% endfor %}
-
+    </tbody>
+    </table>
+  </div>
 {% endblock %}

fHDHR_web/templates/channels_editor.html

@@ -1,15 +1,85 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <body onload="brython({debug: 1, indexedDB: false})">
+    <script type="text/javascript" src="/brython.js"></script>
+    <script type="text/javascript" src="/brython_stdlib.js"></script>
+    <script type="text/python" id="enable0">
+       from browser import document, alert, window, bind
+
+       @bind("#enable_button", "click")
+       def enable_all(event):
+         for element in document.get(selector='input[type="checkbox"]'):
+            if element.name.endswith("enabled"):
+               if document["enable_button"].value == "0":
+                 element.checked = False
+                 element.value = False
+               else:
+                 element.checked = True
+                 element.value = True
+
+         if document["enable_button"].value == "0":
+           document["enable_button"].value = "1"
+           document["enable_button"].text = "Enable All"
+         else:
+           document["enable_button"].value = "0"
+           document["enable_button"].text = "Disable All"
+
+
+       @bind("#chanSubmit", "submit")
+       def submit_fixup(evt):
+          for element in document.get(selector='input[type="checkbox"]'):
+             if element.name.endswith("enabled"):
+                if element.checked == False:
+                   element.checked = True
+                   element.value = False
+             if element.name.endswith("favorite"):
+                if element.checked == False:
+                   element.checked = True
+                   element.value = 0
+
+          items = document.select(".channels")
+	  chanlist = []
+	  chandict = {}
+
+          for element in items:
+            if element.name == "id":
+              if len(chandict.keys()):
+                chanlist.append(chandict)
+              chandict = {}
+            chandict[element.name] = element.value
+            element.clear()
+
+          postForm = document.createElement('form')
+          postData = document.createElement('input')
+          postForm.method = "POST"
+          postForm.action = "/api/channels?method=modify&redirect=%2Fchannels_editor"
+          postForm.setRequestHeader = "('Content-Type', 'application/json')"
+          postData.name = "channels"
+          postData.value = chanlist
+          postForm.appendChild(postData)
+
+          document.body.appendChild(postForm)
+
+          postForm.submit()
+
+          evt.preventDefault()
+
+    </script>
 
     <h4 style="text-align: center;">{{ fhdhr.config.dict["fhdhr"]["friendlyname"] }} Channels Editor</h4>
 
     <div style="text-align: center;">
-      <button onclick="OpenLink('/api/channels?method=enable&channel=all&redirect=%2Fchannels_editor')">Enable All</a></button>
+       <form id="chanSubmit" method="post">
-      <button onclick="OpenLink('/api/channels?method=disable&channel=all&redirect=%2Fchannels_editor')">Disable All</a></button>
+       <button type="Submit" id="modify_button" value="0">Modify All</button>
+       <button type="button" id="enable_button" value="0">Disable All</button>
+       </form>
     </div>
 
-    <table class="center" style="width:100%">
+
+    <div class="container">
+      <table class="table-scroll center text-edit-cols">
+      <thead>
       <tr>
         <th>Channel Name</th>
         <th>Channel CallSign</th>
@@ -17,55 +87,43 @@
         <th>Channel Thumbnail</th>
         <th>Enabled</th>
         <th>Favorite</th>
-        <th>Update</th>
+        <th>Actions</th>
-        <th>Reset</th>
       </tr>
+      </thead>
 
+    <tbody class="body-half-screen">
     {% for chan_dict in channelslist %}
-
+        <tr>
-        <form method="post" action="/api/channels?method=update&redirect=%2Fchannels_editor">
+          <td><input type="hidden" name="id" class="channels" value={{ chan_dict["id"] }}>
-          <input type="hidden" name="id" value="{{ chan_dict["id"] }}">
+          <input type="text" class="channels" name="name" value="{{ chan_dict["name"] }}"></td>
-            <td data-th="Channel Name"><input type="text" name="name" value="{{ chan_dict["name"] }}"></td>
+          <td><input type="text"  class="channels" name="callsign" value="{{ chan_dict["callsign"] }}"></td>
-            <td data-th="Channel Calsign"><input type="text" name="callsign" value="{{ chan_dict["callsign"] }}"></td>
+          <td><input type="text"  class="channels" name="number" value="{{ chan_dict["number"] }}"></td>
-            <td data-th="Channel Number"><input type="text" name="number" value="{{ chan_dict["number"] }}"></td>
+          <td><input type="text"  class="channels" name="thumbnail" value="{{ chan_dict["thumbnail"] }}"></td>
-            <td data-th="Channel Thumbnail"><input type="text" name="thumbnail" value="{{ chan_dict["thumbnail"] }}"></td>
+          {% if chan_dict["enabled"]  %}
-            <td>
+	  <td><input type="checkbox"  class="channels" name="enabled" value=True checked></td>
-              <select name="enabled">
+          {% else %}
-                {% if chan_dict["enabled"]  %}
+	  <td><input type="checkbox"  class="channels" name="enabled" value=True ></td>
-                  <option value=True selected>Enabled</option>
+          {% endif %}
-                  <option value=False>Disabled</option>
+          {% if chan_dict["favorite"]  %}
-                {% else %}
+	  <td><input type="checkbox"  class="channels" name="favorite" value=1 checked></td>
-                  <option value=True>Enabled</option>
+          {% else %}
-                  <option value=False selected>Disabled</option>
+	  <td><input type="checkbox"  class="channels" name="favorite" value=1 ></td>
-                {% endif %}
+          {% endif %}
-              </select>
+	  <td>
-            </td>
+             <form method="post" action="/api/channels?method=update&redirect=%2Fchannels_editor">
-            <td>
+             <input type="hidden" class="reset" name="id" value="{{ chan_dict["id"] }}">
-              <select name="favorite">
+             <input type="hidden" class="reset" name="name" value="{{ chan_dict["origin_name"] }}">
-                {% if chan_dict["favorite"]  %}
+             <input type="hidden" class="reset" name="callsign" value="{{ chan_dict["origin_callsign"] }}">
-                  <option value=1 selected>Yes</option>
+             <input type="hidden" class="reset" name="number" value="{{ chan_dict["origin_number"] }}">
-                  <option value=0>No</option>
+             <input type="hidden" class="reset" name="thumbnail" value="{{ chan_dict["origin_thumbnail"] }}">
-                {% else %}
+             <input type="hidden" class="reset" name="enabled" value=True>
-                  <option value=1>Yes</option>
+              <input type="submit"  value="Reset">
-                  <option value=0 selected>No</option>
+             </form>
-                {% endif %}
+	  </td>
-              </select>
+         </tr>
-            </td>
-            <td data-th="Update"><input type="submit" value="Update"></td>
-        </form>
-
-        <form method="post" action="/api/channels?method=update&redirect=%2Fchannels_editor">
-          <input type="hidden" name="id" value="{{ chan_dict["id"] }}">
-          <input type="hidden" name="name" value="{{ chan_dict["origin_name"] }}">
-          <input type="hidden" name="callsign" value="{{ chan_dict["origin_callsign"] }}">
-          <input type="hidden" name="number" value="{{ chan_dict["origin_number"] }}">
-          <input type="hidden" name="thumbnail" value="{{ chan_dict["origin_thumbnail"] }}">
-          <input type="hidden" name="enabled" value=True>
-            <td data-th="Reset"><input type="submit" value="Reset"></td>
-        </form>
-
-      </tr>
 
     {% endfor %}
-
+    </tbody>
+    </table>
+    </div>
 {% endblock %}

fHDHR_web/templates/cluster.html

@@ -14,7 +14,10 @@
       </div>
       <br>
 
-      <table class="center" style="width:50%">
+    <div class="container">
+    <table class="table-medium center action-col">
+    <tbody>
+
         <tr>
           <th>Name</th>
           <th>Location</th>
@@ -22,15 +25,12 @@
           <th>Options</th>
         </tr>
 
-      {% for location in locations_list %}
+        {% for location in locations_list %}
         <tr>
-          <td>{{ location["name"] }}</td>
+        <td>{{ location["name"] }}</td>
-          <td>{{ location["location"] }}</td>
+            <td>{{ location["location"] }}</td>
-          <td>{{ location["joined"] }}</td>
+        <td>{{ location["joined"] }}</td>
-
+            <td>
-          <td>
-            <div>
-
               {% if location["joined"] in ["True", "False"] %}
                 <button onclick="OpenLink('{{ location["location"] }}')">Visit</a></button>
               {% endif %}
@@ -41,11 +41,12 @@
                 <button onclick="OpenLink('/api/cluster?method=add&location={{ location["url_query"] }}&redirect=%2Fcluster')">Add</a></button>
               {% endif %}
 
-            </div>
+            </td>
-          </td>
+          </tr>
-        </tr>
       {% endfor %}
-
+    </tbody>
+    </table>
+    </div>
     {% endif %}
 
 {% endblock %}

fHDHR_web/templates/diagnostics.html

@@ -4,33 +4,37 @@
 
   <h4 style="text-align: center;">fHDHR Diagnostic Links</h4>
 
-    <table class="center" style="width:100%">
+    <div class="container">
-      <tr>
+    <table class="table-medium center">
+    <tbody>
+     <tr>
         <th>Item</th>
         <th>HDHR</th>
         <th>RMG</th>
         <th>Non-Specific</th>
-      </tr>
+     </tr>
 
     {% for button_item in button_list %}
-      <tr>
+    <tr>
         <td>{{ button_item["label"] }}</td>
         {% if button_item["hdhr"]  %}
-          <td><button onclick="OpenLink('{{ button_item["hdhr"] }}')">{{ button_item["label"] }}</a></button></td>
+        <td><button onclick="OpenLink('{{ button_item["hdhr"] }}')">{{ button_item["label"] }}</a></button></td>
         {% else %}
-          <td></td>
+        <td></td>
         {% endif %}
         {% if button_item["rmg"]  %}
-          <td><button onclick="OpenLink('{{ button_item["rmg"] }}')">{{ button_item["label"] }}</a></button></td>
+        <td><button onclick="OpenLink('{{ button_item["rmg"] }}')">{{ button_item["label"] }}</a></button></td>
         {% else %}
-          <td></td>
+        <td> </td>
         {% endif %}
         {% if button_item["other"]  %}
-          <td><button onclick="OpenLink('{{ button_item["other"] }}')">{{ button_item["label"] }}</a></button></td>
+        <td><button onclick="OpenLink('{{ button_item["other"] }}')">{{ button_item["label"] }}</a></button></td>
         {% else %}
-          <td></td>
+        <td></td>
         {% endif %}
-      </tr>
+    </tr>
     {% endfor %}
-
+    </tbody>
+    </table>
+    </div>
 {% endblock %}

fHDHR_web/templates/guide.html

@@ -10,8 +10,10 @@
       {% endfor %}
     </p>
 
-      <table class="center" style="width:100%">
+    <div class="container">
-        <tr>
+    <table class="table-scroll">
+    <thead>
+      <tr>
           {% if source in ["blocks", "origin", fhdhr.config.dict["main"]["dictpopname"]] %}
             <th>Play</th>
           {% endif %}
@@ -24,14 +26,18 @@
           <th>Start Time (UTC)</th>
           <th>End Time (UTC)</th>
           <th>Content Remaining Time</th>
-        </tr>
+      </tr>
+    </thead>
 
+    <tbody class="body-half-screen">
       {% for chan_dict in chan_guide_list %}
-        <tr>
+      <tr>
           {% if source in ["blocks", "origin", fhdhr.config.dict["main"]["dictpopname"]] %}
-            <td>
+          <td>
               {% if chan_dict["enabled"] %}
                 <a href="{{ chan_dict["play_url"] }}">Play</a>
+              {% else %}
+                <a href="{{ chan_dict["play_url"] }}" style="visibility:hidden">Play</a>
               {% endif %}
             </td>
           {% endif %}
@@ -44,7 +50,10 @@
           <td>{{ chan_dict["listing_time_start"] }}</td>
           <td>{{ chan_dict["listing_time_end"] }}</td>
           <td>{{ chan_dict["listing_remaining_time"] }}</td>
-        </tr>
+      </tr>
       {% endfor %}
+    </tbody>
+    </table>
+    </div>
 
 {% endblock %}

fHDHR_web/templates/index.html

@@ -4,17 +4,19 @@
 
     <h4 style="text-align: center;">fHDHR Status</h4>
 
-      <table class="center" style="width:50%">
+
-        <tr>
+    <td class="container">
-          <th></th>
+    <table class="table-medium center">
-          <th></th>
+    <tbody>
-        </tr>
 
       {% for key in list(fhdhr_status_dict.keys()) %}
-        <tr>
+      <tr>
-          <td>{{ key }}</td>
+          <td class="rTableCell">{{ key }}</td>
-          <td>{{ fhdhr_status_dict[key] }}</td>
+          <td class="rTableCell">{{ fhdhr_status_dict[key] }}</td>
-        </tr>
+      </tr>
       {% endfor %}
 
+    </tbody>
+    </table>
+    </div>
 {% endblock %}

fHDHR_web/templates/settings.html

@@ -14,46 +14,54 @@
         <h4 style="text-align: center;">{{ config_section }}</h4>
       {% endif %}
 
-      <table class="center" style="width:100%">
+    <div class="container">
-          <tr>
+    <table class="table-settings center action-col text-edit-cols">
-              <th>Config Name</th>
+    <thead>
-              <th>Config Default Value</th>
+      <tr>
-              <th>Config Value</th>
+        <th>Config Name</th>
-              <th>Update</th>
+        <th>Config Default Value</th>
-              <th>Reset</th>
+        <th>Config Value</th>
-          </tr>
+        <th>Action</th>
+      </tr>
+    </thead>
+    <tbody>
 
       {% for config_item in list(web_settings_dict[config_section].keys()) %}
 
       <tr>
-        <td data-th="Config Name">{{ config_item }}</td>
+        <td>{{ config_item }}</td>
 
-        <td data-th="Config Default Value">{{ web_settings_dict[config_section][config_item]["value_default"] }}</td>
+        <td>{{ web_settings_dict[config_section][config_item]["value_default"] }}</td>
 
+	<td>
         <form method="post" action="/api/settings?method=update&redirect=%2Fsettings">
           <input type="hidden" name="config_section" value="{{ config_section }}">
           <input type="hidden" name="config_name" value="{{ config_item }}">
           <input type="hidden" name="config_default" value="{{ web_settings_dict[config_section][config_item]["value_default"] }}">
             {% if web_settings_dict[config_section][config_item]["hide"] %}
-              <td data-th="Config Value"><input type="text" size="50" name="config_value" value=**************></td>
+              <input type="text" size="25" name="config_value" value="**************">
             {% else %}
-              <td data-th="Config Value"><input type="text" size="50" name="config_value" value="{{ web_settings_dict[config_section][config_item]["value"] }}"></td>
+              <input type="text" size="25" name="config_value" value="{{ web_settings_dict[config_section][config_item]["value"] }}">
             {% endif %}
-            <td data-th="Update"><input type="submit" value="Update"></td>
+        </td>
-        </form>
+	<td style="display:flex;">
-
+	<span style="margin:auto">
-        <form method="post" action="/api/settings?method=update&redirect=%2Fsettings">
+		<input type="submit" value="Update">
-          <input type="hidden" name="config_section" value="{{ config_section }}">
+	</form>
+	</span>
+	<form style="margin:auto">
+	  <input type="hidden" name="config_section" value="{{ config_section }}">
           <input type="hidden" name="config_name" value="{{ config_item }}">
           <input type="hidden" name="config_value" value="{{ web_settings_dict[config_section][config_item]["value_default"] }}">
           <input type="hidden" name="config_default" value="{{ web_settings_dict[config_section][config_item]["value_default"] }}">
-            <td data-th="Reset"><input type="submit" value="Reset"></td>
+	  <input type="submit" value="Reset">
         </form>
+        </td>
 
-      </tr>
+    </tr>
 
       {% endfor %}
-      </table>
+      </div>
 
     {% endfor %}
 

fHDHR_web/templates/tuners.html

@@ -4,15 +4,17 @@
 
     <h4 style="text-align: center;">fHDHR Streams</h4>
 
-      <table class="center" style="width:100%">
+    <div class="container">
-        <tr>
+    <table class="table-medium center action-col">
-          <th>Tuner</th>
+    <tbody>
+	<tr>
           <th>Status</th>
           <th>Channel</th>
           <th>Method</th>
           <th>Time Active</th>
           <th>Total Downloaded</th>
           <th>Options</th>
+          <th>Action</th>
         </tr>
 
       {% for tuner_dict in tuner_list %}
@@ -20,30 +22,31 @@
           <td>{{ tuner_dict["number"] }}</td>
           <td>{{ tuner_dict["status"] }}</td>
           {% if tuner_dict["status"] in ["Active", "Acquired"] %}
-            <td>{{ tuner_dict["channel_number"] }}</td>
+          <td>{{ tuner_dict["channel_number"] }}</td>
           {% else %}
-            <td>N/A</td>
+          <td>N/A</td>
           {% endif %}
           {% if tuner_dict["status"] == "Active" %}
-            <td>{{ tuner_dict["method"] }}</td>
+          <td>{{ tuner_dict["method"] }}</td>
-            <td>{{ tuner_dict["play_duration"] }}</td>
+          <td>{{ tuner_dict["play_duration"] }}</td>
-            <td>{{ tuner_dict["downloaded"] }}</td>
+          <td>{{ tuner_dict["downloaded"] }}</td>
           {% else %}
-            <td>N/A</td>
+          <td>N/A</td>
-            <td>N/A</td>
+          <td>N/A</td>
-            <td>N/A</td>
+          <td>N/A</td>
           {% endif %}
           <td>
-            <div>
               {% if tuner_dict["status"] != "Inactive" %}
                 <button onclick="OpenLink('/api/tuners?method=close&tuner={{ tuner_dict["number"] }}&redirect=%2Ftuners')">Close</a></button>
               {% endif %}
               {% if not tuner_scanning and tuner_dict["status"] == "Inactive" %}
                 <button onclick="OpenLink('/api/tuners?method=scan&tuner={{ tuner_dict["number"] }}&redirect=%2Ftuners')">Channel Scan</a></button>
               {% endif %}
-            </div>
           </td>
         </tr>
       {% endfor %}
+    </tbody>
+    </table>
+    </div>
 
 {% endblock %}

fHDHR_web/templates/version.html

@@ -4,11 +4,10 @@
 
     <h4 style="text-align: center;">fHDHR Version Information</h4>
 
-      <table class="center" style="width:50%">
+
-        <tr>
+    <div class="container">
-          <th></th>
+    <table class="table-medium center">
-          <th></th>
+    <tbody>
-        </tr>
 
       {% for key in list(version_dict.keys()) %}
         <tr>
@@ -16,5 +15,8 @@
           <td>{{ version_dict[key] }}</td>
         </tr>
       {% endfor %}
+    </tbody>
+    </table>
+    </div>
 
 {% endblock %}

fHDHR_web/templates/xmltv.html

@@ -4,12 +4,14 @@
 
     <h4 style="text-align: center;">xmltv</h4>
 
-    <table class="center" style="width:50%">
+    <div class="container">
+    <table class="table-medium center action-col">
+    <tbody>
       <tr>
         <th>Version</th>
         <th>XMLTV Link</th>
         <th>EPG Link</th>
-        <th>Options</th>
+        <th>Actions</th>
       </tr>
 
     {% for epg_method in fhdhr.config.dict["epg"]["valid_epg_methods"] %}
@@ -20,19 +22,21 @@
         {% endif %}
 
         <tr>
-          <td>{{ epg_method_name }}</td>
+           <td> {{ epg_method_name }}</td>
-          <td><a href="/api/xmltv?method=get&source={{ epg_method }}">{{ epg_method_name }}</a></td>
+           <td><a href="/api/xmltv?method=get&source={{ epg_method }}">{{ epg_method_name }}</a></td>
-          <td><a href="/api/epg?method=get&source={{ epg_method }}">{{ epg_method_name }}</a></td>
+           <td><a href="/api/epg?method=get&source={{ epg_method }}">{{ epg_method_name }}</a></td>
-          <td>
+
-            <div>
+           <td>
               <button onclick="OpenLink('/api/xmltv?method=update&source={{ epg_method }}&redirect=%2Fxmltv')">Update</a></button>
               <button onclick="OpenLink('/api/xmltv?method=clearcache&source={{ epg_method }}&redirect=%2Fxmltv')">Clear Cache</a></button>
-            </div>
+           </td>
-          </td>
         </tr>
 
 
       {% endif %}
-    {% endfor %}
 
+    {% endfor %}
+    </body>
+    </table>
+    </div>
 {% endblock %}

fHDHR_web/www_dir/style.css

@@ -6,3 +6,170 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+.rTable {
+   display: table;
+   width: 100%;
+}
+.rTableRow {
+   display: table-row;
+}
+.rTableRowAlternate {
+   display: table-row;
+   background-color: #33FFFB;
+}
+.rTableHeading {
+   display: table-header-group;
+   background-color: #ddd;
+   font-weight: bold;
+}
+.rTableCell, .rTableHead {
+   display: table-cell;
+   padding: 3px 10px;
+   border: 1px solid #999999;
+}
+.rTableFoot {
+   display: table-footer-group;
+   font-weight: bold;
+   background-color: #ddd;
+}
+.rTableBody {
+   display: table-row-group;
+   max-height: 450px;
+   overflow-y: scroll;
+}
+
+.container{
+  padding: 1rem;
+  margin: 1rem;
+}
+.table-scroll{
+  /*width:100%; */
+  display: block;
+  empty-cells: show;
+  
+  /* Decoration */
+  border-spacing: 0;
+  border: 1px solid;
+}
+
+.table-small{
+  width: 20%;
+  border-spacing: 0;
+  border: 1px solid;
+}
+
+.table-medium{
+  width: 50%;
+  border-spacing: 0;
+  border: 1px solid;
+}
+
+.table-large{
+  width: 75%;
+  border-spacing: 0;
+  border: 1px solid;
+}
+
+.table-settings{
+  width: 75%;
+  border-spacing: 0;
+  border: 1px solid;
+}
+
+.table-settings thead{
+  background-color: #f1f1f1;  
+  position:relative;
+  display: block;
+  width:100%;
+}
+
+.table-settings tbody{
+  /* Position */
+  display: block; position:relative;
+  width:100%;
+  /* Decoration */
+  border-top: 1px solid rgba(0,0,0,0.2);
+}
+
+.table-settings tr{
+  width: 100%;
+  display:flex;
+}
+
+.table-settings td,.table-settings th{
+  flex: 1 1 0;
+  display: block;
+  padding: .25rem;
+}
+.table-scroll thead{
+  background-color: #f1f1f1;  
+  position:relative;
+  display: block;
+  width:100%;
+  overflow-y: scroll; 
+}
+
+.table-scroll tbody{
+  /* Position */
+  display: block; position:relative;
+  width:100%; overflow-y:scroll;
+  /* Decoration */
+  border-top: 1px solid rgba(0,0,0,0.2);
+}
+
+.table-scroll tr{
+  width: 100%;
+  display:flex;
+}
+
+.table-scroll td,.table-scroll th{
+  flex: 1 1 0;
+  display: block;
+  padding: .25rem;
+  text-align:center;
+}
+
+/* Other options */
+
+.table-scroll.text-edit-cols td:nth-child(-n+4),
+.table-scroll.text-edit-cols th:nth-child(-n+4){
+  flex: 2
+}
+
+.table-settings.text-edit-cols td:nth-child(-n+2),
+.table-settings.text-edit-cols th:nth-child(-n+2){
+  flex: 1;
+}
+
+.table-scroll.small-first-col td:first-child,
+.table-scroll.small-first-col th:first-child{
+  width: 20%;
+  flex: 0 1 0;
+}
+
+.action-col  td:last-child{
+  flex:1;	  
+}
+
+.table-small tbody tr:nth-child(2n){
+  background-color: rgba(130,130,170,0.1);
+}
+
+.table-medium tbody tr:nth-child(2n){
+  background-color: rgba(130,130,170,0.1);
+}
+
+.table-large tbody tr:nth-child(2n){
+  background-color: rgba(130,130,170,0.1);
+}
+
+.table-scroll tbody tr:nth-child(2n){
+  background-color: rgba(130,130,170,0.1);
+}
+
+.body-half-screen{
+  max-height: 50vh;
+}
+
+.small-col{flex-basis:10%;}