Calendar Metadata popup work

api/functions/homepage-connect-functions.php

@@ -811,7 +811,7 @@ function getSonarrCalendar($array,$number){
                 "status" => $child['series']['status'],
                 "topTitle" => $seriesName,
                 "bottomTitle" => $bottomTitle,
-                "overview" => $child['overview'],
+                "overview" => isset($child['overview']) ? $child['overview'] : '',
                 "runtime" => $child['series']['runtime'],
                 "image" => $fanart,
                 "ratings" => $child['series']['ratings']['value'],
@@ -867,7 +867,7 @@ function getRadarrCalendar($array,$number, $url){
             }
             $alternativeTitles = "";
             foreach ($child['alternativeTitles'] as $alternative) {
-                $alternativeTitles .= $alternative['title'] + ', ';
+                $alternativeTitles .= $alternative['title'] . ', ';
             }
             $alternativeTitles = empty($child['alternativeTitles']) ? "" : substr($alternativeTitles, 0, -2);
             $details = array(

js/custom.js

@@ -1575,6 +1575,14 @@ $(document).on("click", ".purgeLog", function () {
 var log = $('.swapLog.active').attr('data-name');
 alert('This action is not set yet - but this would have purged the '+log+' log');
 });
+
+// calendar popups
+$(document).on('click', "a[class*=ID-]", function(){
+    var details = $(this).attr('data-details');
+    var target = $(this).attr('data-target')+'-metadata-info';
+    var json = JSON.parse(details);
+    $('.'+target).html(buildCalendarMetadata(json));
+});
 /* ===== Open-Close Right Sidebar ===== */
 
 $(document).on("click", ".right-side-toggle", function () {

js/functions.js

@@ -2426,6 +2426,48 @@ function buildMetadata(array, source){
 	});
 	return metadata;
 }
+function buildCalendarMetadata(array){
+	var metadata = '';
+	var genres = '';
+	var actors = '';
+	var rating = '<div class="col-xs-2 p-10"></div>';
+		var hasGenre = (typeof array.genres !== 'string') ? true : false;
+		if(hasGenre){
+			$.each(array.genres, function(i,v) {
+				genres += '<span class="badge bg-org m-r-10">'+v+'</span>';
+			});
+		}
+		if(array.ratings){
+			var ratingRound = Math.ceil(array.ratings)*10;
+			rating = `<div class="col-xs-2 p-10"><div data-label="`+array.ratings *10+`%" class="css-bar css-bar-`+Math.ceil(ratingRound/5)*5+` css-bar-sm m-b-0  css-bar-info"><img src="plugins/images/rotten.png" class="nowPlayingUserThumb" alt="User"></div></div>`;
+		}
+		var seconds = array.runtime / 1000 ; // or "2000"
+		seconds = parseInt(seconds) //because moment js dont know to handle number in string format
+		var format =  Math.floor(moment.duration(seconds,'seconds').asHours()) + ':' + moment.duration(seconds,'seconds').minutes() + ':' + moment.duration(seconds,'seconds').seconds();
+		metadata = `
+		<div class="white-box m-b-0">
+			<div class="user-bg lazyload" data-src="`+array.image+`">
+				`+rating+`
+				<div class="col-xs-10">
+	                <h2 class="m-b-0 font-medium pull-right text-right">
+						`+array.topTitle+`<br>
+						<small class="m-t-0 text-white">`+array.bottomTitle+`</small><br>
+					</h2>
+	            </div>
+				<div class="genre-list p-10">`+genres+`</div>
+			</div>
+		</div>
+		<div class="panel panel-info p-b-0 p-t-0">
+            <div class="panel-body p-b-0 p-t-0 m-b-0">
+				<div class="p-20 text-center">
+					<p class="">`+array.overview+`</p>
+				</div>
+            </div>
+        </div>
+
+		`;
+	return metadata;
+}
 function homepageDownloader(type, timeout=30000){
 	//if(isHidden()){ return; }
 	switch (type) {

plugins/bower_components/calendar/dist/fullcalendar.js

@@ -6649,7 +6649,13 @@ DayGrid.mixin({
 		var timeHtml = '';
 		var timeText;
 		var titleHtml;
-
+		var urlMeta = event.id ? htmlEscape(event.id) : 'none';
+		var metadata = `
+		<div id="`+urlMeta+`" class="white-popup mfp-with-anim mfp-hide">
+	        <div class="col-md-8 col-md-offset-2 `+urlMeta+`-metadata-info"></div>
+	    </div>
+		`;
+		var detailsJSON = JSON.stringify(event.details);
 		classes.unshift('fc-day-grid-event', 'fc-h-event');
 
 		// Only display a timed events time if it is the starting segment
@@ -6661,7 +6667,6 @@ DayGrid.mixin({
        timeHtml = '<br/>';
    }
 		}
-
 		titleHtml =
 			'<span class="fc-title">' +
 				(htmlEscape(event.title || '') || '&nbsp;') + // we always want one line of height
@@ -6671,9 +6676,9 @@ DayGrid.mixin({
 				(htmlEscape(event.imagetype || '') || '&nbsp;') + // we always want one line of height
 			'"></i></span>';
 
-		return '<a class="' + classes.join(' ') + '"' +
-				(event.url ?
-					' target="_blank" href="' + htmlEscape(event.url) + '"' :
+		return '<a class="inline-popups ' + classes.join(' ') + '"' +
+				(event.id ?
+					' target="_blank" data-effect="mfp-zoom-out" data-target="'+ htmlEscape(event.id) +'" data-details="'+htmlEscape(detailsJSON) +'" href="#' + htmlEscape(event.id) + '"' :
 					''
 					) +
 				(skinCss ?
@@ -6694,7 +6699,7 @@ DayGrid.mixin({
 				(isResizableFromEnd ?
 					'<div class="fc-resizer fc-end-resizer" />' :
 					''
-					) +
+				) +metadata+
 			'</a>';
 	},