Added group and host modals and settings to Snapcast UI

This commit is contained in:
Fabio Manganiello 2019-01-08 12:54:33 +01:00
parent 382866b1a4
commit d91e494940
4 changed files with 155 additions and 5 deletions

View file

@ -82,8 +82,9 @@
transform: translateY(25%);
}
.snapcast-form > .snapcast-client-info {
max-width: 70%;
.snapcast-form > .snapcast-client-info,
.snapcast-form > .snapcast-host-info,
.snapcast-form > .snapcast-group-clients-container {
margin: 1em auto .5em auto;
padding: 2em;
background: rgba(240,240,240,0.6);
@ -91,18 +92,31 @@
border: .05em solid rgba(225,225,225,1.0)
}
.snapcast-form > .snapcast-group-clients-container {
max-width: 40em;
}
.snapcast-form > .snapcast-host-info,
.snapcast-form > .snapcast-client-info {
max-width: 70%;
}
.snapcast-form > .snapcast-host-info > .row,
.snapcast-form > .snapcast-client-info > .row {
padding: .2em;
}
.snapcast-form > .snapcast-host-info > .row:hover,
.snapcast-form > .snapcast-client-info > .row:hover {
background-color: #daf8e2 !important;
}
.snapcast-form > .snapcast-host-info * > .info-name,
.snapcast-form > .snapcast-client-info * > .info-name {
font-weight: bold;
}
.snapcast-form > .snapcast-host-info * > .info-value,
.snapcast-form > .snapcast-client-info * > .info-value {
text-align: right;
}
@ -120,3 +134,15 @@
text-align: right;
}
.snapcast-form * > .snapcast-group-clients {
max-width: 15em;
margin: auto;
text-align: right;
}
.snapcast-form * > .snapcast-group-clients * > label {
display: inline;
float: right;
width: 80%;
}

View file

@ -78,7 +78,11 @@ $(document).ready(function() {
var status = statuses[i];
var host = hosts[i];
var name = status.server.host.name || status.server.host.ip;
serverInfo[host] = status.server;
serverInfo[host] = status.server.host;
serverInfo[host].serverName = status.server.snapserver.serverName;
serverInfo[host].version = status.server.snapserver.version;
serverInfo[host].protocolVersion = status.server.snapserver.protocolVersion;
serverInfo[host].controlProtocolVersion = status.server.snapserver.controlProtocolVersion;
var $host = $('<div></div>')
.addClass('snapcast-host-container')
@ -284,17 +288,39 @@ $(document).ready(function() {
});
});
$container.on('click touch', '.snapcast-host-settings', function(evt) {
var host = $(this).parents('.snapcast-host-container').data('host');
var hostName = $(this).parents('.snapcast-host-container').data('name');
var $modal = $($(this).data('modal'));
$modal.find('.modal-header').text(hostName);
var info = serverInfo[host];
var $form = $modal.find('#snapcast-host-form');
var $info = $form.find('.snapcast-host-info');
for (var attr in info) {
$info.find('[data-bind=' + attr + ']').text(info[attr]);
}
});
$container.on('click touch', '.snapcast-group-settings', function(evt) {
var host = $(this).parents('.snapcast-host-container').data('host');
var groupId = $(this).parents('.snapcast-group-container').data('id');
var groupName = $(this).parents('.snapcast-group-container').data('name');
var $modal = $($(this).data('modal'));
var $clients = $(this).parents('.snapcast-host-container').find('.snapcast-client-container');
var $form = $modal.find('#snapcast-group-form');
var $clients = $(this).parents('.snapcast-host-container')
.find('.snapcast-client-container');
var groupClients = $(this).parents('.snapcast-group-container')
.find('.snapcast-client-container')
.map((i, client) => $(client).data('id'));
var $clientsList = $modal.find('.snapcast-group-clients');
$clientsList.html('');
$form.data('host', host);
$form.data('group', groupId);
$modal.find('.modal-header').text(groupName);
for (var client of $clients) {
@ -376,6 +402,7 @@ $(document).ready(function() {
$form.find('input').prop('disabled', true);
execute(
request,
(response) => {},
(xhr, status, error) => {
createNotification({
@ -390,6 +417,52 @@ $(document).ready(function() {
return false;
});
$('#snapcast-group-form').on('submit', function(evt) {
var $form = $(this);
var $modal = $form.parents('.modal');
var $clientsList = $form.find('.snapcast-group-clients');
var $clients = $clientsList.find('input[type=checkbox]:checked');
var host = $form.data('host');
var groupId = $form.data('group');
var clients = [];
for (var c of $clients) {
clients.push($(c).attr('name'));
}
var request = {
type: 'request',
action: 'music.snapcast.group_set_clients',
args: {
host: host,
port: window.config.snapcast_hosts[host],
group: groupId,
clients: clients,
},
};
$form.find('input').prop('disabled', true);
execute(
request,
(response) => {
redraw();
},
(xhr, status, error) => {
createNotification({
'icon': 'exclamation',
'text': status + ': ' + error,
});
},
() => {
$form.find('input').prop('disabled', false);
$modal.fadeOut();
}
);
return false;
});
};
var initEvents = function() {

View file

@ -18,6 +18,53 @@
<div class="modal-header"></div>
<div class="modal-body">
<form id="snapcast-host-form" class="snapcast-form" action="#">
<div class="row snapcast-host-info">
<div class="row">
<div class="three columns info-name">IP Address</div>
<div class="nine columns info-value" data-bind="ip"></div>
</div>
<div class="row">
<div class="three columns info-name">MAC Address</div>
<div class="nine columns info-value" data-bind="mac"></div>
</div>
<div class="row">
<div class="three columns info-name">Name</div>
<div class="nine columns info-value" data-bind="name"></div>
</div>
<div class="row">
<div class="three columns info-name">OS</div>
<div class="nine columns info-value" data-bind="os"></div>
</div>
<div class="row">
<div class="three columns info-name">Architecture</div>
<div class="nine columns info-value" data-bind="arch"></div>
</div>
<div class="row">
<div class="three columns info-name">Server Name</div>
<div class="nine columns info-value" data-bind="serverName"></div>
</div>
<div class="row">
<div class="three columns info-name">Server Version</div>
<div class="nine columns info-value" data-bind="serverVersion"></div>
</div>
<div class="row">
<div class="three columns info-name">Protocol Version</div>
<div class="nine columns info-value" data-bind="protocolVersion"></div>
</div>
<div class="row">
<div class="three columns info-name">Control Protocol Version</div>
<div class="nine columns info-value" data-bind="controlProtocolVersion"></div>
</div>
</div>
<div class="row snapcast-form-bottom">
<div class="six columns offset-by-six forms-btns">
<input type="button" class="btn-default" data-dismiss-modal="#snapcast-host-modal"
@ -34,7 +81,9 @@
<div class="modal-header"></div>
<div class="modal-body">
<form id="snapcast-group-form" class="snapcast-form" action="#">
<div class="row snapcast-group-clients-container">
<div class="row snapcast-group-clients"></div>
</div>
<div class="row snapcast-form-bottom">
<div class="six columns offset-by-six forms-btns">
<input type="button" class="btn-default" data-dismiss-modal="#snapcast-group-modal"

View file

@ -467,11 +467,13 @@ class MusicSnapcastPlugin(Plugin):
try:
sock = self._connect(host or self.host, port or self.port)
group = self._get_group(sock, group)
request = {
'id': self._get_req_id(),
'jsonrpc':'2.0',
'method': 'Group.SetClients',
'params': {
'id': group['id'],
'clients': []
}
}