ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add search to monitor list in wallview

wallview-fixes
Moe 2025-01-26 14:08:42 -08:00
parent 234d3ab764
commit 38c87cd462
3 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/assets/css/bs5.wallview.css
View File

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

15
web/assets/js/bs5.wallview.js
View File

@ -2,6 +2,7 @@ var loadedMonitors = {}
var selectedMonitors = {} var selectedMonitors = {}
PNotify.prototype.options.styling = "fontawesome"; PNotify.prototype.options.styling = "fontawesome";
var wallViewMonitorList = $('#wallview-monitorList') var wallViewMonitorList = $('#wallview-monitorList')
var wallViewMonitorListContainer = $('#wallview-monitorList-container')
var wallViewControls = $('#wallview-controls') var wallViewControls = $('#wallview-controls')
var wallViewCanvas = $('#wallview-canvas') var wallViewCanvas = $('#wallview-canvas')
var wallViewInfoScreen = $('#wallview-info-screen') var wallViewInfoScreen = $('#wallview-info-screen')
@ -106,7 +107,7 @@ function drawMonitorList(){
label, 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) wallViewMonitorList.html(html)
resolve(monitors) resolve(monitors)
}) })
@ -398,7 +399,7 @@ $(document).ready(function(){
}) })
.on('click', '.wallview-toggle-monitor-list', function(e){ .on('click', '.wallview-toggle-monitor-list', function(e){
e.preventDefault(); e.preventDefault();
wallViewMonitorList.toggleClass('d-none') wallViewMonitorListContainer.toggleClass('d-none')
return false; return false;
}) })
.on('click', '.wallview-open-monitor-group', function(e){ .on('click', '.wallview-open-monitor-group', function(e){
@ -420,6 +421,16 @@ $(document).ready(function(){
displayInfoScreen() displayInfoScreen()
saveLayout() saveLayout()
return false; 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,{ createWebsocket(location.origin,{
path: websocketPath path: websocketPath

12
web/pages/wallview.ejs
View File

@ -79,7 +79,17 @@
</div> </div>
<a class="btn btn-secondary wallview-toggle-monitor-list" href="#"><%- lang.Monitors %></a> <a class="btn btn-secondary wallview-toggle-monitor-list" href="#"><%- lang.Monitors %></a>
</div> </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> </div>
<!-- <script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script> --> <!-- <script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script> -->
<script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script> <script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script>