Shinobi/web/pages/timelapse.ejs

119 lines
5.4 KiB
Plaintext

<%
if(config.ssl&&config.ssl.port&&data.protocol==='https'){
data.port=config.ssl.port
}else{
data.port=config.port
}
data.url = baseUrl
if(data.addon && data.addon.indexOf('relative')>-1){
data.url=''
}
%>
<% include blocks/header-title.ejs %>
<% include blocks/header-meta.ejs %>
<% include blocks/header-favicon.ejs %>
<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/daterangepicker.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.basic.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.forms.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.darktheme.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/bootstrap-slider.min.css">
<div id="timelapsejpeg" class="standalone dark">
<div class="modal-body text-center" style="padding-top:0;padding-bottom:0;">
<div class="row">
<div class="col-md-4">
<div class="fieldHolder text-left">
<div class="form-group text-center">
<%
var logoImageLink
if(config.logoLocation76x76.indexOf('//') === -1){
logoImageLink = window.libURL + config.logoLocation76x76
}else{
logoImageLink = config.logoLocation76x76
}
%>
<img src="<%- logoImageLink %>" style="<%- config.logoLocation76x76Style %>">
</div>
<div class="form-group">
<label><div><span><%-lang['Monitor']%></span></div>
<div><select class="form-control dark monitors_list"></select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Date']%></span></div>
<div><input type="text" id="timelapsejpeg_date" class="form-control" value="" /></div>
</label>
</div>
<div class="form-group">
<input id="timelapseJpegFps" data-slider-id='timelapseJpegFps' type="text"
data-slider-min="1" data-slider-max="30" data-slider-step="1" data-slider-value="30" value="30"/>
</div>
<div class="form-group">
<!-- <div class="btn-group"> -->
<!-- <a class="btn btn-primary download_mp4"><%-lang['Build']%></a> -->
<a class="btn btn-danger btn-block download_mp4"><%-lang['Download']%></a>
<!-- </div> -->
</div>
</div>
<div class="">
</div>
<div class="frameIcons row scroll-style-6"></div>
</div>
<div class="col-md-8 frameStripContainer contained">
<div class="playBackView"><img></div>
<div class="liveStreamView"></div>
<!-- <div class="frames"></div>
<div class="frameStripPreview"></div>
<div class="frameStrip"></div> -->
</div>
</div>
</div>
</div>
<script src="<%=data.url%>/libs/js/jquery.min.js"></script>
<script src="<%=data.url%>/libs/js/jquery-ui.min.js"></script>
<script>$.ccio = {mon:{}}</script>
<script src="<%-data.url%>/libs/js/moment-with-locales.min.js"></script>
<script src="<%-data.url%>/libs/js/daterangepicker.js"></script>
<script src="<%-data.url%>/libs/js/bootstrap-slider.min.js"></script>
<script src="<%-data.url%>/libs/js/dash2.init.js"></script>
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.timelapse.jpeg.css">
<script src="<%-data.url%>/libs/js/dash2.timelapse.jpeg.js"></script>
<script>
var data = <%- JSON.stringify(data) %>
var $user = <%- JSON.stringify($user) %>
var lang = <%- JSON.stringify(lang) %>
var languageChoice = "<%- config.language || 'en' %>".replace('_','-').toLowerCase()
moment.locale(languageChoice)
$user.auth_token = data.auth
$(document).ready(function(){
$.timelapseJpeg.pointer = data.url + '/'
$.timelapseJpeg.fieldHolderCssHeightModifier = 50
$.timelapseJpeg.monitors.find('.monitor').remove()
$.getJSON(data.url+'/'+$user.auth_token+'/monitor/'+$user.ke,function(d){
if(d instanceof Array){
$.each(d,function(n,monitor){
$.ccio.mon[monitor.ke + monitor.mid + $user.auth_token] = monitor
})
}else{
$.ccio.mon[d.ke + d.mid + $user.auth_token] = d
}
$.each($.ccio.mon,function(n,v){
$.timelapseJpeg.monitors.append('<option class="monitor" value="'+v.mid+'">'+v.name+'</option>')
})
$.timelapseJpeg.monitors.find('.monitor').prop('selected',false)
// if(monitor.mid !== ''){
// $.timelapseJpeg.monitors.find('.monitor[value="'+e.mid+'"]')
// }
// $.timelapseJpeg.datepicker.val($.timelapseJpeg.baseDate)
$.timelapseJpeg.selectedStartDate = moment().utc().subtract(2, 'days').format('YYYY-MM-DD')
$.timelapseJpeg.selectedEndDate = moment().utc().add(1, 'days').format('YYYY-MM-DD')
$.timelapseJpeg.draw($.timelapseJpeg.selectedStartDate,$.timelapseJpeg.selectedEndDate)
})
})
</script>