diff --git a/platypush/backend/http/static/css/music.snapcast.css b/platypush/backend/http/static/css/music.snapcast.css index f981db904f..6debfd8d2b 100644 --- a/platypush/backend/http/static/css/music.snapcast.css +++ b/platypush/backend/http/static/css/music.snapcast.css @@ -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%; + } + diff --git a/platypush/backend/http/static/js/music.snapcast.js b/platypush/backend/http/static/js/music.snapcast.js index 90007b90cc..e11d663ed2 100644 --- a/platypush/backend/http/static/js/music.snapcast.js +++ b/platypush/backend/http/static/js/music.snapcast.js @@ -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 = $('
') .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() { diff --git a/platypush/backend/http/templates/plugins/music.snapcast.html b/platypush/backend/http/templates/plugins/music.snapcast.html index 94881a0474..e0faa2c7d0 100644 --- a/platypush/backend/http/templates/plugins/music.snapcast.html +++ b/platypush/backend/http/templates/plugins/music.snapcast.html @@ -18,6 +18,53 @@