dtookey
/
Engine_Rebuild
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implemented single webcard factory

Browse Source
build-validation
David Tookey 5 years ago
parent 907e13463c
commit f611e050f3
7 changed files with 145 additions and 156 deletions
Show Stats Download Patch File Download Diff File

135
src/assets/pages/Design2.html
Unescape Escape View File

@ -29,7 +29,7 @@
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-primary" sidebar collapse">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-primary sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
@ -130,94 +130,93 @@
<p class="text-black"><a href="ResourcesLandingPage.html">Back to Design 1</a></p>
</div>
<div class="album py-5">
<div class="container bg-success">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-white">
<div class="card-body">
<h5 class="card-text text-black" style="text-align:center">Paycor</h5>
<p class="card-text text-black">Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.
</p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid" src="../images/PaycorLogo2-Circle_100x100.png" alt="Paycor logo" style="max-height:50px">
</div>
<div class="album py-5">
<div class="container bg-success">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-white">
<div class="card-body">
<h5 class="card-text text-black" style="text-align:center">Paycor</h5>
<p class="card-text text-black">Clock in and out, request time off, review health
benefits and access paystubs using the Paycor human-resources application.
</p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid"
src="../images/PaycorLogo2-Circle_100x100.png" alt="Paycor logo"
style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Go</button>
</div>
</div>
<hr width="95%" align="center" color="#A79D9D">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Go</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-white">
<div class="card-body">
<h5 class="card-text text-black" style="text-align:center">Gmail</h5>
<p class="card-text text-black">Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.
</p>
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-white">
<div class="card-body">
<h5 class="card-text text-black" style="text-align:center">Gmail</h5>
<p class="card-text text-black">Access your company e-mail and a suite of Google
apps, including a calendar, instant messaging and cloud storage.
</p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid" src="../images/GmailCircle_100x100.png" alt="Gmail logo" style="max-height:50px">
</div>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid"
src="../images/GmailCircle_100x100.png" alt="Gmail logo"
style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Go</button>
</div>
</div>
<hr width="95%" align="center" color="#A79D9D">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Go</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-white">
<div class="card-body">
<h5 class="card-text text-black" style="text-align:center">Workplace</h5>
<p class="card-text text-black">Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.
</p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid" src="../images/WorkplaceLogo-Circle_100x100.png" alt="Workplace logo" style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Go</button>
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-white">
<div class="card-body">
<h5 class="card-text text-black" style="text-align:center">Workplace</h5>
<p class="card-text text-black">Get the latest news and connect with colleagues.
JDSfaulkner uses Workplace by Facebook for posting and sharing.
</p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid"
src="../images/WorkplaceLogo-Circle_100x100.png" alt="Workplace logo"
style="max-height:50px">
</div>
<hr width="95%" align="center" color="#A79D9D">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Go</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="/docs/4.5/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script>let $ = require('jquery');</script>
<script>require('popper.js')</script>
<script>require('bootstrap')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="dashboard.js"></script>

27
src/assets/pages/ResourcesLandingPage.html → src/assets/pages/resources-landing-page.html
Unescape Escape View File

@ -45,8 +45,6 @@
</header>
<main>
<div class="album py-5 bg-primary">
<button id="theme-toggle" class="btn btn-light mb-2">Push to change theme</button>
<div class="container">
@ -56,7 +54,10 @@
<div class="album py-5">
<div class="container bg-primary">
<div class="row">
<!-- divcontainer-->
<div id="grid-container" class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm bg-secondary">
<div class="card-body">
@ -165,24 +166,20 @@
</div>
<main role="main" class="container">
</main><!-- /.container -->
<footer class="page-footer">
<div class="container">
<p class="float-right text-white">
<a href="#">Back to top</a>
</p>
</div>
</footer>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p class="float-right text-white">
<a href="#">Back to top</a>
</p>
</div>
</footer>
</body>
<script src="scripts/tsUtil.js"></script>
<script>loadTSTarget("themes.js");</script>
<script src="scripts/index_app.js"></script>
</html>

6
src/assets/pages/scripts/index_app.js
Unescape Escape View File

@ -2,11 +2,9 @@ const path = require('path');
const factory = require(path.join(appDir, 'viewFactory'))
function loadDocuments() {
let container = document.querySelector("#container");
let fileName = "voicemail-and-vacation-responder.pdf";
factory.buildFileCard(fileName, container, true);
factory.buildDefaultWebCards(container);
let container = document.querySelector("#grid-container");
factory.buildWebCard("https://www.paycor.com/", container, true);
}
loadDocuments();

17
src/assets/views/web-card.mustache
Unescape Escape View File

@ -1,9 +1,14 @@
<html lang="en">
<li id="{{{id}}}" class="media d-flex mx-2 file-card">
<img class="align-self-center mr-3 py-2 thumbnail32" src="{{{imagePath}}}" alt="File icon">
<div id="{{{id}}}-title" class="media-body align-self-center">
<div class="spinner-border" role="status">
<div class="col-md-4" id="{{{id}}}">
<div class="card mb-4 shadow-sm bg-secondary">
<div class="card-body">
<h7 class="card-text text-white" style="text-align:center">{{title}}</h7>
<p class="card-text text-success">{{description}} </p>
<div class="d-flex justify-content-between align-items-center">
<img class="rounded-circle mx-auto d-block img-fluid"
src="{{{imgPath}}}" alt="Gmail logo"
style="max-height:50px">
</div>
</div>
</div>
</li>
</html>
</div>

2
src/index.js
Unescape Escape View File

@ -31,7 +31,7 @@ function initialize () {
}
mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadURL(path.join('file://', __dirname, '/assets/pages/ResourcesLandingPage.html'))
mainWindow.loadURL(path.join('file://', __dirname, '/assets/pages/resources-landing-page.html'))
// Launch fullscreen with DevTools open, usage: npm run debug
if (debug) {

9
src/ts_source/templates.ts
Unescape Escape View File

@ -32,12 +32,13 @@ export function loadTemplate(filename: string, objs: object[], cb: TemplateCallb
cb(results)
}
export function loadTemplateSingle(filename: string, obj: CardModel, cb: (content: string, id: string) => void) {
export function loadTemplateSingle(filename: string, cardModel: CardModel, cb: (content: string, id: string) => void) {
console.log(cardModel);
let contents = templateCache[filename];
if (!contents) throw new Error("No such template: " + filename);
obj['id'] = createId(obj.fileName);
let rendered = Mustache.render(contents, obj);
cb(rendered, obj['id']);
cardModel['id'] = createId(cardModel.resourcePath);
let rendered = Mustache.render(contents, cardModel);
cb(rendered, cardModel['id']);
}
function createId(fileName: String) {

87
src/ts_source/viewFactory.ts
Unescape Escape View File

@ -1,37 +1,40 @@
import {Configurator, FileUtils, ConfigPaths} from './fileutils'
import {ConfigPaths, Configurator, FileUtils} from './fileutils'
import {loadTemplateSingle} from "./templates"
import {WebUtils} from "./webutils"
const shell = require('electron').shell;
export class CardModel {
imagePath: string;
fileName: string;
constructor(imagePath: string, name: string) {
this.imagePath = imagePath;
this.fileName = name;
title: string;
description: string;
imgPath: string;
resourcePath: string;
constructor(title: string, description: string, imagePath: string, resourcePath: string) {
this.title = title;
this.description = description;
this.imgPath = imagePath;
this.resourcePath = resourcePath;
}
}
export function buildFileCard(filePath: string, elem: Element, append: boolean = false, $: any = require('jquery')) {
let model = new CardModel(getImagePathFromDocumentName(filePath), fileNameToPrettyString(filePath));
loadTemplateSingle("file-card.mustache", model, (content: string, id: string) => {
let snip = $(content);
let container = $("#" + elem.id);
if (append) {
container.append(snip);
} else {
container.empty().append(snip);
}
setTimeout(() => {
$(`#${id}`).on("click", () => {
launchDocument(filePath);
});
}, 1); //for some reason we have to let the dom breathe before it will let us do this?
});
// let model = new CardModel(getImagePathFromDocumentName(filePath), fileNameToPrettyString(filePath));
// loadTemplateSingle("file-card.mustache", model, (content: string, id: string) => {
// let snip = $(content);
// let container = $("#" + elem.id);
//
// if (append) {
// container.append(snip);
// } else {
// container.empty().append(snip);
// }
// setTimeout(() => {
// $(`#${id}`).on("click", () => {
// launchDocument(filePath);
// });
// }, 1); //for some reason we have to let the dom breathe before it will let us do this?
// });
}
export function buildDefaultWebCards(elem: Element) {
@ -46,38 +49,24 @@ export function buildDefaultWebCards(elem: Element) {
export function buildWebCard(urlText: string, elem: Element, append: boolean = false, $: any = require('jquery')) {
let url = new URL(urlText);
let favicon = WebUtils.getFaviconUrl(url);
let model = new CardModel(favicon, urlText);
loadTemplateSingle("web-card.mustache", model, (content: string, id: string) => {
let model = new CardModel(
"Paycor",
"Clock in and out, request time off, review health benefits and access paystubs using the Paycor human-resources application.",
FileUtils.getPathToImage("PaycorLogo2-Circle_100x100.png"),
urlText
);
loadTemplateSingle("web-card.mustache", model, (content: string, id: string) => {
console.log(content);
if (append) {
elem.innerHTML = elem.innerHTML + content;
} else {
elem.innerHTML = content;
}
new Promise<string>((resolve, reject) => {
$.get(url.toString(), (data, status) => {
try {
if ('success' === status) {
resolve($(data).filter('title').text());
}
} catch (a) {
console.error("Error while attempting to fetch page title", a)
}
}).fail((failure) => {
reject(failure);
})
}).then((value: string) => {
let stubb = $(`#${id}-title`).html($("<p>", {class: "pr-3 mb-0"}));
stubb.html(value);
$(`#${id}`).on("click", () => {
launchWebsite(url.toString());
});
}).catch(reason => {
let card = $("<p>", {id: "come on", class: "pr-3 mb-0"});
card.text(urlText);
$(`#${id}-title`).html(card);
$(`#${id}`).on("click", () => {
launchWebsite(url.toString());
});
});

Write Preview
Loading…
Cancel
Save