Added group and host modals and settings to Snapcast UI

platypush/backend/http/static/css/music.snapcast.css

@@ -82,8 +82,9 @@
         transform: translateY(25%);
     }
 
-    .snapcast-form > .snapcast-client-info {
+    .snapcast-form > .snapcast-client-info,
-        max-width: 70%;
+    .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%;
+                }
+

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 = $('<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() {

platypush/backend/http/templates/plugins/music.snapcast.html

@@ -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"

platypush/plugins/music/snapcast.py

@@ -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': []
                 }
             }