wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化 安装 environment 前端交互

This commit is contained in:
pushuo 2022-09-06 16:43:06 +08:00 committed by Edward Yang
parent 85048e4cfb
commit 5a808133ef
1 changed files with 118 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
beike/Installer/Views/environment-wizard.blade.php
View File

@ -10,20 +10,29 @@
@endsection
@section('content')
@php
@php
$entry_key = 'installer::installer_messages.environment.';
@endphp
@endphp
<div class="install-4">
<h3 class="mb-5">{{ __('installer::installer_messages.environment.title') }}</h3>
<form method="post" action="{{ route('installer.environment.save') }}" novalidate class="needs-validation">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row gx-4 gy-3">
<div class="row gx-4 gy-3 mb-5 database-link-wrap">
<div class="col-12">
<h5>{{ __('installer::installer_messages.environment.database_link') }}</h5>
<div class="d-flex align-items-center title-status">
<h5 class="mb-0">{{ __('installer::installer_messages.environment.database_link') }}</h5>
<div class="d-none ms-3 database-loading">
<div class="spinner-border spinner-border-sm text-muted"></div>
<span class="text-muted">检测数据库参数...</span>
</div>
<div class="text-success d-flex align-items-center ms-3 d-none"><i
class="bi bi-check-lg me-2 fs-4 lh-1"></i>数据库连接成功</div>
</div>
<hr class="mb-0">
</div>
<div class="col-sm-6">
<label class="form-label">
{{ trans($entry_key . 'db_connection_label') }}
@ -39,18 +48,19 @@
{{ trans($entry_key . 'db_host_label') }}
</label>
<input class="form-control {{ $errors->has('database_hostname') ? 'is-invalid' : '' }}" name="database_hostname"
value="{{ old('database_hostname', '127.0.0.1') }}" required placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
value="{{ old('database_hostname', '127.0.0.1') }}" required
placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('database_hostname') ? $errors->first('database_hostname') : __('common.error_required', ['name' => trans($entry_key . 'db_host_label')]) }}</span>
</div>
<div class="col-sm-6">
<label class="form-label">
{{ trans($entry_key . 'db_port_label') }}
</label>
<input class="form-control {{ $errors->has('database_port') ? 'is-invalid' : '' }}" name="database_port"
value="{{ old('database_port', '3306') }}" required placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
value="{{ old('database_port', '3306') }}" required
placeholder="{{ trans($entry_key . 'db_host_placeholder') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('database_port') ? $errors->first('database_port') : __('common.error_required', ['name' => trans($entry_key . 'db_port_label')]) }}</span>
</div>
@ -60,7 +70,8 @@
{{ trans($entry_key . 'db_name_label') }}
</label>
<input class="form-control {{ $errors->has('database_name') ? 'is-invalid' : '' }}" name="database_name"
value="{{ old('database_name', '') }}" required placeholder="{{ trans($entry_key . 'db_name_placeholder') }}">
value="{{ old('database_name', '') }}" required
placeholder="{{ trans($entry_key . 'db_name_placeholder') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('database_name') ? $errors->first('database_name') : __('common.error_required', ['name' => trans($entry_key . 'db_name_label')]) }}</span>
</div>
@ -69,8 +80,9 @@
<label class="form-label">
{{ trans($entry_key . 'db_username_label') }}
</label>
<input class="form-control {{ $errors->has('database_username') ? 'is-invalid' : '' }}" name="database_username"
value="{{ old('database_username', 'root') }}" required placeholder="{{ trans($entry_key . 'db_username_placeholder') }}">
<input class="form-control {{ $errors->has('database_username') ? 'is-invalid' : '' }}"
name="database_username" value="{{ old('database_username', 'root') }}" required
placeholder="{{ trans($entry_key . 'db_username_placeholder') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('database_username') ? $errors->first('database_username') : __('common.error_required', ['name' => trans($entry_key . 'db_username_label')]) }}</span>
</div>
@ -79,39 +91,41 @@
<label class="form-label">
{{ trans($entry_key . 'db_password_label') }}
</label>
<input class="form-control {{ $errors->has('database_password') ? 'is-invalid' : '' }}" name="database_password"
value="{{ old('database_password', '') }}" placeholder="{{ trans($entry_key . 'db_password_placeholder') }}">
<input class="form-control {{ $errors->has('database_password') ? 'is-invalid' : '' }}"
name="database_password" value="{{ old('database_password', '') }}"
placeholder="{{ trans($entry_key . 'db_password_placeholder') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('database_password') ? $errors->first('database_password') : __('common.error_required', ['name' => trans($entry_key . 'db_password_label')]) }}</span>
</div>
<div class="col-12 mt-5">
</div>
<div class="row gx-4 gy-3 admin-data-wrap d-none">
<div class="col-12">
<h5>{{ __('installer::installer_messages.environment.admin_info') }}</h5>
<hr class="mb-0">
</div>
<div class="col-sm-6">
<label class="form-label">
{{ trans($entry_key . 'admin_email') }}
</label>
<input class="form-control {{ $errors->has('admin_email') ? 'is-invalid' : '' }}" name="admin_email"
value="{{ old('admin_email', '') }}" required placeholder="{{ trans($entry_key . 'admin_email') }}">
value="{{ old('admin_email', 'admin') }}" required placeholder="{{ trans($entry_key . 'admin_email') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('admin_email') ? $errors->first('admin_email') : __('common.error_required', ['name' => trans($entry_key . 'admin_email')]) }}</span>
</div>
<div class="col-sm-6">
<label class="form-label">
{{ trans($entry_key . 'admin_password') }}
</label>
<input class="form-control {{ $errors->has('admin_password') ? 'is-invalid' : '' }}" type="password" name="admin_password" name="admin_password"
value="{{ old('admin_password', '') }}" required placeholder="{{ trans($entry_key . 'admin_password') }}">
<input class="form-control {{ $errors->has('admin_password') ? 'is-invalid' : '' }}" name="admin_password"
name="admin_password" value="{{ old('admin_password', '') }}" required
placeholder="{{ trans($entry_key . 'admin_password') }}">
<span class="invalid-feedback"
role="alert">{{ $errors->has('admin_password') ? $errors->first('admin_password') : __('common.error_required', ['name' => trans($entry_key . 'admin_password')]) }}</span>
</div>
<div class="col-sm-12 my-5">
<div class="d-flex justify-content-end">
<button class="btn btn-primary d-flex align-items-center" type="submit">
@ -120,9 +134,6 @@
</button>
</div>
</div>
</div>
</form>
</div>
@ -130,25 +141,93 @@
@section('scripts')
<script type="text/javascript">
// Example starter JavaScript for disabling form submissions if there are invalid fields
$(function () {
var forms = document.querySelectorAll(".needs-validation");
$(function() {
$('input[name="admin_password"]').val(randomString(16));
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(
"submit",
function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
$('.database-link-wrap input').on('keyup', function() {
if (isDatabaseInputVal()) {
debounce(getDatabaseStatus, 500)
}
})
})
// Example starter JavaScript for disabling form submissions if there are invalid fields
$(function() {
var forms = document.querySelectorAll(".needs-validation");
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach(function(form) {
form.addEventListener(
"submit",
function(event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});
});
function randomString(length) {
let str = '';
for (; str.length < length; str += Math.random().toString(36).substr(2));
return str.substr(0, length);
}
function isDatabaseInputVal() {
let isDate = true;
$('.database-link-wrap input').each((index, el) => {
if ($(el).val() == '') {
isDate = false;
}
})
return isDate
}
let _debounceTimeout = null;
function debounce(fn, delay = 500) {
clearTimeout(_debounceTimeout);
_debounceTimeout = setTimeout(() => {
fn();
}, delay);
}
function getDatabaseStatus() {
const self = this;
$('.database-link-wrap input').removeClass('is-invalid')
$.ajax({
url: 'environment/validate_db',
type: 'POST',
data: $('form :input[name!="admin_email"][name!="admin_password"]').serialize(),
beforeSend: function () {$('.database-loading').removeClass('d-none')},
complete: function() {
$('.database-loading').addClass('d-none');
},
success: function(json) {
if (json.status == 'fail') {
var data = Object.keys(json.data);
data.forEach((e)=> {
$('.database-link-wrap input[name="' + e + '"]').addClass('is-invalid').next('.invalid-feedback').text(json.data[e])
})
$('.admin-data-wrap').addClass('d-none')
}
form.classList.add("was-validated");
},
false
);
});
});
if (json.status == 'success') {
$('.database-link-wrap input').addClass('is-valid')
$('.title-status .text-success').removeClass('d-none')
$('.admin-data-wrap').removeClass('d-none')
}
}
});
}
</script>
@endsection