Modified datastructure for web card content data.

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

@ -1,6 +1,8 @@
{ {
"grid-container": { "grid-container": {
"Category1 - Project management, clients, invoicing, data": [ "Category1": {
"description": "Project management, clients, invoicing, data",
"cards": [
{ {
"title": "Clarity", "title": "Clarity",
"description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.", "description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.",
@ -36,9 +38,11 @@
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon" "altText": "PDF icon"
} }
], ]
},
"Category2 - Work tools, e-mail, calendar, cloud storage": [ "Category2": {
"description": "Work tools, e-mail, calendar, cloud storage",
"cards": [
{ {
"title": "Gmail", "title": "Gmail",
"description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.", "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
@ -67,9 +71,11 @@
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Dropbox logo" "altText": "Dropbox logo"
} }
], ]
},
"Category3 - Marketing, client-facing media, publications": [ "Category3": {
"description": "Marketing, client-facing media, publications",
"cards": [
{ {
"title": "JDSfaulkner.com", "title": "JDSfaulkner.com",
"description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.", "description": "What makes a great first impression? JDSfaulkner.com conveys the company's value to potential clients and partners.",
@ -112,9 +118,11 @@
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "Spreadsheet icon" "altText": "Spreadsheet icon"
} }
], ]
},
"Category4 - HR, policies, onboarding, benefits, payroll": [ "Category4": {
"description": "HR, policies, on-boarding, benefits, payroll",
"cards": [
{ {
"title": "Paycor", "title": "Paycor",
"description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.", "description": "Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
@ -171,9 +179,11 @@
"urlText": "https://jdsfaulkner.workplace.com", "urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon" "altText": "PDF icon"
} }
], ]
},
"Category5 - Career growth, company procedures, helpful references": [ "Category5": {
"description": "Career growth, company procedures, helpful references",
"cards": [
{ {
"title": "Learning Center", "title": "Learning Center",
"description": "Visit your central location for training resources, including online courses and the companys procedure manual. ", "description": "Visit your central location for training resources, including online courses and the companys procedure manual. ",
@ -189,6 +199,6 @@
"altText": "ASTM logo" "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>

@ -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