Initial commit
This commit is contained in:
Kwesi Banson Jnr
198
resources/views/services/create.blade.php
Normal file
198
resources/views/services/create.blade.php
Normal file
@@ -0,0 +1,198 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0">Add New Subscription Service</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{{-- Success Message --}}
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
{{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('services.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">Service Name</label>
|
||||
<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" placeholder="e.g., Live Scores" required>
|
||||
@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="schema_type" class="form-label">Schema Type</label>
|
||||
<select class="form-select @error('schema_type') is-invalid @enderror" id="schema_type" name="schema_type" required>
|
||||
<option value="" disabled selected>Select schema format...</option>
|
||||
<option value="type_a" {{ old('schema_type') == 'type_a' ? 'selected' : '' }}>Type A (msisdn, is_active)</option>
|
||||
<option value="type_b" {{ old('schema_type') == 'type_b' ? 'selected' : '' }}>Type B (cell_number, sub_state)</option>
|
||||
</select>
|
||||
@error('schema_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<h6 class="mb-3 text-muted">Database Connection</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8">
|
||||
<label for="db_host" class="form-label">Host / IP Address</label>
|
||||
<input type="text" class="form-control @error('db_host') is-invalid @enderror" id="db_host" name="db_host" value="{{ old('db_host') }}" required>
|
||||
@error('db_host')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="db_port" class="form-label">Port</label>
|
||||
<input type="number" class="form-control @error('db_port') is-invalid @enderror" id="db_port" name="db_port" value="{{ old('db_port', 3306) }}" required>
|
||||
@error('db_port')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label for="db_name" class="form-label">Database Name</label>
|
||||
<input type="text" class="form-control @error('db_name') is-invalid @enderror" id="db_name" name="db_name" value="{{ old('db_name') }}" required>
|
||||
@error('db_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<label for="db_user" class="form-label">Database Username</label>
|
||||
<input type="text" class="form-control @error('db_user') is-invalid @enderror" id="db_user" name="db_user" value="{{ old('db_user') }}" required>
|
||||
@error('db_user')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="db_password" class="form-label">Database Password</label>
|
||||
<div class="input-group">
|
||||
<input type="password" class="form-control @error('db_password') is-invalid @enderror" id="db_password" name="db_password" required>
|
||||
<button class="btn btn-outline-secondary" type="button" id="togglePassword">Show</button>
|
||||
</div>
|
||||
@error('db_password')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add this placeholder for the AJAX response just above the buttons -->
|
||||
<div id="test-connection-alert" class="alert d-none mb-4" role="alert"></div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<button type="button" id="testConnectionBtn" class="btn btn-outline-info">
|
||||
<span class="spinner-border spinner-border-sm d-none me-1" id="testSpinner" role="status" aria-hidden="true"></span>
|
||||
Test Connection
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="btn btn-primary" id="saveServiceBtn" disabled>
|
||||
Save Subscription Service
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<small class="text-muted d-block text-end mt-1" id="saveHint">
|
||||
You must successfully test the connection before saving.
|
||||
</small>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Selectors for connection fields
|
||||
const connectionInputs = '#db_host, #db_port, #db_name, #db_user, #db_password';
|
||||
|
||||
// 1. Automatically re-disable the save button if ANY connection field is edited
|
||||
$(connectionInputs).on('input change', function() {
|
||||
$('#saveServiceBtn').prop('disabled', true);
|
||||
$('#saveHint').text('Connection parameters changed. Re-testing required before saving.')
|
||||
.removeClass('text-success')
|
||||
.addClass('text-muted');
|
||||
});
|
||||
|
||||
// 2. Toggle password visibility
|
||||
$('#togglePassword').on('click', function() {
|
||||
const passwordInput = $('#db_password');
|
||||
const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
|
||||
passwordInput.attr('type', type);
|
||||
$(this).text(type === 'password' ? 'Show' : 'Hide');
|
||||
});
|
||||
|
||||
// 3. Test Connection AJAX Logic
|
||||
$('#testConnectionBtn').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let btn = $(this);
|
||||
let spinner = $('#testSpinner');
|
||||
let alertBox = $('#test-connection-alert');
|
||||
let saveBtn = $('#saveServiceBtn');
|
||||
let saveHint = $('#saveHint');
|
||||
|
||||
let payload = {
|
||||
db_host: $('#db_host').val(),
|
||||
db_port: $('#db_port').val(),
|
||||
db_name: $('#db_name').val(),
|
||||
db_user: $('#db_user').val(),
|
||||
db_password: $('#db_password').val(),
|
||||
_token: $('input[name="_token"]').val()
|
||||
};
|
||||
|
||||
if (!payload.db_host || !payload.db_name || !payload.db_user || !payload.db_password) {
|
||||
alertBox.removeClass('d-none alert-success alert-warning')
|
||||
.addClass('alert-danger')
|
||||
.text('Please fill out all database fields before testing.');
|
||||
return;
|
||||
}
|
||||
|
||||
btn.prop('disabled', true);
|
||||
spinner.removeClass('d-none');
|
||||
alertBox.addClass('d-none');
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('services.test') }}",
|
||||
method: 'POST',
|
||||
data: payload,
|
||||
success: function(response) {
|
||||
alertBox.removeClass('d-none alert-danger alert-warning')
|
||||
.addClass('alert-success')
|
||||
.text(response.message);
|
||||
|
||||
// ENABLE SAVE BUTTON
|
||||
saveBtn.prop('disabled', false);
|
||||
saveHint.text('Connection verified. Ready to save.')
|
||||
.removeClass('text-muted')
|
||||
.addClass('text-success');
|
||||
},
|
||||
error: function(xhr) {
|
||||
let errorMessage = xhr.responseJSON && xhr.responseJSON.message
|
||||
? xhr.responseJSON.message
|
||||
: 'An unexpected error occurred.';
|
||||
|
||||
alertBox.removeClass('d-none alert-success alert-warning')
|
||||
.addClass('alert-danger')
|
||||
.text(errorMessage);
|
||||
|
||||
// KEEP SAVE BUTTON DISABLED
|
||||
saveBtn.prop('disabled', true);
|
||||
saveHint.text('Connection failed. Fix credentials and test again.')
|
||||
.removeClass('text-success')
|
||||
.addClass('text-muted');
|
||||
},
|
||||
complete: function() {
|
||||
btn.prop('disabled', false);
|
||||
spinner.addClass('d-none');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user