prettify selecting Input Map selection

definitions/en_CA.js

@@ -6525,11 +6525,6 @@ module.exports = function(s,config,lang){
                             }
                         ],
                      },
-                     {
-                         "fieldType": "div",
-                         "divContent": `<div class="choices"></div>`,
-
-                     },
                      {
                         "field": lang["Stream Type"],
                         "name": `channel-detail="stream_type"`,

languages/en_CA.json

@@ -514,6 +514,7 @@
    "Input Map": "Input Map",
    "Input": "Input",
    "Input Feed": "Input Feed",
+   "Input Feeds Selected": "Input Feed Selected",
    "Timezone": "Timezone",
    "Timezone Offset": "Timezone Offset",
    "Stream": "Stream",

web/assets/js/bs5.monitorSettings.js

@@ -418,19 +418,54 @@ function drawStreamChannelHtml(options){
     monitorStreamChannels.find('.stream-channel').last().find('[channel-detail="stream_vcodec"]').change()
     return tempID;
 }
+function buildMapSelectorOptionsBasedOnAddedMaps(){
+    var baseOptionSet = definitions['Monitor Settings'].blocks.Input.info.find((item) => {return item.name === 'detail=primary_input'}).possible
+    var newOptGroup = [baseOptionSet]
+    var addedInputMaps = monitorEditorWindow.find('.input-map')
+    function replaceMap(string,mapNumber){
+        var newString = string.split(':')
+        newString[0] = `${mapNumber}`
+        return newString.join(':')
+    }
+    function replaceMapInName(string,mapNumber){
+        var newString = string.split('(')
+        newString[1] = replaceMap(newString[1],mapNumber)
+        return newString.join('(')
+    }
+    $.each(addedInputMaps,function(n){
+        var mapNumber = n + 1
+        var newOptionSet = []
+        $.each(baseOptionSet,function(nn,option){
+            newOptionSet.push({
+                "name": replaceMapInName(option.name,mapNumber),
+                "value": replaceMap(option.value,mapNumber)
+            })
+        })
+        newOptGroup[mapNumber] = newOptionSet
+    })
+    return newOptGroup
+}
 function drawInputMapSelectorHtml(options,parent){
     if(!options.map)options.map = '';
-    var html = `<div class="form-group map-row">
-      <label><div><span>${lang['Map']}</span></div>
-          <div>
-          <div class="input-group input-group-sm">
-            <input class="form-control" map-input="map" value="${options.map}" placeholder="0">
-            <div class="input-group-btn">
-                <a class="btn btn-danger delete_map_row">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a>
-            </div>
-          </div>
-          </div>
-      </label>
+    var availableInputMapSelections = buildMapSelectorOptionsBasedOnAddedMaps()
+    var html = `<div class="form-group map-row d-flex flex-row">
+        <div class="flex-grow-1">
+            <select class="form-control form-control-sm" map-input="map">`
+                    $.each(availableInputMapSelections,function(n,optgroup){
+                        html += `<optgroup label="${lang['Map']} ${n}">`
+                            $.each(optgroup,function(nn,option){
+                                html += createOptionHtml({
+                                    label: option.name,
+                                    value: option.value,
+                                })
+                            })
+                        html += `</optgroup>`
+                    })
+            html += `</select>
+        </div>
+        <div>
+            <a class="btn btn-danger btn-sm delete_map_row">&nbsp;<i class="fa fa-trash-o"></i>&nbsp;</a>
+        </div>
     </div>`
     parent.prepend(html)
 }

web/pages/blocks/home/fieldBuilders.ejs

@@ -73,13 +73,16 @@ drawBlock = function(monitorSettings){
       </h4>
       <div class="box-wrapper">
   <% if(monitorSettings['input-mapping']){ %>
-      <div class="form-group-group forestgreen" style="display:none" input-mapping="<%- monitorSettings['input-mapping'] %>">
-          <h4><%-lang['Input Feed']%>
-              <div class="pull-right">
-                  <a class="btn btn-success btn-xs add_map_row"><i class="fa fa-plus-square-o"></i></a>
+      <div class="form-group-group btn-default card shadow mb-2" style="display:none" input-mapping="<%- monitorSettings['input-mapping'] %>">
+          <h5 class="card-body d-flex flex-row m-0">
+              <div class="flex-grow-1">
+                  <%-lang['Input Feeds Selected']%>
               </div>
-          </h4>
-          <div class="choices"></div>
+              <div>
+                  <a class="btn btn-success btn-sm add_map_row"><i class="fa fa-plus-square-o"></i></a>
+              </div>
+          </h5>
+          <div class="card-footer pb-0 choices"></div>
       </div>
   <% } %>
   <% if(monitorSettings.blockquote){ %>