You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
8.1 KiB
139 lines
8.1 KiB
@extends('layouts.app') |
|
|
|
@section('title', 'Database Connections — ' . config('app.name')) |
|
|
|
@section('content') |
|
<div class="max-w-[1200px] mx-auto px-4 py-6 sm:py-8"> |
|
<div class="mt-4 sm:mt-6 mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4"> |
|
<div> |
|
<h1 class="text-2xl sm:text-3xl font-bold text-white">Database Connections</h1> |
|
<p class="text-slate-400 mt-1 text-sm">Tambah koneksi SQL Server, PostgreSQL, MySQL, atau MariaDB.</p> |
|
</div> |
|
<a href="{{ route('databases.index') }}" class="text-sm text-cyan-400 hover:text-cyan-300">→ Database List</a> |
|
</div> |
|
|
|
@include('partials.flash') |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start"> |
|
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-6"> |
|
<h2 class="text-lg font-semibold text-white mb-4">Add Connection</h2> |
|
<form method="POST" action="{{ route('database-connections.store') }}" id="conn-form" class="space-y-4" data-loading-message="Menyimpan koneksi database..."> |
|
@csrf |
|
<div> |
|
<label class="block text-sm text-slate-300 mb-1">Name</label> |
|
<input name="name" required maxlength="100" value="{{ old('name') }}" placeholder="Production SQL Server" |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-slate-300 mb-1">Driver</label> |
|
<select name="driver" id="driver" required |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
@foreach ($drivers as $key => $label) |
|
<option value="{{ $key }}" @selected(old('driver') === $key)>{{ $label }}</option> |
|
@endforeach |
|
</select> |
|
</div> |
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> |
|
<div class="sm:col-span-2"> |
|
<label class="block text-sm text-slate-300 mb-1">Host / Address</label> |
|
<input name="host" required value="{{ old('host') }}" placeholder="10.100.1.25" |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-slate-300 mb-1">Port</label> |
|
<input type="number" name="port" id="port" required value="{{ old('port', 1433) }}" |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
</div> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-slate-300 mb-1">Default Database</label> |
|
<input name="database" value="{{ old('database') }}" placeholder="master / postgres / mysql" |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-slate-300 mb-1">Username (admin)</label> |
|
<input name="username" required value="{{ old('username') }}" |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
</div> |
|
<div> |
|
<label class="block text-sm text-slate-300 mb-1">Password</label> |
|
<input type="password" name="password" required autocomplete="new-password" |
|
class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white"> |
|
</div> |
|
<div class="flex flex-wrap gap-2"> |
|
<button type="submit" class="rounded-lg bg-cyan-600 hover:bg-cyan-500 px-5 py-2 text-sm font-medium text-white"> |
|
Add Connection |
|
</button> |
|
<button type="submit" formaction="{{ route('database-connections.test') }}" formmethod="POST" |
|
data-loading-message="Menguji koneksi database..." |
|
class="ui-btn rounded-lg border border-slate-700 px-5 py-2 text-sm text-slate-300 hover:bg-slate-800"> |
|
Test Connection |
|
</button> |
|
</div> |
|
</form> |
|
</div> |
|
|
|
<div class="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden flex flex-col list-panel"> |
|
<div class="list-panel__toolbar p-4 border-b border-slate-800"> |
|
<h2 class="font-semibold text-white">Saved Connections ({{ count($connections) }})</h2> |
|
</div> |
|
<div class="list-panel__scroll"> |
|
<table class="min-w-full text-sm list-table list-table--row-actions"> |
|
<thead class="text-slate-300"> |
|
<tr> |
|
<th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Name</th> |
|
<th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Type</th> |
|
<th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Host</th> |
|
<th class="list-col-actions px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Action</th> |
|
@include('partials.list-table-row-hint', ['tag' => 'th']) |
|
</tr> |
|
</thead> |
|
<tbody class="divide-y divide-slate-800"> |
|
@forelse ($connections as $conn) |
|
<tr data-list-row-title="{{ $conn->name }}" data-list-row-subtitle="{{ $conn->driverLabel() }} · {{ $conn->host }}:{{ $conn->port }}"> |
|
<td class="px-4 py-3 text-white">{{ $conn->name }}</td> |
|
<td class="px-4 py-3 text-slate-300">{{ $conn->driverLabel() }}</td> |
|
<td class="px-4 py-3 text-slate-400">{{ $conn->host }}:{{ $conn->port }}</td> |
|
<td class="list-col-actions px-4 py-3"> |
|
<form method="POST" action="{{ route('database-connections.destroy', $conn) }}" |
|
onsubmit="return confirm('Delete connection [{{ $conn->name }}]?');"> |
|
@csrf |
|
@method('DELETE') |
|
<button class="rounded bg-red-800 hover:bg-red-700 text-white text-xs px-2 py-1">Delete</button> |
|
</form> |
|
</td> |
|
@include('partials.list-table-row-hint', ['tag' => 'td']) |
|
</tr> |
|
@empty |
|
<tr><td colspan="5" class="px-4 py-8 text-center text-slate-400">No connections yet.</td></tr> |
|
@endforelse |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<aside class="mt-6 bg-slate-900 border border-slate-800 rounded-2xl p-5 notes-panel"> |
|
<h2 class="text-lg font-semibold text-white mb-4">Catatan</h2> |
|
<dl class="space-y-3 text-sm text-slate-400"> |
|
<div> |
|
<dt class="font-medium text-cyan-400 mb-1">Tipe database</dt> |
|
<dd>SQL Server, PostgreSQL, MySQL, MariaDB — gunakan akun dengan role administrator.</dd> |
|
</div> |
|
<div> |
|
<dt class="font-medium text-amber-400 mb-1">Make offline</dt> |
|
<dd>SQL Server: SET OFFLINE. PostgreSQL: connection limit 0. MySQL/MariaDB: READ ONLY.</dd> |
|
</div> |
|
</dl> |
|
</aside> |
|
</div> |
|
|
|
@push('frame-scripts') |
|
<script> |
|
document.getElementById('driver')?.addEventListener('change', function () { |
|
var ports = { sqlsrv: 1433, pgsql: 5432, mysql: 3306, mariadb: 3306 }; |
|
document.getElementById('port').value = ports[this.value] || 1433; |
|
}); |
|
</script> |
|
@endpush |
|
@endsection
|
|
|