Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Various changes

Browse source 
Added support for images as well as a distinct loading style
This commit is contained in:
Neshura 2022-12-11 18:39:09 +01:00
parent dbe55d76f5
commit ff2b6aa2c1
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
1 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
pages/services.tsx
View file

@ -1,31 +1,40 @@
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import styles from '/styles/Home.module.css' import styles from '/styles/Home.module.css'
import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/LinkTypes'; import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/Services';
import Dockerode from 'dockerode'; import Dockerode from 'dockerode';
import { ReactElement } from 'react' import { ReactElement } from 'react'
import useSWR from 'swr'; import useSWR from 'swr';
import Image from 'next/image';
const fetcher = (url: string) => fetch(url).then((res) => res.json()) const fetcher = (url: string) => fetch(url).then((res) => res.json())
function Services() { function Services() {
const { initialData, fullData, loadingInitial, loadingFull, error } = useServices(); const { initialData, fullData, loadingInitial, loadingFull, error } = useServices();
let content: ReactElement = <></>; let content: ReactElement = <></>;
if (error) { content = <div>Error loading data</div> } if (error) { content = <div>Error loading data</div> }
else if (loadingInitial) { else if (loadingInitial) { content = <div>Loading</div> }
content = <div>Loading</div>
}
else if (loadingFull) { else if (loadingFull) {
content = content =
<div className={styles.grid}> <div className={styles.grid}>
{initialData?.map((item: Service) => ( {initialData?.map((item: Service) => (
<Link key={item.name} href={item.href}> <Link key={item.name} href={item.href}>
<a className={styles.contentcard}> <a className={styles.contentcard}>
<div className={styles.contenttitle}><h2>{item.name}</h2></div> <div className={styles.contentTitle}>
<div className={item.status === ServiceStatus.online ? styles.contentonline : styles.contentoffline}>{item.status}</div> {
item.icon ? (
<div className={styles.contentIcon}>
<Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
</div>
) : (<></>)
}
<h2>{item.name}</h2>
</div>
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
{item.status}
</div>
<div><p>{item.desc}</p></div> <div><p>{item.desc}</p></div>
<div className={styles.cardwarn}><p>{item.warn}</p></div> <div className={styles.cardwarn}><p>{item.warn}</p></div>
</a> </a>
@ -39,8 +48,19 @@ function Services() {
{fullData.map((item: Service) => ( {fullData.map((item: Service) => (
<Link key={item.name} href={item.href}> <Link key={item.name} href={item.href}>
<a className={styles.contentcard}> <a className={styles.contentcard}>
<div className={styles.contenttitle}><h2>{item.name}</h2></div> <div className={styles.contentTitle}>
<div className={item.status === ServiceStatus.online ? styles.contentonline : styles.contentoffline}>{item.status}</div> {
item.icon ? (
<div className={styles.contentIcon}>
<Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
</div>
) : (<></>)
}
<h2>{item.name}</h2>
</div>
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
{item.status}
</div>
<div><p>{item.desc}</p></div> <div><p>{item.desc}</p></div>
<div className={styles.cardwarn}><p>{item.warn}</p></div> <div className={styles.cardwarn}><p>{item.warn}</p></div>
</a> </a>