layout changes to webclient

This commit is contained in:
Robert Schumann
2018-01-02 17:21:00 +01:00
parent 7954a48577
commit 7e6bb584c4
3 changed files with 48 additions and 18 deletions

View File

@@ -10,19 +10,34 @@ and open the template in the editor.
th.zone-room-list { th.zone-room-list {
padding: 2px; padding: 2px;
border-spacing: 2px; border-spacing: 0px;
} }
td.zone-room-list { td.zone-room-list {
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
text-align: center; text-align: center;
} }
td.zone-room-list-status { td.zone-room-list-status {
padding-left: 2px; padding-left: 4px;
padding-right: 2px; padding-right: 4px;
text-align: center; text-align: center;
font-style: italic; font-style: italic;
} }
tr.zone-room-list {
background: #D0D0D0; .zone-room-list-head {
background: #E2E2E2;
}
table.zone-room-list {
border-radius:8px;
border:1px solid #CCCCCC;
background: #efefef;
}
table.player-control {
border-radius:8px;
border:1px solid #CCCCCC;
background: #efefef;
} }

View File

@@ -1,10 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="ui-mobile-rendering"> <html class="ui-mobile-rendering">
<head> <head>
<title></title> <title>Raumserver App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/> <link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
<link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/font-awesome.css"/>
<link rel="stylesheet" href="css/raumserver_app.css"/> <link rel="stylesheet" href="css/raumserver_app.css"/>
<!-- The Templates --> <!-- The Templates -->
@@ -34,12 +35,12 @@
<div data-role="content"> <div data-role="content">
<h3>Controller</h3> <h3>Controller</h3>
<table id="player_control"></table> <table class="player-control" id="player_control"></table>
<h3>Quick Source</h3> <h3>Quick Source</h3>
<ul id="zone_source_list" data-role="listview" data-inset="true"> <ul id="zone_source_list" data-role="listview" data-inset="true">
</ul> </ul>
<h3>Rooms</h3> <h3>Rooms</h3>
<table id="zone_room_list"> <table class="zone-room-list" id="zone_room_list">
</table> </table>
</div> </div>

View File

@@ -175,6 +175,23 @@ window.RoomView = Backbone.View.extend({
} }
}); });
function tableHeadRow(className) {
head = document.createElement("thead");
head.classname = className;
row = document.createElement("tr");
row.className = className;
row.appendChild(tableHead('zone-room-list', 'Name'));
row.appendChild(tableHead('zone-room-list', 'On'));
row.appendChild(tableHead('zone-room-list', 'Zone'));
row.appendChild(tableHead('zone-room-list', 'Mute'));
row.appendChild(tableHead('zone-room-list', 'Status'));
head.appendChild(row);
return head;
}
function tableHead(className, title) { function tableHead(className, title) {
th = document.createElement("th"); th = document.createElement("th");
th.className = className; th.className = className;
@@ -182,7 +199,7 @@ function tableHead(className, title) {
return th; return th;
} }
function tableEntry(name, id, online, roomZoneId, isMute, transportState, currentZoneId, event) { function tableEntry(name, id, online, roomZoneId, isMute, transportState = "n/a", currentZoneId, event) {
online_icon = online ? "fa-check-circle-o" : "fa-circle-o"; online_icon = online ? "fa-check-circle-o" : "fa-circle-o";
toggle_zone_icon = (roomZoneId === currentZoneId) ? "fa-toggle-on" : "fa-toggle-off"; toggle_zone_icon = (roomZoneId === currentZoneId) ? "fa-toggle-on" : "fa-toggle-off";
@@ -270,7 +287,7 @@ function playerButton(awesomeIcon, raumfeldAction, raumfeldValues = {}) {
var button = document.createElement("td"); var button = document.createElement("td");
button.className = "ui-btn-text"; button.className = "ui-btn-text";
var button_style = document.createElement("button"); var button_style = document.createElement("button");
button_style.setAttribute("style", "font-size:110%"); button_style.setAttribute("style", "font-size:108%");
var button_icon = document.createElement("i"); var button_icon = document.createElement("i");
button_icon.className = "fa " + awesomeIcon; button_icon.className = "fa " + awesomeIcon;
button_icon.setAttribute("onclick","javascript:queryRaumserver('/controller/"+raumfeldAction+"',"+ JSON.stringify(raumfeldValues) +")"); button_icon.setAttribute("onclick","javascript:queryRaumserver('/controller/"+raumfeldAction+"',"+ JSON.stringify(raumfeldValues) +")");
@@ -458,12 +475,9 @@ var AppRouter = Backbone.Router.extend({
// XXX: need smarter update function here... // XXX: need smarter update function here...
roomList.innerHTML = ""; roomList.innerHTML = "";
roomList.appendChild(tableHead('zone-room-list', 'Name')); roomList.appendChild(tableHeadRow('zone-room-list-head'));
roomList.appendChild(tableHead('zone-room-list', 'On')); tbody = document.createElement("tbody");
roomList.appendChild(tableHead('zone-room-list', 'Zone')); roomList.appendChild(tbody);
roomList.appendChild(tableHead('zone-room-list', 'Mute'));
roomList.appendChild(tableHead('zone-room-list', 'Status'));
raumfeldRooms.forEach(function(room){ raumfeldRooms.forEach(function(room){
var found = false; var found = false;
currentRooms.forEach(function(listedRoom) { currentRooms.forEach(function(listedRoom) {
@@ -483,7 +497,7 @@ var AppRouter = Backbone.Router.extend({
zoneId, zoneId,
"javascript:queryRaumserver('/controller/toggleMute'," + JSON.stringify(params) + ")" "javascript:queryRaumserver('/controller/toggleMute'," + JSON.stringify(params) + ")"
); );
roomList.appendChild(entry); tbody.appendChild(entry);
//} //}
}); });