Add support of rendering to Gefest

frontend/src/css/main.css

@@ -20,3 +20,27 @@
     margin-top: 1.25%; 
     margin-bottom: 1.25%;
 }
+
+.news-ui {
+    width: 40%;
+    margin-bottom:
+    calc(15vh);
+    margin-left: 30%;
+    margin-right: 30%;
+    backdrop-filter: blur(3px);
+}
+
+.light-news-ui {
+    background-color: rgba(255, 255, 255, 0.45) !important;
+}
+
+.dark-news-ui {
+    background-color: rgba(55, 55, 55, 0.45) !important;
+}
+
+#app {
+    margin: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+}

frontend/src/main.ts

@@ -16,6 +16,20 @@ let currentStyle = defaultStyle;
 
 const api : ControllerAPI = new ControllerAPI();
 
+async function authInit() {
+    console.log("User is authenticated");
+    const newsFeed = await api.getNews(true) as NewsFeed;
+    newsFeed.style = currentStyle;
+    const appElement = document.getElementById("app");
+    if (appElement)
+        appElement.innerHTML = newsFeed.build();
+}
+
+async function logInInit () {
+    console.log("User is not authenticated");
+    // Load the auth page
+}
+
 async function main() {
     // init navbar
     const navbar = new Navbar();
@@ -23,14 +37,9 @@ async function main() {
     document.body.innerHTML = "<div id='app'></div>" + navbar.build();
 
     if (await api.isAuthenticated()) {
-        console.log("User is authenticated");
-        const newsFeed = await api.getNews(true) as NewsFeed;
-        const appElement = document.getElementById("app");
-        if (appElement)
-            appElement.innerHTML = newsFeed.build();
+        await authInit();
     } else {
-        console.log("User is not authenticated");
-        // Load the auth page
+        await logInInit();
     }
 }
 

frontend/src/modules/Gefest/element.ts

@@ -25,8 +25,8 @@ export abstract class GefestElement {
         if (this.clickHandler === null)
             return null;
         return () => {
-            GefestEngine.activateOnClick();
             this.clickHandler!();
+            GefestEngine.activateOnClick();
         };
     }
 
@@ -65,6 +65,13 @@ export abstract class GefestElement {
         this.content = content;
     }
 
+    /** 
+     * Call to GefestEngine for rerender element
+    */
+    update (): void {
+        GefestEngine.reRenderByGI(this.gefestId);
+    }
+
     /** 
      * Builds the element and returns it as a string. If the element has a style, it applies the style to the rendered HTML.
      * @param isFromStyle Indicates if the build is being called from a style application. This prevents infinite recursion when applying styles.
@@ -73,6 +80,9 @@ export abstract class GefestElement {
     build (isFromStyle: boolean = false): string {
         if (this.isHidden)
             this.setAttribute('hidden', '');
+        else
+            this.removeAttribute('hidden');
+
         if (!isFromStyle)
             return this.applyStyle(this.render(), this);
         return this.render();
@@ -84,7 +94,9 @@ export abstract class GefestElement {
      */
     checkReservedAttribute(key: string): void {
         if (({ "style": true, "class": true })[key]) 
-            throw new Error(`The attribute "${key}" is reserved. Use the setStyle method for styles and setClass method for classes.`);
+            throw new Error(`The attribute "${
+                key
+            }" is reserved. Use the setPersonalStyle method for styles and setClass method for classes.`);
     }
 
     /**

frontend/src/modules/Gefest/engine.ts

@@ -2,12 +2,14 @@ import { GefestElement } from "./element";
 
 // For protecting the set of elements from direct access
 const elements: Set<GefestElement> = new Set();
+const elementsMapping: Map<string, GefestElement> = new Map<string, GefestElement> ();
 export class GefestEngine {
     static register (element: GefestElement) : string {
         elements.add(element);
         // Generate GefestID for the element
         const gefestId = `gefest-${Math.random().toString(36).substr(2, 9)}`;
         element.setAttribute('data-gefest-id', gefestId);
+        elementsMapping.set(gefestId, element);
 
         return gefestId;
     }
@@ -26,4 +28,16 @@ export class GefestEngine {
         await main();
         await GefestEngine.activateOnClick();
     }
+
+    static reRenderByGI (gefestId: string) {
+        const gefestElement = elementsMapping.get(gefestId);
+        if (!gefestElement) return;
+        const elementHTML = document.querySelectorAll(`[data-gefest-id="${gefestId}"]`);
+
+        if (elementHTML.length > 0) {
+            const htmlElement = elementHTML[0] as HTMLElement;
+            htmlElement.outerHTML = gefestElement.build();
+            GefestEngine.activateOnClick();
+        }
+    }
 }

frontend/src/pages/default-element.ts

@@ -6,4 +6,9 @@ export abstract class DefaultElement extends GefestElement {
     constructor(content: (GefestElement | string)[] | string) {
         super(content);
     }
+
+    build(isFromStyle?: boolean): string {
+        if (!this.style) throw new Error("Setup style is required");
+        return super.build(isFromStyle);
+    }
 }

frontend/src/pages/navbar.ts

@@ -2,7 +2,7 @@ import { GefestA } from "../modules/Gefest/primitives/a";
 import { GefestI } from "../modules/Gefest/primitives/i";
 import { DefaultElement } from "./default-element";
 
-type FontAwesomeGroup = "fas" | "far" | "fab"; // e.g. "fa-solid fa-home"
+type FontAwesomeGroup = "fas" | "far" | "fab"; // e.g. "fas fa-home"
 type FontAwesomeIcon = `${FontAwesomeGroup} fa-${string}`;
 
 class NavbarButton extends DefaultElement {