aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRobin ALEXANDER <colisee@hotmail.com>2022-01-31 11:38:30 +0100
committerRobin ALEXANDER <colisee@hotmail.com>2022-01-31 11:38:30 +0100
commit062066075c8da6e095f87db5521071500a044860 (patch)
tree307f04f4d956f5ce6fb255864ac917b7412fd89d
parent24565a44ae5f89d3519b0d908f29bb58a3beb808 (diff)
downloaddabmux-062066075c8da6e095f87db5521071500a044860.tar.gz
dabmux-062066075c8da6e095f87db5521071500a044860.tar.bz2
dabmux-062066075c8da6e095f87db5521071500a044860.zip
web design review
Switching from static/style.css to W3.CSS for templates: + index.tpl + rcparam.tpl
-rw-r--r--gui/views/index.tpl162
-rw-r--r--gui/views/rcparam.tpl31
2 files changed, 112 insertions, 81 deletions
diff --git a/gui/views/index.tpl b/gui/views/index.tpl
index 4538df8..479f734 100644
--- a/gui/views/index.tpl
+++ b/gui/views/index.tpl
@@ -1,73 +1,101 @@
<!DOCTYPE html>
-<html><head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<html>
+ <head>
<title>ODR-DabMux Configuration</title>
- <link rel="stylesheet" href="static/style.css" type="text/css" media="screen" charset="utf-8"/>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src="static/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="static/script.js"></script>
-</head>
-<body>
- <h1>Configuration for {{version}}</h1>
-
- <ul id="info-nav">
- <li><a href="#general">General Options</a></li>
- <li><a href="#servicelist">Services</a></li>
- <li><a href="#subchannels">Subchannels</a></li>
- <li><a href="#components">Components</a></li>
- <li><a href="#rcmodules">RC Modules</a></li>
- </ul>
-
- <div id="info">
- <div id="general"><div class="cadre">
- <h2>General Multiplex Options</h2>
- <ul>
- <li>Number of frames to encode: {{g.nbframes}}</li>
- <li>Statistics server port: {{g.statsserverport}}</li>
- <li>Write SCCA field: {{g.writescca}}</li>
- <li>Write TIST timestamp: {{g.tist}}</li>
- <li>DAB Mode: {{g.dabmode}}</li>
- <li>Log to syslog: {{g.syslog}}</li>
- </ul>
- </div></div>
- <div id="servicelist"><div class="cadre">
- <h2>Services</h2>
- <ul>
- % for s in services:
- <li>{{s.name}}: <i>{{s.label}} ({{s.shortlabel}})</i> &mdash; id = {{s.id}}</li>
- % end
- </ul>
- </div></div>
- <div id="subchannels"><div class="cadre">
- <h2>Subchannels</h2>
- <ul>
- % for s in subchannels:
- <li>{{s.name}}: <i>{{s.type}}</i> &mdash; {{s.inputfile}}; {{s.bitrate}}kbps</li>
- % end
- </ul>
- </div></div>
- <div id="components"><div class="cadre">
- <h2>Components</h2>
- <ul>
- % for s in components:
- <li>{{s.name}}: <i>{{s.label}} ({{s.shortlabel}})</i> &mdash; service {{s.service}}; subchannel {{s.subchannel}}; figtype {{s.figtype}}</li>
- % end
- </ul>
- </div></div>
- <div id="rcmodules"><div class="cadre">
- <h2>RC Modules</h2>
- <ul>
- % for m in rcmodules:
- <li>{{m.name}}
- <ul>
- % for p in m.parameters:
- <li><a href="/rc/{{m.name}}/{{p.param}}">{{p.param}}</a> : {{p.value}}</li>
- % end
- </ul>
- </li>
- % end
- </ul>
- </div></div>
+ </head>
+ <body>
+ <div class="w3-top w3-bar w3-blue-grey">
+ <a href="#general" class="w3-bar-item w3-button w3-mobile">General Options</a>
+ <a href="#servicelist" class="w3-bar-item w3-button w3-mobile">Services</a>
+ <a href="#subchannels" class="w3-bar-item w3-button w3-mobile">Subchannels</a>
+ <a href="#components" class="w3-bar-item w3-button w3-mobile">Components</a>
+ <a href="#rcmodules" class="w3-bar-item w3-button w3-mobile">RC Modules</a>
</div>
-</body>
-</html>
+ <br /><br />
+ <div class="w3-container">
+ <ul id="general" class="w3-card-4 w3-ul">
+ <li class="w3-blue-grey"><h3>General Multiplex Options</h3></li>
+ <li>Number of frames to encode: {{g.nbframes}}</li>
+ <li>Statistics server port: {{g.statsserverport}}</li>
+ <li>Write SCCA field: {{g.writescca}}</li>
+ <li>Write TIST timestamp: {{g.tist}}</li>
+ <li>DAB Mode: {{g.dabmode}}</li>
+ <li>Log to syslog: {{g.syslog}}</li>
+ </ul>
+ <p />
+ <table id="servicelist" class="w3-card-4 w3-table w3-striped w3-bordered">
+ <tr class="w3-blue-grey">
+ <th>Service</th>
+ <th>Id</th>
+ <th>Label</th>
+ <th>Short label</th>
+ </tr>
+ % for s in services:
+ <tr>
+ <td>{{s.name}}</td>
+ <td>{{s.id}}</td>
+ <td>{{s.label}}</td>
+ <td>{{s.shortlabel}}</td>
+ </tr>
+ % end
+ </table>
+ <p />
+ <table id="subchannels" class="w3-card-4 w3-table w3-striped w3-bordered">
+ <tr class="w3-blue-grey">
+ <th>Sub channel</th>
+ <th>Type</th>
+ <th>Input file</th>
+ <th>Bit rate (Kbps)</th>
+ </tr>
+ % for s in subchannels:
+ <tr>
+ <td>{{s.name}}</td>
+ <td>{{s.type}}</td>
+ <td>{{s.inputfile}}</td>
+ <td>{{s.bitrate}}</td>
+ </tr>
+ % end
+ </table>
+ <p />
+ <table id="components" class="w3-card-4 w3-table w3-striped w3-bordered">
+ <tr class="w3-blue-grey">
+ <th>Component</th>
+ <th>Label</th>
+ <th>Short label</th>
+ <th>Service</th>
+ <th>Sub-channel</th>
+ <th>Fig type</th>
+ </tr>
+ % for s in components:
+ <tr>
+ <td>{{s.name}}</td>
+ <td>{{s.label}}</td>
+ <td>{{s.shortlabel}}</td>
+ <td>{{s.service}}</td>
+ <td>{{s.subchannel}}</td>
+ <td>{{s.figtype}}</td>
+ </tr>
+ % end
+ </table>
+ <p />
+ <ul id="rcmodules" class="w3-card w3-ul">
+ <li class="w3-blue-grey"><h3>RC Modules</h3></li>
+ % for m in rcmodules:
+ <li class="w3-light-grey"><b>{{m.name}}</b>
+ <ul class="w3-ul">
+ % for p in m.parameters:
+ <li class="w3-white"><a href="/rc/{{m.name}}/{{p.param}}" class="w3-hover-blue-grey">{{p.param}}</a> : {{p.value}}</li>
+ % end
+ </ul>
+ </li>
+ % end
+ </ul>
+ </div>
+ </body>
+</html> \ No newline at end of file
diff --git a/gui/views/rcparam.tpl b/gui/views/rcparam.tpl
index 5ae0e9e..3bf3e5c 100644
--- a/gui/views/rcparam.tpl
+++ b/gui/views/rcparam.tpl
@@ -1,22 +1,25 @@
<!DOCTYPE html>
-<html><head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<html>
+ <head>
<title>ODR-DabMux Configuration</title>
- <link rel="stylesheet" href="/static/style.css" type="text/css" media="screen" charset="utf-8"/>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src="/static/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/intercooler-1.0.1.min.js"></script>
-</head>
-<body>
- <h1>Remote-Control of module {{module}}</h1>
+ </head>
- <form ic-on-error="alert(str)" ic-post-to="/rc/{{module}}/{{param}}">
- <div class="form-group">
- <label>Parameter <i>{{param}}</i> value: </label>
- <input class="form-control" name="newvalue" type="text" value="{{value}}">
+ <body>
+ <h1 class="w3-container w3-blue-grey">Remote-Control of module {{module}}</h1>
+ <div class="w3-container">
+ <form class="w3-container w3-card-4" ic-on-error="alert(str)" ic-post-to="/rc/{{module}}/{{param}}">
+ <p />
+ <label>Parameter <b>{{param}}</b></label>
+ <input name="newvalue" type="text" value="{{value}}">
+ <p />
+ <button class="w3-button w3-blue-grey">Update</button>
+ </form>
</div>
- <button class="btn btn-default">Update value</button>
- </form>
+ </body>
-</body>
</html>
-