diff options
author | Robin ALEXANDER <colisee@hotmail.com> | 2022-01-31 11:38:30 +0100 |
---|---|---|
committer | Robin ALEXANDER <colisee@hotmail.com> | 2022-01-31 11:38:30 +0100 |
commit | 062066075c8da6e095f87db5521071500a044860 (patch) | |
tree | 307f04f4d956f5ce6fb255864ac917b7412fd89d | |
parent | 24565a44ae5f89d3519b0d908f29bb58a3beb808 (diff) | |
download | dabmux-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.tpl | 162 | ||||
-rw-r--r-- | gui/views/rcparam.tpl | 31 |
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> — 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> — {{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> — 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> - |