X-Git-Url: http://git.squeep.com/?a=blobdiff_plain;ds=sidebyside;f=lib%2Ftemplate-helper.js;h=e48cdb4fc5e59e17e5179b35a0339f357ba657be;hb=858b76483eabfc25b60f7bdf7ef4be97b61b5b41;hp=7e1693c857758c127d1063d30804c6c5fab9b2e6;hpb=2a4abfad091846a4fa528b44a31962c5150e6b0a;p=squeep-html-template-helper diff --git a/lib/template-helper.js b/lib/template-helper.js index 7e1693c..e48cdb4 100644 --- a/lib/template-helper.js +++ b/lib/template-helper.js @@ -4,7 +4,18 @@ * A bunch of shorthand to put together common parts of an HTML page. */ -const { lazy } = require('@squeep/lazy'); +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. @@ -29,7 +40,9 @@ const dateOrNot = (date, otherwise) => { /** * Why is rendering a Date as a string this complicated? - * @param {Date|Number} date + * 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 @@ -43,6 +56,7 @@ const dateFormat = (date, pInf = 'Never', nInf = 'Forever', otherwise = '') => { return nInf; default: if (!date + || Number.isNaN(date.valueOf()) || (!(date instanceof Date) && !isDatableType)) { return otherwise; } @@ -62,6 +76,33 @@ lazy(dateFormat, '_dtf', () => { }); +/** + * Wrap a Date in a ', + ].join(''); +}; + + /** * Render a duration. * @param {Number} seconds @@ -77,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'); @@ -90,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 @@ -108,8 +160,8 @@ function htmlHead(pagePathLevel, ctx, options) { return `\t \t\t \t\t -\t\t -\t\t +\t\t +\t\t ${headElements.map((e) => '\t\t' + e).join('\n')} \t\t${pageTitle} \t`; @@ -180,6 +232,7 @@ ${spacer}` : ''; * @param {Object} ctx * @param {Object} options * @param {String[]=} options.logoUrl + * @param {String[]=} options.logoAlt * @param {String[]=} options.pageTitle * @returns {String} */ @@ -187,9 +240,10 @@ function htmlHeader(pagePathLevel, ctx, options) { const rootPathPfx = '../'.repeat(pagePathLevel); const { logoUrl = '', + logoAlt = 'logo', pageTitle = '', } = options; - const logoImg = logoUrl ? `` : ''; + const logoImg = logoUrl ? `logo` : ''; return `\t\t
\t\t\t

${logoImg}${pageTitle}

${htmlNav(ctx, options)} @@ -286,16 +340,16 @@ ${spacer}`; * @param {String[]=} options.notificationContent */ function htmlMessages(ctx, options) { - const errorHeading = options && options.errorHeading ? ` + const errorHeading = options?.errorHeading ? ` \t

${options.errorHeading}

` : ''; - const errorContent = options && options.errorContent && options.errorContent.length ? '\n' + options.errorContent.map(((content) => `\t${content}`)).join('\n') : ''; - const notificationHeading = options && options.notificationHeading ? `\n\t

${options.notificationHeading}

` : ''; - const notificationContent = options && options.notificationContent && options.notificationContent.length ? '\n' + options.notificationContent.map(((content) => `\t${content}`)).join('\n') : ''; - const errors = ctx && ctx.errors && ctx.errors.length ? ` + const errorContent = options?.errorContent?.length ? '\n' + options.errorContent.map(((content) => `\t${content}`)).join('\n') : ''; + const notificationHeading = options?.notificationHeading ? `\n\t

${options.notificationHeading}

` : ''; + const notificationContent = options?.notificationContent?.length ? '\n' + options.notificationContent.map(((content) => `\t${content}`)).join('\n') : ''; + const errors = ctx?.errors?.length ? `
${errorHeading}${errorContent} ${UL(ctx.errors, 1)}
` : ''; - const notifications = ctx && ctx.notifications && ctx.notifications.length ? ` + const notifications = ctx?.notifications?.length ? `
${notificationHeading}${notificationContent} ${UL(ctx.notifications, 1)}
` : ''; @@ -315,6 +369,7 @@ ${UL(ctx.notifications, 1)} * @param {Object} options * @param {String=} options.pageTitle * @param {String=} options.logoUrl + * @param {String=} options.logoAlt * @param {Object[]=} options.bodyAttributes * @param {String[]=} options.headElements * @param {Object[]=} options.navLinks @@ -327,16 +382,19 @@ ${UL(ctx.notifications, 1)} * @returns {String} */ function htmlPage(pagePathLevel, ctx, options, main = []) { - const user = (ctx && ctx.session && ctx.session.authenticatedProfile) || (ctx && ctx.session && ctx.session.authenticatedIdentifier); + const user = ctx?.session?.authenticatedProfile || ctx?.session?.authenticatedIdentifier; if (user) { if (!options.navLinks) { options.navLinks = []; } - const logoutRedirect = ctx && ctx.url ? `?r=${encodeURIComponent(ctx.url)}` : ''; - const logoutPath = (pagePathLevel > 0) ? `${'../'.repeat(pagePathLevel - 1)}` : 'admin/'; + const logoutRedirect = ctx?.url ? `?r=${encodeURIComponent(ctx.url)}` : ''; + const adminPath = (pagePathLevel > 0) ? `${'../'.repeat(pagePathLevel - 1)}` : 'admin/'; options.navLinks.push({ + text: 'Account', + href: `${adminPath}settings`, + }, { text: `Logout (${user})`, - href: `${logoutPath}logout${logoutRedirect}`, + href: `${adminPath}logout${logoutRedirect}`, }); } @@ -351,8 +409,10 @@ function htmlPage(pagePathLevel, ctx, options, main = []) { module.exports = { + initContext, dateOrNot, dateFormat, + timeElement, secondsToPeriod, htmlHead, htmlBody, @@ -360,6 +420,7 @@ module.exports = { htmlHeader, htmlFooter, htmlMessages, + indented, renderNavLink, LI, UL,