diff --git a/platypush/backend/http/static/js/music.snapcast.js b/platypush/backend/http/static/js/music.snapcast.js index d87de155e..90007b90c 100644 --- a/platypush/backend/http/static/js/music.snapcast.js +++ b/platypush/backend/http/static/js/music.snapcast.js @@ -82,16 +82,31 @@ $(document).ready(function() { var $host = $('<div></div>') .addClass('snapcast-host-container') + .addClass('snapcast-settings-btn') + .attr('data-modal', '#snapcast-host-modal') .data('name', name) .data('host', host); - var $header = $('<div></div>').addClass('row') + var $hostHeader = $('<div></div>').addClass('row') .addClass('snapcast-host-header'); - var $title = $('<h1></h1>').text(name); + var $hostTitle = $('<h1></h1>') + .addClass('snapcast-host-settings') + .addClass('snapcast-settings-btn') + .attr('data-modal', '#snapcast-host-modal'); - $title.appendTo($header); - $header.appendTo($host); + var $hostSettings = $('<i></i>') + .attr('data-modal', '#snapcast-host-modal') + .addClass('fa fa-ellipsis-v'); + + var $hostName = $('<span></span>') + .attr('data-modal', '#snapcast-host-modal') + .html(' ' + name); + + $hostSettings.appendTo($hostTitle); + $hostName.appendTo($hostTitle); + $hostTitle.appendTo($hostHeader); + $hostHeader.appendTo($host); for (var group of status.groups) { var groupName = group.name || group.stream_id; @@ -274,8 +289,27 @@ $(document).ready(function() { 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 groupClients = $(this).parents('.snapcast-group-container') + .find('.snapcast-client-container') + .map((i, client) => $(client).data('id')); + var $clientsList = $modal.find('.snapcast-group-clients'); $modal.find('.modal-header').text(groupName); + + for (var client of $clients) { + var $row = $('<div></div>').addClass('row'); + var $input = $('<input></input>').attr('type', 'checkbox') + .attr('name', $(client).data('id')) + .prop('checked', $.inArray($(client).data('id'), groupClients) >= 0); + var $label = $('<label></label>') + .attr('for', $(client).data('id')) + .text($(client).data('name')); + + $input.appendTo($row); + $label.appendTo($row); + $row.appendTo($clientsList); + } }); $container.on('click touch', '.snapcast-client-settings', function(evt) { @@ -305,7 +339,6 @@ $(document).ready(function() { $modal.find('form').find('[name=delete]').prop('checked', false); }; - console.log($modal); clearModal(); }); diff --git a/platypush/backend/http/templates/plugins/music.snapcast.html b/platypush/backend/http/templates/plugins/music.snapcast.html index 7b9105b04..94881a047 100644 --- a/platypush/backend/http/templates/plugins/music.snapcast.html +++ b/platypush/backend/http/templates/plugins/music.snapcast.html @@ -13,11 +13,28 @@ } </script> +<div id="snapcast-host-modal" class="modal snapcast-modal"> + <div class="modal-container"> + <div class="modal-header"></div> + <div class="modal-body"> + <form id="snapcast-host-form" class="snapcast-form" action="#"> + <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" + value="Close"> + </div> + </div> + </form> + </div> + </div> +</div> + <div id="snapcast-group-modal" class="modal snapcast-modal"> <div class="modal-container"> <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-form-bottom"> <div class="six columns offset-by-six forms-btns"> <input type="button" class="btn-default" data-dismiss-modal="#snapcast-group-modal"