Feat/update interface subj dom and some interface features

interface/src/App.tsx

@@ -3,7 +3,7 @@ import { Route, Redirect } from "react-router-dom";
 import { loadingComponent } from '@components/LoadingComponent';
 import { routes } from '@constants';
 import { client } from "@api";
-import { ScAddr, ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
+import { ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
 
 import 'antd/dist/antd.css';
 import './assets/main.css';
@@ -38,6 +38,8 @@ export const App = () => {
         const [headerBgColor, setHeaderBgColor] = useState<string>('#39494C');
         const [mainBgColor, setMainBgColor] = useState<string>('#fcfafa');
         const [footerBgColor, setFooterBgColor] = useState<string>('#39494C');
+
+        const [fontFamily, setFontFamily] = useState<string>('Roboto');
 
         const funcChange = [setHeaderBgColor, setMainBgColor, setFooterBgColor]
 
@@ -91,13 +93,60 @@ export const App = () => {
                 }    
             }
         }
-
+
+        async function fetchFontFamily() {
+            const fontType = 'nrel_font_type';
+            const visualInter = 'nrel_visual_interface'
+
+            const helpKeynodes = [
+                { id: fontType, type: ScType.NodeConstNoRole },
+                { id: visualInter, type: ScType.NodeConstNoRole },
+            ];
+
+            const fontAlias = '_font';
+            const componentAlias = '_component';
+
+            const hKeynodes = await client.resolveKeynodes(helpKeynodes);
+
+
+            const template = new ScTemplate();
+            template.tripleWithRelation(
+                ScType.NodeVar,
+                ScType.EdgeDCommonVar,
+                [ScType.NodeVar, componentAlias],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[visualInter],
+            );
+            template.tripleWithRelation(
+                componentAlias,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, fontAlias],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[fontType],
+            );
+            const resultFontLink = await client.templateSearch(template);
+
+            if (resultFontLink.length) {
+                const fontLink = resultFontLink[0].get(fontAlias);
+                const resultFont = await client.getLinkContents([fontLink]);
+                if (resultFont.length) {
+                    let font = resultFont[0].data;
+                    setFontFamily(font as any);
+                    const eventParams = new ScEventParams(fontLink, ScEventType.ChangeContent, fetchFontFamily);
+                    await client.eventsCreate([eventParams]); 
+                }
+            }    
+
+        }
+
         useEffect(() => {
             fetchColorValue();
+            fetchFontFamily();
         }, []);
 
         const headerStyles = {
             background: headerBgColor,
+            'font-family': fontFamily,
         };
 
         const mainStyles = {
@@ -106,6 +155,7 @@ export const App = () => {
 
         const footerStyles = {
             background: footerBgColor,
+            'font-family': fontFamily,
         };
 
     return (

interface/src/components/Footer/FooterPanel.tsx

@@ -1,9 +1,85 @@
-import * as React from 'react';
+import { useEffect, useState } from "react";
+import { client } from "@api";
+import { ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
+
 
 export const FooterPanel = () => {
+
+    const [footerText, setFooterText] = useState<string>('Авторское право © Intelligent Semantic Systems LLC, Все права защищены');
+    const [systemNameSize, setSystemNameSize] = useState<number>(22);
+
+    async function fetchTextValue() {
+        const conceptFooter = 'concept_footer';
+        const copyrightText = 'nrel_copyright_text';
+        const fontSizeRel = 'nrel_font_size';
+
+        const baseKeynodes = [
+            { id: conceptFooter, type: ScType.NodeConstClass },
+        ];
+
+        const helpKeynodes = [
+            { id: copyrightText, type: ScType.NodeConstNoRole },
+            { id: fontSizeRel, type: ScType.NodeConstNoRole },
+        ];
+
+        const textAlias = '_text';
+        const fontSize = '_size';
+        const componentAlias = '_component'
+
+        const keynodes = await client.resolveKeynodes(baseKeynodes);
+        const hKeynodes = await client.resolveKeynodes(helpKeynodes);
+
+        for (var i = 0; i < baseKeynodes.length; i++) {
+            const template = new ScTemplate();
+            template.triple(
+                keynodes[baseKeynodes[i].id],
+                ScType.EdgeAccessVarPosPerm,
+                [ScType.NodeVar, componentAlias],
+            );
+            template.tripleWithRelation(
+                componentAlias,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, textAlias],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[copyrightText],
+            );
+            template.tripleWithRelation(
+                componentAlias,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, fontSize],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[fontSizeRel],
+            );
+            const resultTextLink = await client.templateSearch(template);
+
+            if (resultTextLink.length) {
+                const textLink = resultTextLink[0].get(textAlias);
+                const resultText = await client.getLinkContents([textLink]);
+                const sizeLink = resultTextLink[0].get(fontSize);
+                const resultSize = await client.getLinkContents([sizeLink]);
+                if (resultText.length && resultSize.length) {
+                    let text = resultText[0].data;
+                    let size = resultText[0].data;
+                    setFooterText(text as any);
+                    setSystemNameSize(size as number);
+                    const eventParams = new ScEventParams(textLink, ScEventType.ChangeContent, fetchTextValue);
+                    await client.eventsCreate([eventParams]); 
+                }
+            }    
+        }
+    }
+
+    const copyrightStyles = {
+        'font-size': systemNameSize,
+    };
+
+    useEffect(() => {
+        fetchTextValue();
+    }, []);
+
     return (
-        <span className="copyright">
-            Авторское право © Intelligent Semantic Systems LLC, Все права защищены
+        <span className="copyright" /*style={copyrightStyles}*/>
+            {footerText}
         </span>
     );
 }

interface/src/components/Header/HeaderPanel.tsx

@@ -1,18 +1,190 @@
 import { routes } from '@constants';
-import * as React from 'react';
 import { NavLink } from 'react-router-dom';
+import { useEffect, useState } from "react";
+import { client } from "@api";
+import { ScEventParams, ScEventType, ScTemplate, ScType } from "ts-sc-client";
 
 export const HeaderPanel = () => {
+    const [systemName, setSystemName] = useState<string>('NIKA');
+    const [systemNameSize, setSystemNameSize] = useState<number>(22);
+
+    const [menuFirst, setMenuFirst] = useState<string>('Главное');
+    const [menuSecond, setMenuSecond] = useState<string>('О нас');
+
+    async function fetchSystemNameValue() {
+        const conceptSysName = 'concept_decorative_user_interface_component';
+        const systemNameRel = 'nrel_system_name';
+        const fontSizeRel = 'nrel_font_size';
+
+
+        const baseKeynodes = [
+            { id: conceptSysName, type: ScType.NodeConstClass },
+        ];
+
+        const helpKeynodes = [
+            { id: systemNameRel, type: ScType.NodeConstNoRole },
+            { id: fontSizeRel, type: ScType.NodeConstNoRole },
+        ];
+
+        const textAlias = '_text';
+        const fontSize = '_size';
+        const componentAlias = '_component'
+
+        const keynodes = await client.resolveKeynodes(baseKeynodes);
+        const hKeynodes = await client.resolveKeynodes(helpKeynodes);
+
+        for (var i = 0; i < baseKeynodes.length; i++) {
+            const template = new ScTemplate();
+            template.triple(
+                keynodes[baseKeynodes[i].id],
+                ScType.EdgeAccessVarPosPerm,
+                [ScType.NodeVar, componentAlias],
+            );
+            template.tripleWithRelation(
+                componentAlias,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, textAlias],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[systemNameRel],
+            );
+            template.tripleWithRelation(
+                componentAlias,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, fontSize],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[fontSizeRel],
+            );
+            const resultTextLink = await client.templateSearch(template);
+
+            if (resultTextLink.length) {
+                const textLink = resultTextLink[0].get(textAlias);
+                const resultText = await client.getLinkContents([textLink]);
+                const sizeLink = resultTextLink[0].get(fontSize);
+                const resultSize = await client.getLinkContents([sizeLink]);
+                if (resultText.length && resultSize.length) {
+                    let text = resultText[0].data;
+                    let size = resultText[0].data;
+                    setSystemName(text as any);
+                    setSystemNameSize(size as number);
+                    const eventParams = new ScEventParams(textLink, ScEventType.ChangeContent, fetchSystemNameValue);
+                    await client.eventsCreate([eventParams]); 
+                }
+            }    
+        }
+    }
+
+    async function fetchMenuValues() {
+        const conceptMenu = 'concept_menu';
+        const systemNameRel = 'nrel_system_name';
+        const decompositionRel = 'nrel_decomposition';
+        const rrel1 = 'rrel_1';
+        const rrel2 = 'rrel_2';
+
+        const baseKeynodes = [
+            { id: conceptMenu, type: ScType.NodeConstClass },
+        ];
+
+        const helpKeynodes = [
+            { id: systemNameRel, type: ScType.NodeConstNoRole },
+            { id: decompositionRel, type: ScType.NodeConstNoRole },
+            { id: rrel1, type: ScType.NodeConstRole },
+            { id: rrel2, type: ScType.NodeConstRole },
+        ];
+
+
+        const firstNode = '_first_node';
+        const secondNode = '_second_node';
+        const textFirstAlias = '_text_first';
+        const textSecondAlias = '_text_second';
+        const decompTuple = '_tuple';
+        const componentAlias = '_component'
+
+        const keynodes = await client.resolveKeynodes(baseKeynodes);
+        const hKeynodes = await client.resolveKeynodes(helpKeynodes);
+
+        for (var i = 0; i < baseKeynodes.length; i++) {
+            const template = new ScTemplate();
+            template.triple(
+                keynodes[baseKeynodes[i].id],
+                ScType.EdgeAccessVarPosPerm,
+                [ScType.NodeVar, componentAlias],
+            );
+            template.tripleWithRelation(
+                [ScType.NodeVarTuple, decompTuple],
+                ScType.EdgeDCommonVar,
+                componentAlias,
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[decompositionRel],
+            );
+            template.tripleWithRelation(
+                decompTuple,
+                ScType.EdgeAccessVarPosPerm,
+                [ScType.NodeVar, firstNode],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[rrel1],
+            );
+            template.tripleWithRelation(
+                firstNode,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, textFirstAlias],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[systemNameRel],
+            );
+            template.tripleWithRelation(
+                decompTuple,
+                ScType.EdgeAccessVarPosPerm,
+                [ScType.NodeVar, secondNode],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[rrel2],
+            );
+            template.tripleWithRelation(
+                secondNode,
+                ScType.EdgeDCommonVar,
+                [ScType.LinkVar, textSecondAlias],
+                ScType.EdgeAccessVarPosPerm,
+                hKeynodes[systemNameRel],
+            );
+            const resultTextLink = await client.templateSearch(template);
+
+            if (resultTextLink.length) {
+                const textFirstLink = resultTextLink[0].get(textFirstAlias);
+                const resultFirstText = await client.getLinkContents([textFirstLink]);
+                const textSecondLink = resultTextLink[0].get(textSecondAlias);
+                const resultSecondText = await client.getLinkContents([textSecondLink]);
+
+                if (resultFirstText.length && resultSecondText.length) {
+                    let firstText = resultFirstText[0].data;
+                    let secondText = resultSecondText[0].data;
+                    setMenuFirst(firstText as any);
+                    setMenuSecond(secondText as any);
+                    const eventParams = new ScEventParams(textFirstLink, ScEventType.ChangeContent, fetchMenuValues) || new ScEventParams(textSecondLink, ScEventType.ChangeContent, fetchMenuValues);
+                    await client.eventsCreate([eventParams]); 
+                }
+            }    
+        }
+    }
+
+
+    const headerLogoStyles = {
+        'font-size': systemNameSize,
+    };
+
+    useEffect(() => {
+        fetchSystemNameValue();
+        fetchMenuValues();
+    }, []);
+
+
     return (
         <div className="header">
-            <h1 className="header-logo-text">NIKA</h1>
+            <h1 className="header-logo-text" /*style={headerLogoStyles}*/>{systemName}</h1>
             <div className="nav-container">
                 <ul className="nav">
                     <li>
-                        <NavLink to={routes.MAIN}>Главная</NavLink>
+                        <NavLink to={routes.MAIN}>{menuFirst}</NavLink>
                     </li>
                     <li>
-                        <NavLink to={routes.ABOUT}>О нас</NavLink>
+                        <NavLink to={routes.ABOUT}>{menuSecond}</NavLink>
                     </li>
                 </ul>
             </div>