Get initial mockup of new server list up
This commit is contained in:
Dane Everitt
parent
64175ce35a
commit
9d8830a2d7
12 changed files with 201 additions and 64 deletions
|
|
@ -53,13 +53,13 @@ class IndexController extends Controller
|
|||
* @param \Illuminate\Http\Request $request
|
||||
* @return \Illuminate\View\View
|
||||
*/
|
||||
public function getIndex(Request $request)
|
||||
public function index(Request $request)
|
||||
{
|
||||
$servers = $this->repository->setSearchTerm($request->input('query'))->filterUserAccessServers(
|
||||
$request->user(), User::FILTER_LEVEL_ALL
|
||||
);
|
||||
|
||||
return view('base.index', ['servers' => $servers]);
|
||||
return view('templates/base.core', ['servers' => $servers]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { flash } from './mixins/flash';
|
|||
|
||||
// Base Vuejs Templates
|
||||
import Login from './components/auth/Login';
|
||||
import Base from './components/base/Base';
|
||||
import ResetPassword from './components/auth/ResetPassword';
|
||||
|
||||
window.events = new Vue;
|
||||
|
|
@ -44,7 +45,10 @@ const router = new VueRouter({
|
|||
return { token: route.params.token, email: route.query.email || '' };
|
||||
}
|
||||
},
|
||||
{ path: '*', redirect: '/auth/login' }
|
||||
{ name : 'index', path: '/', component: Base },
|
||||
{ name : 'account', path: '/account', component: Base },
|
||||
{ name : 'account-api', path: '/account/api', component: Base },
|
||||
{ name : 'account-security', path: '/account/security', component: Base },
|
||||
]
|
||||
});
|
||||
|
||||
|
|
|
|||
0
resources/assets/scripts/components/base/Base.vue
Normal file
0
resources/assets/scripts/components/base/Base.vue
Normal file
|
|
@ -1,28 +0,0 @@
|
|||
module.exports = `
|
||||
<div class="pb-2" v-if="show">
|
||||
<transition v-if="variant === 'success'">
|
||||
<div class="p-2 bg-green-dark border-green-darker border items-center text-green-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
|
||||
<span class="flex rounded-full bg-green uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Success</span>
|
||||
<span class="mr-2 text-left flex-auto">{{ message }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<transition v-if="variant === 'danger'">
|
||||
<div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
|
||||
<span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
|
||||
<span class="mr-2 text-left flex-auto">{{ message }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<transition v-if="variant === 'info'">
|
||||
<div class="p-2 bg-blue-dark border-blue-darker border items-center text-blue-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
|
||||
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Info</span>
|
||||
<span class="mr-2 text-left flex-auto">{{ message }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<transition v-if="variant === 'warning'">
|
||||
<div class="p-2 bg-yellow-dark border-yellow-darker border items-center text-yellow-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
|
||||
<span class="flex rounded-full bg-yellow uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Warning</span>
|
||||
<span class="mr-2 text-left flex-auto">{{ message }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -16,3 +16,21 @@
|
|||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes onlineblink {
|
||||
0% {
|
||||
@apply .bg-green;
|
||||
}
|
||||
100% {
|
||||
@apply .bg-green-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes offlineblink {
|
||||
0% {
|
||||
@apply .bg-red;
|
||||
}
|
||||
100% {
|
||||
@apply .bg-red-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
28
resources/assets/styles/components/miscellaneous.css
Normal file
28
resources/assets/styles/components/miscellaneous.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
code {
|
||||
@apply .font-mono .px-2 .py-1;
|
||||
background-color: #eef1f6;
|
||||
color: #596981;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Indicators for server online status.
|
||||
*/
|
||||
.indicator {
|
||||
@apply .bg-grey-darker .border .border-grey;
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&.online {
|
||||
@apply .bg-green-dark .border-green;
|
||||
animation: onlineblink 2s infinite alternate;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
@apply .bg-green-dark .border-red;
|
||||
animation: offlineblink 2s infinite alternate;
|
||||
}
|
||||
}
|
||||
28
resources/assets/styles/components/navigation.css
Normal file
28
resources/assets/styles/components/navigation.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.nav {
|
||||
@apply .bg-blue;
|
||||
height: 48px;
|
||||
|
||||
& > .logo {
|
||||
@apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
|
||||
}
|
||||
|
||||
& > .menu {
|
||||
@apply .float-right .mx-8 .inline-block;
|
||||
|
||||
& > ul {
|
||||
@apply .list-reset;
|
||||
& > li {
|
||||
@apply .inline-block;
|
||||
& > a {
|
||||
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm;
|
||||
padding: 15px;
|
||||
|
||||
&:hover {
|
||||
@apply .bg-blue-dark;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,8 @@
|
|||
@import "components/authentication.css";
|
||||
@import "components/buttons.css";
|
||||
@import "components/forms.css";
|
||||
@import "components/miscellaneous.css";
|
||||
@import "components/navigation.css";
|
||||
@import "components/notifications.css";
|
||||
@import "components/spinners.css";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>{{ config('app.name', 'Pterodactyl') }}</title>
|
||||
@extends('templates/wrapper', [
|
||||
'css' => ['body' => 'bg-grey-darkest']
|
||||
])
|
||||
|
||||
@section('meta')
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
@show
|
||||
|
||||
@section('assets')
|
||||
{!! $asset->css('assets/css/bundle.css') !!}
|
||||
@show
|
||||
|
||||
@include('layouts.scripts')
|
||||
</head>
|
||||
<body class="bg-grey-darkest">
|
||||
<div class="container" id="pterodactyl">
|
||||
@section('container')
|
||||
<div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
|
||||
<div class="text-center">
|
||||
<img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
|
||||
|
|
@ -26,9 +12,4 @@
|
|||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@section('scripts')
|
||||
{!! $asset->js('assets/scripts/bundle.js') !!}
|
||||
@show
|
||||
</body>
|
||||
</html>
|
||||
@endsection
|
||||
|
|
|
|||
73
resources/themes/pterodactyl/templates/base/core.blade.php
Normal file
73
resources/themes/pterodactyl/templates/base/core.blade.php
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
@extends('templates/wrapper')
|
||||
|
||||
@section('above-container')
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
Pterodactyl
|
||||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Your Servers</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Admin</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>dane</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('auth.logout') }}">
|
||||
<span>L</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('container')
|
||||
<div class="w-full m-auto mt-8 animate fadein sm:block md:flex">
|
||||
@foreach($servers as $server)
|
||||
<div class="w-full mr-4 flex flex-col">
|
||||
<div class="border border-grey-light bg-white rounded p-4 justify-between leading-normal">
|
||||
<div class="float-right">
|
||||
<div class="indicator {{ ['online', 'offline'][rand(0, 1)] }}"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
{{--@if ($server->owner_id !== Auth::user()->id)--}}
|
||||
{{--<p class="text-sm text-grey-dark flex items-center">--}}
|
||||
{{--<svg class="fill-current text-grey w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">--}}
|
||||
{{--<path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" ></path>--}}
|
||||
{{--</svg>--}}
|
||||
{{--Restricted Access--}}
|
||||
{{--</p>--}}
|
||||
{{--@endif--}}
|
||||
<div class="text-black font-bold text-xl">{{ $server->name }}</div>
|
||||
{{--<div class="flex text-center">--}}
|
||||
{{--<div class="flex-1">68%</div>--}}
|
||||
{{--<div class="flex-1">124 / 1024 Mb</div>--}}
|
||||
{{--</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-4">
|
||||
<p class="text-right text-grey-dark text-xs">
|
||||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||
</p>
|
||||
</div>
|
||||
@endsection
|
||||
28
resources/themes/pterodactyl/templates/wrapper.blade.php
Normal file
28
resources/themes/pterodactyl/templates/wrapper.blade.php
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>{{ config('app.name', 'Pterodactyl') }}</title>
|
||||
|
||||
@section('meta')
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
@show
|
||||
|
||||
@section('assets')
|
||||
{!! $asset->css('assets/css/bundle.css') !!}
|
||||
@show
|
||||
|
||||
@include('layouts.scripts')
|
||||
</head>
|
||||
<body class="{{ $css['body'] ?? 'bg-grey-lighter' }}">
|
||||
@yield('above-container')
|
||||
<div class="container" id="pterodactyl">
|
||||
@yield('container')
|
||||
</div>
|
||||
@yield('below-container')
|
||||
@section('scripts')
|
||||
{!! $asset->js('assets/scripts/bundle.js') !!}
|
||||
@show
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
* This software is licensed under the terms of the MIT license.
|
||||
* https://opensource.org/licenses/MIT
|
||||
*/
|
||||
Route::get('/', 'IndexController@getIndex')->name('index');
|
||||
Route::get('/', 'IndexController@index')->name('index');
|
||||
Route::get('/status/{server}', 'IndexController@status')->name('index.status');
|
||||
|
||||
/*
|
||||
|
|
@ -58,3 +58,6 @@ Route::group(['prefix' => 'account/security'], function () {
|
|||
|
||||
Route::delete('/totp', 'SecurityController@disableTotp')->name('account.security.totp.disable');
|
||||
});
|
||||
|
||||
// Catch any other combinations of routes and pass them off to the Vuejs component.
|
||||
Route::fallback('IndexController@index');
|
||||
|
|
|
|||
Loading…
Reference in a new issue