feat: minor changes on UI

amosproj · Jun 3, 2024 · 406e2b7 · 406e2b7
1 parent a16b0be
commit 406e2b7
Show file tree

Hide file tree

Showing 8 changed files with 816 additions and 52 deletions.
diff --git a/.Dockerfile b/.Dockerfile
diff --git a/src/frontend_socket/international-dataspace-station/app/dashboard/connector_status.tsx b/src/frontend_socket/international-dataspace-station/app/dashboard/connector_status.tsx
@@ -7,13 +7,13 @@ function checkPortStatus(port: number): Promise<boolean> {
             resolve(true);
         });
 
-        client.on('error', () => {
+        client.on('error', (error) => {
+            console.error('Error occurred while checking port status:', error);
             resolve(false);
         });
     });
 }
 
-
 export default async function checkConnectorStatus(port: number) {
     let response: boolean = false;
     try {
@@ -22,4 +22,4 @@ export default async function checkConnectorStatus(port: number) {
         console.error('Error occurred while checking connector status:', error);
     }
     return response;
-}
+}
diff --git a/src/frontend_socket/international-dataspace-station/app/dashboard/consumer/page.tsx b/src/frontend_socket/international-dataspace-station/app/dashboard/consumer/page.tsx
@@ -6,7 +6,7 @@ import {cookies} from "next/headers";
 export default function Page() {
     const userArray: User[] = users;
     const userCookie = cookies().get('user' as any)?.value;
-    const loggedIn = JSON.parse(userCookie) as User;
+    const loggedIn = userCookie? JSON.parse(userCookie) as User : null;
     return (
         <main className="flex min-h-screen flex-col p-6">
             <form>
@@ -23,7 +23,7 @@ export default function Page() {
                                     autoComplete="country-name"
                                     className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6"
                                 >
-                                    {userArray && userArray.filter((u => u.role != loggedIn.role)).map( (u, index) => <option>{u.role}</option>)}
+                                    {(userArray && loggedIn) && userArray.filter((u => u.role != loggedIn.role)).map( (u, index) => <option>{u.role}</option>)}
                                 </select>
                             </div>
                         </div>

diff --git a/src/frontend_socket/international-dataspace-station/app/dashboard/layout.tsx b/src/frontend_socket/international-dataspace-station/app/dashboard/layout.tsx
@@ -1,6 +1,10 @@
 import SideNav from '@/app/dashboard/sidenav';
 import {cookies} from "next/headers";
 import {User} from "@/data/interface/user";
+import Cookies from 'js-cookie';
+import {redirect} from "next/navigation";
+import Link from "next/link";
+import {ArrowRightEndOnRectangleIcon} from "@heroicons/react/24/solid";
 
 export default function Layout({children}: { children: React.ReactNode }) {
     const userCookie = cookies().get('user' as any)?.value;
@@ -27,15 +31,15 @@ export default function Layout({children}: { children: React.ReactNode }) {
                         <div className="flex flex-row gap-4">
                             <div
                                 // className="hover:bg-neonBlue rounded-xl bg-gray-50"
-                                className="text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
+                                className="flex h-[48px] grow items-center text-black justify-center gap-2 rounded-md bg-white p-3 text-sm font-medium hover:bg-neonBlue focus:bg-neonBlue shadow-xl md:flex-none md:justify-start md:p-2 md:px-3"
                                 >
                                 Hi, <strong>{user?.username}</strong>!
                             </div>
-                            {/*<button onClick={() => {*/}
-                            {/*    // cookies().delete('user');*/}
-                            {/*}} className="hover:bg-neonBlue rounded-xl bg-gray-50">*/}
-                            {/*    Logout*/}
-                            {/*</button>*/}
+                            <Link href={'/'}
+                                  className="flex h-[48px] grow items-center text-black justify-center gap-2 rounded-md bg-white p-3 text-sm font-medium hover:bg-neonBlue focus:bg-neonBlue shadow-xl md:flex-none md:justify-start md:p-2 md:px-3"
+                            >
+                                <ArrowRightEndOnRectangleIcon className="w-6"/>
+                            </Link>
                         </div>
                     </>
                     }

diff --git a/src/frontend_socket/international-dataspace-station/app/dashboard/nav-links.tsx b/src/frontend_socket/international-dataspace-station/app/dashboard/nav-links.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import {
-  ArrowRightEndOnRectangleIcon,
-  ArrowRightStartOnRectangleIcon,
+  ArrowUpTrayIcon,
+  ArrowDownTrayIcon,
   HomeIcon
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
@@ -16,11 +16,11 @@ const links = [
   {
     name: 'Send',
     href: '/dashboard/consumer',
-    icon: ArrowRightStartOnRectangleIcon,
+    icon: ArrowUpTrayIcon,
   },
   { name: 'Receive',
     href: '/dashboard/provider',
-    icon: ArrowRightEndOnRectangleIcon },
+    icon: ArrowDownTrayIcon },
 ];
 
 export default function NavLinks() {

diff --git a/src/frontend_socket/international-dataspace-station/app/dashboard/page.tsx b/src/frontend_socket/international-dataspace-station/app/dashboard/page.tsx
@@ -1,25 +1,42 @@
 'use client';
-import checkConnectorStatus from "./connector_status";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+export default function Page() {
+    const [cons, setCons] = useState(false);
+    const [prov, setProv] = useState(false);
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const consResponse = await axios.get('/api/checkPortStatus?port=29191');
+                setCons(consResponse.data);
+
+                const provResponse = await axios.get('/api/checkPortStatus?port=19191');
+                setProv(provResponse.data);
+            } catch (error) {
+                console.error('Error occurred while fetching port status:', error);
+            }
+        }
+        fetchData();
+    }, []);
 
-export default async function Page() {
-    const cons = await checkConnectorStatus(29191);
-    const prov = await checkConnectorStatus(19191);
     return (
         <main className="flex flex-col p-6">
             <div className="grid grid-cols-2 gap-5">
                 <div className="flex justify-evenly items-center bg-gray-100 border-gray-200 border-2 rounded-lg p-5">
-                    <p>Consumer: {cons ? 'UP': 'DOWN'}</p>
-                    <button onClick={ () => {console.log('click')}} className={`px-4 py-2 rounded-md hover:bg-neonBlue text-white ${cons ? 'bg-red-600' : 'bg-neonGreen'}`}>
-                        {cons ? 'Stop': 'Start'}
+                    <p>Consumer: {cons ? 'UP' : 'DOWN'}</p>
+                    <button onClick={() => {console.log('click')}} className={`px-4 py-2 rounded-md hover:bg-neonBlue text-white ${cons ? 'bg-red-600' : 'bg-neonGreen'}`}>
+                        {cons ? 'Stop' : 'Start'}
                     </button>
                 </div>
                 <div className="flex justify-evenly items-center bg-gray-100 border-gray-200 border-2 rounded-lg p-5">
-                    <p>Provider: {prov ? 'UP': 'DOWN'}</p>
-                    <button onClick={ () => {console.log('click')}} className={`px-4 py-2 rounded-md hover:bg-neonBlue text-white ${prov ? 'bg-red-600' : 'bg-neonGreen'}`}>
-                        {prov ? 'Stop': 'Start'}
+                    <p>Provider: {prov ? 'UP' : 'DOWN'}</p>
+                    <button onClick={() => {console.log('click')}} className={`px-4 py-2 rounded-md hover:bg-neonBlue text-white ${prov ? 'bg-red-600' : 'bg-neonGreen'}`}>
+                        {prov ? 'Stop' : 'Start'}
                     </button>
                 </div>
             </div>
         </main>
     );
-}
+}