117 lines
4.2 KiB
Plaintext
117 lines
4.2 KiB
Plaintext
<%
|
|
if(config.ssl&&config.ssl.port&&data.protocol==='https'){
|
|
data.port=config.ssl.port
|
|
}else{
|
|
data.port=config.port
|
|
}
|
|
if(!data.port||data.port===''||data.port==80||data.port==443){data.url=baseUrl}else{data.url=baseUrl+':'+data.port}
|
|
if(data.addon && data.addon.indexOf('relative')>-1){
|
|
data.url=''
|
|
}
|
|
%>
|
|
<script>
|
|
var data = <%- JSON.stringify(data) %>
|
|
if(!data.group || data.group === ''){
|
|
data.group = '$'
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="<%=data.url%>/libs/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="<%=data.url%>/libs/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="<%=data.url%>/libs/css/gridstack.min.css">
|
|
<link rel="stylesheet" href="<%=data.url%>/libs/css/gridstack-extra.min.css">
|
|
<style>
|
|
.grid-stack-item{
|
|
border:1px solid #333;
|
|
}
|
|
.grid-stack-item-content-overlay{
|
|
z-index:2;
|
|
}
|
|
.grid-stack-item-content-overlay,.grid-stack-item iframe{
|
|
margin:0;width:100%;height:100%;position:absolute;top:0;left:0;border:0;
|
|
}
|
|
</style>
|
|
|
|
<script src="<%=data.url%>/libs/js/jquery.min.js"></script>
|
|
<script src="<%=data.url%>/libs/js/jquery-ui.min.js"></script>
|
|
<script src="<%=data.url%>/libs/js/bootstrap.min.js"></script>
|
|
<script src="<%=data.url%>/libs/js/lodash.min.js"></script>
|
|
<script src="<%=data.url%>/libs/js/gridstack.min.js"></script>
|
|
<script src="<%=data.url%>/libs/js/gridstack.jQueryUI.min.js"></script>
|
|
<div class="grid-stack"></div>
|
|
<script type="text/javascript">
|
|
$.grid = {};
|
|
$.grid.op=function(r,rr,rrr){
|
|
if(!rrr){rrr={};};if(typeof rrr === 'string'){rrr={n:rrr}};if(!rrr.n){rrr.n='ShinobiOptions_'+location.host}
|
|
ii={o:localStorage.getItem(rrr.n)};try{ii.o=JSON.parse(ii.o)}catch(e){ii.o={}}
|
|
if(!ii.o){ii.o={}}
|
|
if(r&&rr&&!rrr.x){
|
|
ii.o[r]=rr;
|
|
}
|
|
switch(rrr.x){
|
|
case 0:
|
|
delete(ii.o[r])
|
|
break;
|
|
case 1:
|
|
delete(ii.o[r][rr])
|
|
break;
|
|
}
|
|
localStorage.setItem(rrr.n,JSON.stringify(ii.o))
|
|
return ii.o
|
|
}
|
|
$(function () {
|
|
//init grid
|
|
var gridTag = '.grid-stack';
|
|
var gridEl = $(gridTag);
|
|
var options = {
|
|
cellHeight: 80,
|
|
verticalMargin: 0,
|
|
};
|
|
//monitor="watch_off"
|
|
gridEl.gridstack(options);
|
|
gridEl.on('change', function (event, ui) {
|
|
var savedGrids = $.grid.op().savedGrids;
|
|
if(!savedGrids)savedGrids = {};
|
|
savedGrids[data.group] = {};
|
|
gridEl.find('.grid-stack-item').each(function(n,v){
|
|
var el = $(v);
|
|
var mid = el.attr('mid')
|
|
savedGrids[data.group][mid] = {
|
|
mid:mid,
|
|
x:el.attr('data-gs-x'),
|
|
y:el.attr('data-gs-y'),
|
|
width:el.attr('data-gs-width'),
|
|
height:el.attr('data-gs-height')
|
|
};
|
|
})
|
|
$.grid.op('savedGrids',savedGrids)
|
|
});
|
|
|
|
//draw grid items
|
|
var gridX = 0;
|
|
var gridY = 0;
|
|
var itemW = 4;
|
|
var itemH = 4;
|
|
var savedGrids = $.grid.op().savedGrids;
|
|
if(!savedGrids)savedGrids = {};
|
|
if(!savedGrids[data.group])savedGrids[data.group] = {};
|
|
var grid = gridEl.data('gridstack');
|
|
$.each(<%- JSON.stringify(monitors) %>,function(n,monitor){
|
|
var x = gridX;
|
|
var y = gridY;
|
|
var width = itemW;
|
|
var height = itemH;
|
|
var autoPlacement = true;
|
|
var saved = savedGrids[data.group][monitor.mid];
|
|
if(saved){
|
|
x = saved.x;
|
|
y = saved.y;
|
|
width = saved.width;
|
|
height = saved.height;
|
|
autoPlacement = false;
|
|
}
|
|
var tmp = '<div auth="'+data.auth+'" ke="'+data.ke+'" mid="'+monitor.mid+'" class="grid-stack-item"><div class="grid-stack-item-content"><div class="grid-stack-item-content-overlay"><a monitor="watch_off"><i class="fa fa-times-circle"></i></a></div><iframe src="'+data.url+'/'+data.auth+'/embed/'+monitor.ke+'/'+monitor.mid+'/fullscreen|jquery|relative"></iframe></div></div>'
|
|
grid.addWidget($(tmp), x, y, width, height, autoPlacement);
|
|
})
|
|
});
|
|
</script>
|
|
|