Dashticz - Module - Sonarr
Posted: Friday 25 August 2017 11:27
I wanted to see the calendar of sonarr on my dashticz dashboard. So I've started creating a module that will do that and this is what I came up with.
Feel free to suggest improvements as this is my first js script from scratch
js/sonarr.js:
I added the following lines to js/blocks.js (after line 222)
You can configure the url and api key in th custom/CONFIG.js file
The css i've got in my custom/custom.css for the module:
Feel free to suggest improvements as this is my first js script from scratch
js/sonarr.js:
Code: Select all
function loadSonarr(){
// create html
var html = '<div class="sonarrMain col-xs-12 transbg">';
html += '<div class="col-xs-2 col-icon"><em class="fa fa-tv"></em><div class="SonarrBigTitle">Upcoming shows</div></div>';
html += '<div class="col-xs-10 col-data"><span class="state">' +language.misc.loading+ '</span></div>';
html += '</div>';
getSonarrCalendar();
return html;
}
function getSonarrCalendar() {
var maxItems = 5;
// generate Url
var url = settings['sonarr_url'];
var apiKey = settings['sonarr_apikey'];
var startDate = moment().format('YYYY-MM-DD');
var endDate = moment(Date.now() + 32 * 24 * 3600 * 1000).format('YYYY-MM-DD');
generatedUrl = url + '/api/calendar?apikey=' + apiKey + '&start=' + startDate + '&end=' + endDate ;
$.getJSON(generatedUrl , function(result){
var data = '';
$.each(result, function(i, field){
if (i >= maxItems) {
return;
}
// get all the images incase we need them later
var imgBannerUrl = imgPosterUrl = imgFanartUrl = 'unkown';
$.each( field.series.images, function( key, value ) {
switch (value.coverType) {
case "banner" :
imgBannerUrl = value.url;
break;
case 'poster' :
imgPosterUrl = value.url;
break;
case 'fanart' :
imgFanartUrl = value.url;
break;
}
})
// transform utc time to local
var stillUtc = moment.utc(field.airDateUtc).toDate();
var local = moment(stillUtc).local().format('DD-MM-YYYY HH:mm');
data += '<div class="SonarrItem"><img src="'+ imgPosterUrl + '" class="SonarrPoster">';
data += '<div class="SonarrData">';
data += '<span class="SonarrTitleShow">'+ field.series.title +'</span>';
data += '<span class="SonarrEpisode">'+ field.title +'</span>';
if(field.hasFile == true){
data += '<span class="SonarrDownloaded">Downloaded</span>';
} else {
data += '<span class="SonarrAirDate">'+ local +'</span>';
}
data += '</div>';//SonarrData
data += '</div>';//SonarrItem
});
$('.sonarrMain .state').replaceWith(data);
// Every 15 min recheck
setTimeout(function(){
var data = getSonarrCalendar();
$('.sonarrMain .state').replaceWith(data);
},(60000*15));
});
}
Code: Select all
else if(cols['blocks'][b]=='sonarr'){
if(typeof(loadSonarr)!=='function') $.ajax({url: 'js/sonarr.js', async: false,dataType: "script"});
$(columndiv).append(loadSonarr());
}
Code: Select all
config['sonarr_url'] = 'http://sonarrserver:8989';
config['sonarr_apikey'] = '000000000000000000000000000000';
Code: Select all
.fa-tv:before {font-size:26px;}
.SonarrItem {
clear: both;
width:100%;
}
.SonarrData {
float:Left;
width:75%;
}
.SonarrPoster {
float:Left;
width:25%;
padding: 0px 5px 5px 10px;
}
.SonarrData span {
display: block;
}
.SonarrBigTitle {
transform: rotate(90deg);
padding-top: 15px;
font-size:24px;
text-transform: uppercase;
}
.SonarrTitleShow {
font-size: 12px;
font-weight: bold;
}
.SonarrEpisode {
color: darkgray;
}
.SonarrDownloaded {
color: lightskyblue;
}
.SonarrAirDate{
color: darkgray;
}