X-Git-Url: http://git.squeep.com/?a=blobdiff_plain;f=lib%2Ftemplate-helper.js;h=7e51bcfbb9058a25287bf934978d9234b368bf80;hb=f02188f99140aabbd289b610d5968145c83fd057;hp=af9547e22eed36293bdf6eadaa138658389c8dbc;hpb=3aff37bcc558d1ca7bc3d9a4aeec9855f9598b1c;p=squeep-html-template-helper diff --git a/lib/template-helper.js b/lib/template-helper.js index af9547e..7e51bcf 100644 --- a/lib/template-helper.js +++ b/lib/template-helper.js @@ -4,6 +4,19 @@ * A bunch of shorthand to put together common parts of an HTML page. */ +const { lazy } = require('@squeep/lazy-property'); + + +/** + * Set up expected fields for how we handle error reporting + * and whatnot. + * @param {Object} ctx + */ +const initContext = (ctx) => { + ctx.errors = []; + ctx.notifications = []; +}; + /** * Some fields may have values outside normal dates, handle them here. * @param {Date} date @@ -25,6 +38,71 @@ const dateOrNot = (date, otherwise) => { }; +/** + * Why is rendering a Date as a string this complicated? + * We handle the infinities because pg-promise might provide those in + * lieu of a Date object from timestamp fields. + * @param {Date|Number|String} date + * @param {String=} pInf + * @param {String=} nInf + * @param {String=} otherwise + */ +const dateFormat = (date, pInf = 'Never', nInf = 'Forever', otherwise = '') => { + const isDatableType = ['number', 'string'].includes(typeof date); + switch (date) { + case Infinity: + return pInf; + case -Infinity: + return nInf; + default: + if (!date + || Number.isNaN(date.valueOf()) + || (!(date instanceof Date) && !isDatableType)) { + return otherwise; + } + } + if (isDatableType) { + date = new Date(date); + } + const parts = dateFormat._dtf.formatToParts(date); + return parts.map((p) => p.value).join(''); +}; +lazy(dateFormat, '_dtf', () => { + const dateTimeFormatOptions = { + dateStyle: 'medium', + timeStyle: 'long', + }; + return new Intl.DateTimeFormat(undefined, dateTimeFormatOptions); +}); + + +/** + * Wrap a Date in a block. + * @param {Date} date + * @param {Object} options + * @param {String=} options.title + */ +const timeElement = (date, options = {}) => { + const { + title, + pInf, + nInf, + otherwise, + } = options; + const attributes = { + ...(title && { title }), + ...(date instanceof Date && { datetime: date.toISOString() }), + }; + return [ + '', + dateFormat(date, pInf, nInf, otherwise), + '', + ].join(''); +}; + + /** * Render a duration. * @param {Number} seconds @@ -40,7 +118,7 @@ const secondsToPeriod = (seconds) => { result.push(`${r} ${label}${r != 1 ? 's' : ''}`); } value = factor ? Math.floor(value / factor) : value; - } + }; nextResult(60, 'second'); nextResult(60, 'minute'); @@ -53,6 +131,17 @@ const secondsToPeriod = (seconds) => { }; +/** + * Return array of strings prefixed with tabs. + * @param {Number} indent + * @param {String[]} list + */ +const indented = (indent, list) => { + const spacer = '\t'.repeat(indent); + return list.map((l) => `${spacer}${l}`); +}; + + /** * Render the preamble for an HTML page. * @param {Number} pagePathLevel number of paths below root this page is @@ -70,6 +159,7 @@ function htmlHead(pagePathLevel, ctx, options) { } = options; return `\t \t\t +\t\t \t\t \t\t ${headElements.map((e) => '\t\t' + e).join('\n')} @@ -91,8 +181,9 @@ function htmlBody(pagePathLevel, ctx, options, main = []) { const { bodyAttributes = {}, } = options; + const firefoxFix = '\n'; // This fixes a layout rendering flash on load in Firefox; do not know why this works, but it does. return ` -\t +\t${firefoxFix} ${htmlHeader(pagePathLevel, ctx, options)} ${htmlMessages(ctx, options)} \t\t

@@ -312,7 +403,10 @@ function htmlPage(pagePathLevel, ctx, options, main = []) { module.exports = { + initContext, dateOrNot, + dateFormat, + timeElement, secondsToPeriod, htmlHead, htmlBody, @@ -320,6 +414,7 @@ module.exports = { htmlHeader, htmlFooter, htmlMessages, + indented, renderNavLink, LI, UL,