Base code for settings and schedules

Author: DaneEveritt

app/Transformers/Api/Client/ServerTransformer.php

@@ -35,6 +35,10 @@ public function transform(Server $server): array
             'uuid' => $server->uuid,
             'name' => $server->name,
             'node' => $server->node->name,
+            'sftp_details' => [
+                'ip' => $server->node->fqdn,
+                'port' => $server->node->daemonSFTP,
+            ],
             'description' => $server->description,
             'allocation' => [
                 'ip' => $server->allocation->alias,

resources/scripts/api/server/getServer.ts

@@ -12,6 +12,10 @@ export interface Server {
     uuid: string;
     name: string;
     node: string;
+    sftpDetails: {
+        ip: string;
+        port: number;
+    };
     description: string;
     allocations: Allocation[];
     limits: {
@@ -32,6 +36,10 @@ export const rawDataToServerObject = (data: any): Server => ({
     uuid: data.uuid,
     name: data.name,
     node: data.node,
+    sftpDetails: {
+        ip: data.sftp_details.ip,
+        port: data.sftp_details.port,
+    },
     description: data.description ? ((data.description.length > 0) ? data.description : null) : null,
     allocations: [{
         ip: data.allocation.ip,

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => null;

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { ServerContext } from '@/state/server';
+import { useStoreState } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import { UserData } from '@/state/user';
+
+export default () => {
+    const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
+    const server = ServerContext.useStoreState(state => state.server.data!);
+
+    return (
+        <div className={'my-10 mb-6 flex'}>
+            <TitledGreyBox title={'SFTP Details'} className={'w-full md:w-1/2'}>
+                <div>
+                    <label className={'input-dark-label'}>Server Address</label>
+                    <input
+                        type={'text'}
+                        className={'input-dark'}
+                        value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
+                        readOnly={true}
+                    />
+                </div>
+                <div className={'mt-6'}>
+                    <label className={'input-dark-label'}>Username</label>
+                    <input
+                        type={'text'}
+                        className={'input-dark'}
+                        value={`${user.username}.${server.id}`}
+                        readOnly={true}
+                    />
+                </div>
+                <div className={'mt-6'}>
+                    <div className={'border-l-4 border-cyan-500 p-3'}>
+                        <p className={'text-xs text-neutral-200'}>
+                            Your SFTP password is the same as the password you use to access this panel.
+                        </p>
+                    </div>
+                </div>
+            </TitledGreyBox>
+        </div>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -13,6 +13,8 @@ import { CSSTransition } from 'react-transition-group';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import FileEditContainer from '@/components/server/files/FileEditContainer';
 import UsersContainer from '@/components/server/users/UsersContainer';
+import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
+import SettingsContainer from '@/components/server/settings/SettingsContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -36,6 +38,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                             <NavLink to={`${match.url}/files`}>File Manager</NavLink>
                             <NavLink to={`${match.url}/databases`}>Databases</NavLink>
                             <NavLink to={`${match.url}/users`}>User Management</NavLink>
+                            <NavLink to={`${match.url}/schedules`}>Schedules</NavLink>
+                            <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                         </div>
                     </div>
                 </div>
@@ -64,6 +68,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                     />
                                     <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
                                     <Route path={`${match.path}/users`} component={UsersContainer} exact/>
+                                    <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
+                                    <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                                 </Switch>
                             </React.Fragment>
                         }