Start fleshing out detain on the Event view, sniff out all day events

diff --git a/kronolith/js/kronolithmobile.js b/kronolith/js/kronolithmobile.js
index 50d557b..89d59b3 100644 (file)
--- a/kronolith/js/kronolithmobile.js
+++ b/kronolith/js/kronolithmobile.js
@@ -20,19 +20,20 @@
         data = data.response;
         $("#daycontent ul").detach();
         $("#todayheader").html(KronolithMobile.currentDate.toString(Kronolith.conf.date_format));
-        var list = $('<ul>').attr({'data-role': 'listview'});
+        var list = $('<ul>').attr({ 'data-role': 'listview' });
         var type = data.cal.split('|')[0], cal = data.cal.split('|')[1];
         if (data.events) {
             $.each(data.events, function(datestring, events) {
                 $.each(events, function(index, event) {
                     // set .text() first, then .html() to escape
                     var d = $('<div style="color:' + Kronolith.conf.calendars[type][cal].bg + '">');
-                    var item = $('<li>').append();
-                    d.text(Date.parse(event.s).toString(Kronolith.conf.time_format)
-                        + ' - '
-                        + Date.parse(event.e).toString(Kronolith.conf.time_format)
-                        + ' '
-                        + event.t).html();
+                    var item = $('<li>');
+                    if (event.al) {
+                        var timetext = Kronolith.text.allday;
+                    } else {
+                        var timetext = Date.parse(event.s).toString(Kronolith.conf.time_format) + ' - ' + Date.parse(event.e).toString(Kronolith.conf.time_format);
+                    }
+                    d.text(timetext + ' ' + event.t).html();
                     var a = $('<a>').attr({'href': '#eventview'}).click(function(e) {
                         KronolithMobile.loadEvent(data.cal, index, Date.parse(event.e));
                     }).append(d);
@@ -50,7 +51,29 @@
                {'cal': cal, 'id': idy, 'date': d.toString('yyyyMMdd')},
                function(data)
                {
-                   $("#eventcontent").text(data.response.event.t);
+                    $('#eventcontent ul').detach();
+                    var event = data.response.event;
+                    console.log(event);
+
+                    var list = $('<ul>').attr({ 'data-role': 'listview', 'data-inset': true });
+
+                    // @TODO: Use css classes
+                    var text = '<strong>' + event.t + '</strong>'
+                     + '<div style="color:grey">' + event.l + '</div>';
+
+                    if (event.al) {
+                        text = text + '<div>' + Kronolith.text.allday + '</div>';
+                    } else {
+                        text = text + '<div>' + Date.parse(event.s).toString('D') + '</div>'
+                            + '<div>' + Date.parse(event.s).toString(Kronolith.conf.time_format) + ' - ' + Date.parse(event.e).toString(Kronolith.conf.time_format);
+                    }
+                    var item = $('<li>').append(text);
+                    list.append(item);
+
+                    text = event.d;
+                    list.append($('<li>').append(text));
+                    list.listview();
+                    $('#eventcontent').append(list);
                },
                'json');
     },

diff --git a/kronolith/mobile.php b/kronolith/mobile.php
index 5dcfb6d..c4c09b7 100644 (file)
--- a/kronolith/mobile.php
+++ b/kronolith/mobile.php
@@ -51,7 +51,7 @@ require $registry->get('templates', 'horde') . '/common-header-mobile.inc';
 
 <!-- Single Event -->
 <div data-role="page" id="eventview">
-  <div data-role="header" data-position="fixed"><h1>Event Title Here?</h1></div>
+  <div data-role="header" data-theme="b"><h1>Event</h1></div>
   <div data-role="content" class="ui-body" id="eventcontent"></div>
   <div data-role="footer"></div>
 </div>