From 382866b1a4c8ac9b90068311403f3bb56584ade9 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Tue, 8 Jan 2019 10:13:13 +0100
Subject: [PATCH] Added content to Snapcast group modal

---
 .../backend/http/static/js/music.snapcast.js  | 43 ++++++++++++++++---
 .../templates/plugins/music.snapcast.html     | 17 ++++++++
 2 files changed, 55 insertions(+), 5 deletions(-)

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('&nbsp; ' + 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"