Modified datastructure for web card content data.

pull/2/head
David Tookey 5 years ago
parent 43368bf358
commit 90980677d1

@ -1,194 +1,204 @@
{ {
"grid-container": { "grid-container": {
"Category1 - Project management, clients, invoicing, data": [ "Category1": {
{ "description": "Project management, clients, invoicing, data",
"title": "Clarity", "cards": [
"description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.", {
"imagePath": "clarity-icon-100x100.png", "title": "Clarity",
"urlText": "https://jdsfaulkner.workplace.com", "description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.",
"altText": "Clarity image" "imagePath": "clarity-icon-100x100.png",
}, "urlText": "https://jdsfaulkner.workplace.com",
{ "altText": "Clarity image"
"title": "Project Insight", },
"description": "Structural Engineering Design uses this project management software to centralize the group's work, tasks and projects.", {
"imagePath": "project-insight-logo6-100x100.png", "title": "Project Insight",
"urlText": "https://jdsfaulkner.workplace.com", "description": "Structural Engineering Design uses this project management software to centralize the group's work, tasks and projects.",
"altText": "Project Insight logo" "imagePath": "project-insight-logo6-100x100.png",
}, "urlText": "https://jdsfaulkner.workplace.com",
{ "altText": "Project Insight logo"
"title": "Deltek", },
"description": "Project intelligence, management and collaboration software helps maximize productivity and revenue.", {
"imagePath": "deltek-logo-black.png", "title": "Deltek",
"urlText": "https://jdsfaulkner.workplace.com", "description": "Project intelligence, management and collaboration software helps maximize productivity and revenue.",
"altText": "Deltek logo" "imagePath": "deltek-logo-black.png",
}, "urlText": "https://jdsfaulkner.workplace.com",
{ "altText": "Deltek logo"
"title": "Procore", },
"description": "Streamline billing. Administrators for field engineering projects use Procore software for invoice collection, review and approval.", {
"imagePath": "procore-logo-100x100.png", "title": "Procore",
"urlText": "https://jdsfaulkner.workplace.com", "description": "Streamline billing. Administrators for field engineering projects use Procore software for invoice collection, review and approval.",
"altText": "Procore logo" "imagePath": "procore-logo-100x100.png",
}, "urlText": "https://jdsfaulkner.workplace.com",
{ "altText": "Procore logo"
"title": "Client W-9 Form", },
"description": "A W-9 form is required by JDSfaulkner so that the company can file an information return with the IRS.", {
"imagePath": "pdf-icon3-100x100.png", "title": "Client W-9 Form",
"urlText": "https://jdsfaulkner.workplace.com", "description": "A W-9 form is required by JDSfaulkner so that the company can file an information return with the IRS.",
"altText": "PDF icon" "imagePath": "pdf-icon3-100x100.png",
} "urlText": "https://jdsfaulkner.workplace.com",
], "altText": "PDF icon"
}
"Category2 - Work tools, e-mail, calendar, cloud storage": [ ]
{ },
"title": "Gmail", "Category2": {
"description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.", "description": "Work tools, e-mail, calendar, cloud storage",
"imagePath": "gmail-logo2-100x100.png", "cards": [
"urlText": "https://mail.google.com", {
"altText": "Gmail logo" "title": "Gmail",
}, "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
{ "imagePath": "gmail-logo2-100x100.png",
"title": "Workplace", "urlText": "https://mail.google.com",
"description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.", "altText": "Gmail logo"
"imagePath": "workplace-logo3-100x100.png", },
"urlText": "https://jdsfaulkner.workplace.com", {
"altText": "Workplace logo" "title": "Workplace",
}, "description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.",
{ "imagePath": "workplace-logo3-100x100.png",
"title": "Google Workspace", "urlText": "https://jdsfaulkner.workplace.com",
"description": "This suite of Google products includes Gmail, Calendar, Meet, Chat, Drive, Docs, Sheets, Slides, Forms and more.", "altText": "Workplace logo"
"imagePath": "google-logo2-100x100.png", },
"urlText": "https://jdsfaulkner.workplace.com", {
"altText": "Google Workspace logo" "title": "Google Workspace",
}, "description": "This suite of Google products includes Gmail, Calendar, Meet, Chat, Drive, Docs, Sheets, Slides, Forms and more.",
{ "imagePath": "google-logo2-100x100.png",
"title": "Dropbox", "urlText": "https://jdsfaulkner.workplace.com",
"description": "The Structural Engineering Design department stores most of its files and folders in the Dropbox cloud-based system.", "altText": "Google Workspace logo"
"imagePath": "dropbox-logo3-100x100.png", },
"urlText": "https://jdsfaulkner.workplace.com", {
"altText": "Dropbox logo" "title": "Dropbox",
} "description": "The Structural Engineering Design department stores most of its files and folders in the Dropbox cloud-based system.",
], "imagePath": "dropbox-logo3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"Category3 - Marketing, client-facing media, publications": [ "altText": "Dropbox logo"
{ }
"title": "JDSfaulkner.com", ]
"description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.", },
"imagePath": "jdsfaulkner-small-icon.png", "Category3": {
"urlText": "https://jdsfaulkner.workplace.com", "description": "Marketing, client-facing media, publications",
"altText": "Website image" "cards": [
}, {
{ "title": "JDSfaulkner.com",
"title": "Salesforce", "description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.",
"description": "Marketing and sales teams focus on the customer experience using Salesforce customer relationship management.", "imagePath": "jdsfaulkner-small-icon.png",
"imagePath": "salesforce-logo-100x100.png", "urlText": "https://jdsfaulkner.workplace.com",
"urlText": "https://jdsfaulkner.workplace.com", "altText": "Website image"
"altText": "Salesforce logo" },
}, {
{ "title": "Salesforce",
"title": "JDSfaulkner Brochure", "description": "Marketing and sales teams focus on the customer experience using Salesforce customer relationship management.",
"description": "View the company brochure to learn about the company, or send a copy to potential clients and partners.", "imagePath": "salesforce-logo-100x100.png",
"imagePath": "pdf-icon3-100x100.png", "urlText": "https://jdsfaulkner.workplace.com",
"urlText": "https://jdsfaulkner.workplace.com", "altText": "Salesforce logo"
"altText": "PDF icon" },
}, {
{ "title": "JDSfaulkner Brochure",
"title": "JDSfaulkner SOQ", "description": "View the company brochure to learn about the company, or send a copy to potential clients and partners.",
"description": "SOQs present the experience and capabilities that qualify JDSfaulkner to win contracts or new clients.", "imagePath": "pdf-icon3-100x100.png",
"imagePath": "pdf-icon3-100x100.png", "urlText": "https://jdsfaulkner.workplace.com",
"urlText": "https://jdsfaulkner.workplace.com", "altText": "PDF icon"
"altText": "PDF icon" },
}, {
{ "title": "JDSfaulkner SOQ",
"title": "JDSfaulkner Logo", "description": "SOQs present the experience and capabilities that qualify JDSfaulkner to win contracts or new clients.",
"description": "Do you need to use the company logo in marketing material, merchandise or documentation? Here is a copy.", "imagePath": "pdf-icon3-100x100.png",
"imagePath": "image-download-icon.png", "urlText": "https://jdsfaulkner.workplace.com",
"urlText": "https://jdsfaulkner.workplace.com", "altText": "PDF icon"
"altText": "JDSfaulkner logo" },
}, {
{ "title": "JDSfaulkner Logo",
"title": "Marketing Contacts", "description": "Do you need to use the company logo in marketing material, merchandise or documentation? Here is a copy.",
"description": "Keep track of clients and partners with important names, addresses, e-mail addresses and phone numbers.", "imagePath": "image-download-icon.png",
"imagePath": "pdf-icon3-100x100.png", "urlText": "https://jdsfaulkner.workplace.com",
"urlText": "https://jdsfaulkner.workplace.com", "altText": "JDSfaulkner logo"
"altText": "Spreadsheet icon" },
} {
], "title": "Marketing Contacts",
"description": "Keep track of clients and partners with important names, addresses, e-mail addresses and phone numbers.",
"Category4 - HR, policies, onboarding, benefits, payroll": [ "imagePath": "pdf-icon3-100x100.png",
{ "urlText": "https://jdsfaulkner.workplace.com",
"title": "Paycor", "altText": "Spreadsheet icon"
"description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.", }
"imagePath": "paycor-logo3-100x100.png", ]
"urlText": "https://www.paycor.com/", },
"altText": "Paycor logo" "Category4": {
}, "description": "HR, policies, on-boarding, benefits, payroll",
{ "cards": [
"title": "Swag Store", {
"description": "Buy polo shirts and other logo gear here. Costs are deducted from your paycheck, or you can apply Funny Money.", "title": "Paycor",
"imagePath": "swag-store-icon-100x100.png", "description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "paycor-logo3-100x100.png",
"altText": "Store image" "urlText": "https://www.paycor.com/",
}, "altText": "Paycor logo"
{ },
"title": "Employee Handbook", {
"description": "View this document to learn about the companys policies related to employment, including pay and benefits.", "title": "Swag Store",
"imagePath": "pdf-icon3-100x100.png", "description": "Buy polo shirts and other logo gear here. Costs are deducted from your paycheck, or you can apply Funny Money.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "swag-store-icon-100x100.png",
"altText": "PDF icon" "urlText": "https://jdsfaulkner.workplace.com",
}, "altText": "Store image"
{ },
"title": "Direct Deposit", {
"description": "Would you like have your paychecks deposited into your bank account? Fill out this form and submit it to HR.", "title": "Employee Handbook",
"imagePath": "pdf-icon3-100x100.png", "description": "View this document to learn about the companys policies related to employment, including pay and benefits.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "pdf-icon3-100x100.png",
"altText": "PDF icon" "urlText": "https://jdsfaulkner.workplace.com",
}, "altText": "PDF icon"
{ },
"title": "NC-4EZ Form", {
"description": "Complete this form so that JDSfaulkner can withhold the correct amount of state income tax from your pay.", "title": "Direct Deposit",
"imagePath": "pdf-icon3-100x100.png", "description": "Would you like have your paychecks deposited into your bank account? Fill out this form and submit it to HR.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "pdf-icon3-100x100.png",
"altText": "PDF icon" "urlText": "https://jdsfaulkner.workplace.com",
}, "altText": "PDF icon"
{ },
"title": "Employment Application", {
"description": "Would you or someone you know like to apply for a position at JDSfaulkner? Submit this application to HR.", "title": "NC-4EZ Form",
"imagePath": "pdf-icon3-100x100.png", "description": "Complete this form so that JDSfaulkner can withhold the correct amount of state income tax from your pay.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "pdf-icon3-100x100.png",
"altText": "PDF icon" "urlText": "https://jdsfaulkner.workplace.com",
}, "altText": "PDF icon"
{ },
"title": "Drafting Quiz", {
"description": "Click here to access a prequalifying quiz that is a requirement for those applying for drafting positions.", "title": "Employment Application",
"imagePath": "pdf-icon3-100x100.png", "description": "Would you or someone you know like to apply for a position at JDSfaulkner? Submit this application to HR.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "pdf-icon3-100x100.png",
"altText": "Preview image" "urlText": "https://jdsfaulkner.workplace.com",
}, "altText": "PDF icon"
{ },
"title": "W-4 Form", {
"description": "Fill out this form and submit to HR so that the company can withhold the correct federal income tax from your pay.", "title": "Drafting Quiz",
"imagePath": "pdf-icon3-100x100.png", "description": "Click here to access a prequalifying quiz that is a requirement for those applying for drafting positions.",
"urlText": "https://jdsfaulkner.workplace.com", "imagePath": "pdf-icon3-100x100.png",
"altText": "PDF icon" "urlText": "https://jdsfaulkner.workplace.com",
} "altText": "Preview image"
], },
{
"Category5 - Career growth, company procedures, helpful references": [ "title": "W-4 Form",
{ "description": "Fill out this form and submit to HR so that the company can withhold the correct federal income tax from your pay.",
"title": "Learning Center", "imagePath": "pdf-icon3-100x100.png",
"description": "Visit your central location for training resources, including online courses and the companys procedure manual. ", "urlText": "https://jdsfaulkner.workplace.com",
"imagePath": "learning-center-icon4-100x100.png", "altText": "PDF icon"
"urlText": "https://jdsfaulkner.workplace.com", }
"altText": "Learning Center image" ]
}, },
{ "Category5": {
"title": "ASTM procedures", "description": "Career growth, company procedures, helpful references",
"description": "Visit this website for access to current ASTM procedures. Contact the CMT Manager for the login ID and password.", "cards": [
"imagePath": "astm-logo3-100x100.png", {
"urlText": "https://jdsfaulkner.workplace.com", "title": "Learning Center",
"altText": "ASTM logo" "description": "Visit your central location for training resources, including online courses and the companys procedure manual. ",
} "imagePath": "learning-center-icon4-100x100.png",
] "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Learning Center image"
},
{
"title": "ASTM procedures",
"description": "Visit this website for access to current ASTM procedures. Contact the CMT Manager for the login ID and password.",
"imagePath": "astm-logo3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "ASTM logo"
}
]
}
} }
} }

@ -1,10 +1,11 @@
<html lang="en"> <html lang="en">
<div> <div>
<div id="{{{category-clean}}}-collapser" style="background-color:grey;"> <div id="{{{category-id}}}-collapser" style="background-color:grey;">
<p class="text-white align-self-center">{{{category}}}</p> <h1>{{{category-id-clean}}}</h1> <br/>
<p class="text-white align-self-center">{{{category-description}}}</p>
</div> </div>
<br> <br>
<div id="{{{category-clean}}}-container" class="{{{category-clean}}}-collapse no-overflow row"></div> <div id="{{{category-id}}}-container" class="{{{category-id}}}-collapse no-overflow row" style="display:none;"></div>
</div> </div>
<br> <br>
</html> </html>

@ -24,7 +24,7 @@ export function loadTemplate(filename: string, obj: object, cb: TemplateCallback
let contents = templateCache[filename]; let contents = templateCache[filename];
if (!contents) throw new Error("No such template: " + filename); if (!contents) throw new Error("No such template: " + filename);
let rendered = Mustache.render(contents, obj) let rendered = Mustache.render(contents, obj)
if(null !== cb){ if (null !== cb) {
cb(rendered) cb(rendered)
} }
return rendered; return rendered;
@ -33,7 +33,7 @@ export function loadTemplate(filename: string, obj: object, cb: TemplateCallback
export function loadTemplateSingle(filename: string, cardModel: CardModel, cb: (content: string, id: string) => void) { export function loadTemplateSingle(filename: string, cardModel: CardModel, cb: (content: string, id: string) => void) {
let contents = templateCache[filename]; let contents = templateCache[filename];
if (!contents) throw new Error("No such template: " + filename); if (!contents) throw new Error("No such template: " + filename);
cardModel['id'] = createId(cardModel.resourcePath); cardModel['id'] = createId(cardModel.title + cardModel.resourcePath);
let rendered = Mustache.render(contents, cardModel); let rendered = Mustache.render(contents, cardModel);
cb(rendered, cardModel['id']); cb(rendered, cardModel['id']);
} }

@ -49,22 +49,23 @@ export function buildWebCardsFromConfig(configName: string) {
let containerCategories = Object.keys(containerObject); let containerCategories = Object.keys(containerObject);
for (let j = 0, m = containerCategories.length; j < m; j++) { for (let j = 0, m = containerCategories.length; j < m; j++) {
let categoryName = containerCategories[j]; let categoryMetaObjectKey = containerCategories[j];
console.log(containerObject); let categoryMetaObject = containerObject[categoryMetaObjectKey];
let contentList = containerObject[categoryName];//should be array of objects to render let contentList = categoryMetaObject["cards"];//should be array of objects to render
let categoryClean = categoryName.replace(/ /ig, "-") let categoryDescription = categoryMetaObject["description"];
let categoryObject = {"category": categoryName, "category-clean":categoryClean}; let categoryKey = categoryMetaObjectKey.replace(/[\s,]/ig, '-');
let categoryObject = {"category-description": categoryDescription, "category-id": categoryKey, "category-id-clean":categoryMetaObjectKey};
let categoryWrapperRaw = loadTemplate("card-category.mustache", categoryObject, (x) => { let categoryWrapperRaw = loadTemplate("card-category.mustache", categoryObject, (x) => {
}); });
let categoryWrapper = $(categoryWrapperRaw); let categoryWrapper = $(categoryWrapperRaw);
containerElem.append(categoryWrapper); containerElem.append(categoryWrapper);
let view = $(`#${categoryClean}-container`); let view = $(`#${categoryMetaObjectKey}-container`);
let collapseButton = $(`#${categoryClean}-collapser`); let collapseButton = $(`#${categoryMetaObjectKey}-collapser`);
collapseButton.on("click", () => { collapseButton.on("click", () => {
let collapsable = $(`#${categoryClean}-container`); let collapsable = $(`#${categoryMetaObjectKey}-container`);
if ("none" === collapsable.css('display')) { if ("none" === collapsable.css('display')) {
collapsable.css("display", ""); collapsable.css("display", "");
} else { } else {

Loading…
Cancel
Save