{% extends "styled.html" %} {% block style %} {{super()}} body { max-width: 1440px; } td.title { word-break: break-all; } td.time { color: #555; text-align: right; white-space: nowrap; } table { margin-bottom: 30px; } .date { color: #555; font-size: 12pt; padding-bottom: 15px; font-weight: bold; text-align: left; } .session-separator { color: #aaa; height: 40px; text-align: center; } {% endblock %} {% block script %} /** * Container for global stuff */ var global = { // The last history item that was seen. lastItem: null, // The cutoff interval for session-separator (30 minutes) SESSION_CUTOFF: 30*60 }; /** * Finds or creates the session table>tbody to which item with given date * should be added. * * @param {Date} date - the date of the item being added. */ var getSessionNode = function(date) { var histContainer = document.getElementById('hist-container'); // Find/create table var tableId = "hist-" + date.getDate() + date.getMonth() + date.getYear(); var table = document.getElementById(tableId); if (table === null) { table = document.createElement("table"); table.id = tableId; caption = document.createElement("caption"); caption.className = "date"; var options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}; caption.innerHTML = date.toLocaleDateString('en-US', options); table.appendChild(caption); // Add table to page histContainer.appendChild(table); } // Find/create tbody var tbody = table.lastChild; if (tbody.tagName !== "TBODY") { // this is the caption tbody = document.createElement("tbody"); table.appendChild(tbody); } // Create session-separator and new tbody if necessary if (tbody.lastChild !== null && global.lastItem !== null) { lastItemDate = new Date(parseInt(global.lastItem.time)*1000); var interval = (lastItemDate.getTime() - date.getTime())/1000.00; if (interval > global.SESSION_CUTOFF) { // Add session-separator var sessionSeparator = document.createElement('td'); sessionSeparator.className = "session-separator"; sessionSeparator.colSpan = 2; sessionSeparator.innerHTML = "§" table.appendChild(document.createElement('tr')); table.lastChild.appendChild(sessionSeparator); // Create new tbody tbody = document.createElement("tbody"); table.appendChild(tbody); } } return tbody; } /** * Given a history item, create and return