IoSL/service-aware-frontend
3
0
Fork 0
generated from Luis/nextjs-python-web-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix linting

Browse Source
This commit is contained in:
Arslan, Erdem
2023-11-24 01:05:54 +01:00
parent 0cea4644c3
commit 3075144244
5 changed files with 359 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
pkgs/ui/src/app/client-1/page.tsx
View File

@@ -2,11 +2,11 @@
import SummaryDetails from "@/components/summary_card"; import SummaryDetails from "@/components/summary_card";
import { import {
Client1SummaryDetails, Client1SummaryDetails,
Client1ConsumerData, Client1ConsumerData,
Client1ConsumerTableConfig, Client1ConsumerTableConfig,
Client1ProducerTableConfig, Client1ProducerTableConfig,
Client1ProducerData Client1ProducerData,
} from "@/mock/client_1"; } from "@/mock/client_1";
import CustomTable from "@/components/table"; import CustomTable from "@/components/table";
@@ -21,20 +21,20 @@ export default function Client1() {
details: Client1SummaryDetails, details: Client1SummaryDetails,
}} }}
/> />
<div> <div>
<h4>Consumer View</h4> <h4>Consumer View</h4>
<CustomTable <CustomTable
data={Client1ConsumerData} data={Client1ConsumerData}
configuration={Client1ConsumerTableConfig} configuration={Client1ConsumerTableConfig}
/> />
</div> </div>
<div> <div>
<h4>Producer View</h4> <h4>Producer View</h4>
<CustomTable <CustomTable
data={Client1ProducerData} data={Client1ProducerData}
configuration={Client1ProducerTableConfig} configuration={Client1ProducerTableConfig}
/> />
</div> </div>
</div> </div>
); );
} }

38
pkgs/ui/src/app/client-2/page.tsx
View File

@@ -2,11 +2,11 @@
import SummaryDetails from "@/components/summary_card"; import SummaryDetails from "@/components/summary_card";
import { import {
Client2ConsumerData, Client2ConsumerData,
Client2ConsumerTableConfig, Client2ConsumerTableConfig,
Client2ProducerData, Client2ProducerData,
Client2ProducerTableConfig, Client2ProducerTableConfig,
Client2SummaryDetails Client2SummaryDetails,
} from "@/mock/client_2"; } from "@/mock/client_2";
import CustomTable from "@/components/table"; import CustomTable from "@/components/table";
@@ -21,20 +21,20 @@ export default function Client1() {
details: Client2SummaryDetails, details: Client2SummaryDetails,
}} }}
/> />
<div> <div>
<h4>Consumer View</h4> <h4>Consumer View</h4>
<CustomTable <CustomTable
data={Client2ConsumerData} data={Client2ConsumerData}
configuration={Client2ConsumerTableConfig} configuration={Client2ConsumerTableConfig}
/> />
</div> </div>
<div> <div>
<h4>Producer View</h4> <h4>Producer View</h4>
<CustomTable <CustomTable
data={Client2ProducerData} data={Client2ProducerData}
configuration={Client2ProducerTableConfig} configuration={Client2ProducerTableConfig}
/> />
</div> </div>
</div> </div>
); );
} }

369
pkgs/ui/src/components/sidebar/index.tsx
View File

@@ -1,17 +1,17 @@
import { import {
Divider, Divider,
IconButton, IconButton,
List, List,
ListItem, ListItem,
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
} from "@mui/material"; } from "@mui/material";
import Image from "next/image"; import Image from "next/image";
import React, {ReactNode} from "react"; import React, { ReactNode } from "react";
import {tw} from "@/utils/tailwind"; import { tw } from "@/utils/tailwind";
import Collapse from '@mui/material/Collapse'; import Collapse from "@mui/material/Collapse";
import Link from "next/link"; import Link from "next/link";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import HomeIcon from "@mui/icons-material/Home"; import HomeIcon from "@mui/icons-material/Home";
@@ -19,197 +19,206 @@ import HubIcon from "@mui/icons-material/Hub";
import PersonIcon from "@mui/icons-material/Person"; import PersonIcon from "@mui/icons-material/Person";
import RouterIcon from "@mui/icons-material/Router"; import RouterIcon from "@mui/icons-material/Router";
import StorageIcon from "@mui/icons-material/Storage"; import StorageIcon from "@mui/icons-material/Storage";
import ExpandLess from '@mui/icons-material/ExpandLess'; import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from '@mui/icons-material/ExpandMore'; import ExpandMore from "@mui/icons-material/ExpandMore";
type MenuEntry = { type MenuEntry = {
icon: ReactNode; icon: ReactNode;
label: string; label: string;
to: string; to: string;
disabled: boolean; disabled: boolean;
} & { } & {
subMenuEntries?: MenuEntry[]; subMenuEntries?: MenuEntry[];
}; };
const menuEntityEntries: MenuEntry[] = [ const menuEntityEntries: MenuEntry[] = [
{ {
icon: <PersonIcon/>, icon: <PersonIcon />,
label: "C1", label: "C1",
to: "/client-1", to: "/client-1",
disabled: false, disabled: false,
}, },
{ {
icon: <PersonIcon/>, icon: <PersonIcon />,
label: "C2", label: "C2",
to: "/client-2", to: "/client-2",
disabled: false, disabled: false,
} },
]; ];
const menuEntries: MenuEntry[] = [ const menuEntries: MenuEntry[] = [
{ {
icon: <HomeIcon/>, icon: <HomeIcon />,
label: "Home", label: "Home",
to: "/", to: "/",
disabled: false, disabled: false,
}, },
{ {
icon: <HubIcon/>, icon: <HubIcon />,
label: "Entities", label: "Entities",
to: "/entities", to: "/entities",
disabled: false, disabled: false,
}, },
{ {
icon: <RouterIcon/>, icon: <RouterIcon />,
label: "AP", label: "AP",
to: "/access-point", to: "/access-point",
disabled: false, disabled: false,
}, },
{ {
icon: <StorageIcon/>, icon: <StorageIcon />,
label: "DLG", label: "DLG",
to: "/distributed-ledger-gateway", to: "/distributed-ledger-gateway",
disabled: false, disabled: false,
}, },
]; ];
const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`; const hideSidebar = tw`-translate-x-14 lg:-translate-x-64`;
const showSidebar = tw`lg:translate-x-0`; const showSidebar = tw`lg:translate-x-0`;
interface SidebarProps { interface SidebarProps {
show: boolean; show: boolean;
onClose: () => void; onClose: () => void;
} }
export function Sidebar(props: SidebarProps) { export function Sidebar(props: SidebarProps) {
const {show, onClose} = props; const { show, onClose } = props;
const [activeMenuItem, setActiveMenuItem] = React.useState(typeof window !== "undefined" ? window.location.pathname : ""); const [activeMenuItem, setActiveMenuItem] = React.useState(
const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true); typeof window !== "undefined" ? window.location.pathname : "",
);
const [collapseMenuOpen, setCollapseMenuOpen] = React.useState(true);
const handleCollapseClick = () => { const handleCollapseClick = () => {
setCollapseMenuOpen(!collapseMenuOpen); setCollapseMenuOpen(!collapseMenuOpen);
}; };
const handleMenuItemClick = (path: string) => { const handleMenuItemClick = (path: string) => {
setActiveMenuItem(path); setActiveMenuItem(path);
}; };
return ( return (
<aside <aside
style={{backgroundColor: "#00497c"}} style={{ backgroundColor: "#00497c" }}
className={tw`${ className={tw`${
show ? showSidebar : hideSidebar show ? showSidebar : hideSidebar
} z-9999 static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`} } z-9999 static left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-neutral-10 transition duration-150 ease-in-out dark:bg-neutral-2 lg:w-64`}
> >
<div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6"> <div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
<div className="mt-8 hidden w-full text-center font-semibold text-white lg:block"> <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
<Image <Image
src="/tub-logo.png" src="/tub-logo.png"
alt="TU Berlin Logo" alt="TU Berlin Logo"
width={125} width={125}
height={90} height={90}
priority priority
/>
</div>
</div>
<Divider
flexItem
className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block"
/>
<div className="flex w-full justify-center">
<IconButton size="large" className="text-white" onClick={onClose}>
<ChevronLeftIcon fontSize="inherit" />
</IconButton>
</div>
<div className="flex flex-col overflow-hidden overflow-y-auto">
<List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4">
{menuEntries.map((menuEntry, idx) => {
return (
<ListItem
key={idx}
disablePadding
className="!overflow-hidden py-2"
>
{menuEntry.label !== "Entities" ? (
<ListItemButton
className="justify-center lg:justify-normal"
LinkComponent={Link}
href={menuEntry.to}
disabled={menuEntry.disabled}
selected={activeMenuItem === menuEntry.to}
onClick={() => handleMenuItemClick(menuEntry.to)}
>
<ListItemIcon
color="inherit"
className="justify-center overflow-hidden text-white lg:justify-normal"
>
{menuEntry.icon}
</ListItemIcon>
<ListItemText
primary={menuEntry.label}
primaryTypographyProps={{
color: "inherit",
}}
className="hidden lg:block"
/> />
</div> </ListItemButton>
</div> ) : (
<Divider <div>
flexItem <ListItemButton
className="mx-8 mb-4 mt-9 hidden bg-neutral-40 lg:block" className="justify-center lg:justify-normal"
/> disabled={menuEntry.disabled}
<div className="flex w-full justify-center"> selected={activeMenuItem === menuEntry.to}
<IconButton size="large" className="text-white" onClick={onClose}> onClick={handleCollapseClick}
<ChevronLeftIcon fontSize="inherit"/> >
</IconButton> <ListItemIcon
</div> color="inherit"
<div className="flex flex-col overflow-hidden overflow-y-auto"> className="justify-center overflow-hidden text-white lg:justify-normal"
<List className="mb-14 px-0 pb-4 text-white lg:mt-1 lg:px-4"> >
{menuEntries.map((menuEntry, idx) => { {menuEntry.icon}
return ( </ListItemIcon>
<ListItem <ListItemText
key={idx} primary={menuEntry.label}
disablePadding primaryTypographyProps={{
className="!overflow-hidden py-2" color: "inherit",
}}
className="hidden lg:block"
/>
{collapseMenuOpen ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse
in={collapseMenuOpen}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
{menuEntityEntries.map((menuEntry, idx) => (
<ListItemButton
key={idx}
sx={{ pl: 4 }}
className="justify-center lg:justify-normal"
LinkComponent={Link}
href={menuEntry.to}
disabled={menuEntry.disabled}
selected={activeMenuItem === menuEntry.to}
onClick={() => handleMenuItemClick(menuEntry.to)}
>
<ListItemIcon
color="inherit"
className="justify-center overflow-hidden text-white lg:justify-normal"
> >
{menuEntry.label !== "Entities" ? {menuEntry.icon}
<ListItemButton </ListItemIcon>
className="justify-center lg:justify-normal" <ListItemText
LinkComponent={Link} primary={menuEntry.label}
href={menuEntry.to} primaryTypographyProps={{
disabled={menuEntry.disabled} color: "inherit",
selected={activeMenuItem === menuEntry.to} }}
onClick={() => handleMenuItemClick(menuEntry.to)} className="hidden lg:block"
> />
<ListItemIcon </ListItemButton>
color="inherit" ))}
className="justify-center overflow-hidden text-white lg:justify-normal" </List>
> </Collapse>
{menuEntry.icon} </div>
</ListItemIcon> )}
<ListItemText </ListItem>
primary={menuEntry.label} );
primaryTypographyProps={{ })}
color: "inherit", </List>
}} </div>
className="hidden lg:block" </aside>
/> );
</ListItemButton>
:
<div>
<ListItemButton
className="justify-center lg:justify-normal"
disabled={menuEntry.disabled}
selected={activeMenuItem === menuEntry.to}
onClick={handleCollapseClick}>
<ListItemIcon
color="inherit"
className="justify-center overflow-hidden text-white lg:justify-normal"
>
{menuEntry.icon}
</ListItemIcon>
<ListItemText
primary={menuEntry.label}
primaryTypographyProps={{
color: "inherit",
}}
className="hidden lg:block"
/>
{collapseMenuOpen ? <ExpandLess/> : <ExpandMore/>}
</ListItemButton>
<Collapse in={collapseMenuOpen} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{menuEntityEntries.map((menuEntry, idx) => (
<ListItemButton key={idx} sx={{pl: 4}}
className="justify-center lg:justify-normal"
LinkComponent={Link}
href={menuEntry.to}
disabled={menuEntry.disabled}
selected={activeMenuItem === menuEntry.to}
onClick={() => handleMenuItemClick(menuEntry.to)}
>
<ListItemIcon
color="inherit"
className="justify-center overflow-hidden text-white lg:justify-normal"
>
{menuEntry.icon}
</ListItemIcon>
<ListItemText
primary={menuEntry.label}
primaryTypographyProps={{
color: "inherit",
}}
className="hidden lg:block"
/>
</ListItemButton>
))}
</List>
</Collapse>
</div>
}
</ListItem>
);
})}
</List>
</div>
</aside>
);
} }

132
pkgs/ui/src/mock/client_1/index.ts
View File

@@ -17,124 +17,124 @@ export const Client1SummaryDetails = [
export const Client1ConsumerData = [ export const Client1ConsumerData = [
{ {
"service_name": "Carlo's Printing", service_name: "Carlo's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:1223", producer_did: "did:sov:test:1223",
"network": "Carlo's Home Network", network: "Carlo's Home Network",
}, },
{ {
"service_name": "Steve's Printing", service_name: "Steve's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:1234", producer_did: "did:sov:test:1234",
"network": "Steve's Home Network", network: "Steve's Home Network",
}, },
{ {
"service_name": "Test A", service_name: "Test A",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:4567", producer_did: "did:sov:test:4567",
"network": "Test Network A", network: "Test Network A",
}, },
{ {
"service_name": "Test B", service_name: "Test B",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:0062", producer_did: "did:sov:test:0062",
"network": "Test Network B", network: "Test Network B",
}, },
] ];
export const Client1ConsumerTableConfig = [ export const Client1ConsumerTableConfig = [
{ {
key: "service_name", key: "service_name",
label: "Service name" label: "Service name",
}, },
{ {
key: "service_type", key: "service_type",
label: "Service Type" label: "Service Type",
}, },
{ {
key: "end_point", key: "end_point",
label: "End Point" label: "End Point",
}, },
{ {
key: "producer", key: "producer",
label: "Producer" label: "Producer",
}, },
{ {
key: "producer_did", key: "producer_did",
label: "Producer DID" label: "Producer DID",
}, },
{ {
key: "network", key: "network",
label: "Network" label: "Network",
} },
] ];
export const Client1ProducerData = [ export const Client1ProducerData = [
{ {
"service_name": "Carlo's Printing", service_name: "Carlo's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "DRAFT, REGISTERED", status: "DRAFT, REGISTERED",
"action": "Register, Deregister, Delete", action: "Register, Deregister, Delete",
}, },
{ {
"service_name": "Steve's Printing", service_name: "Steve's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "REGISTERED", status: "REGISTERED",
"action": "Create", action: "Create",
}, },
{ {
"service_name": "Test Printing A", service_name: "Test Printing A",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "DRAFT", status: "DRAFT",
"action": "Register, Deregister", action: "Register, Deregister",
}, },
{ {
"service_name": "Test Printing B", service_name: "Test Printing B",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "DRAFT, REGISTERED", status: "DRAFT, REGISTERED",
"action": "Delete, Create", action: "Delete, Create",
}, },
] ];
export const Client1ProducerTableConfig = [ export const Client1ProducerTableConfig = [
{ {
key: "service_name", key: "service_name",
label: "Service name" label: "Service name",
}, },
{ {
key: "service_type", key: "service_type",
label: "Service Type" label: "Service Type",
}, },
{ {
key: "end_point", key: "end_point",
label: "End Point" label: "End Point",
}, },
{ {
key: "usage", key: "usage",
label: "Usage" label: "Usage",
}, },
{ {
key: "status", key: "status",
label: "Status" label: "Status",
}, },
{ {
key: "action", key: "action",
label: "Action" label: "Action",
} },
] ];

132
pkgs/ui/src/mock/client_2/index.ts
View File

@@ -17,124 +17,124 @@ export const Client2SummaryDetails = [
export const Client2ConsumerData = [ export const Client2ConsumerData = [
{ {
"service_name": "Carlo's Printing", service_name: "Carlo's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:1223", producer_did: "did:sov:test:1223",
"network": "Carlo's Home Network", network: "Carlo's Home Network",
}, },
{ {
"service_name": "Steve's Printing", service_name: "Steve's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:1234", producer_did: "did:sov:test:1234",
"network": "Steve's Home Network", network: "Steve's Home Network",
}, },
{ {
"service_name": "Test A", service_name: "Test A",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:4567", producer_did: "did:sov:test:4567",
"network": "Test Network A", network: "Test Network A",
}, },
{ {
"service_name": "Test B", service_name: "Test B",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "Consume", end_point: "Consume",
"producer": "C2", producer: "C2",
"producer_did": "did:sov:test:0062", producer_did: "did:sov:test:0062",
"network": "Test Network B", network: "Test Network B",
}, },
] ];
export const Client2ConsumerTableConfig = [ export const Client2ConsumerTableConfig = [
{ {
key: "service_name", key: "service_name",
label: "Service name" label: "Service name",
}, },
{ {
key: "service_type", key: "service_type",
label: "Service Type" label: "Service Type",
}, },
{ {
key: "end_point", key: "end_point",
label: "End Point" label: "End Point",
}, },
{ {
key: "producer", key: "producer",
label: "Producer" label: "Producer",
}, },
{ {
key: "producer_did", key: "producer_did",
label: "Producer DID" label: "Producer DID",
}, },
{ {
key: "network", key: "network",
label: "Network" label: "Network",
} },
] ];
export const Client2ProducerData = [ export const Client2ProducerData = [
{ {
"service_name": "Carlo's Printing", service_name: "Carlo's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "DRAFT, REGISTERED", status: "DRAFT, REGISTERED",
"action": "Register, Deregister, Delete", action: "Register, Deregister, Delete",
}, },
{ {
"service_name": "Steve's Printing", service_name: "Steve's Printing",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "REGISTERED", status: "REGISTERED",
"action": "Create", action: "Create",
}, },
{ {
"service_name": "Test Printing A", service_name: "Test Printing A",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "DRAFT", status: "DRAFT",
"action": "Register, Deregister", action: "Register, Deregister",
}, },
{ {
"service_name": "Test Printing B", service_name: "Test Printing B",
"service_type": "3D Printing", service_type: "3D Printing",
"end_point": "URL", end_point: "URL",
"usage": "C1(3), C3(4)", usage: "C1(3), C3(4)",
"status": "DRAFT, REGISTERED", status: "DRAFT, REGISTERED",
"action": "Delete, Create", action: "Delete, Create",
}, },
] ];
export const Client2ProducerTableConfig = [ export const Client2ProducerTableConfig = [
{ {
key: "service_name", key: "service_name",
label: "Service name" label: "Service name",
}, },
{ {
key: "service_type", key: "service_type",
label: "Service Type" label: "Service Type",
}, },
{ {
key: "end_point", key: "end_point",
label: "End Point" label: "End Point",
}, },
{ {
key: "usage", key: "usage",
label: "Usage" label: "Usage",
}, },
{ {
key: "status", key: "status",
label: "Status" label: "Status",
}, },
{ {
key: "action", key: "action",
label: "Action" label: "Action",
} },
] ];