Added group and host modals and settings to Snapcast UI
This commit is contained in:
parent
382866b1a4
commit
d91e494940
4 changed files with 155 additions and 5 deletions
|
@ -82,8 +82,9 @@
|
||||||
transform: translateY(25%);
|
transform: translateY(25%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.snapcast-form > .snapcast-client-info {
|
.snapcast-form > .snapcast-client-info,
|
||||||
max-width: 70%;
|
.snapcast-form > .snapcast-host-info,
|
||||||
|
.snapcast-form > .snapcast-group-clients-container {
|
||||||
margin: 1em auto .5em auto;
|
margin: 1em auto .5em auto;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
background: rgba(240,240,240,0.6);
|
background: rgba(240,240,240,0.6);
|
||||||
|
@ -91,18 +92,31 @@
|
||||||
border: .05em solid rgba(225,225,225,1.0)
|
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 {
|
.snapcast-form > .snapcast-client-info > .row {
|
||||||
padding: .2em;
|
padding: .2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snapcast-form > .snapcast-host-info > .row:hover,
|
||||||
.snapcast-form > .snapcast-client-info > .row:hover {
|
.snapcast-form > .snapcast-client-info > .row:hover {
|
||||||
background-color: #daf8e2 !important;
|
background-color: #daf8e2 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snapcast-form > .snapcast-host-info * > .info-name,
|
||||||
.snapcast-form > .snapcast-client-info * > .info-name {
|
.snapcast-form > .snapcast-client-info * > .info-name {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snapcast-form > .snapcast-host-info * > .info-value,
|
||||||
.snapcast-form > .snapcast-client-info * > .info-value {
|
.snapcast-form > .snapcast-client-info * > .info-value {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
@ -120,3 +134,15 @@
|
||||||
text-align: right;
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -78,7 +78,11 @@ $(document).ready(function() {
|
||||||
var status = statuses[i];
|
var status = statuses[i];
|
||||||
var host = hosts[i];
|
var host = hosts[i];
|
||||||
var name = status.server.host.name || status.server.host.ip;
|
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>')
|
var $host = $('<div></div>')
|
||||||
.addClass('snapcast-host-container')
|
.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) {
|
$container.on('click touch', '.snapcast-group-settings', function(evt) {
|
||||||
var host = $(this).parents('.snapcast-host-container').data('host');
|
var host = $(this).parents('.snapcast-host-container').data('host');
|
||||||
var groupId = $(this).parents('.snapcast-group-container').data('id');
|
var groupId = $(this).parents('.snapcast-group-container').data('id');
|
||||||
var groupName = $(this).parents('.snapcast-group-container').data('name');
|
var groupName = $(this).parents('.snapcast-group-container').data('name');
|
||||||
var $modal = $($(this).data('modal'));
|
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')
|
var groupClients = $(this).parents('.snapcast-group-container')
|
||||||
.find('.snapcast-client-container')
|
.find('.snapcast-client-container')
|
||||||
.map((i, client) => $(client).data('id'));
|
.map((i, client) => $(client).data('id'));
|
||||||
|
|
||||||
var $clientsList = $modal.find('.snapcast-group-clients');
|
var $clientsList = $modal.find('.snapcast-group-clients');
|
||||||
|
$clientsList.html('');
|
||||||
|
$form.data('host', host);
|
||||||
|
$form.data('group', groupId);
|
||||||
$modal.find('.modal-header').text(groupName);
|
$modal.find('.modal-header').text(groupName);
|
||||||
|
|
||||||
for (var client of $clients) {
|
for (var client of $clients) {
|
||||||
|
@ -376,6 +402,7 @@ $(document).ready(function() {
|
||||||
$form.find('input').prop('disabled', true);
|
$form.find('input').prop('disabled', true);
|
||||||
|
|
||||||
execute(
|
execute(
|
||||||
|
request,
|
||||||
(response) => {},
|
(response) => {},
|
||||||
(xhr, status, error) => {
|
(xhr, status, error) => {
|
||||||
createNotification({
|
createNotification({
|
||||||
|
@ -390,6 +417,52 @@ $(document).ready(function() {
|
||||||
|
|
||||||
return false;
|
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() {
|
var initEvents = function() {
|
||||||
|
|
|
@ -18,6 +18,53 @@
|
||||||
<div class="modal-header"></div>
|
<div class="modal-header"></div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form id="snapcast-host-form" class="snapcast-form" action="#">
|
<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="row snapcast-form-bottom">
|
||||||
<div class="six columns offset-by-six forms-btns">
|
<div class="six columns offset-by-six forms-btns">
|
||||||
<input type="button" class="btn-default" data-dismiss-modal="#snapcast-host-modal"
|
<input type="button" class="btn-default" data-dismiss-modal="#snapcast-host-modal"
|
||||||
|
@ -34,7 +81,9 @@
|
||||||
<div class="modal-header"></div>
|
<div class="modal-header"></div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form id="snapcast-group-form" class="snapcast-form" action="#">
|
<form id="snapcast-group-form" class="snapcast-form" action="#">
|
||||||
<div class="row snapcast-group-clients"></div>
|
<div class="row snapcast-group-clients-container">
|
||||||
|
<div class="row snapcast-group-clients"></div>
|
||||||
|
</div>
|
||||||
<div class="row snapcast-form-bottom">
|
<div class="row snapcast-form-bottom">
|
||||||
<div class="six columns offset-by-six forms-btns">
|
<div class="six columns offset-by-six forms-btns">
|
||||||
<input type="button" class="btn-default" data-dismiss-modal="#snapcast-group-modal"
|
<input type="button" class="btn-default" data-dismiss-modal="#snapcast-group-modal"
|
||||||
|
|
|
@ -467,11 +467,13 @@ class MusicSnapcastPlugin(Plugin):
|
||||||
|
|
||||||
try:
|
try:
|
||||||
sock = self._connect(host or self.host, port or self.port)
|
sock = self._connect(host or self.host, port or self.port)
|
||||||
|
group = self._get_group(sock, group)
|
||||||
request = {
|
request = {
|
||||||
'id': self._get_req_id(),
|
'id': self._get_req_id(),
|
||||||
'jsonrpc':'2.0',
|
'jsonrpc':'2.0',
|
||||||
'method': 'Group.SetClients',
|
'method': 'Group.SetClients',
|
||||||
'params': {
|
'params': {
|
||||||
|
'id': group['id'],
|
||||||
'clients': []
|
'clients': []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue