feat: 💄 restyled server info card at servers-view
This commit is contained in:
parent
bd6cec92ea
commit
eeaae72f87
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -18,3 +18,4 @@ yarn-error.log
|
||||||
.gitignore
|
.gitignore
|
||||||
.env.dev
|
.env.dev
|
||||||
.env.testing
|
.env.testing
|
||||||
|
.vscode*
|
||||||
|
|
29
public/css/app.css
vendored
29
public/css/app.css
vendored
File diff suppressed because one or more lines are too long
569
public/js/app.js
vendored
569
public/js/app.js
vendored
File diff suppressed because one or more lines are too long
9
resources/sass/app.scss
vendored
9
resources/sass/app.scss
vendored
|
@ -1,8 +1,7 @@
|
||||||
// Fonts
|
// Fonts
|
||||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback');
|
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback");
|
||||||
|
|
||||||
// Bootstrap
|
// Bootstrap
|
||||||
@import '../css/stylesheet.css';
|
@import "../css/stylesheet.css";
|
||||||
@import '../css/adminlte.min.css';
|
@import "../css/adminlte.min.css";
|
||||||
@import '../css/slim.min.css';
|
@import "../css/slim.min.css";
|
||||||
|
|
||||||
|
|
|
@ -5,13 +5,14 @@
|
||||||
<section class="content-header">
|
<section class="content-header">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="col-sm-6">
|
<div class="col-md-6">
|
||||||
<h1>Servers</h1>
|
<h1>Servers</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<ol class="breadcrumb float-sm-right">
|
<ol class="breadcrumb float-sm-right">
|
||||||
<li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
|
||||||
<li class="breadcrumb-item"><a class="text-muted" href="{{route('servers.index')}}">Servers</a>
|
<li class="breadcrumb-item"><a class="text-muted"
|
||||||
|
href="{{ route('servers.index') }}">Servers</a>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,84 +27,123 @@
|
||||||
|
|
||||||
<!-- CUSTOM CONTENT -->
|
<!-- CUSTOM CONTENT -->
|
||||||
<div class="d-flex justify-content-between mb-3">
|
<div class="d-flex justify-content-between mb-3">
|
||||||
<p>Use your servers on our <a href="{{env('PTERODACTYL_URL' , 'http://localhost')}}">pterodactyl panel</a></p>
|
<p>Use your servers on our <a href="{{ env('PTERODACTYL_URL', 'http://localhost') }}">pterodactyl
|
||||||
|
panel</a>
|
||||||
|
</p>
|
||||||
<a @if (Auth::user()->Servers->count() >= Auth::user()->server_limit) disabled="disabled" title="Server limit reached!" @endif href="{{ route('servers.create') }}" class="btn @if (Auth::user()->Servers->count() >= Auth::user()->server_limit) disabled @endif btn-primary"><i class="fa fa-plus mr-2"></i>Create
|
<a @if (Auth::user()->Servers->count() >= Auth::user()->server_limit) disabled="disabled" title="Server limit reached!" @endif href="{{ route('servers.create') }}" class="btn @if (Auth::user()->Servers->count() >= Auth::user()->server_limit) disabled @endif btn-primary"><i class="fa fa-plus mr-2"></i>Create
|
||||||
Server</a>
|
Server</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@foreach ($servers as $server)
|
@foreach ($servers as $server)
|
||||||
<div class="col-lg-4">
|
|
||||||
<div class="card">
|
<div class="col-xl-3 col-lg-5 col-md-6 col-sm-6 col-xs-12 card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<h5 class="card-title"><i class="fas {{$server->isSuspended() ? 'text-danger' : 'text-success'}} fa-circle mr-2"></i>{{$server->name}}</h5>
|
<h5 class="card-title mt-1"><i
|
||||||
<div class="card-tools">
|
class="fas {{ $server->isSuspended() ? 'text-danger' : 'text-success' }} fa-circle mr-2"></i>{{ $server->name }}
|
||||||
|
</h5>
|
||||||
|
<div class="card-tools mt-1">
|
||||||
<div class="dropdown no-arrow">
|
<div class="dropdown no-arrow">
|
||||||
<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
|
||||||
|
aria-haspopup="true" aria-expanded="false">
|
||||||
<i class="fas fa-ellipsis-v fa-sm fa-fw text-white-50"></i>
|
<i class="fas fa-ellipsis-v fa-sm fa-fw text-white-50"></i>
|
||||||
</a>
|
</a>
|
||||||
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
|
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
|
||||||
<a href="{{env('PTERODACTYL_URL' , 'http://localhost')}}/server/{{$server->identifier}}" target="__blank" class="dropdown-item text-info"><i title="manage" class="fas fa-tasks mr-2"></i><span>Manage</span></a>
|
aria-labelledby="dropdownMenuLink">
|
||||||
|
<a href="{{ env('PTERODACTYL_URL', 'http://localhost') }}/server/{{ $server->identifier }}"
|
||||||
|
target="__blank" class="dropdown-item text-info"><i title="manage"
|
||||||
|
class="fas fa-tasks mr-2"></i><span>Manage</span></a>
|
||||||
@if (!empty(env('PHPMYADMIN_URL')))
|
@if (!empty(env('PHPMYADMIN_URL')))
|
||||||
<a href="{{env('PHPMYADMIN_URL' , 'http://localhost')}}" class="dropdown-item text-info" target="__blank"><i title="manage" class="fas fa-database mr-2"></i><span>Database</span></a>
|
<a href="{{ env('PHPMYADMIN_URL', 'http://localhost') }}"
|
||||||
|
class="dropdown-item text-info" target="__blank"><i title="manage"
|
||||||
|
class="fas fa-database mr-2"></i><span>Database</span></a>
|
||||||
@endif
|
@endif
|
||||||
<form method="post" onsubmit="return submitResult();" action="{{route('servers.destroy' , $server->id)}}">
|
<form method="post" onsubmit="return submitResult();"
|
||||||
|
action="{{ route('servers.destroy', $server->id) }}">
|
||||||
@csrf
|
@csrf
|
||||||
@method('DELETE')
|
@method('DELETE')
|
||||||
<button class="dropdown-item text-danger"><i title="delete" class="fas fa-trash mr-2"></i><span>Delete server</span></button>
|
<button class="dropdown-item text-danger"><i title="delete"
|
||||||
|
class="fas fa-trash mr-2"></i><span>Delete
|
||||||
|
server</span></button>
|
||||||
</form>
|
</form>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<span class="dropdown-item"><i title="Created at" class="fas fa-sync-alt mr-2"></i><span>{{$server->created_at->isoFormat('LL')}}</span></span>
|
<span class="dropdown-item"><i title="Created at"
|
||||||
|
class="fas fa-sync-alt mr-2"></i><span>{{ $server->created_at->isoFormat('LL') }}</span></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<span class="text-muted">Server details</span>
|
<span class="text-muted">Server details - Resource: {{ $server->product->name }}</span>
|
||||||
<table class="table">
|
<div class="container mt-3">
|
||||||
<tr>
|
<div class="row mb-3">
|
||||||
<td>CPU</td>
|
<div class="col my-auto">Status:</div>
|
||||||
<td>{{$server->product->cpu}} %</td>
|
<div class="col-8 my-auto"><i
|
||||||
</tr>
|
class="fas {{ $server->isSuspended() ? 'text-danger' : 'text-success' }} fa-circle mr-2"></i>Running
|
||||||
<tr>
|
(8d 9h 39m)</div>
|
||||||
<td>RAM</td>
|
</div>
|
||||||
<td>{{$server->product->memory}} MB</td>
|
<div class="row mb-2">
|
||||||
</tr>
|
<div class="col my-auto">
|
||||||
<tr>
|
Memory:
|
||||||
<td>Disk</td>
|
</div>
|
||||||
<td>{{$server->product->disk}} MB</td>
|
<div class="col">
|
||||||
</tr>
|
<div class="text-muted">Available</div>
|
||||||
<tr>
|
<div>{{ $server->product->memory }} MB</div>
|
||||||
<td>Databases</td>
|
</div>
|
||||||
<td>{{$server->product->databases}} MySQL</td>
|
<div class="col">
|
||||||
</tr>
|
<div class="text-muted"> Usage</div>
|
||||||
<tr>
|
<div>{{ $server->product->memory }} %</div>
|
||||||
<td>Backups</td>
|
</div>
|
||||||
<td>{{$server->product->backups}}</td>
|
</div>
|
||||||
</tr>
|
<div class="row mb-2">
|
||||||
<tr>
|
<div class="col my-auto">
|
||||||
<td>Price per Hour</td>
|
Storage:
|
||||||
<td>{{number_format($server->product->getHourlyPrice(),2,".", "")}} {{CREDITS_DISPLAY_NAME}}</td>
|
</div>
|
||||||
</tr>
|
<div class="col">
|
||||||
<tr>
|
<div class="text-muted">Available</div>
|
||||||
<td>Price per Month</td>
|
<div>{{ $server->product->disk }} MB</div>
|
||||||
<td>{{$server->product->getHourlyPrice()*24*30}} {{CREDITS_DISPLAY_NAME}}</td>
|
</div>
|
||||||
</tr>
|
<div class="col">
|
||||||
</table>
|
<div class="text-muted">Usage</div>
|
||||||
|
<div>{{ $server->product->disk }} %</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mb-2">
|
||||||
|
<div class="col my-auto">
|
||||||
|
Price:
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="text-muted">per Hour</div>
|
||||||
|
<div>
|
||||||
|
{{ number_format($server->product->getHourlyPrice(), 2, '.', '') }}
|
||||||
|
{{ CREDITS_DISPLAY_NAME }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="text-muted">per Month
|
||||||
|
</div>
|
||||||
|
<div> {{ $server->product->getHourlyPrice() * 24 * 30 }}
|
||||||
|
{{ CREDITS_DISPLAY_NAME }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="card-footer d-flex justify-content-between">
|
<div class="card-footer d-flex justify-content-between">
|
||||||
<a href="{{env('PTERODACTYL_URL' , 'http://localhost')}}/server/{{$server->identifier}}" target="__blank" class="btn btn-info mx-3 w-100"><i class="fas fa-tasks mr-2"></i>Manage</a>
|
<a href="{{ env('PTERODACTYL_URL', 'http://localhost') }}/server/{{ $server->identifier }}"
|
||||||
|
target="__blank" class="btn btn-info mx-3 w-100"><i class="fas fa-tasks mr-2"></i>Manage</a>
|
||||||
@if (!empty(env('PHPMYADMIN_URL')))
|
@if (!empty(env('PHPMYADMIN_URL')))
|
||||||
<a href="{{env('PHPMYADMIN_URL' , 'http://localhost')}}" target="__blank" class="btn btn-info mx-3 w-100" ><i class="fas fa-database mr-2"></i>Database</a>
|
<a href="{{ env('PHPMYADMIN_URL', 'http://localhost') }}" target="__blank"
|
||||||
|
class="btn btn-info mx-3 w-100"><i class="fas fa-database mr-2"></i>Database</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
<!-- END CUSTOM CONTENT -->
|
<!-- END CUSTOM CONTENT -->
|
||||||
|
|
Loading…
Reference in a new issue