Merge pull request #20 from Open-STEM/kq-vite

Added Dashboard tab

Author: kcq888

src/assets/images/dashboard.svg

@@ -0,0 +1,5 @@
+export default function XRPDashboard() {
+  return (
+    <h1 className='text-xl'>XRP Dashboard</h1>
+  )
+}

src/components/dashboard/xrp-dashboard.tsx

@@ -10,6 +10,7 @@ import userguide from '@assets/images/developer_guide.svg';
 import apilink from '@assets/images/api.svg';
 import python from '@assets/images/python.svg';
 import convert from '@assets/images/convert.svg';
+import dashboard from '@assets/images/dashboard.svg';
 import forum from '@assets/images/forum.svg';
 import cirriculum from '@assets/images/cirriculum.svg';
 import changelog from '@assets/images/changelog.svg';
@@ -54,6 +55,7 @@ import UpdateDlg from './dialogs/updatedlg';
 import React from 'react';
 import { CreateEditorTab } from '@/utils/editorUtils';
 import ChangeLogDlg from './dialogs/changelog';
+import { IJsonTabNode } from 'flexlayout-react';
 
 type NavBarProps = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -466,6 +468,21 @@ function NavBar({ layoutref }: NavBarProps) {
         AppMgr.getInstance().emit(EventType.EVENT_FONTCHANGE, FontSize.DESCREASE);
     }
 
+    /**
+     * viewDashboard - view the dashboard
+     */
+    function viewDashboard() {
+        console.log(i18n.t('dashboard'));
+        const tabInfo: IJsonTabNode = {
+            component: 'dashboard',
+            name: 'Dashboard',
+            id: 'DashboardId',
+            helpText: 'Dashboard',
+        };
+        layoutref!.current?.addTabToTabSet(Constants.EDITOR_TABSET_ID, tabInfo);
+        setActiveTab('Dashboard');
+    }
+
     /**
      * onConnectionSelected - process seected connection
      * @param connType
@@ -638,6 +655,12 @@ function NavBar({ layoutref }: NavBarProps) {
                     clicked: ConvertToPython,
                     isView: true,
                 },
+                {
+                    label: i18n.t('dashboard'),
+                    iconImage: dashboard,
+                    clicked: viewDashboard,
+                    isView: true,
+                }
             ],
             childrenExt: [
                 {

src/components/navbar.tsx

@@ -14,6 +14,7 @@ import { useLocalStorage } from 'usehooks-ts';
 import { StorageKeys } from '@/utils/localstorage';
 import EditorMgr, { EditorStore } from '@/managers/editormgr';
 import { CreateEditorTab } from '@/utils/editorUtils';
+import XRPDashboard from '@/components/dashboard/xrp-dashboard';
 
 /**
  *  Layout-React's layout JSON to specify the XRPWeb's single page application's layout
@@ -100,6 +101,8 @@ const factory = (node: TabNode) => {
         return <FolderTree treeData={null} theme="rct-dark" isHeader={true} />;
     } else if (component == 'blockly') {
         return <BlocklyEditor name={node.getName()} />;
+    } else if (component == 'dashboard') {
+        return <XRPDashboard />;
     }
 };
 

src/components/xrplayout.tsx

@@ -86,6 +86,7 @@
     "update-lib-instructions": "The update process will take a few minutes. Please do not disconnect the USB cable during this time.",
     "update-lib-error": "The XRP library update process has failed. Please try again. The error message is: {{ error }}",
     "update-lib-complete": "The XRP library update process has completed successfully.",
+    "dashboard": "Dashboard",
     "_commentBlockly": "This does not need to be translated - blockly specific translation add below",
     "individualMotors": "Individual Motors"
 }