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

georgs #23

Closed
Ghost wants to merge 50 commits from georgs into main
pull from: georgs
merge into: IoSL:main
Conversation 0 Commits 50 Files Changed 7 +304 -32
18 changed files with 304 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b3f7d56193 - Show all commits

33
pkgs/ui/src/app/access-point/page.tsx
View File

@@ -1,5 +1,36 @@
"use client"; "use client";
import SummaryDetails from "@/components/summary_card";
import CustomTable from "@/components/table";
import {
APSummaryDetails,
APAttachmentsDummyData,
APAttachmentsTableConfig,
APServiceRepositoryDummyData,
APServiceRepositoryTableConfig,
} from "@/mock/access_point";
export default function AccessPoint() { export default function AccessPoint() {
return <div>Access Point Page</div>; return (
<div className="m-10">
<SummaryDetails
hasRefreshButton
entity={{ name: "Access Point", details: APSummaryDetails }}
/>
<div>
<h4>Attachement View</h4>
<CustomTable
data={APAttachmentsDummyData}
configuration={APAttachmentsTableConfig}
/>
</div>
<div>
<h4>Service Repository View </h4>
<CustomTable
data={APServiceRepositoryDummyData}
configuration={APServiceRepositoryTableConfig}
/>
</div>
</div>
);
} }

17
pkgs/ui/src/app/client-1/page.tsx Normal file
View File

@@ -0,0 +1,17 @@
import SummaryDetails from "@/components/summary_card";
import { Client1SummaryDetails } from "@/mock/client_1";
export default function Client1() {
return (
<div className="m-10">
<SummaryDetails
hasAttachDetach
hasRefreshButton
entity={{
name: "Client 1",
details: Client1SummaryDetails,
}}
/>
</div>
);
}

17
pkgs/ui/src/app/client-2/page.tsx Normal file
View File

@@ -0,0 +1,17 @@
import SummaryDetails from "@/components/summary_card";
import { Client2SummaryDetails } from "@/mock/client_2";
export default function Client1() {
return (
<div className="m-10">
<SummaryDetails
hasAttachDetach
hasRefreshButton
entity={{
name: "Client 2",
details: Client2SummaryDetails,
}}
/>
</div>
);
}

27
pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
View File

@@ -1,5 +1,30 @@
"use client"; "use client";
import {
DLGResolutionDummyData,
DLGResolutionTableConfig,
DLGSummaryDetails,
} from "@/mock/dlg";
import CustomTable from "@/components/table";
import SummaryDetails from "@/components/summary_card";
export default function DLG() { export default function DLG() {
return <div>DLG Page</div>; return (
<div className="m-10">
<SummaryDetails
hasRefreshButton
entity={{
name: "Distributed Ledger Gateway",
details: DLGSummaryDetails,
}}
/>
<div>
<h4>DID Resolution View</h4>
<CustomTable
data={DLGResolutionDummyData}
configuration={DLGResolutionTableConfig}
/>
</div>
</div>
);
} }

24
pkgs/ui/src/app/home/page.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { NoDataOverlay } from "@/components/noDataOverlay";
import SummaryDetails from "@/components/summary_card";
import CustomTable from "@/components/table";
export default function Home() {
return (
<div className="m-10">
<SummaryDetails
entity={{ name: "Home", details: [] }}
hasRefreshButton={false}
/>
<div>
<h4>Home View Table</h4>
<CustomTable data={[]} configuration={[]} />
</div>
<div>
<h4>Sequence Diagram</h4>
<NoDataOverlay label="No Activity yet" />
</div>
</div>
);
}

6
pkgs/ui/src/app/layout.tsx
View File

@@ -47,9 +47,9 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<title>Clan.lol</title> <title>Service Aware Networks</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Clan.lol - build your own network" /> <meta name="description" content="Service Aware Networks" />
<link rel="icon" href="favicon.ico" sizes="any" /> <link rel="icon" href="favicon.ico" sizes="any" />
</head> </head>
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
@@ -89,7 +89,7 @@ export default function RootLayout({
<div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden"> <div className="col-span-1 block w-full bg-fixed text-center font-semibold dark:invert lg:hidden">
<Image <Image
src="/favicon.png" src="/favicon.png"
alt="Clan Logo" alt="TUB Logo"
width={58} width={58}
height={58} height={58}
priority priority

18
pkgs/ui/src/app/page.tsx
View File

@@ -1,12 +1,11 @@
"use client"; "use client";
import { RecentActivity } from "@/components/dashboard/activity";
import { useAppState } from "@/components/hooks/useAppContext"; import { useAppState } from "@/components/hooks/useAppContext";
import { LoadingOverlay } from "@/components/join/loadingOverlay"; import { LoadingOverlay } from "@/components/join/loadingOverlay";
import Home from "./home/page";
export default function Dashboard() { export default function Dashboard() {
const { isLoading } = useAppState(); const { isLoading } = useAppState();
if (isLoading) { return isLoading ? (
return (
<div className="grid h-full place-items-center"> <div className="grid h-full place-items-center">
<div className="mt-8 w-full max-w-xl"> <div className="mt-8 w-full max-w-xl">
<LoadingOverlay <LoadingOverlay
@@ -16,16 +15,7 @@ export default function Dashboard() {
/> />
</div> </div>
</div> </div>
); ) : (
} else { <Home />
return (
<div className="flex w-full">
<div className="grid w-full grid-flow-row grid-cols-3 gap-4">
<div className="row-span-2">
<RecentActivity />
</div>
</div>
</div>
); );
} }
}

4
pkgs/ui/src/app/theme/themes.ts
View File

@@ -21,10 +21,10 @@ const commonOptions: Partial<ThemeOptions> = {
const commonPalette: Partial<PaletteOptions> = { const commonPalette: Partial<PaletteOptions> = {
primary: { primary: {
main: palette.green50.value, main: palette.blue10.value,
}, },
secondary: { secondary: {
main: palette.green50.value, main: palette.blue20.value,
}, },
info: { info: {
main: palette.blue50.value, main: palette.blue50.value,

26
pkgs/ui/src/components/copy_to_clipboard/index.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { useState } from "react";
import { Button, Snackbar } from "@mui/material";
const CopyToClipboard = ({ contentRef }: { contentRef: any }) => {
const [open, setOpen] = useState(false);
const handleClick = () => {
if (contentRef.current) {
const text = contentRef.current.textContent;
navigator.clipboard.writeText(text);
setOpen(true);
}
};
return (
<>
<Button onClick={handleClick}>Copy</Button>
<Snackbar
open={open}
onClose={() => setOpen(false)}
autoHideDuration={2000}
message="Copied to clipboard"
/>
</>
);
};
export default CopyToClipboard;

2
pkgs/ui/src/components/noDataOverlay/index.tsx
View File

@@ -35,7 +35,7 @@ interface NoDataOverlayProps {
export function NoDataOverlay(props: NoDataOverlayProps) { export function NoDataOverlay(props: NoDataOverlayProps) {
const { label } = props; const { label } = props;
return ( return (
<StyledGridOverlay className="block p-2"> <StyledGridOverlay className="p-2">
<svg <svg
width="120" width="120"
height="100" height="100"

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

@@ -85,6 +85,7 @@ export function Sidebar(props: SidebarProps) {
return ( return (
<aside <aside
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`}

60
pkgs/ui/src/components/summary_card/index.tsx Normal file
View File

@@ -0,0 +1,60 @@
"use client";
import { useRef } from "react";
import CopyToClipboard from "@/components/copy_to_clipboard";
import {
Button,
Card,
CardContent,
CardHeader,
Typography,
} from "@mui/material";
import { EntityDetails, ISummaryDetails } from "@/types";
const SummaryDetails = ({
entity,
hasRefreshButton,
hasAttachDetach,
}: ISummaryDetails) => {
const cardContentRef = useRef(null);
const hasDetails = entity.details && entity.details.length > 0;
return (
<>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<h2>{entity.name}</h2>
<div>
{hasAttachDetach && (
<Button className="mr-6" variant="contained">
Attach / Detach
</Button>
)}
{hasRefreshButton && <Button variant="contained">Refresh</Button>}
</div>
</div>
{hasDetails && (
<Card variant="outlined">
<CardHeader
subheader="Summary"
action={<CopyToClipboard contentRef={cardContentRef} />}
/>
<CardContent ref={cardContentRef}>
{entity.details.map((info: EntityDetails) => {
return (
<Typography color="text.primary" gutterBottom>
{info.label}: <code>{info.value}</code>
</Typography>
);
})}
</CardContent>
</Card>
)}
</>
);
};
export default SummaryDetails;

3
pkgs/ui/src/components/table/style.tsx
View File

@@ -4,7 +4,8 @@ import TableRow from "@mui/material/TableRow";
export const StyledTableCell = styled(TableCell)(({ theme }) => ({ export const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: { [`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.common.black, // backgroundColor: theme.palette.common.black,
backgroundColor: "#003258",
color: theme.palette.common.white, color: theme.palette.common.white,
}, },
[`&.${tableCellClasses.body}`]: { [`&.${tableCellClasses.body}`]: {

17
pkgs/ui/src/mock/access-point/index.ts → pkgs/ui/src/mock/access_point/index.ts
View File

@@ -1,3 +1,20 @@
// AP - Summary
export const APSummaryDetails = [
{
label: "DID",
value: "did:sov:test:1274",
},
{
label: "IP",
value: "127.0.0.2",
},
{
label: "Network",
value: "Carlo's Home Network",
},
];
// AP - Attachements // AP - Attachements
export const APAttachmentsDummyData = [ export const APAttachmentsDummyData = [

16
pkgs/ui/src/mock/client_1/index.ts Normal file
View File

@@ -0,0 +1,16 @@
// Client1 - Summary
export const Client1SummaryDetails = [
{
label: "DID",
value: "did:sov:test:1234",
},
{
label: "IP",
value: "127.0.0.1",
},
{
label: "Network",
value: "Carlo's Home Network",
},
];

16
pkgs/ui/src/mock/client_2/index.ts Normal file
View File

@@ -0,0 +1,16 @@
// Client2 - Summary
export const Client2SummaryDetails = [
{
label: "DID",
value: "did:sov:test:1234",
},
{
label: "IP",
value: "127.0.0.2",
},
{
label: "Network",
value: "Carlo's Home Network",
},
];

15
pkgs/ui/src/mock/dlg/index.ts
View File

@@ -1,3 +1,18 @@
// DLG Summary Details
export const DLGSummaryDetails = [
{
label: "DID",
value: "did:sov:test:1274",
},
{
label: "URL",
value: "dlg.tu-berlin.de",
},
];
// DLG Resolution Table
export const DLGResolutionDummyData = [ export const DLGResolutionDummyData = [
{ {
requester_name: "C1", requester_name: "C1",

16
pkgs/ui/src/types/index.ts
View File

@@ -8,3 +8,19 @@ export interface ICustomTable {
configuration: CustomTableConfiguration[]; configuration: CustomTableConfiguration[];
data: any; data: any;
} }
export interface EntityDetails {
label: string;
value: string;
}
export interface Entity {
name: string;
details: EntityDetails[];
}
export interface ISummaryDetails {
entity: Entity;
hasRefreshButton?: boolean;
hasAttachDetach?: boolean;
}