Added group and host modals and settings to Snapcast UI
This commit is contained in:
Fabio Manganiello
parent
382866b1a4
commit
d91e494940
4 changed files with 155 additions and 5 deletions
|
|
@ -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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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"></div>
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -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': []
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue