PootisPenserHere/payroll_manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Merge pull request #18 from PootisPenserHere/loadingViews

Browse Source 
Loading views
This commit is contained in:
Jose Pablo Domingo Aramburo Sanchez 2018-08-12 11:36:52 -06:00 committed by GitHub
commit dc45f02ad2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 142 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
api-payroll/public/css/landing.css
View File

@ -7,7 +7,7 @@ body {
color: black; color: black;
} }
#cuerpo{ #newViewBody{
top:17%; top:17%;
left:1%; left:1%;
width:98%; width:98%;
@ -23,34 +23,34 @@ body {
} }
#cuerpo .modal-body{ #newViewBody .modal-body{
color: #000; color: #000;
border:none; border:none;
} }
#cuerpo .panel-default{ #newViewBody .panel-default{
border: 3px solid #4A89A5; border: 3px solid #4A89A5;
border-radius: 5px; border-radius: 5px;
} }
#cuerpo .panel > .panel-heading { #newViewBody .panel > .panel-heading {
background-image: none; background-image: none;
background-color: #4A89A5; background-color: #4A89A5;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
#cuerpo .btn-default{ #newViewBody .btn-default{
border: 2px solid #62655F; border: 2px solid #62655F;
background: #F9DFAF; background: #F9DFAF;
} }
#cuerpo .btn-default:hover{ #newViewBody .btn-default:hover{
border: 2px solid #62655F; border: 2px solid #62655F;
background: #F9DFAF; background: #F9DFAF;
} }
#cuerpo .alert-success{ #newViewBody .alert-success{
background: #C6E97C; background: #C6E97C;
} }

38
api-payroll/public/html/NewEmployee.php Normal file
View File

@ -0,0 +1,38 @@
<script src="../js/NewEmployee.js"></script>
<form class="form-horizontal" id="newEmployeeForm">
<div class="col-md-12">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">New employee</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="newEmployeeFirstName">First name</label>
<div class="col-md-5">
<input id="newEmployeeFirstName" name="newEmployeeFirstName" type="text" class="form-control input-md">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-4 control-label" for="newEmployeeMiddleName">Middle name</label>
<div class="col-md-5">
<input id="newEmployeeMiddleName" name="newEmployeeMiddleName" type="number" class="form-control input-md">
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="form-group">
<a href="#" class="btn btn-lg btn-success" onclick="saveNewEmployee();">Save</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

75
api-payroll/public/html/landing.php
View File

@ -26,28 +26,28 @@ if(!isset($_SESSION['userName'])){
</button> </button>
</div> </div>
<div class="collapse navbar-collapse navbar-menubuilder"> <div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left"> <ul class="nav navbar-nav navbar-left" id="nevatation-options">
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> Employees<span class="caret"></span></a> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> Employees<span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#" data-nav_accion="views/cliente.php" onclick="vista_crear_nuevo_salon_evento();"> New employee</a></li> <li><a href="#" data-nav_accion="NewEmployee.php"> New employee</a></li>
<li><a href="#" data-nav_accion="views/clientess.php" onclick="vista_crear_nuevo_coach();"> Modify employee</a></li> <li><a href="#" data-nav_accion="EditEmployee.php"> Modify employee</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#" onclick="vista_calendario();"><span class="glyphicon glyphicon-tasks"></span> Management</a> <a href="#" onclick="loadView();"><span class="glyphicon glyphicon-tasks"></span> Management</a>
</li> </li>
<li> <li>
<a href="#" onclick="vista_calendario();"><span class="glyphicon glyphicon-wrench"></span> Change password</a> <a href="#" onclick="loadView();"><span class="glyphicon glyphicon-wrench"></span> Change password</a>
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li> <li>
<a href="#" onclick="logout();"><span class="fa fa-fw fa-power-off"></span> Cerrar Sesión</a> <a href="#" onclick="logout();"><span class="fa fa-fw fa-power-off"></span> logout</a>
</li> </li>
</ul> </ul>
@ -55,26 +55,25 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-12" id="cuerpo"></div>
<div class="col-md-12" id="newViewBody"></div>
<!-- <!--
================================================================================= =================================================================================
Errores en query de AJAX Modals for errors encountered by ajax
================================================================================= =================================================================================
--> -->
<!-- Fallo en la conexion de internet -->
<div id="modal_error_internet" class="modal fade" role="dialog"> <div id="modal_error_internet" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_error"> <div class="modal-header" id="modal_header_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Por favor revise su conexión a internet.</p> <p>Please verify your internet connection and try again.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -84,18 +83,16 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
<!-- El recurso solicitado no existe -->
<div id="modal_error_404" class="modal fade" role="dialog"> <div id="modal_error_404" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_error"> <div class="modal-header" id="modal_header_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>El URL del formulario no pudo ser encontrado en el servidor.</p> <p>Unable to find the requested url in the sever.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -105,18 +102,16 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
<!-- Error interno del servidor donde no es posible detectar la causa especifica -->
<div id="modal_error_500" class="modal fade" role="dialog"> <div id="modal_error_500" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_error"> <div class="modal-header" id="modal_header_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Error interno del servidor.</p> <p>The server has encountered an internal error, please try again later.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -126,18 +121,16 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
<!-- El servidor respone con un string que no esta en formato JSON o contiene caracteres adicionales al JSON -->
<div id="modal_error_parsererror" class="modal fade" role="dialog"> <div id="modal_error_parsererror" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_error"> <div class="modal-header" id="modal_header_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Fallo al procesar el JSON enviado por el servidor.</p> <p>The response from the sever wasn't a proper JSON format</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -147,18 +140,16 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
<!-- El servidortardo demasiado en responder -->
<div id="modal_error_timeout" class="modal fade" role="dialog"> <div id="modal_error_timeout" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_error"> <div class="modal-header" id="modal_header_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>La petición excedió el limite de tiempo.</p> <p>The request timeout, please try again or verify your connection.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -168,18 +159,16 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
<!-- Si el request AJAX falla por alguna razon no listada -->
<div id="modal_error_otro" class="modal fade" role="dialog"> <div id="modal_error_otro" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_error"> <div class="modal-header" id="modal_header_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Ha ocurrido un error desconocido.</p> <p>An unknown error occurred.</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -191,22 +180,20 @@ if(!isset($_SESSION['userName'])){
<!-- <!--
================================================================================= =================================================================================
Respuesta del servidor Generic response modals
================================================================================= =================================================================================
--> -->
<!-- Si el request AJAX falla por alguna razon no listada --> <div id="modal_server_response_error" class="modal fade" role="dialog">
<div id="modal_respuesa_servidor_error" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_respuesa_servidor_error"> <div class="modal-header" id="modal_header_server_response_error">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>Ha ocurrido un error</center></h4> <h4 class="modal-title">An error has occurred</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p id="respuesa_servidor_error"></p> <p id="server_response_error"></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
@ -216,18 +203,16 @@ if(!isset($_SESSION['userName'])){
</div> </div>
</div> </div>
<!-- Si el request AJAX recibe un success en la variable pasasa por el servidor --> <div id="modal_server_response_success" class="modal fade" role="dialog">
<div id="modal_respuesa_servidor_success" class="modal fade" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
<div class="modal-header" id="modal_header_respuesa_servidor_success"> <div class="modal-header" id="modal_header_server_response_success">
<button type="button" class="close" data-dismiss="modal">&times;</button> <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><center>El almacenado ha sido exitoso</center></h4> <h4 class="modal-title">Success</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p id="respuesa_servidor_success"></p> <p id="server_response_success"></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>

3
api-payroll/public/js/NewEmployee.js Normal file
View File

@ -0,0 +1,3 @@
function saveNewEmployee(){
console.log('saving...');
}

69
api-payroll/public/js/landing.js
View File

@ -1,5 +1,9 @@
/**
* Destorys the session for the current user and redirects
* back to the login form
*/
function logout() { function logout() {
var baseUrl = getbaseUrl(); let baseUrl = getbaseUrl();
$.ajax({ $.ajax({
url: baseUrl + '/api/session/logout', url: baseUrl + '/api/session/logout',
@ -8,10 +12,65 @@ function logout() {
success:function(data){ success:function(data){
window.location.replace(baseUrl + '/html/login.php'); window.location.replace(baseUrl + '/html/login.php');
}, },
error:function(x) { error:function(x,e) {
if (x.status==500){ if (x.status==0) {
$('#modalLoginError').modal('show'); $('#modal_error_internet').modal('show');
document.getElementById('modalLoginErrorBody').innerHTML = "The user or password didnt match, please try again"; } else if(x.status==404) {
$('#modal_error_404').modal('show');
} else if(x.status==500) {
$('#modal_error_500').modal('show');
} else if(e=='parsererror') {
$('#modal_error_parsererror').modal('show');
} else if(e=='timeout'){
$('#modal_error_timeout').modal('show');
} else {
$('#modal_error_otro').modal('show');
}
},
});
}
/**
* Entry point for loading elements from the navatation var, this functuion
* will filter the junk clicks that have landed in a dropdown menu and pass
* only the ones containing an action to the actual view loader
*/
$('#nevatation-options li a').click(function(){
let view = $(this).data('nav_accion');
if (view != "#" && view != undefined) {
loadView(view);
}
});
/**
* Will fetch the html of the desired view and load it into the landing page
*
* @param requestedView string
*/
function loadView(requestedView){
let baseUrl = getbaseUrl();
$.ajax({
url: baseUrl + '/html/' + requestedView,
type: 'get',
success:function(data){
$("#newViewBody").hide().html(data).show('slow');
},
error:function(x,e) {
if (x.status==0) {
$('#modal_error_internet').modal('show');
} else if(x.status==404) {
$('#modal_error_404').modal('show');
} else if(x.status==500) {
$('#modal_error_500').modal('show');
} else if(e=='parsererror') {
$('#modal_error_parsererror').modal('show');
} else if(e=='timeout'){
$('#modal_error_timeout').modal('show');
} else {
$('#modal_error_otro').modal('show');
} }
}, },
}); });