feat: 💄 Added basic resource cards
This commit is contained in:
IceToast
parent
bd6cec92ea
commit
679e4d4670
|
|
@ -32,7 +32,8 @@
|
|||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title"><i class="fas fa-cogs mr-2"></i>{{__('Server configuration')}}</div>
|
||||
<div class="card-title"><i class="fas fa-cogs mr-2"></i>{{ __('Server configuration') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($productCount === 0 || $nodeCount === 0 || count($nests) === 0 || count($eggs) === 0)
|
||||
|
|
@ -68,8 +69,8 @@
|
|||
<div x-show="loading" class="overlay dark">
|
||||
<i class="fas fa-2x fa-sync-alt"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-body">
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul class="list-group pl-3">
|
||||
|
|
@ -84,7 +85,6 @@
|
|||
<label for="name">{{ __('Name') }}</label>
|
||||
<input x-model="name" id="name" name="name" type="text" required="required"
|
||||
class="form-control @error('name') is-invalid @enderror">
|
||||
|
||||
@error('name')
|
||||
<div class="invalid-feedback">
|
||||
{{ $message }}
|
||||
|
|
@ -96,14 +96,11 @@
|
|||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="nest">{{ __('Software / Games') }}</label>
|
||||
<select class="custom-select"
|
||||
required
|
||||
name="nest"
|
||||
id="nest"
|
||||
x-model="selectedNest"
|
||||
<select class="custom-select" required name="nest" id="nest" x-model="selectedNest"
|
||||
@change="setEggs();">
|
||||
<option selected disabled hidden
|
||||
value="null">{{count($nests) > 0 ? __('Please select software ...') : __('---')}}</option>
|
||||
<option selected disabled hidden value="null">
|
||||
{{ count($nests) > 0 ? __('Please select software ...') : __('---') }}
|
||||
</option>
|
||||
@foreach ($nests as $nest)
|
||||
<option value="{{ $nest->id }}">{{ $nest->name }}</option>
|
||||
@endforeach
|
||||
|
|
@ -111,21 +108,15 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="egg">{{ __('Specification ') }}</label>
|
||||
<div>
|
||||
<select id="egg"
|
||||
required
|
||||
name="egg"
|
||||
:disabled="eggs.length == 0"
|
||||
x-model="selectedEgg"
|
||||
@change="fetchLocations();"
|
||||
required="required"
|
||||
<select id="egg" required name="egg" :disabled="eggs.length == 0"
|
||||
x-model="selectedEgg" @change="fetchLocations();" required="required"
|
||||
class="custom-select">
|
||||
<option x-text="getEggInputText()"
|
||||
selected disabled hidden value="null"></option>
|
||||
<option x-text="getEggInputText()" selected disabled hidden value="null">
|
||||
</option>
|
||||
<template x-for="egg in eggs" :key="egg.id">
|
||||
<option x-text="egg.name" :value="egg.id"></option>
|
||||
</template>
|
||||
|
|
@ -137,24 +128,16 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label for="node">{{ __('Node') }}</label>
|
||||
<select name="node"
|
||||
required
|
||||
id="node"
|
||||
x-model="selectedNode"
|
||||
:disabled="!fetchedLocations"
|
||||
@change="fetchProducts();"
|
||||
class="custom-select">
|
||||
<option
|
||||
x-text="getNodeInputText()"
|
||||
disabled selected hidden value="null">
|
||||
<select name="node" required id="node" x-model="selectedNode" :disabled="!fetchedLocations"
|
||||
@change="fetchProducts();" class="custom-select">
|
||||
<option x-text="getNodeInputText()" disabled selected hidden value="null">
|
||||
</option>
|
||||
|
||||
<template x-for="location in locations" :key="location.id">
|
||||
<optgroup :label="location.name">
|
||||
|
||||
<template x-for="node in location.nodes" :key="node.id">
|
||||
<option x-text="node.name"
|
||||
:value="node.id">
|
||||
<option x-text="node.name" :value="node.id">
|
||||
|
||||
</option>
|
||||
</template>
|
||||
|
|
@ -167,26 +150,50 @@
|
|||
|
||||
<div class="form-group">
|
||||
<label for="product">{{ __('Resources') }}</label>
|
||||
<select name="product"
|
||||
required
|
||||
id="product"
|
||||
:disabled="!fetchedProducts"
|
||||
x-model="selectedProduct"
|
||||
@change="updateSelectedObjects()"
|
||||
class="custom-select">
|
||||
<option
|
||||
x-text="getProductInputText()"
|
||||
disabled selected hidden value="null"></option>
|
||||
<select name="product" required id="product" :disabled="!fetchedProducts"
|
||||
x-model="selectedProduct" @change="updateSelectedObjects()" class="custom-select">
|
||||
<option x-text="getProductInputText()" disabled selected hidden value="null"></option>
|
||||
<template x-for="product in products" :key="product.id">
|
||||
<option :disabled="product.minimum_credits > user.credits"
|
||||
x-text="getProductOptionText(product)"
|
||||
:value="product.id">
|
||||
x-text="getProductOptionText(product)" :value="product.id">
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="product">{{ __('Resources') }}</label>
|
||||
<div class="container">
|
||||
<div class="row justify-content-around">
|
||||
<template x-for="product in products" :key="product.id">
|
||||
<div class="card col-4">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title" x-text="product.name"></h4>
|
||||
<div class="mt-6">
|
||||
<div>
|
||||
<p class="card-text text-muted">Resource Data:</p>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span>{{ __('CPU') }}</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p x-text="product.cpu + ' %'""></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class=" mt-4">
|
||||
<span class="card-text text-muted">Description</span>
|
||||
<p class="card-text" x-text="product.description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -198,7 +205,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<ul class="list-group mb-3">
|
||||
<li x-show="selectedNestObject.name"
|
||||
class="list-group-item d-flex justify-content-between lh-condensed">
|
||||
|
|
@ -215,8 +221,7 @@
|
|||
class="text-muted"></small>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item d-flex justify-content-between lh-condensed">
|
||||
<li class="list-group-item d-flex justify-content-between lh-condensed">
|
||||
<div>
|
||||
<h6 class="my-0">{{ __('Node') }}</h6>
|
||||
<small x-text="selectedNodeObject?.name ?? '{{ __('No selection') }}'"
|
||||
|
|
@ -258,8 +263,10 @@
|
|||
x-text="selectedProductObject.backups"></small>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<small class="text-muted d-inline-block">{{__('Allocations')}} ({{__('ports')}})</small>
|
||||
<small class="text-muted d-inline-block" x-text="selectedProductObject.allocations"></small>
|
||||
<small class="text-muted d-inline-block">{{ __('Allocations') }}
|
||||
({{ __('ports') }})</small>
|
||||
<small class="text-muted d-inline-block"
|
||||
x-text="selectedProductObject.allocations"></small>
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
|
|
@ -388,7 +395,8 @@
|
|||
this.products = [];
|
||||
this.selectedProduct = 'null';
|
||||
|
||||
let response = await axios.get(`{{route('products.products.node')}}/${this.selectedEgg}/${this.selectedNode}`)
|
||||
let response = await axios.get(
|
||||
`{{ route('products.products.node') }}/${this.selectedEgg}/${this.selectedNode}`)
|
||||
.catch(console.error)
|
||||
|
||||
this.fetchedProducts = true;
|
||||
|
|
@ -414,7 +422,8 @@
|
|||
this.selectedNodeObject = {};
|
||||
this.locations.forEach(location => {
|
||||
if (!this.selectedNodeObject?.id) {
|
||||
this.selectedNodeObject = location.nodes.find(node => node.id == this.selectedNode) ?? {};
|
||||
this.selectedNodeObject = location.nodes.find(node => node.id == this.selectedNode) ??
|
||||
{};
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue