Added collapsable categories to the main landing page.

pull/2/head
David Tookey 5 years ago
parent 5ce9cdd25f
commit 8e0d4cc4e2

@ -1,180 +1,185 @@
{
"grid-container": [
{
"title": "Paycor",
"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"
},
{
"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",
"urlText": "https://mail.google.com",
"altText": "Gmail 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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Workplace logo"
},
{
"title": "Clarity",
"description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.",
"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",
"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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Deltek logo"
},
{
"title": "Learning Center",
"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"
},
{
"title": "Swag Store",
"description": "Buy polo shirts and other logo gear here. Costs are deducted from your paycheck, or you can apply Funny Money.",
"imagePath": "swag-store-icon-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Store image"
},
{
"title": "Employee Handbook",
"description": "View this document to learn about the companys policies related to employment, including pay and benefits.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Website image"
},
{
"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",
"altText": "Dropbox 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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Google Workspace 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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Procore logo"
},
{
"title": "Salesforce",
"description": "Marketing and sales teams focus on the customer experience using Salesforce customer relationship management.",
"imagePath": "salesforce-logo-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Salesforce logo"
},
{
"title": "JDSfaulkner Brochure",
"description": "View the company brochure to learn about the company, or send a copy to potential clients and partners.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"title": "JDSfaulkner SOQ",
"description": "SOQs present the experience and capabilities that qualify JDSfaulkner to win contracts or new clients.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"title": "JDSfaulkner Logo",
"description": "Do you need to use the company logo in marketing material, merchandise or documentation? Here is a copy.",
"imagePath": "image-download-icon.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "JDSfaulkner logo"
},
{
"title": "Marketing Contacts",
"description": "Keep track of clients and partners with important names, addresses, e-mail addresses and phone numbers.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Spreadsheet icon"
},
{
"title": "Direct Deposit",
"description": "Would you like have your paychecks deposited into your bank account? Fill out this form and submit it to HR.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Preview image"
},
{
"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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
}
]
"grid-container": {
"Human Resources": [
{
"title": "Paycor",
"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"
}
],
"General": [
{
"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",
"urlText": "https://mail.google.com",
"altText": "Gmail 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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Workplace logo"
},
{
"title": "Clarity",
"description": "Clarity project management software is used to create, track, review and bill field-engineering projects, start to finish.",
"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",
"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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Deltek logo"
},
{
"title": "Learning Center",
"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"
},
{
"title": "Swag Store",
"description": "Buy polo shirts and other logo gear here. Costs are deducted from your paycheck, or you can apply Funny Money.",
"imagePath": "swag-store-icon-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Store image"
},
{
"title": "Employee Handbook",
"description": "View this document to learn about the companys policies related to employment, including pay and benefits.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Website image"
},
{
"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",
"altText": "Dropbox 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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Google Workspace 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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Procore logo"
},
{
"title": "Salesforce",
"description": "Marketing and sales teams focus on the customer experience using Salesforce customer relationship management.",
"imagePath": "salesforce-logo-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Salesforce logo"
},
{
"title": "JDSfaulkner Brochure",
"description": "View the company brochure to learn about the company, or send a copy to potential clients and partners.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"title": "JDSfaulkner SOQ",
"description": "SOQs present the experience and capabilities that qualify JDSfaulkner to win contracts or new clients.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"title": "JDSfaulkner Logo",
"description": "Do you need to use the company logo in marketing material, merchandise or documentation? Here is a copy.",
"imagePath": "image-download-icon.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "JDSfaulkner logo"
},
{
"title": "Marketing Contacts",
"description": "Keep track of clients and partners with important names, addresses, e-mail addresses and phone numbers.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Spreadsheet icon"
},
{
"title": "Direct Deposit",
"description": "Would you like have your paychecks deposited into your bank account? Fill out this form and submit it to HR.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"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.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "Preview image"
}
],
"Tax Documents": [
{
"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.",
"imagePath": "pdf-icon3-100x100.png",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
},
{
"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",
"urlText": "https://jdsfaulkner.workplace.com",
"altText": "PDF icon"
}
]
}
}

@ -17,7 +17,9 @@
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<p class="text-success">You rely on a vast amount of resources to do your job. How can you keep track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder can help you locate the tools you need.</p>
<p class="text-success">You rely on a vast amount of resources to do your job. How can you keep
track of them all? Explore ResourceFinder. From payroll to project-management, ResourceFinder
can help you locate the tools you need.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<ul class="list-unstyled">
@ -28,11 +30,12 @@
</div>
</div>
</div>
<div class="navbar navbar-dark bg-primary shadow-sm">
<div class="container d-flex justify-content-between">
<a class="navbar-brand text-navbartext" href="#">
<img src="../images/jdsfaulkner-logo-lt-theme.png" height="50" class="d-inline-block align-middle" alt="JDSfaulkner logo">
<img src="../images/jdsfaulkner-logo-lt-theme.png" height="50" class="d-inline-block align-middle"
alt="JDSfaulkner logo">
</a>
<div id="theme-toggle" class="theme-button mb-2"></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
@ -46,16 +49,17 @@
<main>
<div class="album py-5 bg-secondary">
<a href="#Tax-Documents-collapser">CLICK HERE FOR TAX DOCUMENTS</a>
<div class="container">
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont" placeholder="Search"
<input class="form-control form-control-dark w-100 bg-info border border-boxborder text-searchfont"
placeholder="Search"
aria-label="Search">
</div>
<div class="album py-5 bg-secondary">
<div class="container bg-secondary">
<!-- div container-->
<div id="grid-container" class="row">
<!-- div container-->
<div id="grid-container">
</div>
</div>
</div>

@ -44,10 +44,15 @@ $enable-rounded: true !default;
color: map-get($theme-colors, paragraphtextcolor);
}
.no-overflow {
overflow: hidden;
}
html{
height:100%
}
body{
height:100%;
}
}

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

@ -1,5 +1,5 @@
<html lang="en">
<div class="col-md-4 web-card" id="{{{id}}}" >
<div class="col-md-4 web-card" id="{{{id}}}">
<div class="card mb-4 shadow-sm web-card-background">
<div class="card-body text-center">
<h6 class="card-text text-header" style="text-align:center">{{title}}</h6>
@ -11,4 +11,5 @@
</div>
</div>
</div>
</div>
</div>
</html>

@ -20,16 +20,14 @@ export function cacheTemplates() {
});
}
export function loadTemplate(filename: string, objs: object[], cb: TemplateCallbackType) {
export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType) {
let contents = templateCache[filename];
if (!contents) throw new Error("No such template: " + filename);
let results: string[] = []
for (let i = 0, l = objs.length; i < l; i++) {
let obj = objs[i]
let rendered = Mustache.render(contents, obj)
results.push(rendered)
let rendered = Mustache.render(contents, obj)
if(null !== cb){
cb(rendered)
}
cb(results)
return rendered;
}
export function loadTemplateSingle(filename: string, cardModel: CardModel, cb: (content: string, id: string) => void) {

@ -1,5 +1,5 @@
import {Configurator, FileUtils} from './fileutils'
import {loadTemplateSingle} from "./templates"
import {loadTemplate, loadTemplateSingle} from "./templates"
const shell = require('electron').shell;
@ -40,17 +40,42 @@ export function buildFileCard(filePath: string, elem: Element, append: boolean =
export function buildWebCardsFromConfig(configName: string) {
let elementConfig = Configurator.loadAppConfig(configName);
let $ = require('jquery')
let keys = Object.keys(elementConfig);
for (let i = 0, l = keys.length; i < l; i++) {
let key = keys[i];
let contentList = elementConfig[key];
let element = $(`#${key}`);
for (let j = 0, m = contentList.length; j<m;j++){
let content = contentList[j];
buildWebCard(element, content, true, $);
let containers = Object.keys(elementConfig);
for (let i = 0, l = containers.length; i < l; i++) {
let containerName = containers[i];
let containerObject = elementConfig[containerName];
let containerElem = $(`#${containerName}`);
let containerCategories = Object.keys(containerObject);
for (let j = 0, m = containerCategories.length; j < m; j++) {
let categoryName = containerCategories[j];
console.log(containerObject);
let contentList = containerObject[categoryName];//should be array of objects to render
let categoryClean = categoryName.replace(/ /ig, "-")
let categoryObject = {"category": categoryName, "category-clean":categoryClean};
let categoryWrapperRaw = loadTemplate("card-category.mustache", categoryObject, (x) => {
});
let categoryWrapper = $(categoryWrapperRaw);
containerElem.append(categoryWrapper);
let view = $(`#${categoryClean}-container`);
let collapseButton = $(`#${categoryClean}-collapser`);
collapseButton.on("click", () => {
let collapsable = $(`#${categoryClean}-container`);
if ("none" === collapsable.css('display')) {
collapsable.css("display", "");
} else {
collapsable.css("display", "none");
}
});
for (let j = 0, m = contentList.length; j < m; j++) {
let content = contentList[j];
buildWebCard(view, content, true, $);
}
}
}

Loading…
Cancel
Save