add search to monitor list in wallview

web/assets/css/bs5.wallview.css

@@ -90,13 +90,20 @@
 }
 
 #wallview-monitorList {
+    z-index: 11;
+    width: 100%;
+    overflow: auto;
+}
+
+#wallview-monitorList-container {
     position: absolute;
+    display: flex;
+    flex-flow: column;
     z-index: 11;
     width: 300px;
-    height: 80vh;
+    height: 70vh;
     background: rgba(0,0,0,0.6);
     right: 0;
     bottom: 10vh;
-    overflow: auto;
     border-radius: 10px 0 0 10px;;
 }

web/assets/js/bs5.wallview.js

@@ -2,6 +2,7 @@ var loadedMonitors = {}
 var selectedMonitors = {}
 PNotify.prototype.options.styling = "fontawesome";
 var wallViewMonitorList = $('#wallview-monitorList')
+var wallViewMonitorListContainer = $('#wallview-monitorList-container')
 var wallViewControls = $('#wallview-controls')
 var wallViewCanvas = $('#wallview-canvas')
 var wallViewInfoScreen = $('#wallview-info-screen')
@@ -106,7 +107,7 @@ function drawMonitorList(){
                     label,
                 })
             })
-            var html = allFound.map(item => `<div class="mb-1"><a class="btn d-block btn-primary btn-sm ${item.class}" ${item.attributes} href="#">${item.label}</a></div>`).join('')
+            var html = allFound.map(item => `<div class="mb-1 search-row"><a class="btn d-block btn-primary btn-sm ${item.class}" ${item.attributes} href="#">${item.label}</a></div>`).join('')
             wallViewMonitorList.html(html)
             resolve(monitors)
         })
@@ -398,7 +399,7 @@ $(document).ready(function(){
     })
     .on('click', '.wallview-toggle-monitor-list', function(e){
         e.preventDefault();
-        wallViewMonitorList.toggleClass('d-none')
+        wallViewMonitorListContainer.toggleClass('d-none')
         return false;
     })
     .on('click', '.wallview-open-monitor-group', function(e){
@@ -420,6 +421,16 @@ $(document).ready(function(){
         displayInfoScreen()
         saveLayout()
         return false;
+    })
+    .on('keyup','.search-parent .search-controller',function(){
+        var _this = this;
+        var parent = $(this).parents('.search-parent')
+        $.each(parent.find(".search-body .search-row"), function() {
+            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
+               $(this).hide();
+            else
+               $(this).show();
+        });
     });
     createWebsocket(location.origin,{
         path: websocketPath

web/pages/wallview.ejs

@@ -79,7 +79,17 @@
         </div>
         <a class="btn btn-secondary wallview-toggle-monitor-list" href="#"><%- lang.Monitors %></a>
     </div>
-    <div id="wallview-monitorList" class="d-none p-2"></div>
+    <div id="wallview-monitorList-container" class="d-none search-parent">
+        <div class="p-2">
+            <a class="btn btn-success d-block wallview-autoplace" href="#"><%- lang['Auto Placement'] %></a>
+        </div>
+        <div class="px-2 pb-2">
+            <input class="form-control search-controller" placeholder="<%- lang.Search %>">
+        </div>
+        <div id="wallview-monitorList" class="px-2 pb-2 search-body">
+
+        </div>
+    </div>
 </div>
 <!-- <script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script> -->
 <script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script>