implemented factory method for links

5 years ago · dbef4fa686
parent f611e050f3
commit dbef4fa686
11 changed files with 74 additions and 30 deletions
--- a/src/assets/conf/resources-landing-page.json
+++ b/src/assets/conf/resources-landing-page.json
@ -0,0 +1,22 @@
+{
+  "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": "PaycorLogo2-Circle_100x100.png",
+      "urlText": "https://www.paycor.com/"
+    },
+    {
+      "title": "Gmail",
+      "description": "Access your company e-mail and a suite of Google apps, including a calendar, instant messaging and cloud storage.",
+      "imagePath": "GmailCircle_100x100.png",
+      "urlText": "https://mail.google.com"
+    },
+    {
+      "title": "Workplace",
+      "description": "Get the latest news and connect with colleagues. JDSfaulkner uses Workplace by Facebook for posting and sharing.",
+      "imagePath": "WorkplaceLogo-Circle_100x100.png",
+      "urlText": "https://jdsfaulkner.workplace.com"
+    }
+  ]
+}
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@ -5,7 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ResourceFinder</title>

-    <link rel="stylesheet" href="styles/ResourcesLandingPage.css">
+    <link rel="stylesheet" href="styles/resources-landing-page.css">

    <script>let $ = require('jquery');</script>
    <script>require('popper.js')</script>
@ -54,7 +54,7 @@

        <div class="album py-5">
            <div class="container bg-primary">
-<!--                divcontainer-->
+<!--                div container-->
                <div id="grid-container" class="row">


--- a/src/assets/pages/scripts/index_app.js
+++ b/src/assets/pages/scripts/index_app.js
@ -2,9 +2,7 @@ const path = require('path');
 const factory = require(path.join(appDir, 'viewFactory'))

 function loadDocuments() {
-    let container = document.querySelector("#grid-container");
-
-    factory.buildWebCard("https://www.paycor.com/", container, true);
+    factory.buildWebCardsFromConfig("resources-landing-page.json");
 }

 loadDocuments();
--- a/src/assets/pages/styles/resources-landing-page.scss
+++ b/src/assets/pages/styles/resources-landing-page.scss
@ -38,3 +38,4 @@
 .footer p {
  margin-bottom: .25rem;
 }
+
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@ -1,6 +1,21 @@
+@use "sass:map";
 $enable-rounded: true !default;

+
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
+
+.web-card {
+  cursor: pointer;
+}
+
+.web-card-background{
+  background-color: map-get($theme-colors, secondary);
+}
+
+.web-card-background:hover{
+  background-color: map-get($theme-colors, warning);
+}
+
--- a/src/assets/pages/styles/theme-dark.scss
+++ b/src/assets/pages/styles/theme-dark.scss
@ -1,3 +1,4 @@
+
 $theme-colors: (
        "primary": #0B031C,
        "secondary": #211F37,
@ -5,4 +6,5 @@ $theme-colors: (
        "info": #1C1CDE,
        "warning": #303033
 );
+
@import "theme-base";
--- a/src/assets/pages/styles/theme-light.scss
+++ b/src/assets/pages/styles/theme-light.scss
@ -1,3 +1,4 @@
+
 $theme-colors: (
        "primary": #ffffff,
        "secondary": #bbbbbb,
--- a/src/assets/views/web-card.mustache
+++ b/src/assets/views/web-card.mustache
@ -1,6 +1,6 @@
 <html lang="en">
-<div class="col-md-4" id="{{{id}}}">
-    <div class="card mb-4 shadow-sm bg-secondary">
+<div class="col-md-4 web-card" id="{{{id}}}" >
+    <div class="card mb-4 shadow-sm web-card-background">
        <div class="card-body">
            <h7 class="card-text text-white" style="text-align:center">{{title}}</h7>
            <p class="card-text text-success">{{description}} </p>
--- a/src/ts_source/templates.ts
+++ b/src/ts_source/templates.ts
@ -33,7 +33,6 @@ export function loadTemplate(filename: string, objs: object[], cb: TemplateCallb
 }

 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);
    cardModel['id'] = createId(cardModel.resourcePath);
--- a/src/ts_source/themes.ts
+++ b/src/ts_source/themes.ts
@ -36,11 +36,10 @@ export module Themes {
        for (let i = 0, l = headLinks.length; i < l; i++) {
            let link = headLinks[i];
            if (themePattern.test(link.href)) {
-                console.log(`Found ${link}. Removing...`);
-                link.remove()
+                link.remove();
            }
        }
-        head.append(buildCSSLink(newResource));
+        head.prepend(buildCSSLink(newResource));
    }

    function getButtonClassFromAppTheme(t: AppTheme): string {
--- a/src/ts_source/viewFactory.ts
+++ b/src/ts_source/viewFactory.ts
@ -1,4 +1,4 @@
-import {ConfigPaths, Configurator, FileUtils} from './fileutils'
+import {Configurator, FileUtils} from './fileutils'
 import {loadTemplateSingle} from "./templates"

 const shell = require('electron').shell;
@ -37,36 +37,43 @@ export function buildFileCard(filePath: string, elem: Element, append: boolean =
    // });
 }

-export function buildDefaultWebCards(elem: Element) {
-    let userPrefs = Configurator.loadAppConfig(ConfigPaths.ApplicationConfigName);
-    let links = userPrefs['default-links'];
+export function buildWebCardsFromConfig(configName: string) {
+    let elementConfig = Configurator.loadAppConfig(configName);
    let $ = require('jquery')
-    for (let i = 0, l = links.length; i < l; i++) {
-        let link = links[i];
-        buildWebCard(link, elem, true, $);
+    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}`);
+        console.log(element);
+        for (let j = 0, m = contentList.length; j<m;j++){
+            let content = contentList[j];
+            buildWebCard(element, content, true, $);
+        }
+
    }
 }

-export function buildWebCard(urlText: string, elem: Element, append: boolean = false, $: any = require('jquery')) {
-    let url = new URL(urlText);
-
+export function buildWebCard(elem: JQuery<HTMLElement>, obj, append: boolean = false, $: any = require('jquery')) {
    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
+        obj["title"],
+        obj["description"],
+        FileUtils.getPathToImage(obj["imagePath"]),
+        obj["urlText"]
    );

    loadTemplateSingle("web-card.mustache", model, (content: string, id: string) => {
-        console.log(content);
+        console.log(elem);
        if (append) {
-            elem.innerHTML = elem.innerHTML + content;
+            elem.append(content);
        } else {
-            elem.innerHTML = content;
+            elem.html(content)
        }

        $(`#${id}`).on("click", () => {
-            launchWebsite(url.toString());
+            launchWebsite(obj["urlText"].toString());
        });

    });