Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A few adjustments for chunking the new file edit page

Browse source
This commit is contained in:
Dane Everitt 2019-09-28 14:59:05 -07:00
parent 8599e2c64b
commit c66d2cd123
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 72 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Models/Server.php
View file

@ -44,7 +44,7 @@ use Znck\Eloquent\Traits\BelongsToThrough;
* @property \Pterodactyl\Models\Node $node
* @property \Pterodactyl\Models\Nest $nest
* @property \Pterodactyl\Models\Egg $egg
* @property \Pterodactyl\Models\EggVariable[]|\Illuminate\Support\Collection $variables
* @property \Pterodactyl\Models\ServerVariable[]|\Illuminate\Support\Collection $variables
* @property \Pterodactyl\Models\Schedule[]|\Illuminate\Support\Collection $schedule
* @property \Pterodactyl\Models\Database[]|\Illuminate\Support\Collection $databases
* @property \Pterodactyl\Models\Location $location

9
resources/scripts/api/server/files/getFileContents.ts Normal file
View file

@ -0,0 +1,9 @@
import http from '@/api/http';
export default (server: string, file: string): Promise<string> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${server}/files/contents`, { params: { file } })
.then(({ data }) => resolve(data))
.catch(reject);
});
};

14
resources/scripts/components/elements/SuspenseSpinner.tsx Normal file
View file

@ -0,0 +1,14 @@
import React, { Suspense } from 'react';
import Spinner from '@/components/elements/Spinner';
export default ({ children }: { children?: React.ReactNode }) => (
<Suspense
fallback={
<div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
<Spinner centered={true} size={'normal'}/>
</div>
}
>
{children}
</Suspense>
);

12
resources/scripts/components/server/ServerConsole.tsx
View file

@ -8,7 +8,7 @@ import styled from 'styled-components';
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
import { bytesToHuman } from '@/helpers';
import Spinner from '@/components/elements/Spinner';
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
@ -142,17 +142,11 @@ export default () => {
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
</GreyBox>
</div>
<React.Suspense
fallback={
<div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
<Spinner centered={true} size={'normal'}/>
</div>
}
>
<SuspenseSpinner>
<div className={'mx-4 w-3/4 mr-4'}>
<ChunkedConsole/>
</div>
</React.Suspense>
</SuspenseSpinner>
</div>
);
};

23
resources/scripts/components/server/files/FileEditContainer.tsx
View file

@ -1,16 +1,25 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import useRouter from 'use-react-router';
import queryString from 'query-string';
import { ServerContext } from '@/state/server';
import getFileContents from '@/api/server/files/getFileContents';
export default () => {
const { location: { search } } = useRouter();
const values = queryString.parse(search);
const { location: { hash } } = useRouter();
const [content, setContent] = useState('');
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
useEffect(() => {
getFileContents(uuid, hash.replace(/^#/, ''))
.then(setContent)
.catch(error => console.error(error));
}, []);
return (
<div className={'my-10'}>
<textarea className={'rounded bg-black h-32 w-full text-neutral-100'}>
</textarea>
<textarea
value={content}
className={'rounded bg-black h-32 w-full text-neutral-100 text-sm font-mono'}
/>
</div>
);
};

13
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -10,10 +10,13 @@ import React from 'react';
import { FileObject } from '@/api/server/files/loadDirectory';
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
import { ServerContext } from '@/state/server';
import { NavLink } from 'react-router-dom';
import useRouter from 'use-react-router';
export default ({ file }: { file: FileObject }) => {
const directory = ServerContext.useStoreState(state => state.files.directory);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const { match } = useRouter();
return (
<div
@ -23,18 +26,18 @@ export default ({ file }: { file: FileObject }) => {
hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
`}
>
<a
href={file.isFile ? undefined : `#${directory}/${file.name}`}
<NavLink
to={`${match.url}/${file.isFile ? 'edit/' : ''}#${directory}/${file.name}`}
className={'flex flex-1 text-neutral-300 no-underline p-3'}
onClick={e => {
e.preventDefault();
// Don't rely on the onClick to work with the generated URL. Because of the way this
// component re-renders you'll get redirected into a nested directory structure since
// it'll cause the directory variable to update right away when you click.
//
// Just trust me future me, leave this be.
if (!file.isFile) {
e.preventDefault();
window.location.hash = `#${directory}/${file.name}`;
setDirectory(`${directory}/${file.name}`);
}
@ -65,7 +68,7 @@ export default ({ file }: { file: FileObject }) => {
distanceInWordsToNow(file.modifiedAt, { addSuffix: true })
}
</div>
</a>
</NavLink>
<FileDropdownMenu uuid={file.uuid}/>
</div>
);

18
resources/scripts/routers/ServerRouter.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React, { lazy, useEffect } from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import NavigationBar from '@/components/NavigationBar';
import ServerConsole from '@/components/server/ServerConsole';
@ -10,7 +10,11 @@ import { Provider } from 'react-redux';
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
import { CSSTransition } from 'react-transition-group';
import FileEditContainer from '@/components/server/files/FileEditContainer';
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
const LazyFileEditContainer = lazy<React.ComponentType<RouteComponentProps<any>>>(
() => import('@/components/server/files/FileEditContainer')
);
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
const server = ServerContext.useStoreState(state => state.server.data);
@ -51,7 +55,15 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
<Route path={`${match.path}/files/edit`} component={FileEditContainer} exact/>
<Route
path={`${match.path}/files/edit`}
render={props => (
<SuspenseSpinner>
<LazyFileEditContainer {...props}/>
</SuspenseSpinner>
)}
exact
/>
<Route path={`${match.path}/databases`} component={DatabasesContainer}/>
</Switch>
</React.Fragment>

2
resources/styles/components/typography.css
View file

@ -1,5 +1,5 @@
@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:500&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
body {
@apply .text-neutral-200;

3
tailwind.js
View file

@ -211,6 +211,9 @@ module.exports = {
'serif',
],
'mono': [
'"IBM Plex Mono"',
'"Source Code Pro"',
'SourceCodePro',
'Menlo',
'Monaco',
'Consolas',