@progressive-development/pd-spa-helper 0.0.1 → 0.0.3

package/src/PdSpaHelper.ts

@@ -1,33 +1,507 @@
-import { initializeApp } from 'firebase/app';
-import { getAuth, onAuthStateChanged } from 'firebase/auth';
+import { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
+import { getAuth, onAuthStateChanged, User } from 'firebase/auth';
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
 
 import { router, navigator } from 'lit-element-router';
 
-import { html, css, LitElement } from 'lit';
+import { html, LitElement, css, CSSResultGroup, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
-export class PdSpaHelper extends router(navigator(LitElement)) {
+import { initApplicationServices } from './InitApplicationData.js';
+
+import { isAuthenticated } from './firebase/auth.js';
+import { ServiceCallController } from './service-call-controller2.js';
+import { callFunction, FunctionDefinition, FunctionResult, FunctionsConfig } from './firebase/functions-client.js';
+
+import '@progressive-development/pd-page/pd-menu.js';
+import '@progressive-development/pd-page/pd-footer.js';
+
+import './router/AppMain.js';
+import './defaultpage/default-login.js';
+import './tmpown/pd-panel-viewer.js';
+import './tmpown/pd-panel.js';
+
+// TODO: How to solve this import problem?
+// eslint-disable-next-line import/no-duplicates
+import './tmpown/pd-toast.js';
+// eslint-disable-next-line import/no-duplicates
+import { PdToast } from './tmpown/pd-toast.js';
+
+// Footer Text
+const MADE_BY = {
+  txt: "made by PD Progressive Development",
+  email: "info@progressive-development.com"};
+
+// Visible time for time-limited toast
+const TOAST_DURATION = 6000;
+
+/**
+ * Data models.
+ */
+
+export interface MenuElement {
+  key: string,
+  name: string,
+  sec?: string,
+  route?: string,
+  action?: Function,
+  topItem?: boolean,
+  ref?: any,
+  icon?: string,
+}
+
+export interface NavigationPage {
+  name: string,
+  pattern: Array<string>,  
+  auth: boolean,
+  menu?: Array<MenuElement>,
+  withTeaser?: boolean,
+  withFooter?: boolean
+}
+
+export interface NavigationConfig {
+  pages: Array<NavigationPage>,
+  includeLogin: boolean
+}
+
+/**
+ * Transformed routes, generated during startInit.
+ */
+let transformedRoutes:Array<any>;
+let navigationConfig:NavigationConfig;
+let postLoginFunc:FunctionDefinition | undefined;
+
+/**
+ * Internal helper functions to generate route elemets for lit-router. 
+ */
+const transformRoutes = () => {
+
+  const transformAuthConfig = (withAuth:boolean) => 
+    withAuth ? 
+    {
+      unauthenticated: {
+        name: 'login',
+      },
+      authenticate: () => isAuthenticated(),
+    } : undefined;
+
+  let generatedRoutes:Array<any> = [];
+  navigationConfig.pages.forEach(cfEntry => {
+    const addAraay = cfEntry.pattern.map(routeMapPattern => (
+      {
+        name: cfEntry.name,
+        pattern: routeMapPattern,
+        authentication: transformAuthConfig(cfEntry.auth),
+      }
+    ));    
+    generatedRoutes = generatedRoutes.concat(addAraay);
+  });
+  
+  // add not-found route
+  generatedRoutes.push({
+    name: 'not-found',
+    pattern: '*',
+  });
+
+  return generatedRoutes;
+}
+
+
+/**
+ * Init the firebase app and application services like
+ * functions and firestore. Generate routes from navigationConfig.
+ * 
+ * @param firebaseConfig 
+ * @param functionsConfig 
+ * @param navigationConfig 
+ */
+export const startInit = (firebaseConfig: FirebaseOptions, 
+    functionsConfig: FunctionsConfig, navigationConfigParam: NavigationConfig) => {
+  
+  // init firebase app
+  const app:FirebaseApp = initializeApp(firebaseConfig);
+  
+  // init application services (functions, store)
+  initApplicationServices(app, functionsConfig);
+  postLoginFunc = functionsConfig.postLoginFunc;
+
+  if (navigationConfigParam.includeLogin) {
+    navigationConfigParam.pages.push({
+      name: "login",
+      menu: [
+        {key: "login", name: "Login"}
+      ],
+      pattern: ["login"],
+      auth: false
+    });
+  }
+
+  // generate routes from navigation config
+  navigationConfig = navigationConfigParam;
+  transformedRoutes = transformRoutes();    
+};
+
+/**
+ * Abstract class for SPAs. Extend within the app main class.
+ */
+export abstract class PdSpaHelper extends router(navigator(LitElement)) {
+
+  protected functionsController = new ServiceCallController(this);
+
+  // not used at the moment
+  @property({ type: String }) title = 'Hey there';
+
+  /**
+   * Properties needed for login/profile data.
+   */
+  @property({ type: Object, state: true }) _user: User | undefined;
+
+  @property({ type: Object, state: true }) _profile: any | undefined;
+ 
+  /**
+   * Properties needed for the router.
+   */
+  @property({ type: String, reflect: true }) route = "";
+
+  @property({ type: Object }) params = {};
+
+  @property({ type: Object }) query = {};
+
+  /**
+   * Indicates if the teaser should closed (depends on scroll position).
+   */
+  @property({ type: Boolean }) _teaserClosed = false;  
+
+  static styles = 
+    // Ref: Additional use classmap to add custom classes in concrete impl
+    css`
 
-  static styles = css`
     :host {
+      display: flex;
+      flex-flow: column;
+      height: 100%;
+    }
+
+    header {
+      flex-grow: 0;
+    }
+
+    main {
+      flex-grow: 1;
+      flex-basis: max-content;
+    }
+
+    footer {
+      flex-grow: 0;
+    }
+
+    .default-header {
+      width: 100%;
+      position: fixed;
+      top: 0;
       display: block;
-      padding: 25px;
-      color: var(--pd-spa-helper-text-color, #000);
+      z-index: 99;
     }
-  `;
 
-  @property({ type: String }) title = 'Hey there';
+    .default-teaser {
+      --pd-panel-overflow: hidden;
+      --pd-panel-height: 32vh;
+      --pd-panel-width: 100%;      
+      --pd-panel-border-radius: 0;
+      --pd-panel-bg: var(--pd-default-col);
+      --pd-panel-viewer-bg-col: var(--pd-default-col);
+    }
+
+    .default-menu {      
+      transition: background-color 1s;
+    }
+
+    .default-menu-withteaser {      
+      --pd-menu-bg-col: #AFC1D2;
+      --pd-menu-font-col: #0A3A48;
+      transition: background-color 1s;
+    }
+
+    .default-main {
+      padding-top: calc(var(--pd-menu-height) + 2em);
+      transition: padding-top 1s;
+    }
+
+    .default-main-withteaser {
+      padding-top: calc(var(--pd-menu-height) + 32vh);
+      transition: padding-top 1s;
+    }
+
+  ` as CSSResultGroup;
 
-  @property({ type: Number }) counter = 5;
+  constructor() {
 
-  __increment() {
-    this.counter += 1;
+    super();
+
+    const doSomething = (scrollPos:Number) => {
+      if (scrollPos <= 50) {
+        this._teaserClosed = false;
+      } else {
+        this._teaserClosed = true;
+      }
+    };
+
+    let ticking = false;
+    document.addEventListener('scroll', () => {
+      const lastKnownScrollPosition = window.scrollY;
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          doSomething(lastKnownScrollPosition);
+          ticking = false;
+        });
+        ticking = true;
+      }
+    });
+
+    this.activateLoginHandler();
+
+    // For common toast messages (not for callfunction toasts => handelt by own controller)
+    this.addEventListener("toast-event", this._createTemporaryToast);
+    this.addEventListener("route-event", this._handleMenuRouteEvent);    
+  }
+
+  /**
+   * Non reactive private property for the index db class.
+   */
+  // private _indexDBClient?: YoIndexDBClient|null;  
+
+  /**
+   * Needed for the router.
+   * Return all configured routes.
+   */
+  static get routes() {
+    return transformedRoutes;  
   }
 
-  render() {
+  /**
+   * Needed for the router.
+   * Set route params to internal members.
+   */
+  router(route:string, params:Object, query:Object) {
+    this.route = route;
+    this.params = params;
+    this.query = query;
+  }  
+  
+  /**
+   * Call to activate onAuthState change with profile request callbacks.
+   */
+  activateLoginHandler() {
+    // activate firebase auth handler
+    const auth = getAuth();
+    onAuthStateChanged(auth, user => {
+      if (user) {
+        this._user = user;
+        if (postLoginFunc) {
+
+          callFunction(postLoginFunc, undefined)
+            .then((result:any) => {
+              this._profile = result.resultData;
+              // redirect if login in the meantime is available 
+              // => else stay on the login page after reload/url navigation
+              if (this.route === "login") {
+                this.navigate("profile");
+              }
+            });
+        }
+      } else {
+        this._user = undefined;
+        this._profile = undefined;
+      }
+    });
+  }
+
+  render() {    
+    const pageConf = navigationConfig.pages.filter(p => p.name === this.route)[0];
+    const hideTeaser = this._teaserClosed || !pageConf?.withTeaser;
     return html`
-      <h2>${this.title} Nr. ${this.counter}!</h2>
-      <button @click=${this.__increment}>increment</button>
+      <header id="headerElementId" class="default-header">
+        ${hideTeaser ? '' : this._renderTeaser()}
+        ${this._renderMenu(pageConf, hideTeaser)}        
+      </header>      
+
+      <main class="${hideTeaser ? "default-main" : "default-main-withteaser"}">
+        <app-main active-route=${this.route}
+            @init-menu-sections="${this._initMenuSections}">
+          ${this._renderRoutePages()}
+          ${navigationConfig.includeLogin ? html`
+            <default-login route="login"></default-login>` : ''}
+        </app-main>
+      </main>
+
+      ${this.functionsController.render({
+        complete: (result: FunctionResult) => this._renderSuccessResultInfo(result),
+        initial: () => '',
+        pending: () => this._renderPendingInfo(),
+        error: (e: any) => this._renderErrorInfo(e),
+      })}
+
+      ${pageConf?.withFooter ? html`
+      <footer class="default-footer">
+        ${this._renderFooter()}
+      </footer>` : ''}
     `;
   }
-}
+
+  _renderMenu(pageConfig:NavigationPage, hideTeaser:boolean) {
+    const menuForPage = pageConfig ? (pageConfig.menu || []) : [];
+    return menuForPage ? html`
+      <pd-menu
+        class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"
+        .menuItems=${menuForPage.filter(mfp => !mfp.topItem)}
+        .topMenuItems=${menuForPage.filter(mfp => mfp.topItem)}
+        headerSize="${hideTeaser ? 80 : 440}"
+      >
+        ${hideTeaser ? this._getAppLogo() : ''}
+      </pd-menu>
+    ` : '';
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _renderTeaser(): TemplateResult | string {
+    const teaserContent = this._getTeaserContent();
+    if (!teaserContent || teaserContent.length <= 0) {
+      return '';
+    }
+    return html`
+      <pd-panel-viewer class="default-teaser" id="teaserPanelViewerId" deltaCalc="4">
+        ${teaserContent.map(content => html`
+          <pd-panel>
+            ${content}
+          </pd-panel>
+        `)}
+      </pd-panel-viewer>
+      `;
+  }
+
+  _renderFooter() {
+    return html`
+      <pd-footer 
+          class="default-footer"
+          .footerLinks="${this._getFooterItems()}"
+          version="0.5" 
+          copyright="PD Progressive Developent UG" 
+          .madeBy="${MADE_BY}" 
+          @footer-link="${this._handleFooterRouteEvent}">
+      </pd-footer>
+    `;
+  }
+
+  /**
+   * Called when (any) cloud function call was finished.   
+   */
+  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+  _renderSuccessResultInfo(result: FunctionResult) {
+    return html`
+    <pd-toast isSuccess duration="${TOAST_DURATION}">
+      ${this.functionsController.callDataPromise?.func.successTxt}
+    </pd-toast>`;
+  }
+
+  /**
+   * Called when (any) cloud function is currently running.   
+   */
+  _renderPendingInfo() {
+    return this.functionsController.callDataPromise?.func.fadeWindow ? html`
+    <p>Überblende und lade ${this.functionsController.callDataPromise?.func.name}...</p>` 
+      : html`
+      <pd-toast duration="-1">
+        ${this.functionsController.callDataPromise?.func.pendingTxt}
+      </pd-toast>`;        
+  }
+
+  /**
+   * Called when (any) cloud function stopped with errors.
+   */
+   // eslint-disable-next-line class-methods-use-this
+   _renderErrorInfo(error:any) {
+    return html`
+    <pd-toast isError duration="-1">
+      ${error}
+    </pd-toast>`;
+  }
+
+  protected abstract _getTeaserContent(): Array<TemplateResult>;
+
+  protected abstract _getFooterItems(): Array<any>;
+
+  protected abstract _getAppLogo(): TemplateResult;
+
+  protected abstract _renderRoutePages(): any;
+
+  // eslint-disable-next-line class-methods-use-this
+  _handleMenuRouteEvent(e:any) {
+    // test with el, to handel jumps also here, not used at the moment, same postion link problems...
+    if (e.detail.el) {
+      this._scrollToContent(e.detail.el);
+    } else {
+      PdSpaHelper._scrollToTop();
+      this.navigate(e.detail.route);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _handleFooterRouteEvent(e: CustomEvent) {    
+    PdSpaHelper._scrollToTop();
+    this.navigate(e.detail.link);    
+  }
+  
+  // eslint-disable-next-line class-methods-use-this
+  _initMenuSections(e:any) {
+    // get page for event
+    const menRefConf = navigationConfig.pages.filter(p => p.name === e.detail.key)[0];
+    if (menRefConf) {
+      menRefConf.menu = e.detail.menu;
+    }
+  }
+
+  _createTemporaryToast(e: any) {
+    
+    // hide existing call function toast (old one still is visible for directly incoming errors)
+    this.functionsController.clear();
+    
+    const tmpToast = new PdToast();    
+    tmpToast.isError = e.detail.isError;
+    tmpToast.isSuccess = e.detail.isSuccess;
+    const slotContent = document.createTextNode(e.detail.txt);
+    tmpToast.appendChild(slotContent)    
+
+    this.shadowRoot?.appendChild(tmpToast);
+    tmpToast.duration = TOAST_DURATION;
+
+    // set timeout to remove toast (one second later)
+    setTimeout(() => {
+      this.shadowRoot?.removeChild(tmpToast);
+    }, TOAST_DURATION + 1000);
+  }
+
+  static _scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  }
+
+  // Test, not used at the moment, jump/menu problem...
+  // eslint-disable-next-line class-methods-use-this
+  _scrollToContent(el:HTMLElement) {
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      console.log("Rect: ", rect);
+      console.log("Offset Top/Height: ", el.offsetTop, el.offsetHeight);
+      window.scrollBy({
+        top: rect.top - (this._teaserClosed ? 80 : 450),
+        left: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+
+}

package/src/defaultpage/default-login.ts

@@ -0,0 +1,15 @@
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import '../tmpown/pd-login.js';
+
+@customElement("default-login")
+export class DefaultLogin extends LitElement {
+
+  render() {
+    return html`
+      <pd-login></pd-login>
+    `;
+  }
+
+}

package/src/firebase/auth.ts

@@ -0,0 +1,30 @@
+import { getAuth, signInWithEmailAndPassword, signOut, User } from 'firebase/auth';
+
+export const logout = async (): Promise<boolean> => {
+  const auth = getAuth();
+  try {
+    await signOut(auth);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
+
+export const isAuthenticated = (): boolean =>  
+  getAuth().currentUser !== null;
+    
+export const login = async (user:string, sec:string): Promise<User> => {
+  if (!user) {   
+    const returnError = new Error("empty user");         
+    return Promise.reject(returnError);
+  }
+  if (!sec) {
+    // error.eType = 'sec';
+    // error.logMsg = 'password required';
+    const returnError = new Error("empty password");         
+    return Promise.reject(returnError);
+  }
+  const auth = getAuth();      
+  const credentials = await signInWithEmailAndPassword(auth, user, sec);
+  return credentials.user;   
+}

package/src/firebase/firestore-client.ts

@@ -0,0 +1,21 @@
+import { FirebaseApp } from 'firebase/app';
+import {Firestore, getFirestore} from 'firebase/firestore';
+// import { getAuth } from 'firebase/auth';
+
+let db:Firestore;
+
+/**
+ * During start/load application, initialize functions.
+ *
+ * @param {*} app - initialized app.
+ */
+export const initFirestore = (app: FirebaseApp) => {
+  try {
+    // init db access
+    db = getFirestore(app);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getDB = ():Firestore => db;

package/src/firebase/functions-client.ts

@@ -0,0 +1,103 @@
+import { FirebaseApp } from "firebase/app";
+import { getFunctions, HttpsCallable, httpsCallable } from "firebase/functions";
+import { TemplateResult } from "lit";
+import { ServiceCallController } from "../service-call-controller2.js";
+
+export interface FunctionDefinition {
+  name: string,
+  successCodes: Array<Number>,    
+  // Fade window during function call (true) or show only background infos (false).
+  fadeWindow: boolean,
+  successTxt: TemplateResult,
+  pendingTxt: TemplateResult
+}
+
+export interface FunctionParam {
+  func: FunctionDefinition,
+  inputData: any,
+}
+
+export interface FunctionResult {
+  resultData: unknown,
+  statusCode: number,
+}
+
+export interface FunctionsConfig {
+  region: string, // 'europe-west3'
+  functions: Array<FunctionDefinition>,
+  postLoginFunc?: FunctionDefinition,
+}
+
+const functionMap = new Map<FunctionDefinition, HttpsCallable>;
+let controller: ServiceCallController;
+
+/**
+ * During start/load application, initialize functions.  
+ * 
+ * @param {*} app - initialized app. 
+ */
+export const initFunctions = (app: FirebaseApp, functionsConfig: FunctionsConfig) => {
+  try {
+      // Initialize cloud functions through Firebase
+      const functions = getFunctions(app, functionsConfig.region);
+
+      // Initialize functions map
+      functionsConfig.functions.forEach(func => {
+        functionMap.set(func, httpsCallable(functions, func.name));
+      });
+
+  } catch (error) {
+      console.error("ToDo: Error programmieren...", error);
+  }
+}
+
+export const initController = (controllerParam: ServiceCallController) => {
+  controller = controllerParam
+}
+
+const internalCallFunction = async (def: FunctionDefinition, functionInput: any): Promise<FunctionResult> => {
+  const funcRef = functionMap.get(def);    
+  if (funcRef) {    
+    const funcResult:any = await funcRef(functionInput);
+    if (funcResult 
+        && funcResult.data && def.successCodes.includes(funcResult.data.statusCode)) {
+      return funcResult.data as FunctionResult;
+    }
+    /*
+    const ne = new Error("Invalid result");
+    if (result.data) {
+      // Read result of the Cloud Function.                            
+      switch (result.data.statusCode) {
+        case 200:
+          return resolve(result.data.projects);
+        default:
+          ne.data = result.data;
+          return reject(ne);
+      }
+    } else {
+          return reject(ne);
+        }
+      })
+      .catch((error) => {
+      // Getting the Error details.
+      const {code} = error;
+      const {message} = error;
+      const {details} = error;
+
+      console.warn("Error occured: ", code, message, details);
+      console.warn("Error: ", error);
+      return reject(error);
+    })
+    */
+  } 
+  console.log("No function available for ", def.name);
+  throw new Error("Illegal state, no data with right state available");
+}
+
+export const callFunction = async (def: FunctionDefinition, functionInput: any): Promise<FunctionResult> => {
+  const promise = internalCallFunction(def, functionInput);
+  if (controller) {
+    controller.callDataPromise = {func: def, promise};
+  }
+  return promise;
+}

package/src/index.ts

@@ -1 +1 @@
-export { PdSpaHelper } from './PdSpaHelper.js';
+export { PdSpaHelper, startInit, NavigationConfig, NavigationPage, MenuElement } from './PdSpaHelper.js';

package/src/pd-spa-helper.ts

@@ -1,3 +1,3 @@
-import { PdSpaHelper } from './PdSpaHelper.js';
-
-window.customElements.define('pd-spa-helper', PdSpaHelper);
+//import { PdSpaHelper } from './PdSpaHelper.js';
+//export default PdSpaHelper;
+//window.customElements.define('pd-spa-helper', PdSpaHelper);