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

5 years ago · 55c77ebefe
parent 04bb9c9d8a
commit 55c77ebefe
10 changed files with 96 additions and 11 deletions
--- a/assets/conf/user.json
+++ b/assets/conf/user.json
@ -0,0 +1,7 @@
+{
+  "default-links": [
+    "https://gmail.com",
+    "https://archive.carolina.engineering",
+    "https://www.paycor.com/"
+  ]
+}
--- a/assets/pages/scripts/index_app.js
+++ b/assets/pages/scripts/index_app.js
@ -5,6 +5,7 @@ function loadDocuments() {
    let container = document.querySelector("#container");
    let fileName = "voicemail-and-vacation-responder.pdf";
    factory.buildFileCard(fileName, container, true)
+    factory.buildDefaultWebCards(container)
 }

 loadDocuments();
--- a/assets/pages/styles/default.css
+++ b/assets/pages/styles/default.css
@ -2,11 +2,16 @@ body {
    background: #ffffff;
 }

-.thumbnail {
+.thumbnail64 {
    width: 64px;
    height: 64px;
 }

+.thumbnail32 {
+    width: 16px;
+    height: 32px;
+}
+
 .file-card{
    cursor: pointer;
 }
--- a/assets/views/file-card.mustache
+++ b/assets/views/file-card.mustache
@ -1,6 +1,6 @@
 <html lang="en">
 <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">
        <p class="pr-3 mb-0">{{fileName}}</p>
    </div>
--- a/assets/views/web-card.mustache
+++ b/assets/views/web-card.mustache
@ -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>
--- a/package-lock.json
+++ b/package-lock.json
@ -70,6 +70,15 @@
        "@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": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -83,6 +92,12 @@
      "integrity": "sha512-Dg4fab0IP6ZtdJOkwTaMaOJA3PWw7bR6cUYh+nxkYe4+ZogiLBKhaEr9sHqVkCtREVLw92g3Fl1bt8++dHKavw==",
      "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": {
      "version": "2.9.1",
      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
--- a/package.json
+++ b/package.json
@ -45,6 +45,7 @@
    "electron": "^7.2.4",
    "electron-settings": "^3.0.7",
    "electron-shortcut-normalizer": "^1.0.0",
-    "electron-packager": "^15.1.0"
+    "electron-packager": "^15.1.0",
+    "@types/jquery": "^3.5.1"
  }
 }
--- a/util_src/templates.ts
+++ b/util_src/templates.ts
@ -2,6 +2,7 @@ let fs = require('fs')
 let Mustache = require('mustache')
 const crypto = require('crypto')
 import {FileUtils} from './fileutils'
+import {CardModel} from "./viewFactory";

 interface TemplateCallbackType {
    (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 path = fu.getPathToView(filename);
    fs.readFile(path, 'utf8', (err, contents) => {
        if (err) throw err;
-        obj['id'] = createId(filename);
+        obj['id'] = createId(obj.fileName);
        let rendered = Mustache.render(contents, obj)
        cb(rendered, obj['id'])
    })
--- a/util_src/viewFactory.ts
+++ b/util_src/viewFactory.ts
@ -1,16 +1,19 @@
 import {Configurator, FileUtils} from './fileutils'
 import {loadTemplateSingle} from "./templates"
+import {WebUtils} from "./webutils"
+
 const shell = require('electron').shell;

 const config = new Configurator();
 const fu = new FileUtils();

-class CardModel {
+
+export class CardModel {
    imagePath: string;
    fileName: string;

-    constructor(path: string, name: string) {
-        this.imagePath = path;
+    constructor(imagePath: string, name: string) {
+        this.imagePath = imagePath;
        this.fileName = name;
    }
 }
@ -23,12 +26,47 @@ export function buildFileCard(filePath: string, elem: Element, append: boolean =
        } else {
            elem.innerHTML = content;
        }
-        document.querySelector("#" + id).addEventListener('click', ()=>{
+        document.querySelector("#" + id).addEventListener('click', () => {
            launchDocument(filePath);
        })
    });
 }

+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 {
    let name = fileName.substr(0, fileName.lastIndexOf('.'));
    name = name.replace(/[.\-_]/ig, " ")
@ -45,11 +83,12 @@ function getImagePathFromDocumentName(name: string): string {
    return fu.getPathToImage(config.getFileExtensionToImageMap()[fu.getFileExtension(name)])
 }

-function launchDocument(filename) {
+function launchDocument(filename: string) {
    let fullPath = fu.getPathToDocument(filename);
    shell.openItem(fullPath);
 }

-function launchWebsite(url) {
+function launchWebsite(url: string) {
+    console.log("Attempting to launch " + url)
    shell.openItem(url);
 }
--- a/util_src/webutils.ts
+++ b/util_src/webutils.ts
@ -0,0 +1,6 @@
+
+export module WebUtils{
+    export function getFaviconUrl(url: URL): string{
+        return `https://www.google.com/s2/favicons?domain=${url.toString()}`;
+    }
+}