mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-22 16:02:54 +03:00
Refactored the installation page js.
This commit is contained in:
Alex Tselegidis
parent
79fa0ba7f5
commit
648fb96b85
1 changed files with 209 additions and 335 deletions
|
|
@ -1,335 +1,209 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<?php // PAGE META ?>
|
<title>Easy!Appointments - Installation</title>
|
||||||
<title>Easy!Appointments - Installation</title>
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
<?php // INCLUDE CSS ?>
|
href="<?php echo $base_url; ?>/assets/ext/bootstrap/css/bootstrap.min.css">
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
<link rel="icon" type="image/x-icon"
|
||||||
type="text/css"
|
href="<?php echo $base_url; ?>/assets/img/favicon.ico">
|
||||||
href="<?php echo $base_url; ?>/assets/ext/bootstrap/css/bootstrap.min.css">
|
|
||||||
|
<link rel="stylesheet" type="text/css"
|
||||||
<?php // SET FAVICON FOR PAGE ?>
|
href="<?php echo $this->config->item('base_url'); ?>/assets/ext/jquery-ui/jquery-ui.min.css">
|
||||||
<link
|
|
||||||
rel="icon"
|
<style>
|
||||||
type="image/x-icon"
|
header {
|
||||||
href="<?php echo $base_url; ?>/assets/img/favicon.ico">
|
background: #DAFFEB;
|
||||||
|
margin-bottom: 25px;
|
||||||
<?php // INCLUDE SCRIPTS ?>
|
}
|
||||||
<script
|
|
||||||
type="text/javascript"
|
.content {
|
||||||
src="<?php echo $base_url; ?>/assets/ext/jquery/jquery.min.js"></script>
|
margin: 32px;
|
||||||
<script
|
max-width: 980px;
|
||||||
type="text/javascript"
|
}
|
||||||
src="<?php echo $base_url; ?>/assets/ext/bootstrap/js/bootstrap.min.js"></script>
|
|
||||||
<script
|
.alert {
|
||||||
type="text/javascript"
|
margin: 25px 0 10px 0;
|
||||||
src="<?php echo $base_url; ?>/assets/ext/datejs/date.js"></script>
|
}
|
||||||
|
|
||||||
<script type="text/javascript">
|
footer {
|
||||||
var GlobalVariables = {
|
padding: 10px 35px;
|
||||||
'csrfToken': <?php echo json_encode($this->security->get_csrf_hash()); ?>,
|
background-color: #FAFAFA;
|
||||||
'baseUrl': <?php echo '"' . $base_url . '"'; ?>
|
margin-top: 20px;
|
||||||
};
|
border-top: 1px solid #EEE;
|
||||||
|
}
|
||||||
var EALang = <?php echo json_encode($this->lang->language); ?>;
|
|
||||||
|
#loading {
|
||||||
$(document).ready(function() {
|
position: fixed;
|
||||||
var MIN_PASSWORD_LENGTH = 7;
|
top: 0px;
|
||||||
var AJAX_SUCCESS = 'SUCCESS';
|
left: 0px;
|
||||||
var AJAX_FAILURE = 'FAILURE';
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
$(document).ajaxStart(function() {
|
z-index: 999999;
|
||||||
$('#loading').show();
|
background: rgba(255, 255, 255, 0.75);
|
||||||
});
|
}
|
||||||
|
|
||||||
$(document).ajaxStop(function() {
|
#loading img {
|
||||||
$('#loading').hide();
|
margin: auto;
|
||||||
});
|
display: block;
|
||||||
|
}
|
||||||
/**
|
</style>
|
||||||
* Event: Install Easy!Appointments Button "Click"
|
</head>
|
||||||
*/
|
<body>
|
||||||
$('#install').click(function() {
|
<div id="loading" class="hidden">
|
||||||
if (!validate()) return;
|
<img src="<?php echo $base_url; ?>/assets/img/loading.gif" />
|
||||||
|
</div>
|
||||||
var postUrl = GlobalVariables.baseUrl + '/index.php/appointments/ajax_install';
|
|
||||||
var postData = {
|
<header>
|
||||||
'csrfToken': GlobalVariables.csrfToken,
|
<a href="http://easyappointments.org" target="_blank">
|
||||||
'admin': JSON.stringify(getAdminData()),
|
<img src="<?php echo $base_url; ?>/assets/img/installation-banner.png"
|
||||||
'company': JSON.stringify(getCompanyData())
|
alt="Easy!Appointents Installation Banner">
|
||||||
};
|
</a>
|
||||||
|
</header>
|
||||||
$.post(postUrl, postData, function(response) {
|
|
||||||
//////////////////////////////////////////////////////
|
<div class="content container-fluid">
|
||||||
console.log('Ajax Install E!A Response:', response);
|
<div class="welcome">
|
||||||
//////////////////////////////////////////////////////
|
<h3>Welcome to the Easy!Appointments installation page.</h3>
|
||||||
|
<p>
|
||||||
if (!GeneralFunctions.handleAjaxExceptions(response)) return;
|
This page will help you set the main settings of your Easy!Appointments installation.
|
||||||
|
You will be able to edit these settings and many more in the backend session of your
|
||||||
if (response == AJAX_SUCCESS) {
|
system. Remember to use the <strong class="text-primary"><?php echo $base_url; ?>/index.php/backend</strong>
|
||||||
$('.alert').text('Easy!Appointments has been successfully installed!');
|
url to connect to the backend section of Easy!Appointments.
|
||||||
$('.alert').addClass('alert-success');
|
|
||||||
$('.alert').show();
|
If you face any problems during the usage of Easy!Appointments you can always check
|
||||||
setTimeout(function() {
|
the official <a href="https://github.com/alextselegidis/easyappointments/wiki">Wiki Pages</a>
|
||||||
window.location.href = GlobalVariables.baseUrl + '/index.php/backend';
|
and <a href="http://groups.google.com/group/easy-appointments">Support Group</a>
|
||||||
}, 1000);
|
for getting help. You may also submit new issues on
|
||||||
}
|
<a href="https://github.com/alextselegidis/easyappointments/issues">GitHub Issues</a>
|
||||||
}, 'json');
|
in order to help our development process.
|
||||||
});
|
</p>
|
||||||
|
</div>
|
||||||
/**
|
|
||||||
* Validates the user input. Use this before executing the installation procedure.
|
<div class="alert hidden"></div>
|
||||||
*
|
|
||||||
* @returns {bool} Returns the validation result.
|
<div class="row">
|
||||||
*/
|
<div class="admin-settings col-md-5">
|
||||||
function validate() {
|
<h3>Administrator</h3>
|
||||||
try {
|
|
||||||
$('.alert').hide();
|
<div class="form-group">
|
||||||
$('input').css('border', '');
|
<label for="first-name" class="control-label">First Name</label>
|
||||||
|
<input type="text" id="first-name" class="form-control" />
|
||||||
// Check for empty fields.
|
</div>
|
||||||
var missingRequired = false;
|
|
||||||
$('input').each(function() {
|
<div class="form-group">
|
||||||
if ($(this).val() == '') {
|
<label for="last-name" class="control-label">Last Name</label>
|
||||||
$(this).css('border', '2px solid red');
|
<input type="text" id="last-name" class="form-control" />
|
||||||
missingRequired = true;
|
</div>
|
||||||
}
|
|
||||||
});
|
<div class="form-group">
|
||||||
|
<label for="email" class="control-label">Email</label>
|
||||||
if (missingRequired)
|
<input type="text" id="email" class="form-control" />
|
||||||
throw 'All the page fields are required.';
|
</div>
|
||||||
|
|
||||||
// Validate Passwords
|
<div class="form-group">
|
||||||
if ($('#password').val() != $('#retype-password').val()) {
|
<label for="phone-number" class="control-label">Phone Number</label>
|
||||||
$('#password').css('border', '2px solid red');
|
<input type="text" id="phone-number" class="form-control" />
|
||||||
$('#retype-password').css('border', '2px solid red');
|
</div>
|
||||||
throw 'Passwords do not match!';
|
|
||||||
}
|
<div class="form-group">
|
||||||
|
<label for="username" class="control-label">Username</label>
|
||||||
if ($('#password').val().length < MIN_PASSWORD_LENGTH) {
|
<input type="text" id="username" class="form-control" />
|
||||||
$('#password').css('border', '2px solid red');
|
</div>
|
||||||
$('#retype-password').css('border', '2px solid red');
|
|
||||||
throw 'The password must be at least ' + MIN_PASSWORD_LENGTH + ' characters long.';
|
<div class="form-group">
|
||||||
}
|
<label for="password" class="control-label">Password</label>
|
||||||
|
<input type="password" id="password" class="form-control" />
|
||||||
// Validate Email
|
</div>
|
||||||
if (!GeneralFunctions.validateEmail($('#email').val())) {
|
|
||||||
$('#email').css('border', '2px solid red');
|
<div class="form-group">
|
||||||
throw 'The email address is invalid!';
|
<label for="retype-password" class="control-label">Retype Password</label>
|
||||||
}
|
<input type="password" id="retype-password" class="form-control" />
|
||||||
|
</div>
|
||||||
if (!GeneralFunctions.validateEmail($('#company-email').val())) {
|
</div>
|
||||||
$('#company-email').css('border', '2px solid red');
|
|
||||||
throw 'The email address is invalid!';
|
<div class="company-settings col-md-5">
|
||||||
}
|
<h3>Company</h3>
|
||||||
|
|
||||||
return true;
|
<div class="form-group">
|
||||||
} catch(exc) {
|
<label for="company-name" class="control-label">Company Name</label>
|
||||||
$('.alert').text(exc);
|
<input type="text" id="company-name" class="form-control" />
|
||||||
$('.alert').show();
|
</div>
|
||||||
return false;
|
|
||||||
}
|
<div class="form-group">
|
||||||
}
|
<label for="company-email" class="control-label">Company Email</label>
|
||||||
|
<input type="text" id="company-email" class="form-control" />
|
||||||
/**
|
</div>
|
||||||
* Get the admin data as an object.
|
|
||||||
*
|
<div class="form-group">
|
||||||
* @returns {object}
|
<label for="company-link" class="control-label">Company Link</label>
|
||||||
*/
|
<input type="text" id="company-link" class="form-control" />
|
||||||
function getAdminData() {
|
</div>
|
||||||
var admin = {
|
</div>
|
||||||
'first_name': $('#first-name').val(),
|
</div>
|
||||||
'last_name': $('#last-name').val(),
|
|
||||||
'email': $('#email').val(),
|
<br>
|
||||||
'phone_number': $('#phone-number').val(),
|
|
||||||
'username': $('#username').val(),
|
<p>
|
||||||
'password': $('#password').val()
|
You will be able to set your business logic in the backend settings page
|
||||||
};
|
after the installation is complete.
|
||||||
|
<br>
|
||||||
return admin;
|
Press the following button to complete the installation process.
|
||||||
}
|
</p>
|
||||||
|
|
||||||
/**
|
<br>
|
||||||
* Get the company data as an object.
|
|
||||||
*
|
<p>
|
||||||
* @returns {object}
|
<h3>License</h3>
|
||||||
*/
|
Easy!Appointments is licensed under the <span class="label label-default">GPLv3 license</span>.
|
||||||
function getCompanyData() {
|
By using the code of Easy!Appointments in any way <br> you agree with the terms described in the
|
||||||
var company = {
|
following url:
|
||||||
'company_name': $('#company-name').val(),
|
<a href="http://www.gnu.org/copyleft/gpl.html">http://www.gnu.org/copyleft/gpl.html</a>
|
||||||
'company_email': $('#company-email').val(),
|
</p>
|
||||||
'company_link': $('#company-link').val()
|
|
||||||
};
|
<br>
|
||||||
|
|
||||||
return company;
|
<button type="button" id="install" class="btn btn-success btn-large">
|
||||||
}
|
<i class="icon-white icon-ok"></i>
|
||||||
});
|
Install Easy!Appointments</button>
|
||||||
</script>
|
</div>
|
||||||
|
|
||||||
<style>
|
<footer>
|
||||||
header {
|
Powered by <a href="http://easyappointments.org">Easy!Appointments</a>
|
||||||
background: #DAFFEB;
|
</footer>
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
<script type="text/javascript">
|
||||||
|
var GlobalVariables = {
|
||||||
.content {
|
'csrfToken': <?php echo json_encode($this->security->get_csrf_hash()); ?>,
|
||||||
margin: 32px;
|
'baseUrl': <?php echo '"' . $base_url . '"'; ?>
|
||||||
max-width: 980px;
|
};
|
||||||
}
|
|
||||||
|
var EALang = <?php echo json_encode($this->lang->language); ?>;
|
||||||
.alert {
|
</script>
|
||||||
margin: 25px 0 10px 0;
|
|
||||||
}
|
<script
|
||||||
|
type="text/javascript"
|
||||||
footer {
|
src="<?php echo $base_url; ?>/assets/ext/jquery/jquery.min.js"></script>
|
||||||
padding: 10px 35px;
|
|
||||||
background-color: #FAFAFA;
|
<script
|
||||||
margin-top: 20px;
|
type="text/javascript"
|
||||||
border-top: 1px solid #EEE;
|
src="<?php echo $this->config->item('base_url'); ?>/assets/ext/jquery-ui/jquery-ui.min.js"></script>
|
||||||
}
|
|
||||||
|
<script
|
||||||
#loading {
|
type="text/javascript"
|
||||||
position: fixed;
|
src="<?php echo $base_url; ?>/assets/ext/bootstrap/js/bootstrap.min.js"></script>
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
<script
|
||||||
width: 100%;
|
type="text/javascript"
|
||||||
height: 100%;
|
src="<?php echo $base_url; ?>/assets/js/general_functions.js"></script>
|
||||||
z-index: 999999;
|
|
||||||
background: rgba(255, 255, 255, 0.75);
|
<script
|
||||||
}
|
type="text/javascript"
|
||||||
|
src="<?php echo $base_url; ?>/assets/ext/datejs/date.js"></script>
|
||||||
#loading img {
|
|
||||||
margin: auto;
|
<script
|
||||||
display: block;
|
type="text/javascript"
|
||||||
}
|
src="<?php echo $base_url; ?>/assets/js/installation.js"></script>
|
||||||
</style>
|
</body>
|
||||||
</head>
|
</html>
|
||||||
<body>
|
|
||||||
<div id="loading" class="hidden">
|
|
||||||
<img src="<?php echo $base_url; ?>/assets/img/loading.gif" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<a href="http://easyappointments.org" target="_blank">
|
|
||||||
<img src="<?php echo $base_url; ?>/assets/img/installation-banner.png" alt="Easy!Appointents Installation Banner">
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="content container-fluid">
|
|
||||||
<div class="welcome">
|
|
||||||
<h3>Welcome to the Easy!Appointments installation page.</h3>
|
|
||||||
<p>
|
|
||||||
This page will help you set the main settings of your Easy!Appointments installation.
|
|
||||||
You will be able to edit these settings and many more in the backend session of your
|
|
||||||
system. Remember to use the <strong class="text-primary"><?php echo $base_url; ?>/index.php/backend</strong>
|
|
||||||
url to connect to the backend section of Easy!Appointments.
|
|
||||||
|
|
||||||
If you face any problems during the usage of Easy!Appointments you can always check
|
|
||||||
the official <a href="https://github.com/alextselegidis/easyappointments/wiki">Wiki Pages</a>
|
|
||||||
and <a href="http://groups.google.com/group/easy-appointments">Support Group</a>
|
|
||||||
for getting help. You may also submit new issues on
|
|
||||||
<a href="https://github.com/alextselegidis/easyappointments/issues">GitHub Issues</a>
|
|
||||||
in order to help our development process.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="alert hidden"></div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="admin-settings col-md-5">
|
|
||||||
<h3>Administrator</h3>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="first-name" class="control-label">First Name</label>
|
|
||||||
<input type="text" id="first-name" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="last-name" class="control-label">Last Name</label>
|
|
||||||
<input type="text" id="last-name" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email" class="control-label">Email</label>
|
|
||||||
<input type="text" id="email" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="phone-number" class="control-label">Phone Number</label>
|
|
||||||
<input type="text" id="phone-number" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="username" class="control-label">Username</label>
|
|
||||||
<input type="text" id="username" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="password" class="control-label">Password</label>
|
|
||||||
<input type="password" id="password" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="retype-password" class="control-label">Retype Password</label>
|
|
||||||
<input type="password" id="retype-password" class="form-control" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="company-settings col-md-5">
|
|
||||||
<h3>Company</h3>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="company-name" class="control-label">Company Name</label>
|
|
||||||
<input type="text" id="company-name" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="company-email" class="control-label">Company Email</label>
|
|
||||||
<input type="text" id="company-email" class="form-control" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="company-link" class="control-label">Company Link</label>
|
|
||||||
<input type="text" id="company-link" class="form-control" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
You will be able to set your business logic in the backend settings page
|
|
||||||
after the installation is complete.
|
|
||||||
<br>
|
|
||||||
Press the following button to complete the installation process.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<h3>License</h3>
|
|
||||||
Easy!Appointments is licensed under the <span class="label label-default">GPLv3 license</span>.
|
|
||||||
By using the code of Easy!Appointments in any way <br> you agree with the terms described in the
|
|
||||||
following url:
|
|
||||||
<a href="http://www.gnu.org/copyleft/gpl.html">http://www.gnu.org/copyleft/gpl.html</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<button type="button" id="install" class="btn btn-success btn-large">
|
|
||||||
<i class="icon-white icon-ok"></i>
|
|
||||||
Install Easy!Appointments</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
Powered by <a href="http://easyappointments.org">Easy!Appointments</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script
|
|
||||||
type="text/javascript"
|
|
||||||
src="<?php echo $base_url; ?>/assets/js/general_functions.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue