Page 1 of 2

Dashticz - Module - Sonarr

Posted: Friday 25 August 2017 11:27
by 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.
Image

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

Re: Dashticz - Module - Sonarr

Posted: Friday 25 August 2017 11:43
by robgeerts
Thanks!
Added to latest beta!!
After installing beta, you can remove the CSS from custom.css ...

Re: Dashticz - Module - Sonarr

Posted: Saturday 26 August 2017 11:32
by 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...

Re: Dashticz - Module - Sonarr

Posted: Sunday 27 August 2017 15:27
by 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.

Re: Dashticz - Module - Sonarr

Posted: Sunday 27 August 2017 21:08
by robgeerts
Added to beta..

Re: Dashticz - Module - Sonarr

Posted: Monday 28 August 2017 9:24
by 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?

Re: Dashticz - Module - Sonarr

Posted: Monday 28 August 2017 21:19
by 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.

Re: Dashticz - Module - Sonarr

Posted: Monday 28 August 2017 22:55
by 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 ?

Re: Dashticz - Module - Sonarr

Posted: Tuesday 29 August 2017 20:08
by robgeerts
Added to beta, and yes, you can push updates to the beta branch...

Re: Dashticz - Module - Sonarr

Posted: Wednesday 30 August 2017 9:28
by raymond
Works great! Thanks guys !

Re: Dashticz - Module - Sonarr

Posted: Saturday 02 September 2017 11:58
by 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
Image

Re: Dashticz - Module - Sonarr

Posted: Sunday 03 September 2017 9:09
by raymond
You are the man! Looks great!

Re: Dashticz - Module - Sonarr

Posted: Monday 09 October 2017 17:13
by 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

Re: Dashticz - Module - Sonarr

Posted: Wednesday 11 October 2017 13:18
by raymond
I must be doing something wrong here, I get this now with the latest beta
SonarrDashticz.jpeg
SonarrDashticz.jpeg (38.22 KiB) Viewed 3305 times
Any clues?

Cheers,

Ray

Re: Dashticz - Module - Sonarr

Posted: Saturday 14 October 2017 12:03
by 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

Re: Dashticz - Module - Sonarr

Posted: Monday 16 October 2017 11:19
by raymond
Yes this works great! The Layout is fixed again!

Thanks, great work!

Ray

Re: Dashticz - Module - Sonarr

Posted: Thursday 09 November 2017 12:39
by 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

Re: Dashticz - Module - Sonarr

Posted: Saturday 30 December 2017 1:06
by Luxtux
Sorry for the late reply. I've been busy lately :) I fixed the issue in my latest pull request

Re: Dashticz - Module - Sonarr

Posted: Saturday 10 March 2018 16:16
by 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.

Re: Dashticz - Module - Sonarr

Posted: Saturday 10 March 2018 23:53
by 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.
Image