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 {
padding: 2px;
border-spacing: 2px;
border-spacing: 0px;
}
td.zone-room-list {
padding-left: 2px;
padding-right: 2px;
text-align: center;
}
td.zone-room-list-status {
padding-left: 2px;
padding-right: 2px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
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>
<html class="ui-mobile-rendering">
<head>
<title></title>
<title>Raumserver App</title>
<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/font-awesome.css">
<link rel="stylesheet" href="css/font-awesome.css"/>
<link rel="stylesheet" href="css/raumserver_app.css"/>
<!-- The Templates -->
@@ -34,12 +35,12 @@
<div data-role="content">
<h3>Controller</h3>
<table id="player_control"></table>
<table class="player-control" id="player_control"></table>
<h3>Quick Source</h3>
<ul id="zone_source_list" data-role="listview" data-inset="true">
</ul>
<h3>Rooms</h3>
<table id="zone_room_list">
<table class="zone-room-list" id="zone_room_list">
</table>
</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) {
th = document.createElement("th");
th.className = className;
@@ -182,7 +199,7 @@ function tableHead(className, title) {
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";
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");
button.className = "ui-btn-text";
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");
button_icon.className = "fa " + awesomeIcon;
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...
roomList.innerHTML = "";
roomList.appendChild(tableHead('zone-room-list', 'Name'));
roomList.appendChild(tableHead('zone-room-list', 'On'));
roomList.appendChild(tableHead('zone-room-list', 'Zone'));
roomList.appendChild(tableHead('zone-room-list', 'Mute'));
roomList.appendChild(tableHead('zone-room-list', 'Status'));
roomList.appendChild(tableHeadRow('zone-room-list-head'));
tbody = document.createElement("tbody");
roomList.appendChild(tbody);
raumfeldRooms.forEach(function(room){
var found = false;
currentRooms.forEach(function(listedRoom) {
@@ -483,7 +497,7 @@ var AppRouter = Backbone.Router.extend({
zoneId,
"javascript:queryRaumserver('/controller/toggleMute'," + JSON.stringify(params) + ")"
);
roomList.appendChild(entry);
tbody.appendChild(entry);
//}
});