Finish migrating most everything to TS

resources/assets/scripts/components/server/Server.ts

@@ -93,21 +93,21 @@ export default Vue.component('server', {
                             <router-link :to="{ name: 'server-files' }">
                                 <icon name="folder" class="h-4"></icon> Files
                             </router-link>
-                            <router-link :to="{ name: 'server-subusers' }">
-                                <icon name="users" class="h-4"></icon> Subusers
-                            </router-link>
-                            <router-link :to="{ name: 'server-schedules' }">
-                                <icon name="calendar" class="h-4"></icon> Schedules
-                            </router-link>
+                            <!--<router-link :to="{ name: 'server-subusers' }">-->
+                                <!--<icon name="users" class="h-4"></icon> Subusers-->
+                            <!--</router-link>-->
+                            <!--<router-link :to="{ name: 'server-schedules' }">-->
+                                <!--<icon name="calendar" class="h-4"></icon> Schedules-->
+                            <!--</router-link>-->
                             <router-link :to="{ name: 'server-databases' }">
                                 <icon name="database" class="h-4"></icon> Databases
                             </router-link>
-                            <router-link :to="{ name: 'server-allocations' }">
-                                <icon name="globe" class="h-4"></icon> Allocations
-                            </router-link>
-                            <router-link :to="{ name: 'server-settings' }">
-                                <icon name="settings" class="h-4"></icon> Settings
-                            </router-link>
+                            <!--<router-link :to="{ name: 'server-allocations' }">-->
+                                <!--<icon name="globe" class="h-4"></icon> Allocations-->
+                            <!--</router-link>-->
+                            <!--<router-link :to="{ name: 'server-settings' }">-->
+                                <!--<icon name="settings" class="h-4"></icon> Settings-->
+                            <!--</router-link>-->
                         </div>
                     </div>
                     <div class="h-full w-full">

resources/assets/scripts/components/server/ServerAllocations.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    export default {
-        name: "ServerAllocations"
-    }
-</script>
-
-<style scoped>
-
-</style>

resources/assets/scripts/components/server/ServerSchedules.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    export default {
-        name: "ServerSchedules"
-    }
-</script>
-
-<style scoped>
-
-</style>

resources/assets/scripts/components/server/ServerSettings.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    export default {
-        name: "ServerSettings"
-    }
-</script>
-
-<style scoped>
-
-</style>

resources/assets/scripts/components/server/ServerSubusers.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-    export default {
-        name: "ServerSubusers"
-    }
-</script>
-
-<style scoped>
-
-</style>

resources/assets/scripts/components/server/components/filemanager/FileContextMenu.ts

@@ -2,17 +2,15 @@ import Vue from 'vue';
 import Icon from "../../../core/Icon";
 
 export default Vue.component('file-context-menu', {
-    components: {
-        Icon,
-    },
+    components: { Icon },
 
     template: `
         <div class="context-menu">
             <div>
                 <div class="context-row">
                     <div class="icon">
-                        <icon name="edit3"/>
-                    </div>
+                        <icon name="edit-3"/>
+                    </div> 
                     <div class="action"><span>Rename</span></div>
                 </div>
                 <div class="context-row">

resources/assets/scripts/components/server/components/filemanager/FolderRow.ts

@@ -1,11 +1,9 @@
 import Vue from 'vue';
-import { formatDate } from "../../../../helpers";
-import Icon from "../../../core/Icon";
+import { formatDate } from "@/helpers";
+import Icon from "@/components/core/Icon";
 
 export default Vue.component('folder-row', {
-    components: {
-        Icon,
-    },
+    components: { Icon },
 
     props: {
         directory: {type: Object, required: true},
@@ -34,7 +32,7 @@ export default Vue.component('folder-row', {
                          :to="{ name: 'server-files', params: { path: getClickablePath(directory.name).replace(/^\\//, '') }}"
             >
                 <div class="flex-none icon">
-                    <folder-icon/>
+                    <icon name="folder"/>
                 </div>
                 <div class="flex-1">{{directory.name}}</div>
                 <div class="flex-1 text-right text-grey-dark"></div>

resources/assets/scripts/components/server/index.ts

@@ -1,8 +1,4 @@
 export {default as Server} from './Server';
-export {default as ServerAllocations} from './ServerAllocations.vue';
 export {default as ConsolePage} from './subpages/Console';
-export {default as DatabasesPage} from './subpages/Databases.vue';
-export {default as FileManagerPage} from './subpages/FileManager.vue';
-export {default as ServerSchedules} from './ServerSchedules.vue';
-export {default as ServerSettings} from './ServerSettings.vue';
-export {default as ServerSubusers} from './ServerSubusers.vue';
+export {default as DatabasesPage} from './subpages/Databases';
+export {default as FileManagerPage} from './subpages/FileManager';

resources/assets/scripts/components/server/subpages/Databases.ts

@@ -0,0 +1,117 @@
+import Vue from 'vue';
+import { map, filter } from 'lodash';
+import Modal from '@/components/core/Modal';
+import CreateDatabaseModal from './../components/database/CreateDatabaseModal.vue';
+import DatabaseRow from './../components/database/DatabaseRow.vue';
+import Icon from "@/components/core/Icon";
+
+type DataStructure = {
+    loading: boolean,
+    showCreateModal: boolean,
+    databases: Array<any>,
+}
+
+export default Vue.component('server-databases', {
+    components: {DatabaseRow, CreateDatabaseModal, Modal, Icon },
+
+    data: function (): DataStructure {
+        return {
+            databases: [],
+            loading: true,
+            showCreateModal: false,
+        };
+    },
+
+    mounted: function () {
+        this.getDatabases();
+
+        window.events.$on('server:deleted-database', this.removeDatabase);
+    },
+
+    methods: {
+        /**
+         * Get all of the databases that exist for this server.
+         */
+        getDatabases: function () {
+            this.$flash.clear();
+            this.loading = true;
+
+            window.axios.get(this.route('api.client.servers.databases', {
+                server: this.$route.params.id,
+                include: 'password'
+            }))
+                .then(response => {
+                    this.databases = map(response.data.data, (object) => {
+                        const data = object.attributes;
+
+                        data.password = data.relationships.password.attributes.password;
+                        data.showPassword = false;
+                        delete data.relationships;
+
+                        return data;
+                    });
+                })
+                .catch(err => {
+                    this.$flash.error('There was an error encountered while attempting to fetch databases for this server.');
+                    console.error(err);
+                })
+                .then(() => {
+                    this.loading = false;
+                });
+        },
+
+        /**
+         * Add the database to the list of existing databases automatically when the modal
+         * is closed with a successful callback.
+         */
+        handleModalCallback: function (object: any) {
+            const data = object;
+            data.password = data.relationships.password.attributes.password;
+            data.showPassword = false;
+
+            delete data.relationships;
+
+            this.databases.push(data);
+        },
+
+        /**
+         * Handle event that is removing a database.
+         */
+        removeDatabase: function (databaseId: number) {
+            this.databases = filter(this.databases, (database) => {
+                return database.id !== databaseId;
+            });
+        }
+    },
+
+    template: `
+        <div>
+            <div v-if="loading">
+                <div class="spinner spinner-xl blue"></div>
+            </div>
+            <div class="animate fadein" v-else>
+                <div class="content-box mb-6" v-if="!databases.length">
+                    <div class="flex items-center">
+                        <icon name="database" class="flex-none text-grey-darker"></icon>
+                        <div class="flex-1 px-4 text-grey-darker">
+                            <p>You have no databases.</p>
+                        </div>
+                    </div>
+                </div>
+                <div v-else>
+                    <database-row v-for="database in databases" :database="database" :key="database.name"/>
+                </div>
+                <div>
+                    <button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
+                </div>
+                <modal :show="showCreateModal" v-on:close="showCreateModal = false">
+                    <create-database-modal
+                            v-on:close="showCreateModal = false"
+                            v-on:database="handleModalCallback"
+                            v-if="showCreateModal"
+                    />
+                </modal>
+            </div>
+        </div>
+    `,
+});

resources/assets/scripts/components/server/subpages/Databases.vue

@@ -1,116 +0,0 @@
-<template>
-    <div>
-        <div v-if="loading">
-            <div class="spinner spinner-xl blue"></div>
-        </div>
-        <div class="animate fadein" v-else>
-            <div class="content-box mb-6" v-if="!databases.length">
-                <div class="flex items-center">
-                    <database-icon class="flex-none text-grey-darker"></database-icon>
-                    <div class="flex-1 px-4 text-grey-darker">
-                        <p>You have no databases.</p>
-                    </div>
-                </div>
-            </div>
-            <div v-else>
-                <database-row v-for="database in databases" :database="database" :key="database.name"/>
-            </div>
-            <div>
-                <button class="btn btn-blue btn-lg" v-on:click="showCreateModal = true">Create new database</button>
-            </div>
-            <modal :show="showCreateModal" v-on:close="showCreateModal = false">
-                <create-database-modal
-                        v-on:close="showCreateModal = false"
-                        v-on:database="handleModalCallback"
-                        v-if="showCreateModal"
-                />
-            </modal>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { DatabaseIcon, LockIcon, Trash2Icon } from 'vue-feather-icons';
-    import map from 'lodash/map';
-    import filter from 'lodash/filter';
-    import Modal from '../../core/Modal';
-    import CreateDatabaseModal from '../components/database/CreateDatabaseModal';
-    import DatabaseRow from '../components/database/DatabaseRow';
-
-    export default {
-        name: 'databases-page',
-        components: {DatabaseRow, CreateDatabaseModal, Modal, DatabaseIcon, LockIcon, Trash2Icon },
-
-        data: function () {
-            return {
-                databases: [],
-                loading: true,
-                showCreateModal: false,
-            };
-        },
-
-        mounted: function () {
-            this.getDatabases();
-
-            window.events.$on('server:deleted-database', this.removeDatabase);
-        },
-
-        methods: {
-            /**
-             * Get all of the databases that exist for this server.
-             */
-            getDatabases: function () {
-                this.clearFlashes();
-                this.loading = true;
-
-                window.axios.get(this.route('api.client.servers.databases', {
-                    server: this.$route.params.id,
-                    include: 'password'
-                }))
-                    .then(response => {
-                        this.databases = map(response.data.data, (object) => {
-                            const data = object.attributes;
-
-                            data.password = data.relationships.password.attributes.password;
-                            data.showPassword = false;
-                            delete data.relationships;
-
-                            return data;
-                        });
-                    })
-                    .catch(err => {
-                        this.error('There was an error encountered while attempting to fetch databases for this server.');
-                        console.error(err);
-                    })
-                    .then(() => {
-                        this.loading = false;
-                    });
-            },
-
-            /**
-             * Add the database to the list of existing databases automatically when the modal
-             * is closed with a successful callback.
-             */
-            handleModalCallback: function (object) {
-                const data = object;
-                data.password = data.relationships.password.attributes.password;
-                data.showPassword = false;
-
-                delete data.relationships;
-
-                this.databases.push(data);
-            },
-
-            /**
-             * Handle event that is removing a database.
-             *
-             * @param databaseId
-             */
-            removeDatabase: function (databaseId) {
-                this.databases = filter(this.databases, (database) => {
-                    return database.id !== databaseId;
-                });
-            }
-        }
-    };
-</script>

resources/assets/scripts/components/server/subpages/FileManager.ts

@@ -1,57 +1,21 @@
-<template>
-    <div class="content-box animate fadein">
-        <div class="filemanager-breadcrumbs">
-            /<span class="px-1">home</span><!--
-            -->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
-            --><span v-for="crumb in breadcrumbs" class="inline-block">
-                <span v-if="crumb.path">
-                    /<router-link :to="{ name: 'server-files', params: { path: crumb.path } }" class="px-1">{{crumb.directoryName}}</router-link>
-                </span>
-                <span v-else>
-                    /<span class="px-1 font-semibold">{{crumb.directoryName}}</span>
-                </span>
-            </span>
-        </div>
-        <div v-if="loading">
-            <div class="spinner spinner-xl blue"></div>
-        </div>
-        <div v-else-if="!loading && errorMessage">
-            <div class="alert error" v-text="errorMessage"></div>
-        </div>
-        <div class="filemanager" v-else>
-            <div class="header">
-                <div class="flex-none w-8"></div>
-                <div class="flex-1">Name</div>
-                <div class="flex-1 text-right">Size</div>
-                <div class="flex-1 text-right">Modified</div>
-                <div class="flex-none w-1/6">Actions</div>
-            </div>
-            <div v-if="!directories.length && !files.length">
-                <p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
-            </div>
-            <div v-else>
-                <div v-for="directory in directories">
-                    <file-manager-folder-row :directory="directory"/>
-                </div>
-                <div v-for="file in files">
-                    <file-manager-file-row :file="file" :editable="editableFiles" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
+import Vue from 'vue';
+import {mapState} from "vuex";
+import { map } from 'lodash';
+import getDirectoryContents from "@/api/server/getDirectoryContents";
+import FileRow from "@/components/server/components/filemanager/FileRow";
+import FolderRow from "@/components/server/components/filemanager/FolderRow";
 
-<script>
-import map from 'lodash/map';
-import { mapState } from 'vuex';
-import FileManagerFileRow from '../components/filemanager/FileRow';
-import FileManagerFolderRow from '../components/filemanager/FolderRow';
-import { getDirectoryContents } from '../../../api/server/getDirectoryContents';
-
-export default {
-    name: 'file-manager-page',
-    components: { FileManagerFolderRow, FileManagerFileRow },
+type DataStructure = {
+    loading: boolean,
+    errorMessage: string | null,
+    currentDirectory: string,
+    files: Array<any>,
+    directories: Array<any>,
+    editableFiles: Array<string>,
+}
 
+export default Vue.component('file-manager', {
+    components: { FileRow, FolderRow },
     computed: {
         ...mapState('server', ['server', 'credentials']),
         ...mapState('socket', ['connected']),
@@ -66,7 +30,7 @@ export default {
                 return [];
             }
 
-            return map(directories, function (value, key) {
+            return map(directories, function (value: string, key: number) {
                 if (key === directories.length - 1) {
                     return { directoryName: value };
                 }
@@ -99,18 +63,18 @@ export default {
          * so that the error message disappears and we then load in a fresh listing.
          */
         connected: function () {
+            // @ts-ignore
             if (this.connected) {
                 this.listDirectory();
             }
         },
     },
 
-    data: function () {
+    data: function (): DataStructure {
         return {
             currentDirectory: this.$route.params.path || '/',
             loading: true,
             errorMessage: null,
-
             directories: [],
             editableFiles: [],
             files: [],
@@ -137,7 +101,7 @@ export default {
                     this.errorMessage = null;
                 })
                 .catch((err) => {
-                    if (err instanceof String) {
+                    if (typeof err === 'string') {
                         this.errorMessage = err;
                         return;
                     }
@@ -149,5 +113,47 @@ export default {
                 });
         },
     },
-};
-</script>
+
+    template: `
+        <div class="content-box animate fadein">
+            <div class="filemanager-breadcrumbs">
+                /<span class="px-1">home</span><!--
+                -->/<router-link :to="{ name: 'server-files' }" class="px-1">container</router-link><!--
+                --><span v-for="crumb in breadcrumbs" class="inline-block">
+                    <span v-if="crumb.path">
+                        /<router-link :to="{ name: 'server-files', params: { path: crumb.path } }" class="px-1">{{crumb.directoryName}}</router-link>
+                    </span>
+                    <span v-else>
+                        /<span class="px-1 font-semibold">{{crumb.directoryName}}</span>
+                    </span>
+                </span>
+            </div>
+            <div v-if="loading">
+                <div class="spinner spinner-xl blue"></div>
+            </div>
+            <div v-else-if="!loading && errorMessage">
+                <div class="alert error" v-text="errorMessage"></div>
+            </div>
+            <div class="filemanager" v-else>
+                <div class="header">
+                    <div class="flex-none w-8"></div>
+                    <div class="flex-1">Name</div>
+                    <div class="flex-1 text-right">Size</div>
+                    <div class="flex-1 text-right">Modified</div>
+                    <div class="flex-none w-1/6">Actions</div>
+                </div>
+                <div v-if="!directories.length && !files.length">
+                    <p class="text-grey text-sm text-center p-6 pb-4">This directory is empty.</p>
+                </div>
+                <div v-else>
+                    <div v-for="directory in directories">
+                        <folder-row :directory="directory"/>
+                    </div>
+                    <div v-for="file in files">
+                        <file-row :file="file" :editable="editableFiles" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+});

resources/assets/scripts/pterodactyl-shims.d.ts

@@ -4,6 +4,8 @@ import {FlashInterface} from "./mixins/flash";
 import {AxiosInstance} from "axios";
 import {Vue as VueType} from "vue/types/vue";
 import {ApplicationState} from "./store/types";
+import {Route} from "vue-router";
+
 // @ts-ignore
 import {Ziggy} from './helpers/ziggy';
 
@@ -35,6 +37,7 @@ declare module 'vue/types/options' {
 
 declare module 'vue/types/vue' {
     interface Vue {
+        $route: Route,
         $store: Store<any>,
         $flash: FlashInterface,
         route: (name: string, params?: object, absolute?: boolean) => string,

resources/assets/scripts/router.ts

@@ -11,13 +11,9 @@ import ResetPassword from './components/auth/ResetPassword';
 import User from './models/user';
 import {
     Server,
-    ServerAllocations,
     ConsolePage,
     FileManagerPage,
     DatabasesPage,
-    ServerSchedules,
-    ServerSettings,
-    ServerSubusers,
 } from './components/server';
 
 const routes = [
@@ -43,11 +39,11 @@ const routes = [
         children: [
             {name: 'server', path: '', component: ConsolePage},
             {name: 'server-files', path: 'files/:path(.*)?', component: FileManagerPage},
-            {name: 'server-subusers', path: 'subusers', component: ServerSubusers},
-            {name: 'server-schedules', path: 'schedules', component: ServerSchedules},
+            // {name: 'server-subusers', path: 'subusers', component: ServerSubusers},
+            // {name: 'server-schedules', path: 'schedules', component: ServerSchedules},
             {name: 'server-databases', path: 'databases', component: DatabasesPage},
-            {name: 'server-allocations', path: 'allocations', component: ServerAllocations},
-            {name: 'server-settings', path: 'settings', component: ServerSettings},
+            // {name: 'server-allocations', path: 'allocations', component: ServerAllocations},
+            // {name: 'server-settings', path: 'settings', component: ServerSettings},
         ],
     },
 ];