Add very basic server search and dynamic rendering functionality

app/Http/Controllers/Base/DashboardController.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace Pterodactyl\Http\Controllers\Base;
+
+use Illuminate\Http\Request;
+use Pterodactyl\Models\User;
+use Pterodactyl\Http\Controllers\Controller;
+use Pterodactyl\Contracts\Repository\ServerRepositoryInterface;
+
+class DashboardController extends Controller
+{
+    /**
+     * @var \Pterodactyl\Contracts\Repository\ServerRepositoryInterface
+     */
+    private $repository;
+
+    /**
+     * DashboardController constructor.
+     *
+     * @param \Pterodactyl\Contracts\Repository\ServerRepositoryInterface $repository
+     */
+    public function __construct(ServerRepositoryInterface $repository)
+    {
+        $this->repository = $repository;
+    }
+
+    public function servers(Request $request)
+    {
+        $servers = $this->repository->setSearchTerm($request->input('query'))->filterUserAccessServers(
+            $request->user(), User::FILTER_LEVEL_ALL
+        );
+
+        $data = [];
+        foreach ($servers->items() as $server) {
+            $cleaned = collect($server)->only([
+                'uuidShort',
+                'uuid',
+                'name',
+                'cpu',
+                'memory',
+            ]);
+
+            $data[] = array_merge($cleaned->toArray(), [
+                'allocation' => [
+                    'ip' => $server->allocation->ip,
+                    'port' => $server->allocation->port,
+                ],
+                'node_name' => $server->node->name,
+            ]);
+        }
+
+        return response()->json($data);
+    }
+}

resources/assets/scripts/app.js

@@ -10,7 +10,8 @@ import { flash } from './mixins/flash';
 
 // Base Vuejs Templates
 import Login from './components/auth/Login';
-import Base from './components/base/Base';
+import Dashboard from './components/dashboard/Dashboard';
+import Account from './components/dashboard/Account';
 import ResetPassword from './components/auth/ResetPassword';
 
 window.events = new Vue;
@@ -45,10 +46,10 @@ const router = new VueRouter({
                 return { token: route.params.token, email: route.query.email || '' };
             }
         },
-        { name : 'index', path: '/', component: Base },
+        { name : 'index', path: '/', component: Dashboard },
-        { name : 'account', path: '/account', component: Base },
+        { name : 'account', path: '/account', component: Account },
-        { name : 'account-api', path: '/account/api', component: Base },
+        { name : 'account-api', path: '/account/api', component: Account },
-        { name : 'account-security', path: '/account/security', component: Base },
+        { name : 'account-security', path: '/account/security', component: Account },
     ]
 });
 

resources/assets/scripts/components/dashboard/Account.vue

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

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <div class="server-search animate fadein">
+            <input type="text" placeholder="search for servers..."
+                   @input="onChange"
+                   v-model="search"
+                   ref="search"
+            />
+        </div>
+        <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
+            <div class="server-box" :key="index" v-for="(server, index) in servers">
+                <div class="content">
+                    <div class="float-right">
+                        <div class="indicator online"></div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="text-black font-bold text-xl">{{ server.name }}</div>
+                    </div>
+                    <div class="mb-0 flex">
+                        <div class="usage">
+                            <div class="indicator-title">CPU</div>
+                        </div>
+                        <div class="usage">
+                            <div class="indicator-title">Memory</div>
+                        </div>
+                    </div>
+                    <div class="mb-4 flex text-center">
+                        <div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
+                            <span class="font-bold text-xl">---</span>
+                            <span class="font-light text-sm">%</span>
+                        </div>
+                        <div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
+                            <span class="font-bold text-xl">---</span>
+                            <span class="font-light text-sm">Mb</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="text-sm">
+                            <p class="text-grey">{{ server.node_name }}</p>
+                            <p class="text-grey-dark">{{ server.allocation.ip }}:{{ server.allocation.port }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </transition-group>
+    </div>
+</template>
+
+<script>
+    import _ from 'lodash';
+
+    export default {
+        name: 'dashboard',
+        data: function () {
+            return {
+                search: '',
+                servers: [],
+            }
+        },
+
+        mounted: function () {
+            this.loadServers();
+        },
+
+        methods: {
+            /**
+             * Load the user's servers and render them onto the dashboard.
+             *
+             * @param {string} query
+             */
+            loadServers: function (query = '') {
+                const self = this;
+
+                window.axios.get(this.route('dashboard.servers'), {
+                    params: { query },
+                })
+                    .then(function (response) {
+                        self.servers = response.data;
+                    })
+                    .catch(function (error) {
+                        console.error(error);
+                    });
+            },
+
+            /**
+             * Handle a search for servers but only call the search function every 500ms
+             * at the fastest.
+             */
+            onChange: _.debounce(function () {
+                this.loadServers(this.$data.search);
+            }, 500),
+        }
+    };
+</script>

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -33,47 +33,7 @@
 @endsection
 
 @section('container')
-    <div class="server-search animate fadein">
+    <router-view></router-view>
-        <input type="text" placeholder="search for servers..."/>
-    </div>
-    <div class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start">
-        @foreach($servers as $server)
-            <div class="server-box">
-                <div class="content">
-                    <div class="float-right">
-                        <div class="indicator {{ ['online', 'offline'][rand(0, 1)] }}"></div>
-                    </div>
-                    <div class="mb-4">
-                        <div class="text-black font-bold text-xl">{{ $server->name }}</div>
-                    </div>
-                    <div class="mb-0 flex">
-                        <div class="usage">
-                            <div class="indicator-title">CPU</div>
-                        </div>
-                        <div class="usage">
-                            <div class="indicator-title">Memory</div>
-                        </div>
-                    </div>
-                    <div class="mb-4 flex text-center">
-                        <div class="inline-block border border-grey-lighter border-l-0 p-4 flex-1">
-                            <span class="font-bold text-xl">{{ rand(1, 200) }}</span>
-                            <span class="font-light text-sm">%</span>
-                        </div>
-                        <div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
-                            <span class="font-bold text-xl">{{ rand(128, 2048) }}</span>
-                            <span class="font-light text-sm">Mb</span>
-                        </div>
-                    </div>
-                    <div class="flex items-center">
-                        <div class="text-sm">
-                            <p class="text-grey">{{ $server->node->name }}</p>
-                            <p class="text-grey-dark">{{ $server->allocation->ip }}:{{ $server->allocation->port }}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        @endforeach
-    </div>
     <div class="w-full m-auto mt-0">
         <p class="text-right text-grey-dark text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}

routes/base.php

@@ -7,6 +7,7 @@
  * https://opensource.org/licenses/MIT
  */
 Route::get('/', 'IndexController@index')->name('index');
+Route::get('/dashboard/servers', 'DashboardController@servers')->name('dashboard.servers');
 Route::get('/status/{server}', 'IndexController@status')->name('index.status');
 
 /*