implemented web-cards and web-card creation in viewFactory.ts

build-validation
David Tookey 5 years ago
parent 04bb9c9d8a
commit 55c77ebefe

@ -0,0 +1,7 @@
{
"default-links": [
"https://gmail.com",
"https://archive.carolina.engineering",
"https://www.paycor.com/"
]
}

@ -5,6 +5,7 @@ function loadDocuments() {
let container = document.querySelector("#container"); let container = document.querySelector("#container");
let fileName = "voicemail-and-vacation-responder.pdf"; let fileName = "voicemail-and-vacation-responder.pdf";
factory.buildFileCard(fileName, container, true) factory.buildFileCard(fileName, container, true)
factory.buildDefaultWebCards(container)
} }
loadDocuments(); loadDocuments();

@ -2,11 +2,16 @@ body {
background: #ffffff; background: #ffffff;
} }
.thumbnail { .thumbnail64 {
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
.thumbnail32 {
width: 16px;
height: 32px;
}
.file-card{ .file-card{
cursor: pointer; cursor: pointer;
} }

@ -1,6 +1,6 @@
<html lang="en"> <html lang="en">
<div id="{{{id}}}" class="media d-inline-flex mx-2 file-card"> <div id="{{{id}}}" class="media d-inline-flex mx-2 file-card">
<img class="align-self-center mr-3 py-2 thumbnail" src="{{{imagePath}}}" alt="File icon"> <img class="align-self-center mr-3 py-2 thumbnail64" src="{{{imagePath}}}" alt="File icon">
<div class="media-body align-self-center"> <div class="media-body align-self-center">
<p class="pr-3 mb-0">{{fileName}}</p> <p class="pr-3 mb-0">{{fileName}}</p>
</div> </div>

@ -0,0 +1,10 @@
<html lang="en">
<div id="{{{id}}}" class="media d-inline-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>
</div>
</div>
</html>

15
package-lock.json generated

@ -70,6 +70,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/jquery": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.3.tgz",
"integrity": "sha512-IENpHTjGksr2wQS6ZO8eMIE0tIB22Ywg+n3/yAWCa56VSZ26phcwAbFdh9+VNUWk7e83qB27QLax3Rf4G92Y9A==",
"dev": true,
"requires": {
"@types/sizzle": "*"
}
},
"@types/minimatch": { "@types/minimatch": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -83,6 +92,12 @@
"integrity": "sha512-Dg4fab0IP6ZtdJOkwTaMaOJA3PWw7bR6cUYh+nxkYe4+ZogiLBKhaEr9sHqVkCtREVLw92g3Fl1bt8++dHKavw==", "integrity": "sha512-Dg4fab0IP6ZtdJOkwTaMaOJA3PWw7bR6cUYh+nxkYe4+ZogiLBKhaEr9sHqVkCtREVLw92g3Fl1bt8++dHKavw==",
"dev": true "dev": true
}, },
"@types/sizzle": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
"dev": true
},
"@types/yauzl": { "@types/yauzl": {
"version": "2.9.1", "version": "2.9.1",
"resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",

@ -45,6 +45,7 @@
"electron": "^7.2.4", "electron": "^7.2.4",
"electron-settings": "^3.0.7", "electron-settings": "^3.0.7",
"electron-shortcut-normalizer": "^1.0.0", "electron-shortcut-normalizer": "^1.0.0",
"electron-packager": "^15.1.0" "electron-packager": "^15.1.0",
"@types/jquery": "^3.5.1"
} }
} }

@ -2,6 +2,7 @@ let fs = require('fs')
let Mustache = require('mustache') let Mustache = require('mustache')
const crypto = require('crypto') const crypto = require('crypto')
import {FileUtils} from './fileutils' import {FileUtils} from './fileutils'
import {CardModel} from "./viewFactory";
interface TemplateCallbackType { interface TemplateCallbackType {
(rendered: string[]): void (rendered: string[]): void
@ -22,12 +23,12 @@ export function loadTemplate(filename: string, objs: object[], cb: TemplateCallb
}) })
} }
export function loadTemplateSingle(filename: string, obj: object, cb: (content: string, id: string) => void) { export function loadTemplateSingle(filename: string, obj: CardModel, cb: (content: string, id: string) => void) {
let fu = new FileUtils(); let fu = new FileUtils();
let path = fu.getPathToView(filename); let path = fu.getPathToView(filename);
fs.readFile(path, 'utf8', (err, contents) => { fs.readFile(path, 'utf8', (err, contents) => {
if (err) throw err; if (err) throw err;
obj['id'] = createId(filename); obj['id'] = createId(obj.fileName);
let rendered = Mustache.render(contents, obj) let rendered = Mustache.render(contents, obj)
cb(rendered, obj['id']) cb(rendered, obj['id'])
}) })

@ -1,16 +1,19 @@
import {Configurator, FileUtils} from './fileutils' import {Configurator, FileUtils} from './fileutils'
import {loadTemplateSingle} from "./templates" import {loadTemplateSingle} from "./templates"
import {WebUtils} from "./webutils"
const shell = require('electron').shell; const shell = require('electron').shell;
const config = new Configurator(); const config = new Configurator();
const fu = new FileUtils(); const fu = new FileUtils();
class CardModel {
export class CardModel {
imagePath: string; imagePath: string;
fileName: string; fileName: string;
constructor(path: string, name: string) { constructor(imagePath: string, name: string) {
this.imagePath = path; this.imagePath = imagePath;
this.fileName = name; this.fileName = name;
} }
} }
@ -29,6 +32,41 @@ export function buildFileCard(filePath: string, elem: Element, append: boolean =
}); });
} }
export function buildDefaultWebCards(elem: Element) {
let userPrefs = config.loadConfigMap("user.json");
let links = userPrefs['default-links'];
let $ = require('jquery')
for (let i = 0, l = links.length; i < l; i++) {
let link = links[i];
buildWebCard(link, elem, true, $);
}
}
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", model, (content: string, id: string) => {
if (append) {
elem.innerHTML = elem.innerHTML + content;
} else {
elem.innerHTML = content;
}
$.get(url.toString(), (data, status) => {
if ('success' === status) {
let title = $(data).filter('title').text();
$(`#${id}-title`).html($("<p>", {class: "pr-3 mb-0"}).html(title));
$(`#${id}`).on("click", () => {
launchWebsite(url.toString());
});
}
})
});
}
function fileNameToPrettyString(fileName: string): string { function fileNameToPrettyString(fileName: string): string {
let name = fileName.substr(0, fileName.lastIndexOf('.')); let name = fileName.substr(0, fileName.lastIndexOf('.'));
name = name.replace(/[.\-_]/ig, " ") name = name.replace(/[.\-_]/ig, " ")
@ -45,11 +83,12 @@ function getImagePathFromDocumentName(name: string): string {
return fu.getPathToImage(config.getFileExtensionToImageMap()[fu.getFileExtension(name)]) return fu.getPathToImage(config.getFileExtensionToImageMap()[fu.getFileExtension(name)])
} }
function launchDocument(filename) { function launchDocument(filename: string) {
let fullPath = fu.getPathToDocument(filename); let fullPath = fu.getPathToDocument(filename);
shell.openItem(fullPath); shell.openItem(fullPath);
} }
function launchWebsite(url) { function launchWebsite(url: string) {
console.log("Attempting to launch " + url)
shell.openItem(url); shell.openItem(url);
} }

@ -0,0 +1,6 @@
export module WebUtils{
export function getFaviconUrl(url: URL): string{
return `https://www.google.com/s2/favicons?domain=${url.toString()}`;
}
}
Loading…
Cancel
Save