Add very basic server search and dynamic rendering functionality
This commit is contained in:
parent
f337a89320
commit
6f2fcabf22
7 changed files with 169 additions and 46 deletions
|
@ -33,47 +33,7 @@
|
|||
@endsection
|
||||
|
||||
@section('container')
|
||||
<div class="server-search animate fadein">
|
||||
<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>
|
||||
<router-view></router-view>
|
||||
<div class="w-full m-auto mt-0">
|
||||
<p class="text-right text-grey-dark text-xs">
|
||||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||
|
|
Reference in a new issue