From a2dfb056eabc1cc1d14e413401b17c33a2d026bb Mon Sep 17 00:00:00 2001
From: Jaroslav Kysela <perex@perex.cz>
Date: Wed, 19 Nov 2014 13:03:41 +0100
Subject: [PATCH] WEBUI JS: Aligh time properly in EPG/DVR dialogs

---
 src/webui/static/app/dvr.js       |  4 ++--
 src/webui/static/app/epg.js       | 10 ++++++++--
 src/webui/static/app/ext.css      | 11 +++++++++++
 src/webui/static/app/tvheadend.js |  9 +++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/webui/static/app/dvr.js b/src/webui/static/app/dvr.js
index 0e3f39c8..c00065dc 100644
--- a/src/webui/static/app/dvr.js
+++ b/src/webui/static/app/dvr.js
@@ -26,8 +26,8 @@ tvheadend.dvrDetails = function(uuid) {
 
         content += '<div class="x-epg-title">' + title + '</div>';
         content += '<div class="x-epg-title">' + episode + '</div>';
-        content += '<div class="x-epg-time"><div class="x-epg-prefix">Scheduled Start Time:</div> ' + new Date(start_real * 1000).toLocaleString() + '</div>';
-        content += '<div class="x-epg-time"><div class="x-epg-prefix">Scheduled Stop Time:</div> ' + new Date(stop_real * 1000).toLocaleString() + '</div>';
+        content += '<div class="x-epg-time"><div class="x-epg-prefix">Scheduled Start Time:</div> ' + tvheadend.niceDate(start_real * 1000) + '</div>';
+        content += '<div class="x-epg-time"><div class="x-epg-prefix">Scheduled Stop Time:</div> ' + tvheadend.niceDate(stop_real * 1000) + '</div>';
         content += '<div class="x-epg-time"><div class="x-epg-prefix">Duration:</div> ' + parseInt(duration / 60) + ' min</div>';
         content += '<div class="x-epg-desc">' + desc + '</div>';
         content += '<hr>';
diff --git a/src/webui/static/app/epg.js b/src/webui/static/app/epg.js
index 50b184b1..ace3a96f 100644
--- a/src/webui/static/app/epg.js
+++ b/src/webui/static/app/epg.js
@@ -89,6 +89,10 @@ tvheadend.durationLookupRange = function(value) {
 tvheadend.epgDetails = function(event) {
 
     var content = '';
+    var duration = 0;
+
+    if (event.start && event.stop && event.stop - event.start > 0)
+        duration = (event.stop - event.start) / 1000;
 
     if (event.channelIcon != null && event.channelIcon.length > 0)
         content += '<img class="x-epg-chicon" src="' + event.channelIcon + '">';
@@ -100,9 +104,11 @@ tvheadend.epgDetails = function(event) {
     if (event.episodeOnscreen)
         content += '<div class="x-epg-title">' + event.episodeOnscreen + '</div>';
     if (event.start)
-      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Start Time:</div> ' + new Date(event.start).toLocaleString() + '</div>';
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Start Time:</div> ' + tvheadend.niceDate(event.start) + '</div>';
     if (event.stop)
-      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Stop Time:</div> ' + new Date(event.stop).toLocaleString() + '</div>';
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Stop Time:</div> ' + tvheadend.niceDate(event.stop) + '</div>';
+    if (duration)
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Duration:</div> ' + parseInt(duration / 60) + ' min</div>';
     if (event.summary)
       content += '<div class="x-epg-summary">' + event.summary + '</div>';
     if (event.description)
diff --git a/src/webui/static/app/ext.css b/src/webui/static/app/ext.css
index 3b7eaf1f..feb07984 100644
--- a/src/webui/static/app/ext.css
+++ b/src/webui/static/app/ext.css
@@ -510,6 +510,17 @@
     width: 100px;
 }
 
+.x-date-date {
+    display: inline-block;
+    width: 6em;
+}
+
+.x-date-time {
+    display: inline-block;
+    width: 4em;
+    text-align: right;
+}
+
 .x-epg-title {
     margin: 5px;
     font: normal 16px arial, tahoma, helvetica, sans-serif;
diff --git a/src/webui/static/app/tvheadend.js b/src/webui/static/app/tvheadend.js
index 08834e8e..afa5fb63 100644
--- a/src/webui/static/app/tvheadend.js
+++ b/src/webui/static/app/tvheadend.js
@@ -151,6 +151,15 @@ Ext.Ajax.request({
     }
 });
 
+/*
+ *
+ */
+tvheadend.niceDate = function(dt) {
+    var d = new Date(dt);
+    return '<div class="x-date-date">' + d.toLocaleDateString() + '</div>' +
+           '<div class="x-date-time">' + d.toLocaleTimeString() + '</div>';
+}
+
 /**
  * Displays a mediaplayer using the html5 video element
  */