Commit 0c9d3687 authored by Adrian's avatar Adrian
Browse files

cambios

parent 7a0de768
......@@ -6,25 +6,31 @@
<title>.:: Envío de notificaciones push ::.</title>
<link rel="stylesheet" href="./style.css">
<script type="text/javascript">
if (window.location.protocol.trim() === 'https') {
var baseURL = 'https://boliviasegura.gob.bo/admin-api';
} else {
var baseURL = 'http://localhost:5000';
}
var baseURL = 'https://boliviasegura.gob.bo/admin-api';
function login () {
service(baseURL + '/login', {
usuario: document.getElementById('user').value,
password: document.getElementById('password').value
})
.then((data) => {
if (data.finalizado) {
window.localStorage.setItem('site_token', data.datos.token);
document.getElementById('login').style.display = 'none';
document.getElementById('data').style.display = 'block';
.then((response) => {
var status = response.status;
if (parseInt(status) !== 401) {
response.json()
.then(data => {
if (data.finalizado) {
window.localStorage.setItem('site_token', data.datos.token);
document.getElementById('login').style.display = 'none';
document.getElementById('data').style.display = 'block';
} else {
document.getElementById('user').value = '';
document.getElementById('password').value = '';
MessageModal('Credenciales incorrectas', 'error');
}
})
} else {
document.getElementById('user').value = '';
document.getElementById('password').value = '';
alert('Credenciales incorrectas');
MessageModal('Ocurrio un error al tratar de conectarse con el servidor', 'error');
}
});
}
......@@ -42,46 +48,94 @@
referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
});
return await response.json();
return await response;
}
function sendData () {
service(baseURL + '/send', {
titulo: document.querySelector('#title').value,
text: document.querySelector('#description').value
})
.then((data) => {
if (data.finalizado) {
document.querySelector('#title').value = '';
document.querySelector('#description').value = '';
alert('Mensaje enviado');
} else {
alert('Estimado usuario el token expiró, por favor vuelva a autenticarse');
document.getElementById('user').value = '';
document.getElementById('password').value = '';
document.getElementById('login').style.display = 'block';
document.getElementById('data').style.display = 'none';
}
.then((response) => {
var status = response.status;
if (parseInt(status) !== 401) {
response.json()
.then(data => {
document.querySelector('#title').value = '';
document.querySelector('#description').value = '';
if (data.finalizado) {
MessageModal('Notificación enviada satisfactoriamente', 'success');
} else {
MessageModal('Ocurrio un error, vuelva a enviar la notificación', 'error');
}
})
} else {
MessageModal('Estimado usuario la session expiró, vuelva a autenticarse por favor', 'error');
document.getElementById('user').value = '';
document.getElementById('password').value = '';
document.getElementById('title').style.display = 'block';
document.getElementById('description').style.display = 'none';
}
});
}
</script>
</head>
<body>
<div class="main">
<section class="title">Envío de notificaciones push</section>
<section id="login">
<form action="#" onsubmit="event.preventDefault(); login();" class="login">
<input type="text" id="user" required placeholder="Usuario">
<input type="password" id="password" required placeholder="Contraseña">
<button type="submit">INGRESAR</button>
<div class="notifications"></div>
<div class="main">
<section class="title">Envío de notificaciones push</section>
<section id="login">
<form action="#" onsubmit="event.preventDefault(); login();" class="login">
<input type="text" id="user" required placeholder="Usuario">
<input type="password" id="password" required placeholder="Contraseña">
<button type="submit">INGRESAR</button>
</form>
</section>
<section id="data">
<form action="#" onsubmit="event.preventDefault(); sendData()" class="form">
<input type="text" id="title" required placeholder="Titulo">
<textarea name="comments" required placeholder="Descripción" id="description" cols="30" rows="20"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
<section id="data">
<form action="#" onsubmit="event.preventDefault(); sendData()" class="form">
<input type="text" id="title" required placeholder="Titulo">
<textarea name="comments" required placeholder="Descripción" id="description" cols="30" rows="20"></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</div>
</section>
</div>
<script type="text/javascript">
function MessageModal (param, cssClass) {
const div = document.createElement('div');
div.classList.add('MessageModal');
const iconCerrar = document.createElement('img');
iconCerrar.src = './close.png';
iconCerrar.style.width = '25px';
iconCerrar.style.marginTop = '-5px';
iconCerrar.style.height = '25px';
iconCerrar.style.right= '10px';
iconCerrar.style.position = 'absolute';
iconCerrar.style.cursor = 'pointer';
iconCerrar.style.filter = 'invert(1)';
iconCerrar.onclick = () => {
if (div) {
div.classList.add('remove');
setTimeout(() => {
if (div && div.parentNode) {
div.parentNode.removeChild(div);
}
}, 500);
}
};
div.appendChild(iconCerrar);
div.appendChild(document.createTextNode(param));
div.classList.add(cssClass);
document.querySelector('.notifications').appendChild(div);
setTimeout(() => {
if (div) {
div.classList.add('remove');
setTimeout(() => {
if (div && div.parentNode) {
div.parentNode.removeChild(div);
}
}, 500);
}
}, 5000);
};
</script>
</body>
</html>
\ No newline at end of file
/**
* @function MessageModal
* @description Esta funcion esta encargada de mostrar mensajes al usuario de manera elegante
* @param {param}
*/
function MessageModal (param, cssClass) {
const div = document.createElement('div');
div.classList.add('MessageModal');
const iconCerrar = document.createElement('i');
iconCerrar.className = 'far fa-times-circle';
iconCerrar.onclick = () => {
if (div) {
div.classList.add('remove');
setTimeout(() => {
if (div && div.parentNode) {
div.parentNode.removeChild(div);
}
}, 500);
}
};
div.appendChild(iconCerrar);
div.appendChild(document.createTextNode(param));
div.classList.add(cssClass);
document.querySelector('.notifications').appendChild(div);
setTimeout(() => {
if (div) {
div.classList.add('remove');
setTimeout(() => {
if (div && div.parentNode) {
div.parentNode.removeChild(div);
}
}, 500);
}
}, 5000);
};
const methods = {
init: () => {
try {
if (!('MessageModal' in window)) {
window.MessageModal = {
success: (param) => {
MessageModal(param, 'success');
},
error: (param) => {
MessageModal(param, 'error');
},
info: (param) => {
MessageModal(param, 'info');
},
warning: (param) => {
MessageModal(param, 'warning');
}
};
}
} catch (err) {
console.error(err.message);
}
}
};
methods.init();
......@@ -87,4 +87,197 @@ textarea {
flex-direction: column;
align-items: center;
justify-content: center;
}
\ No newline at end of file
}
/**/
/** * @description Estilos para el modal de mensajes * @author dbarra@agetic.gob.bo */
@media screen and (min-width: 1px) and (max-width: 800px) {
.notifications {
position: fixed;
z-index: 1000;
pointer-events: none;
right: 0;
top: 0;
bottom: 0;
left: 80%;
background: transparent;
}
.MessageModal {
top: 70px;
right: 15px;
display: flex;
justify-content: center;
position: relative;
pointer-events: all;
margin-top: 10px;
font-size: 14px;
float: right;
padding: 15px 30px 15px 15px;
width: 200px;
border-radius: 5px;
color: #fff;
font-family: 'Sansation';
-webkit-animation: slide 0.7s ease-in;
-moz-animation: slide 0.7s ease-in;
-o-animation: slide 0.7s ease-in;
border: 1px solid rgba(0, 0, 0, .1);
}
.MessageModal i {
cursor: pointer;
font-size: 20px;
position: absolute;
right: 10px;
}
.success {
background: #449935;
}
.error {
background: #d31419;
}
.info {
background: #4f0563;
}
.warning {
background: #f3cf00;
}
.remove {
animation: slide-out 0.7s ease-in-out;
-webkit-animation: slide-out 0.7s ease-in-out;
-moz-animation: slide-out 0.7s ease-in-out;
-o-animation: slide-out 0.7s ease-in-out;
}
@keyframes slide {
0% {
right: -150px;
filter: opacity(0);
}
100% {
right: 30px;
filter: opacity(1);
}
}
@-moz-keyframes slide {
0% {
right: -150px;
filter: opacity(0);
}
100% {
right: 30px;
filter: opacity(1);
}
}
@keyframes slide-out {
0% {
right: 30px;
filter: opacity(1);
}
100% {
right: -150px;
filter: opacity(0);
}
}
@-moz-keyframes slide-out {
0% {
right: 30px;
filter: opacity(1);
}
100% {
right: -150px;
filter: opacity(0);
}
}
}
@media screen and (min-width: 801px) {
.notifications {
position: fixed;
z-index: 1000;
pointer-events: none;
right: 0;
top: 0;
bottom: 0;
left: 80%;
background: transparent;
}
.MessageModal {
top: 70px;
right: 15px;
display: block;
position: relative;
pointer-events: all;
margin-top: 10px;
font-size: 14px;
float: right;
padding: 15px;
width: 200px;
border-radius: 5px;
color: #fff;
font-family: 'Sansation';
-webkit-animation: slide 0.7s ease-in;
-moz-animation: slide 0.7s ease-in;
-o-animation: slide 0.7s ease-in;
border: 1px solid rgba(0, 0, 0, .1);
}
.MessageModal i {
float: right;
cursor: pointer;
}
.success {
background: #449935;
}
.error {
background: #d31419;
}
.info {
background: #4f0563;
}
.warning {
background: #f3cf00;
}
.remove {
animation: slide-out 0.7s ease-in-out;
-webkit-animation: slide-out 0.7s ease-in-out;
-moz-animation: slide-out 0.7s ease-in-out;
-o-animation: slide-out 0.7s ease-in-out;
}
@keyframes slide {
0% {
right: -150px;
filter: opacity(0);
}
100% {
right: 30px;
filter: opacity(1);
}
}
@-moz-keyframes slide {
0% {
right: -150px;
filter: opacity(0);
}
100% {
right: 30px;
filter: opacity(1);
}
}
@keyframes slide-out {
0% {
right: 30px;
filter: opacity(1);
}
100% {
right: -150px;
filter: opacity(0);
}
}
@-moz-keyframes slide-out {
0% {
right: 30px;
filter: opacity(1);
}
100% {
right: -150px;
filter: opacity(0);
}
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment