Dashticz - Module - Sonarr

[Luxtux]

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:

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&nbsp;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));
		

	});

}

I added the following lines to js/blocks.js (after line 222)

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());
            }

You can configure the url and api key in th custom/CONFIG.js file

Code: Select all

config['sonarr_url'] = 'http://sonarrserver:8989';
config['sonarr_apikey'] = '000000000000000000000000000000';

The css i've got in my custom/custom.css for the module:

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;
}

[robgeerts]

Thanks!
Added to latest beta!!
After installing beta, you can remove the CSS from custom.css ...

[raymond]

Cool stuff !!!. Can we set width and height in CONFIG.js now, or do you need to customize in custom.css still?
Max height and number of items etc...

[Luxtux]

The height and width cant be set in the CONFIG.js. The number of items can't be set yet but here is the code to add to sonarr.js. Rob can you work your magic and add the following line to sonarr.js (line 17)

Code: Select all

if(typeof(settings['sonarr_maxitems'])!=='undefined' && parseFloat(settings['sonarr_maxitems'])>0) maxItems=settings['sonarr_maxitems'];

after rob has added this line and you have downloaded the latest beta, you should be able to change the number of items in CONFIG.js like this:

Code: Select all

config['sonarr_maxitems'] = 8;

if you have any other requests or comments let me know.

[robgeerts]

Added to beta..

[raymond]

Perfect ! Thanks for that. I've tried to max the height by defining the block 'sonarr' but that doesn't seem to have any effect.

Code: Select all

blocks['sonarr'] = {} //Sonarr
blocks['sonarr']['title'] = 'Sonarr';
//blocks['sonarr']['switch'] = true;
blocks['sonarr']['maxheight'] = 213;
blocks['sonarr']['width'] = 4;

Is this still custom.css defined then?

[Luxtux]

I need to have a look at some other modules, so i can implement the thing you are asking. Currently you can not change the title of the block or width or height. you can ofcourse use the custom.css and change the width and height.

[Luxtux]

Ok it took some time to figure it out, but here we go. Iittle change to the sonarr.js is needed (rob would you do your thing ? Or is there a way i can push changes myself to the git repository ?)

change the loadSonarr function in js/sonarr.js

Code: Select all

function loadSonarr(){
	
	// create html
	var width = 12;
	if(typeof(blocks['sonarr'])!=='undefined' && typeof(blocks['sonarr']['width'])!=='undefined'){
		width = blocks['sonarr']['width'];
	}
    var html = '<div class="sonarrMain col-xs-'+width+' transbg">';
	html += '<div class="col-xs-2 col-icon"><em class="fa fa-tv"></em>';
	var SonarrTitleObject = 'Upcoming&nbsp;shows';
	
	if(typeof(blocks['sonarr'])!=='undefined' && typeof(blocks['sonarr']['title'])!=='undefined'){
		SonarrTitleObject = blocks['sonarr']['title'];
	}

	html += '<div class="SonarrBigTitle">'+ SonarrTitleObject +'</div></div>';

	html += '<div class="col-xs-10 col-data"><span class="state">' +language.misc.loading+ '</span></div>';
    html += '</div>';

	getSonarrCalendar();
		
    return html;

}

After that you can change the title and the width in your custom/CONFIG.js

Code: Select all

blocks['sonarr'] = {}
blocks['sonarr']['title'] = 'Sonarr';
blocks['sonarr']['width'] = 8;

Rob as dashticz guru would you prefer that the maxitems is defined like the title and width? or is it ok the way i did it ?

[robgeerts]

Added to beta, and yes, you can push updates to the beta branch...

[raymond]

Works great! Thanks guys !

[Luxtux]

I've pushed some new changes to the beta branch. You can now choose where the title is located by setting title_position to either left,top.

Code: Select all

blocks['sonarr']['title_position'] = 'left';

Another new option is to change the view of the module. instead of having the posters of the TV show showing, you can get the banners showing. when the file is downloaded the time of the show is replaced with a green tick.

Code: Select all

blocks['sonarr']['view'] = 'Banner';

The last thing i did is that if the tv show is happening within the next 6 days, the day of the week is shown and not the date

[raymond]

You are the man! Looks great!

[raymond]

I'm getting a weird display of a small bar on the left which I think contains the items after pulling the last beta.

I've tried to rule out the blocks definition first in CONFIG.js to let it show as default, no joy.
Or do I need to remove anything I've set previously in custom.css ?

Cheers,

Ray

[raymond]

I must be doing something wrong here, I get this now with the latest beta

SonarrDashticz.jpeg (38.22 KiB) Viewed 3304 times

Any clues?

Cheers,

Ray

[Luxtux]

Hi,

Thank you. I hadn't installed the latest beta yet. I found the error and corrected it. Ive initiated a pull request on github. So when Rob accepts the change the problem should be solved.
have a nice day

[raymond]

Yes this works great! The Layout is fixed again!

Thanks, great work!

Ray

[raymond]

Found out one more thing:

This doesn't work with Banner spelled with a capital B

Code: Select all

blocks['sonarr']['view'] = 'Banner';

This does work, all small caps:

Code: Select all

blocks['sonarr']['view'] = 'banner';

Cheers,

Ray

[Luxtux]

Sorry for the late reply. I've been busy lately I fixed the issue in my latest pull request

[rick82]

Hi all.
I keep getting a message 'loading' (laden). It worked a while ago but doesn't seem to make a connection.
I already checked the IP-address and API-key but they are the right ones. Didn'd update Dashticz as well. Maybe Domoticz... but that's it.

[Luxtux]

Hi Rick,

In sonarr do you have anything listed in your calendar as upcoming in the next month? I'm assuming that for some reason the url generated is not getting any data. To troubleshoot the url generated can you add the following line of code to the file js/sonarr.js after line 57

Code: Select all

	var endDate = moment(Date.now() + 32 * 24 * 3600 * 1000).format('YYYY-MM-DD');
	generatedUrl = url + '/api/calendar?apikey=' + apiKey + '&start=' + startDate + '&end=' + endDate ;
	
	// ADD THE LINE OF CODE UNDERNEATH THIS TEXT
	console.log(generatedUrl);
	// END OF CODE TO ADD 
	
	$.getJSON(generatedUrl , function(result){
		var data = '';
		var lastdate;

after you did this reload your dashboard and bring up the console in your browser by pressing F12. you should see something like this below. copy the url and try to open the page. If there is data appearing your screen then something else is wrong.