Feat/dcmfoss_63_TopMenu_info_data

demand-capacity-mgmt-frontend/src/components/TopMenu.tsx

@@ -23,8 +23,9 @@
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
-import { FaStar, FaArrowUp,FaArrowDown } from 'react-icons/fa';
 import { FiSettings,FiLogOut } from 'react-icons/fi';
+import InfoMenu from "./menu/InfoMenu";
+
 
 function TopMenuLinks() {
   return (
@@ -33,16 +34,8 @@ function TopMenuLinks() {
         <Navbar.Brand href="#home"><img srcSet='/media/logo.png' alt="Logo" width="30" height="24" className='d-inline-block align-text-top'/> - CompanyName</Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">
-            <Nav.Link href="#favorites"><FaStar/> Favorites <span className="badge rounded-pill text-bg-primary" id="favorites-count">0</span></Nav.Link>
-            <Nav.Link href="#alerts">Alerts <span className="badge rounded-pill text-bg-danger" id="alerts-count">0</span></Nav.Link>
-            <Nav.Link href="#statusup"><FaArrowUp/> Status  <span className="badge rounded-pill text-bg-success" id="status-plus-count">0</span> </Nav.Link>
-            <Nav.Link href="#statusdown"><FaArrowDown/> Status <span className="badge rounded-pill text-bg-danger" id="status-minus-count">0</span> </Nav.Link>
-            <Nav.Link href="#todo">Todo <span className="badge rounded-pill text-bg-warning" id="todo-count">0</span> </Nav.Link>
-            <Nav.Link href="#events">Events <span className="badge rounded-pill text-bg-info" id="events-count">0</span></Nav.Link>
-          </Nav>
+          <InfoMenu/>
         </Navbar.Collapse>
-
         <Navbar.Collapse className="justify-content-end">
           <Navbar.Text>
             Signed in as: <a href="#login">USERID</a>

demand-capacity-mgmt-frontend/src/components/menu/Component63.tsx

@@ -0,0 +1,43 @@
+/*
+ *  *******************************************************************************
+ *  Copyright (c) 2023 BMW AG
+ *  Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ *    See the NOTICE file(s) distributed with this work for additional
+ *    information regarding copyright ownership.
+ *
+ *    This program and the accompanying materials are made available under the
+ *    terms of the Apache License, Version 2.0 which is available at
+ *    https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *    License for the specific language governing permissions and limitations
+ *    under the License.
+ *
+ *    SPDX-License-Identifier: Apache-2.0
+ *    ********************************************************************************
+ */
+
+import Nav from "react-bootstrap/Nav";
+import {FaArrowDown, FaArrowUp, FaStar} from "react-icons/fa";
+
+function Component63() {
+
+    return (
+        <>
+            <Nav className="me-auto">
+                <Nav.Link href="#favorites"><FaStar/> Favorites <span className="badge rounded-pill text-bg-primary" id="favorites-count">0</span></Nav.Link>
+                <Nav.Link href="#alerts">Alerts <span className="badge rounded-pill text-bg-danger" id="alerts-count">0</span></Nav.Link>
+                <Nav.Link href="#statusup"><FaArrowUp/> Status  <span className="badge rounded-pill text-bg-success" id="status-plus-count">0</span> </Nav.Link>
+                <Nav.Link href="#statusdown"><FaArrowDown/> Status <span className="badge rounded-pill text-bg-danger" id="status-minus-count">0</span> </Nav.Link>
+                <Nav.Link href="#todo">Todo <span className="badge rounded-pill text-bg-warning" id="todo-count">0</span> </Nav.Link>
+                <Nav.Link href="#events">Events <span className="badge rounded-pill text-bg-info" id="events-count">0</span></Nav.Link>
+            </Nav>
+        </>
+
+    );
+}
+
+export default Component63;

demand-capacity-mgmt-frontend/src/components/menu/InfoMenu.tsx

@@ -0,0 +1,68 @@
+/*
+ *  *******************************************************************************
+ *  Copyright (c) 2023 BMW AG
+ *  Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ *    See the NOTICE file(s) distributed with this work for additional
+ *    information regarding copyright ownership.
+ *
+ *    This program and the accompanying materials are made available under the
+ *    terms of the Apache License, Version 2.0 which is available at
+ *    https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *    License for the specific language governing permissions and limitations
+ *    under the License.
+ *
+ *    SPDX-License-Identifier: Apache-2.0
+ *    ********************************************************************************
+ */
+
+import Nav from "react-bootstrap/Nav";
+import {FaArrowDown, FaArrowUp, FaStar} from "react-icons/fa";
+import {useInfoMenu } from "../../contexts/InfoMenuContextProvider";
+
+function InfoMenu() {
+    const { data } = useInfoMenu();
+    console.log(data);
+
+    return (
+        <>
+            <Nav className="me-auto">
+                <Nav.Link href="#favorites"><FaStar/> Favorites <span className="badge rounded-pill text-bg-primary" id="favorites-count">-</span></Nav.Link>
+                {/* TODO: Add functionality for Favorites link */}
+                <Nav.Link href="#alerts">Alerts
+                    <span className="badge rounded-pill text-bg-danger" id="alerts-count">
+                        {data?.general.count || '-'}
+                    </span>
+                </Nav.Link>
+                {/* TODO: Add functionality for Alerts link */}
+                <Nav.Link href="#statusup">
+                    <FaArrowUp/> Status
+                    <span className="badge rounded-pill text-bg-success" id="status-plus-count">
+                        {data?.statusImprovement.count || '-'}
+                    </span>
+                </Nav.Link>
+                <Nav.Link href="#statusdown">
+                    <FaArrowDown/> Status
+                    <span className="badge rounded-pill text-bg-danger" id="status-minus-count">
+                        {data?.statusDegredation.count || '-'}
+                    </span>
+                </Nav.Link>
+                <Nav.Link href="#todo">
+                    {/* TODO: Add functionality for todo */}
+                    <span className="badge rounded-pill text-bg-warning" id="todo-count">
+                        {data?.todos.count || '-'}
+                    </span>
+                </Nav.Link>
+                <Nav.Link href="#events">Events <span className="badge rounded-pill text-bg-info" id="events-count">-</span></Nav.Link>
+                {/* TODO: Add functionality for events link */}
+            </Nav>
+        </>
+
+    );
+}
+
+export default InfoMenu;

demand-capacity-mgmt-frontend/src/contexts/InfoMenuContextProvider.tsx

@@ -0,0 +1,71 @@
+/*
+ *  *******************************************************************************
+ *  Copyright (c) 2023 BMW AG
+ *  Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ *    See the NOTICE file(s) distributed with this work for additional
+ *    information regarding copyright ownership.
+ *
+ *    This program and the accompanying materials are made available under the
+ *    terms of the Apache License, Version 2.0 which is available at
+ *    https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *    License for the specific language governing permissions and limitations
+ *    under the License.
+ *
+ *    SPDX-License-Identifier: Apache-2.0
+ *    ********************************************************************************
+ */
+
+
+import React, { createContext, useState, useEffect, useCallback, useContext, FunctionComponent } from 'react';
+import axios from 'axios';
+import { InfoMenuData } from '../interfaces/InfoMenu_interfaces';
+
+interface InfoMenuContextData {
+    data: InfoMenuData | null;
+    fetchData: () => void;
+}
+
+export const InfoMenuContext = createContext<InfoMenuContextData | undefined>(undefined);
+
+interface InfoMenuProviderProps {
+    children: React.ReactNode;
+}
+
+export const InfoMenuProvider: FunctionComponent<InfoMenuProviderProps> = ({ children }) => {
+    const [data, setData] = useState<InfoMenuData | null>(null);
+
+    const fetchData = useCallback(async () => {
+        try {
+            const response = await axios.get('/statuses');
+            const result: InfoMenuData = response.data;
+            setData(result);
+            console.log(result)
+            /* setData(mockInfoMenuData);  /*mock data*/
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    }, []);
+
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+
+    return (
+        <InfoMenuContext.Provider value={{ data, fetchData }}>
+            {children}
+        </InfoMenuContext.Provider>
+    );
+};
+
+export const useInfoMenu = () => {
+    const context = useContext(InfoMenuContext);
+    if (!context) {
+        throw new Error('useInfoMenu must be used within an InfoMenuProvider');
+    }
+    return context;
+};

demand-capacity-mgmt-frontend/src/index.js

@@ -29,19 +29,20 @@ import {BrowserRouter as Router, Route,Routes } from "react-router-dom";
 
 //Import Default always visible components.
 import TopMenu from "./components/TopMenu";
+import { InfoMenuProvider } from './contexts/InfoMenuContextProvider';
 import QuickAcessItems from "./components/QuickAcessItems";
-
 //Import Context Providers
 import DemandContextProvider from "../src/contexts/DemandContextProvider";
-
 // Import your components for different routes
 import Home from "./components/capacitygroup/CapacityGroupPage";
-import CapacityGroupDetailsPage from './components/capacitygroup/CapacityGroupDetailsPage';
+import CapacityGroupDetailsPage from "./components/capacitygroup/CapacityGroupDetailsPage";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
 <>
+    <InfoMenuProvider>
     <TopMenu></TopMenu>
+    </InfoMenuProvider>
 
     <Router>
     <Routes>

demand-capacity-mgmt-frontend/src/interfaces/InfoMenu_interfaces.tsx

@@ -0,0 +1,34 @@
+/*
+ *  *******************************************************************************
+ *  Copyright (c) 2023 BMW AG
+ *  Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ *    See the NOTICE file(s) distributed with this work for additional
+ *    information regarding copyright ownership.
+ *
+ *    This program and the accompanying materials are made available under the
+ *    terms of the Apache License, Version 2.0 which is available at
+ *    https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *    License for the specific language governing permissions and limitations
+ *    under the License.
+ *
+ *    SPDX-License-Identifier: Apache-2.0
+ *    ********************************************************************************
+ */
+
+export interface Status {
+    count: number;
+    materialDemandsIds: string[];
+    capacityGroups: string[];
+}
+
+export interface InfoMenuData {
+    todos: Status;
+    general: Status;
+    statusImprovement: Status;
+    statusDegredation: Status;
+}

demand-capacity-mgmt-frontend/src/mocks/MockData.tsx

@@ -0,0 +1,43 @@
+/*
+ *  *******************************************************************************
+ *  Copyright (c) 2023 BMW AG
+ *  Copyright (c) 2023 Contributors to the Eclipse Foundation
+ *
+ *    See the NOTICE file(s) distributed with this work for additional
+ *    information regarding copyright ownership.
+ *
+ *    This program and the accompanying materials are made available under the
+ *    terms of the Apache License, Version 2.0 which is available at
+ *    https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *    License for the specific language governing permissions and limitations
+ *    under the License.
+ *
+ *    SPDX-License-Identifier: Apache-2.0
+ *    ********************************************************************************
+ */
+export const mockInfoMenuData = {
+    "todos": {
+        "count": 12,
+        "materialDemandsIds": ["423432434", "4324324324", "4324324324"],
+        "capacityGroups": ["423432434", "4324324324", "4324324324"]
+    },
+    "general": {
+        "count": 13,
+        "materialDemandsIds": ["423432434", "4324324324", "4324324324"],
+        "capacityGroups": ["3232323", "4324324324", "4324324324"]
+    },
+    "statusImprovement": {
+        "count": 14,
+        "materialDemandsIds": ["423432434", "324343443", "4324324324"],
+        "capacityGroups": ["423432434", "4324324324", "4324324324"]
+    },
+    "statusDegradation": {
+        "count": 15,
+        "materialDemandsIds": ["43434434", "4324324324", "4324324324"],
+        "capacityGroups": ["423432434", "4324324324", "4324324324"]
+    }
+};