lukmangrd/platypush
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added content to Snapcast group modal

Browse source
This commit is contained in:
Fabio Manganiello 2019-01-08 10:13:13 +01:00
parent fd8c3bb846
commit 382866b1a4
2 changed files with 55 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
platypush/backend/http/static/js/music.snapcast.js
View file

@ -82,16 +82,31 @@ $(document).ready(function() {
var $host = $('<div></div>') var $host = $('<div></div>')
.addClass('snapcast-host-container') .addClass('snapcast-host-container')
.addClass('snapcast-settings-btn')
.attr('data-modal', '#snapcast-host-modal')
.data('name', name) .data('name', name)
.data('host', host); .data('host', host);
var $header = $('<div></div>').addClass('row') var $hostHeader = $('<div></div>').addClass('row')
.addClass('snapcast-host-header'); .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); var $hostSettings = $('<i></i>')
$header.appendTo($host); .attr('data-modal', '#snapcast-host-modal')
.addClass('fa fa-ellipsis-v');
var $hostName = $('<span></span>')
.attr('data-modal', '#snapcast-host-modal')
.html('&nbsp; ' + name);
$hostSettings.appendTo($hostTitle);
$hostName.appendTo($hostTitle);
$hostTitle.appendTo($hostHeader);
$hostHeader.appendTo($host);
for (var group of status.groups) { for (var group of status.groups) {
var groupName = group.name || group.stream_id; var groupName = group.name || group.stream_id;
@ -274,8 +289,27 @@ $(document).ready(function() {
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 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); $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) { $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); $modal.find('form').find('[name=delete]').prop('checked', false);
}; };
console.log($modal);
clearModal(); clearModal();
}); });

17
platypush/backend/http/templates/plugins/music.snapcast.html
View file

@ -13,11 +13,28 @@
} }
</script> </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 id="snapcast-group-modal" class="modal snapcast-modal">
<div class="modal-container"> <div class="modal-container">
<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-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"