Various changes
Added support for images as well as a distinct loading style
This commit is contained in:
parent
dbe55d76f5
commit
ff2b6aa2c1
1 changed files with 29 additions and 9 deletions
|
@ -1,31 +1,40 @@
|
|||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
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 { ReactElement } from 'react'
|
||||
import useSWR from 'swr';
|
||||
import Image from 'next/image';
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
||||
|
||||
function Services() {
|
||||
const { initialData, fullData, loadingInitial, loadingFull, error } = useServices();
|
||||
|
||||
|
||||
let content: ReactElement = <></>;
|
||||
|
||||
if (error) { content = <div>Error loading data</div> }
|
||||
else if (loadingInitial) {
|
||||
content = <div>Loading</div>
|
||||
}
|
||||
else if (loadingInitial) { content = <div>Loading</div> }
|
||||
else if (loadingFull) {
|
||||
content =
|
||||
<div className={styles.grid}>
|
||||
{initialData?.map((item: Service) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className={styles.contentcard}>
|
||||
<div className={styles.contenttitle}><h2>{item.name}</h2></div>
|
||||
<div className={item.status === ServiceStatus.online ? styles.contentonline : styles.contentoffline}>{item.status}</div>
|
||||
<div className={styles.contentTitle}>
|
||||
{
|
||||
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 className={styles.cardwarn}><p>{item.warn}</p></div>
|
||||
</a>
|
||||
|
@ -39,8 +48,19 @@ function Services() {
|
|||
{fullData.map((item: Service) => (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a className={styles.contentcard}>
|
||||
<div className={styles.contenttitle}><h2>{item.name}</h2></div>
|
||||
<div className={item.status === ServiceStatus.online ? styles.contentonline : styles.contentoffline}>{item.status}</div>
|
||||
<div className={styles.contentTitle}>
|
||||
{
|
||||
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 className={styles.cardwarn}><p>{item.warn}</p></div>
|
||||
</a>
|
||||
|
|
Loading…
Reference in a new issue