WEBUI JS: Aligh time properly in EPG/DVR dialogs

diff --git a/src/webui/static/app/dvr.js b/src/webui/static/app/dvr.js
index 0e3f39c821c6d40abe50557837ad2f73dc586174..c00065dc7540cface067097eca418d458c367605 100644 (file)
--- 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 50b184b1d27253af183637900714e79623669a07..ace3a96f9eb61fe2d992cae49bcb1ece3ef31091 100644 (file)
--- 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 3b7eaf1f231b9a3df4a498c10eed1c7dfb42a916..feb0798466888f8aac007af27b6819c3b5f33a41 100644 (file)
--- 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 08834e8ebc341841d5726ed9559b45f4aa411a52..afa5fb63d329ea4d92163d5eec01e0539b6b4875 100644 (file)
--- 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
  */