StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update server listing and associated logic to pull from the panel dynamiacally

Browse source
This commit is contained in:
Dane Everitt 2019-08-17 16:03:10 -07:00
parent 952dff854e
commit fb9c106448
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
26 changed files with 384 additions and 239 deletions
Download patch file Download diff file Expand all files Collapse all files

116
resources/scripts/components/dashboard/DashboardContainer.tsx
View file

@ -1,97 +1,35 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
import { Link } from 'react-router-dom';
import { Server } from '@/api/server/getServer';
import getServers from '@/api/getServers';
import ServerRow from '@/components/dashboard/ServerRow';
import Spinner from '@/components/elements/Spinner';
export default () => (
<div className={'my-10'}>
<Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
<div className={'icon'}>
<FontAwesomeIcon icon={faServer}/>
</div>
<div className={'w-1/2 ml-4'}>
<p className={'text-lg'}>Party Parrots</p>
</div>
<div className={'flex flex-1 items-baseline justify-around'}>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
192.168.100.100:25565
</p>
</div>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faMicrochip} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
34.6%
</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faMemory} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
2094 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 4096 MB</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faHdd} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
278 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 16 GB</p>
</div>
</div>
</Link>
<div className={'grey-row-box cursor-pointer mt-2'}>
<div className={'icon'}>
<FontAwesomeIcon icon={faServer}/>
</div>
<div className={'w-1/2 ml-4'}>
<p className={'text-lg'}>My Factions Server</p>
<p className={'text-neutral-400 text-xs mt-1'}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<div className={'flex flex-1 items-baseline justify-around'}>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
192.168.202.10:34556
</p>
</div>
<div className={'flex ml-4'}>
<FontAwesomeIcon icon={faMicrochip} className={'text-red-400'}/>
<p className={'text-sm text-white ml-2'}>
98.2 %
</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faMemory} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
376 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 1024 MB</p>
</div>
<div className={'ml-4'}>
<div className={'flex'}>
<FontAwesomeIcon icon={faHdd} className={'text-neutral-500'}/>
<p className={'text-sm text-neutral-400 ml-2'}>
187 MB
</p>
</div>
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 32 GB</p>
</div>
</div>
export default () => {
const [ servers, setServers ] = useState<null | Server[]>(null);
const loadServers = () => getServers().then(data => setServers(data.items));
useEffect(() => {
loadServers();
}, []);
if (servers === null) {
return <Spinner size={'large'} centered={true}/>;
}
return (
<div className={'my-10'}>
{
servers.map(server => (
<ServerRow key={server.uuid} server={server} className={'mt-2'}/>
))
}
</div>
</div>
);
);
};