seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: elements related to previous approach (before material ui)

Browse Source
main
Josue 4 years ago committed by Tsu-ba-me
parent 1a73783c04
commit f45c0cd956
5 changed files with 0 additions and 232 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      striker-ui/pages/anvils/[uuid].tsx
  2. 75
      striker-ui/pages/anvils/index.tsx
  3. 20
      striker-ui/pages/api/anvils/[uuid].ts
  4. 20
      striker-ui/pages/api/anvils/index.ts
  5. 9
      striker-ui/pages/api/hello.ts

108
striker-ui/pages/anvils/[uuid].tsx
Unescape View File

@ -1,108 +0,0 @@
import { NextPage } from 'next';
import styled from 'styled-components';
import { useRouter } from 'next/dist/client/router';
import DEFAULT_THEME from '../../lib/consts/DEFAULT_THEME';
import ExtendedDate from '../../lib/extended_date/ExtendedDate';
import Header from '../../components/organisms/Header';
import Label from '../../components/atoms/Label';
import List from '../../components/molecules/List';
import PageCenterContainer from '../../components/organisms/PageCenterContainer';
import PageContainer from '../../components/organisms/PageContainer';
import ToggleSwitch from '../../components/atoms/ToggleSwitch';
import useOneAnvil from '../../lib/anvil/useOneAnvil';
const StyledAnvilNodeStatus = styled.div`
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
`;
const StyledAnvilNodePower = styled.div`
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
margin-top: 1em;
`;
StyledAnvilNodeStatus.defaultProps = {
theme: DEFAULT_THEME,
};
StyledAnvilNodePower.defaultProps = {
theme: DEFAULT_THEME,
};
const DemoAnvilStatus: NextPage = (): JSX.Element => {
const router = useRouter();
const { uuid } = router.query;
const anvilUUID: string = uuid instanceof Array ? uuid[0] : uuid ?? '';
const {
anvilStatus: { nodes, timestamp },
error,
isLoading,
} = useOneAnvil(anvilUUID);
const lastUpdatedDatetime: string = new ExtendedDate(
timestamp * 1000,
).toLocaleISOString();
return (
<PageContainer>
<Header />
<PageCenterContainer>
<List labelText="Anvil Status" isAlignHorizontal>
{(() => {
let resultElement: JSX.Element[];
if (isLoading) {
resultElement = [
<Label key="loading" text="Loading Anvil status..." />,
];
} else if (error !== null) {
resultElement = [
<Label
key="error"
text={`Failed to get Anvil status; CAUSE: ${error}`}
/>,
];
} else {
resultElement = nodes.map(
({ on }: AnvilNodeStatus, nodeIndex: number) => {
const nodeName = `Node ${nodeIndex + 1}`;
return (
<StyledAnvilNodeStatus key={nodeName}>
<Label text={nodeName} />
<StyledAnvilNodePower>
<Label text="Power" />
<ToggleSwitch checked={on === 1} />
</StyledAnvilNodePower>
</StyledAnvilNodeStatus>
);
},
);
}
return resultElement;
})()}
</List>
<List labelText="Last Updated">
<Label text={lastUpdatedDatetime} />
</List>
</PageCenterContainer>
</PageContainer>
);
};
export default DemoAnvilStatus;

75
striker-ui/pages/anvils/index.tsx
Unescape View File

@ -1,75 +0,0 @@
import { GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import API_BASE_URL from '../../lib/consts/API_BASE_URL';
import Button from '../../components/atoms/Button';
import Header from '../../components/organisms/Header';
import List from '../../components/molecules/List';
import PageCenterContainer from '../../components/organisms/PageCenterContainer';
import fetchJSON from '../../lib/fetchers/fetchJSON';
import 'typeface-muli';
const theme = createMuiTheme({
palette: {
primary: {
main: '#343434',
light: '#3E78B2',
},
secondary: {
main: '#343434',
},
},
typography: {
fontFamily: 'Muli',
fontSize: 14,
},
overrides: {
MuiRadio: {
root: {
color: '#222222',
},
colorSecondary: {
'&$checked': {
color: '#555555',
},
},
},
},
});
export async function getServerSideProps(): Promise<
GetServerSidePropsResult<AnvilList>
> {
return {
props: await fetchJSON(`${API_BASE_URL}/api/anvils`),
};
}
function DemoAnvilList({
anvils,
}: InferGetServerSidePropsType<typeof getServerSideProps>): JSX.Element {
return (
<ThemeProvider theme={theme}>
<Header />
<PageCenterContainer>
<List labelText="List of Anvils">
{anvils.map(
(anvil: AnvilListItem): JSX.Element => (
<Button
key={anvil.uuid}
imageProps={{ src: '/pngs/anvil_icon_on.png' }}
labelProps={{ text: anvil.uuid }}
linkProps={{ href: `/anvils/${anvil.uuid}` }}
/>
),
)}
</List>
</PageCenterContainer>
</ThemeProvider>
);
}
export default DemoAnvilList;

20
striker-ui/pages/api/anvils/[uuid].ts
Unescape View File

@ -1,20 +0,0 @@
import { NextApiRequest, NextApiResponse } from 'next';
import { APIRouteHandlerMap } from '../../../types/APIRouteHandlerMap';
import handleAPIGetOneAnvil from '../../../lib/anvil/handleAPIGetOneAnvil';
const ROUTE_HANDLER_MAP: APIRouteHandlerMap = {
GET: handleAPIGetOneAnvil,
};
async function handleAPIOneAnvil(
request: NextApiRequest,
response: NextApiResponse,
): Promise<void> {
const { method: httpMethod = 'GET' }: NextApiRequest = request;
await ROUTE_HANDLER_MAP[httpMethod](request, response);
}
export default handleAPIOneAnvil;

20
striker-ui/pages/api/anvils/index.ts
Unescape View File

@ -1,20 +0,0 @@
import { NextApiRequest, NextApiResponse } from 'next';
import { APIRouteHandlerMap } from '../../../types/APIRouteHandlerMap';
import handleAPIGetAllAnvil from '../../../lib/anvil/handleAPIGetAllAnvil';
const ROUTE_HANDLER_MAP: APIRouteHandlerMap = {
GET: handleAPIGetAllAnvil,
};
async function handleAPIAllAnvil(
request: NextApiRequest,
response: NextApiResponse,
): Promise<void> {
const { method: httpMethod = 'GET' }: NextApiRequest = request;
await ROUTE_HANDLER_MAP[httpMethod](request, response);
}
export default handleAPIAllAnvil;

9
striker-ui/pages/api/hello.ts
Unescape View File

@ -1,9 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';
function hello(req: NextApiRequest, res: NextApiResponse): void {
res.status(200).json({ name: 'John Doe' });
}
export default hello;
Write Preview
Loading…
Cancel
Save