Merge branch 'feature/themes' into 'main'
Feature/themes Closes #3, #18, and #4 See merge request neshura-websites/www!9
This commit is contained in:
commit
a4cbb3d816
10 changed files with 196 additions and 116 deletions
|
@ -1,8 +1,7 @@
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import styled, { DefaultTheme } from 'styled-components';
|
import styled, { css, DefaultTheme } from 'styled-components';
|
||||||
import { CustomLink } from '../../interfaces/LinkTypes';
|
import { Service, Game } from '../../interfaces/CardTypes';
|
||||||
import { Service } from '../../interfaces/Services';
|
|
||||||
|
|
||||||
// needed for Online Status checks
|
// needed for Online Status checks
|
||||||
// TODO: migrate to shared Status type for Games and Services
|
// TODO: migrate to shared Status type for Games and Services
|
||||||
|
@ -16,7 +15,7 @@ export const PageTitle = styled.h1`
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
`
|
`;
|
||||||
|
|
||||||
// replaces .description
|
// replaces .description
|
||||||
export const PageDescription = styled.p`
|
export const PageDescription = styled.p`
|
||||||
|
@ -24,7 +23,7 @@ export const PageDescription = styled.p`
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
`
|
`;
|
||||||
|
|
||||||
// replaces .grid
|
// replaces .grid
|
||||||
export const PageContentBox = styled.div`
|
export const PageContentBox = styled.div`
|
||||||
|
@ -33,12 +32,29 @@ export const PageContentBox = styled.div`
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
max-width: 80%;
|
max-width: 80%;
|
||||||
`
|
`;
|
||||||
|
|
||||||
|
const CardStyle = css`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 332px;
|
||||||
|
height: 240px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CardLink = styled(Link)`
|
||||||
|
${CardStyle}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CardStyleWrap = styled.div`
|
||||||
|
${CardStyle}
|
||||||
|
`;
|
||||||
|
|
||||||
// replaces .card & .contentcard
|
// replaces .card & .contentcard
|
||||||
export const PageCard = styled.div`
|
export const PageCard = styled.div`
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
padding: 1rem;
|
padding: 1.5rem 0.7rem 1.5rem 0.7rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: ${({ theme }) => theme.colors.primary};
|
color: ${({ theme }) => theme.colors.primary};
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -46,7 +62,11 @@ export const PageCard = styled.div`
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border-color: ${({ theme }) => theme.colors.primary};
|
border-color: ${({ theme }) => theme.colors.primary};
|
||||||
transition: color 0.15s ease, border-color 0.15s ease;
|
transition: color 0.15s ease, border-color 0.15s ease;
|
||||||
max-width: 300px;
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
|
@ -55,15 +75,20 @@ export const PageCard = styled.div`
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.2rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,:active,:hover {
|
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
|
||||||
color: ${({ theme }) => theme.colors.secondary};
|
color: ${({ theme }) => theme.colors.secondary};
|
||||||
border-color: ${({ theme }) => theme.colors.secondary};
|
border-color: ${({ theme }) => theme.colors.secondary};
|
||||||
}
|
}
|
||||||
`
|
|
||||||
|
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
|
||||||
|
color: ${({ theme }) => theme.colors.secondary};
|
||||||
|
border-color: ${({ theme }) => theme.colors.secondary};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
// replaces the three status classes
|
// replaces the three status classes
|
||||||
const OnlineStatus = styled.p<OnlinePropType>`
|
const OnlineStatus = styled.p<OnlinePropType>`
|
||||||
|
@ -84,12 +109,31 @@ const OnlineStatus = styled.p<OnlinePropType>`
|
||||||
}
|
}
|
||||||
return ret;
|
return ret;
|
||||||
}};
|
}};
|
||||||
`
|
padding: 0.2rem;
|
||||||
|
background-color: ${({ theme }) => theme.colors.background};
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: ${({ theme }) => theme.colors.primary};
|
||||||
|
border-radius: 5px;
|
||||||
|
width: min-content;
|
||||||
|
position: absolute;
|
||||||
|
top: 100; right: 50; bottom: 0; left: 50;
|
||||||
|
offset-position: bottom 10px;
|
||||||
|
transition: color 0.15s ease, border-color 0.15s ease;
|
||||||
|
|
||||||
|
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
|
||||||
|
border-color: ${({ theme }) => theme.colors.secondary};
|
||||||
|
}
|
||||||
|
|
||||||
|
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
|
||||||
|
border-color: ${({ theme }) => theme.colors.secondary};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
// replaces .cardwarn
|
// replaces .cardwarn
|
||||||
const CardContentWarning = styled.p`
|
const CardContentWarning = styled.p`
|
||||||
color: ${({ theme }) => theme.colors.secondary};
|
color: ${({ theme }) => theme.colors.secondary};
|
||||||
`
|
|
||||||
|
`;
|
||||||
|
|
||||||
// replaces .contentIcon
|
// replaces .contentIcon
|
||||||
const CardContentTitleIcon = styled.div`
|
const CardContentTitleIcon = styled.div`
|
||||||
|
@ -98,7 +142,7 @@ const CardContentTitleIcon = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
`
|
`;
|
||||||
|
|
||||||
// replaces .contentTitle
|
// replaces .contentTitle
|
||||||
const CardContentTitleWrap = styled.div`
|
const CardContentTitleWrap = styled.div`
|
||||||
|
@ -112,9 +156,9 @@ const CardContentTitleWrap = styled.div`
|
||||||
margin: 0;
|
margin: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
const CardContentTitle = ({ content }: { content: Service | CustomLink }) => {
|
const CardContentTitle = ({ content }: { content: Service | Game }) => {
|
||||||
return (
|
return (
|
||||||
<CardContentTitleWrap>
|
<CardContentTitleWrap>
|
||||||
{
|
{
|
||||||
|
@ -130,25 +174,67 @@ const CardContentTitle = ({ content }: { content: Service | CustomLink }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card Content Component for Games Page
|
// Card Content Component for Games Page
|
||||||
export const CardContentGame = ({ content }: { content: CustomLink }) => {
|
export const CardContentGame = ({ content }: { content: Game }) => {
|
||||||
return (
|
let ret;
|
||||||
<>
|
if (content.href) {
|
||||||
|
ret = (
|
||||||
|
<CardLink href={content.href}>
|
||||||
|
<PageCard>
|
||||||
<CardContentTitle content={content} />
|
<CardContentTitle content={content} />
|
||||||
<p>{content.desc}</p>
|
<p>{content.desc}</p>
|
||||||
<p>{content.ip}</p>
|
<p>{content.ip}</p>
|
||||||
|
</PageCard>
|
||||||
|
{content.status ?
|
||||||
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
|
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
|
||||||
</>
|
: <></>
|
||||||
|
}
|
||||||
|
</CardLink>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = (
|
||||||
|
<CardStyleWrap>
|
||||||
|
<PageCard>
|
||||||
|
<CardContentTitle content={content} />
|
||||||
|
<p>{content.desc}</p>
|
||||||
|
<p>{content.ip}</p>
|
||||||
|
</PageCard>
|
||||||
|
{content.status ?
|
||||||
|
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
|
||||||
|
: <></>
|
||||||
|
}
|
||||||
|
</CardStyleWrap>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Card Content Component for Services Page
|
// Card Content Component for Services Page
|
||||||
export const CardContentService = ({ content }: { content: Service }) => {
|
export const CardContentService = ({ content }: { content: Service }) => {
|
||||||
return (
|
let ret;
|
||||||
<>
|
if (content.href) {
|
||||||
|
ret = (
|
||||||
|
<CardLink href={content.href}>
|
||||||
|
<PageCard>
|
||||||
<CardContentTitle content={content} />
|
<CardContentTitle content={content} />
|
||||||
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
|
|
||||||
<p>{content.desc}</p>
|
<p>{content.desc}</p>
|
||||||
<CardContentWarning>{content.warn}</CardContentWarning>
|
<CardContentWarning>{content.warn}</CardContentWarning>
|
||||||
</>
|
</PageCard>
|
||||||
|
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
|
||||||
|
</CardLink>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = (
|
||||||
|
<CardStyleWrap>
|
||||||
|
<PageCard>
|
||||||
|
<CardContentTitle content={content} />
|
||||||
|
<p>{content.desc}</p>
|
||||||
|
<CardContentWarning>{content.warn}</CardContentWarning>
|
||||||
|
</PageCard>
|
||||||
|
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
|
||||||
|
</CardStyleWrap>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
}
|
}
|
|
@ -31,12 +31,11 @@ export const Footer = styled.footer`
|
||||||
border-top: 1px solid ${({ theme }) => theme.colors.primary };
|
border-top: 1px solid ${({ theme }) => theme.colors.primary };
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
`
|
|
||||||
|
|
||||||
// TODO
|
a {
|
||||||
/* .footer a {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
} */
|
}
|
||||||
|
`
|
||||||
|
|
|
@ -17,7 +17,7 @@ export const NavBar = styled.nav`
|
||||||
margin-right: 1%;
|
margin-right: 1%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 2rem 0;
|
padding: 1rem 0;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -27,6 +27,7 @@ export const NavLink = styled(Link)<ActivePropType>`
|
||||||
color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary};
|
color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary};
|
||||||
margin: 0.2rem;
|
margin: 0.2rem;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
|
border-radius: 5px;
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -16,36 +16,57 @@ export const ThemeDropDown = styled.div`
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`
|
`
|
||||||
|
|
||||||
export const ThemeDropDownButton = styled.button`
|
export const ThemeDropDownButton = styled.button<DisplayPropType>`
|
||||||
width: 90%;
|
width: 160px;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
|
border-radius: 5px;
|
||||||
background-color: ${({ theme }) => theme.colors.background};
|
background-color: ${({ theme }) => theme.colors.background};
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: ${({ theme }) => theme.colors.primary};
|
color: ${({ theme }) => theme.colors.primary};
|
||||||
transition: color 0.15s ease;
|
|
||||||
|
transition-property: color, border-bottom-left-radius, border-bottom-right-radius;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
|
||||||
&:focus,:hover {
|
&:focus,:hover {
|
||||||
color: ${({ theme }) => theme.colors.secondary};
|
color: ${({ theme }) => theme.colors.secondary};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
border-bottom-left-radius: ${ props => props.show ? "0" : "" };
|
||||||
|
border-bottom-right-radius: ${ props => props.show ? "0" : "" };
|
||||||
`
|
`
|
||||||
|
|
||||||
export const ThemeDropDownOptions = styled.div<DisplayPropType>`
|
export const ThemeDropDownOptions = styled.div<DisplayPropType>`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: ${({ theme }) => theme.colors.primary};
|
color: ${({ theme }) => theme.colors.primary};
|
||||||
background-color: ${({ theme }) => theme.colors.background};
|
background-color: ${({ theme }) => theme.colors.background};
|
||||||
display: ${ props => props.show ? "flex" : "none" };
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-top: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-top-left-radius: 0px; border-top-right-radius: 0px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: ${ props => props.show ? "20%" : "0%" };
|
||||||
|
visibility: ${ props => props.show ? "visible" : "hidden" };
|
||||||
|
|
||||||
|
transition-property: max-height, visibility;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-duration: 0.6s, 0s;
|
||||||
|
transition-delay: 0s, ${ props => props.show ? "0s" : "0.5s" };
|
||||||
`
|
`
|
||||||
|
|
||||||
export const ThemeDropDownOption = styled.button<ActivePropType>`
|
export const ThemeDropDownOption = styled.button<ActivePropType>`
|
||||||
color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
|
color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
|
||||||
background-color: ${({ theme }) => theme.colors.background};
|
background-color: ${({ theme }) => theme.colors.background};
|
||||||
border: 1px solid;
|
align-self: center;
|
||||||
|
border: 0px solid;
|
||||||
padding: 0.2rem 0.5rem;
|
padding: 0.2rem 0.5rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: ${({ theme }) => theme.colors.secondary};
|
color: ${({ theme }) => theme.colors.secondary};
|
||||||
|
|
|
@ -55,7 +55,7 @@ export const StyleSelector = () => {
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<ThemeDropDown onBlur={(event) => handleBlur(event)}>
|
<ThemeDropDown onBlur={(event) => handleBlur(event)}>
|
||||||
<ThemeDropDownButton onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton>
|
<ThemeDropDownButton show={test} onClick={() => setTest(test => !test)}>{selectedTheme.themeName}</ThemeDropDownButton>
|
||||||
<ThemeDropDownOptions id="themesDropdown" show={test}>
|
<ThemeDropDownOptions id="themesDropdown" show={test}>
|
||||||
{themes.map((theme) => (
|
{themes.map((theme) => (
|
||||||
<ThemeDropDownOption active={theme === selectedTheme} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
|
<ThemeDropDownOption active={theme === selectedTheme} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
|
||||||
|
|
|
@ -1,3 +1,16 @@
|
||||||
|
export interface EntryList {
|
||||||
|
services: Service[],
|
||||||
|
games: Game[]
|
||||||
|
}
|
||||||
|
export interface Game {
|
||||||
|
name: string,
|
||||||
|
icon: string,
|
||||||
|
href: string,
|
||||||
|
desc: string,
|
||||||
|
ip: string,
|
||||||
|
status: Status,
|
||||||
|
}
|
||||||
|
|
||||||
export interface Service {
|
export interface Service {
|
||||||
name: string,
|
name: string,
|
||||||
icon: string,
|
icon: string,
|
||||||
|
@ -7,10 +20,10 @@ export interface Service {
|
||||||
type: ServiceType,
|
type: ServiceType,
|
||||||
docker_container_name: string,
|
docker_container_name: string,
|
||||||
location: ServiceLocation,
|
location: ServiceLocation,
|
||||||
status: ServiceStatus
|
status: Status,
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum ServiceStatus {
|
export enum Status {
|
||||||
online = "Online",
|
online = "Online",
|
||||||
offline = "Offline",
|
offline = "Offline",
|
||||||
loading = "Loading",
|
loading = "Loading",
|
||||||
|
@ -26,3 +39,4 @@ export enum ServiceType {
|
||||||
docker = "docker",
|
docker = "docker",
|
||||||
app = "app"
|
app = "app"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,17 +0,0 @@
|
||||||
import { Service } from "./Services"
|
|
||||||
|
|
||||||
export interface EntryList {
|
|
||||||
services: Service[],
|
|
||||||
games: CustomLink[]
|
|
||||||
}
|
|
||||||
export interface CustomLink {
|
|
||||||
name: string,
|
|
||||||
href: string,
|
|
||||||
desc: string,
|
|
||||||
ip: string,
|
|
||||||
type: string,
|
|
||||||
location: string,
|
|
||||||
status: string,
|
|
||||||
docker_container_name: string
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import fsPromises from 'fs/promises'
|
import fsPromises from 'fs/promises'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import { Service, ServiceStatus } from '../../interfaces/Services';
|
import { Service, Status } from '../../interfaces/CardTypes';
|
||||||
|
|
||||||
export default async function ServicesAPI(req: any, res: any) {
|
export default async function ServicesAPI(req: any, res: any) {
|
||||||
try {
|
try {
|
||||||
|
@ -8,7 +8,7 @@ export default async function ServicesAPI(req: any, res: any) {
|
||||||
const data = await fsPromises.readFile(filePath)
|
const data = await fsPromises.readFile(filePath)
|
||||||
.then((file) => JSON.parse(file.toString()));
|
.then((file) => JSON.parse(file.toString()));
|
||||||
data.services.forEach((service: Service) => {
|
data.services.forEach((service: Service) => {
|
||||||
service.status = ServiceStatus.loading;
|
service.status = Status.loading;
|
||||||
});
|
});
|
||||||
|
|
||||||
res.status(200).json(data.services);
|
res.status(200).json(data.services);
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import fsPromises from 'fs/promises'
|
import fsPromises from 'fs/promises'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import type { CustomLink, EntryList } from '../interfaces/LinkTypes'
|
import { EntryList, Game } from '../interfaces/CardTypes';
|
||||||
import { PageContentBox, PageCard, PageDescription, PageTitle, CardContentGame } from '../components/styles/content'
|
import { PageContentBox, PageDescription, PageTitle, CardContentGame } from '../components/styles/content'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
|
||||||
function Servers(props: EntryList) {
|
function Servers(props: EntryList) {
|
||||||
|
@ -24,25 +24,9 @@ function Servers(props: EntryList) {
|
||||||
</PageDescription>
|
</PageDescription>
|
||||||
|
|
||||||
<PageContentBox>
|
<PageContentBox>
|
||||||
{Object.values(serverList).map((item: CustomLink) => {
|
{Object.values(serverList).map((item: Game) => (
|
||||||
if (item.href != null) {
|
<CardContentGame key={item.name} content={item} />
|
||||||
return (
|
))}
|
||||||
<PageCard key={item.name}>
|
|
||||||
<Link href={item.href}>
|
|
||||||
<CardContentGame content={item} />
|
|
||||||
</Link>
|
|
||||||
</PageCard>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return (
|
|
||||||
<PageCard key={item.name}>
|
|
||||||
<CardContentGame content={item} />
|
|
||||||
</PageCard>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</PageContentBox>
|
</PageContentBox>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/Services';
|
import { Service, Status, ServiceType, ServiceLocation } from '../interfaces/CardTypes';
|
||||||
import Dockerode from 'dockerode';
|
import Dockerode from 'dockerode';
|
||||||
import { ReactElement } from 'react'
|
import { ReactElement } from 'react'
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
|
@ -19,11 +19,7 @@ function Services() {
|
||||||
content =
|
content =
|
||||||
<PageContentBox>
|
<PageContentBox>
|
||||||
{initialData?.map((item: Service) => (
|
{initialData?.map((item: Service) => (
|
||||||
<PageCard key={item.name}>
|
<CardContentService key={item.name} content={item} />
|
||||||
<Link key={item.name} href={item.href}>
|
|
||||||
<CardContentService content={item} />
|
|
||||||
</Link>
|
|
||||||
</PageCard>
|
|
||||||
))}
|
))}
|
||||||
</PageContentBox>
|
</PageContentBox>
|
||||||
|
|
||||||
|
@ -32,11 +28,7 @@ function Services() {
|
||||||
content =
|
content =
|
||||||
<PageContentBox>
|
<PageContentBox>
|
||||||
{fullData.map((item: Service) => (
|
{fullData.map((item: Service) => (
|
||||||
<PageCard key={item.name}>
|
<CardContentService key={item.name} content={item} />
|
||||||
<Link key={item.name} href={item.href}>
|
|
||||||
<CardContentService content={item} />
|
|
||||||
</Link>
|
|
||||||
</PageCard>
|
|
||||||
))}
|
))}
|
||||||
</PageContentBox>
|
</PageContentBox>
|
||||||
}
|
}
|
||||||
|
@ -81,19 +73,19 @@ async function getStatus(entry: Service, containers: Dockerode.ContainerInfo[])
|
||||||
case 200:
|
case 200:
|
||||||
case 301:
|
case 301:
|
||||||
case 302:
|
case 302:
|
||||||
entry.status = ServiceStatus.online;
|
entry.status = Status.online;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
entry.status = ServiceStatus.offline;
|
entry.status = Status.offline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
entry.status = ServiceStatus.offline;
|
entry.status = Status.offline;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("Error pinging Website: ", error);
|
console.error("Error pinging Website: ", error);
|
||||||
entry.status = ServiceStatus.error;
|
entry.status = Status.error;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// Type Docker
|
// Type Docker
|
||||||
|
@ -107,11 +99,11 @@ async function getStatus(entry: Service, containers: Dockerode.ContainerInfo[])
|
||||||
// so far only "running" is properly implemented, mroe cases to follow as needed
|
// so far only "running" is properly implemented, mroe cases to follow as needed
|
||||||
switch (container.State) {
|
switch (container.State) {
|
||||||
case "running":
|
case "running":
|
||||||
entry.status = ServiceStatus.online;
|
entry.status = Status.online;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.log("Container Status " + container.State + " has no case implemented");
|
console.log("Container Status " + container.State + " has no case implemented");
|
||||||
entry.status = ServiceStatus.offline;
|
entry.status = Status.offline;
|
||||||
}
|
}
|
||||||
found = true;
|
found = true;
|
||||||
// cancel the for
|
// cancel the for
|
||||||
|
@ -119,7 +111,7 @@ async function getStatus(entry: Service, containers: Dockerode.ContainerInfo[])
|
||||||
}
|
}
|
||||||
// If container name is not missing the container is set to offline
|
// If container name is not missing the container is set to offline
|
||||||
else {
|
else {
|
||||||
entry.status = ServiceStatus.offline;
|
entry.status = Status.offline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!found) {
|
if (!found) {
|
||||||
|
@ -129,13 +121,13 @@ async function getStatus(entry: Service, containers: Dockerode.ContainerInfo[])
|
||||||
// if name is null do not enter for loop
|
// if name is null do not enter for loop
|
||||||
else {
|
else {
|
||||||
console.error("Container Name not specified");
|
console.error("Container Name not specified");
|
||||||
entry.status = ServiceStatus.error;
|
entry.status = Status.error;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// If no Type matches
|
// If no Type matches
|
||||||
else {
|
else {
|
||||||
console.warn("Service Type for Service " + entry.name + " not specified or invalid");
|
console.warn("Service Type for Service " + entry.name + " not specified or invalid");
|
||||||
entry.status = ServiceStatus.error;
|
entry.status = Status.error;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Location Other
|
// Location Other
|
||||||
|
@ -149,25 +141,25 @@ async function getStatus(entry: Service, containers: Dockerode.ContainerInfo[])
|
||||||
case 200:
|
case 200:
|
||||||
case 301:
|
case 301:
|
||||||
case 302:
|
case 302:
|
||||||
entry.status = ServiceStatus.online;
|
entry.status = Status.online;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
entry.status = ServiceStatus.offline;
|
entry.status = Status.offline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
entry.status = ServiceStatus.offline;
|
entry.status = Status.offline;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("Error pinging Website: ", error);
|
console.error("Error pinging Website: ", error);
|
||||||
entry.status = ServiceStatus.error;
|
entry.status = Status.error;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// If no Location matches
|
// If no Location matches
|
||||||
else {
|
else {
|
||||||
console.warn("Service Location for Service " + entry.name + " not specified");
|
console.warn("Service Location for Service " + entry.name + " not specified");
|
||||||
entry.status = ServiceStatus.error;
|
entry.status = Status.error;
|
||||||
}
|
}
|
||||||
return entry;
|
return entry;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue