From 84945cabc4fba20be3d3020d1a9fdf960d7d603e Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 10 Jun 2016 13:34:08 -0400
Subject: [PATCH] update channel mapper

---
 .../emby-button/emby-button.css               | 10 ++--
 .../components/channelmapper/channelmapper.js | 49 +++++++++++++++----
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
index ddb0d9ef9..6b7628567 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css
@@ -54,6 +54,7 @@
         [is="emby-button"].fab i {
             height: 4.4vh;
             width: 4.4vh;
+            font-size: 4.4vh;
             vertical-align: middle;
         }
 
@@ -62,16 +63,17 @@
     }
 
     [is="emby-button"].fab.mini {
+        padding: .4em;
         min-width: 40px !important;
         min-height: 40px !important;
         height: 3.3vh !important;
         width: 3.3vh !important;
-        padding: .4em;
     }
 
         [is="emby-button"].fab.mini i {
             height: 2.6vh !important;
             width: 2.6vh !important;
+            font-size: 2.6vh !important;
         }
 
     [is="emby-button"].fab iron-icon {
@@ -80,10 +82,6 @@
         vertical-align: middle;
     }
 
-    [is="emby-button"].fab i {
-        vertical-align: middle;
-    }
-
     [is="emby-button"].block {
         display: block;
         align-items: center;
@@ -105,7 +103,7 @@
         margin-left: .5em;
     }
 
-[is=emby-button].autoSize {
+[is=emby-button].autoSize, [is=emby-button].autoSize.fab {
     width: auto !important;
     height: auto !important;
 }
diff --git a/dashboard-ui/components/channelmapper/channelmapper.js b/dashboard-ui/components/channelmapper/channelmapper.js
index b442bb4ab..4b0936ecd 100644
--- a/dashboard-ui/components/channelmapper/channelmapper.js
+++ b/dashboard-ui/components/channelmapper/channelmapper.js
@@ -1,4 +1,4 @@
-define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'emby-button', 'listViewStyle', 'material-icons'],
+define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-button', 'listViewStyle', 'material-icons'],
 function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
 
     return function (options) {
@@ -20,9 +20,31 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
             return elem;
         }
 
-        function mapChannel(tunerChannelNumber, providerChannelNumber) {
+        function mapChannel(button, tunerChannelNumber, providerChannelNumber) {
 
-            alert('coming soon.');
+            loading.show();
+
+            var providerId = options.providerId;
+            var apiClient = connectionManager.getApiClient(options.serverId);
+
+            apiClient.ajax({
+                type: 'POST',
+                url: ApiClient.getUrl('LiveTv/ChannelMappings'),
+                data: {
+                    providerId: providerId,
+                    tunerChannelNumber: tunerChannelNumber,
+                    providerChannelNumber: providerChannelNumber
+                },
+                dataType: 'json'
+
+            }).then(function (mapping) {
+
+                var listItem = parentWithClass(button, 'listItem');
+
+                button.setAttribute('data-providernumber', mapping.ProviderChannelNumber);
+                listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
+                loading.hide();
+            });
         }
 
         function onChannelsElementClick(e) {
@@ -33,14 +55,15 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
                 return;
             }
 
-            var channelNumber = btnMap.getAttribute('data-number');
+            var tunerChannelNumber = btnMap.getAttribute('data-number');
+            var providerChannelNumber = btnMap.getAttribute('data-providernumber');
 
             var menuItems = currentMappingOptions.ProviderChannels.map(function (m) {
 
                 return {
                     name: m.Name,
                     id: m.Id,
-                    selected: m.Id == channelNumber
+                    selected: m.Id.toLowerCase() == providerChannelNumber.toLowerCase()
                 };
             });
 
@@ -49,24 +72,30 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
                 items: menuItems
 
             }).then(function (newChannelNumber) {
-                mapChannel(channelNumber, newChannelNumber);
+                mapChannel(btnMap, tunerChannelNumber, newChannelNumber);
             });
         }
 
         function getChannelMappingOptions(serverId, providerId) {
 
-            return connectionManager.getApiClient(serverId).getJSON(ApiClient.getUrl('LiveTv/ChannelMappingOptions', {
+            var apiClient = connectionManager.getApiClient(serverId);
+            return apiClient.getJSON(apiClient.getUrl('LiveTv/ChannelMappingOptions', {
                 providerId: providerId
             }));
         }
 
+        function getMappingSecondaryName(mapping, providerName) {
+
+            return (mapping.ProviderChannelNumber || '') + ' ' + (mapping.ProviderChannelName || '') + ' - ' + providerName;
+        }
+
         function getTunerChannelHtml(channel, providerName) {
 
             var html = '';
 
             html += '<div class="listItem">';
 
-            html += '<button is="emby-button" type="button" class="fab listItemIcon mini" style="background:#52B54B;"><iron-icon icon="dvr"></iron-icon></button>';
+            html += '<button is="emby-button" type="button" class="fab autoSize mini" style="background:#52B54B;"><i class="md-icon listItemIcon">dvr</i></button>';
 
             html += '<div class="listItemBody">';
             html += '<h3>';
@@ -75,13 +104,13 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
 
             if (channel.ProviderChannelNumber || channel.ProviderChannelName) {
                 html += '<div class="secondary">';
-                html += (channel.ProviderChannelNumber || '') + ' ' + (channel.ProviderChannelName || '') + ' - ' + providerName;
+                html += getMappingSecondaryName(channel, providerName);
                 html += '</div>';
             }
 
             html += '</div>';
 
-            html += '<button class="btnMap" is="paper-icon-button-light" type="button" data-number="' + channel.Number + '"><iron-icon icon="mode-edit"></iron-icon></button>';
+            html += '<button class="btnMap" is="paper-icon-button-light" type="button" data-number="' + channel.Number + '" data-providernumber="' + channel.ProviderChannelNumber + '"><iron-icon icon="mode-edit"></iron-icon></button>';
 
             html += '</div>';