mirror of
https://github.com/cheveguerra/botLeiferAurik-Mod_2.0.git
synced 2026-04-18 03:39:16 +00:00
357 lines
15 KiB
HTML
357 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Whatsapp API by Ngekoding</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- This parts is optional, just for improve the styles -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
padding: 20px;
|
|
}
|
|
|
|
#app {
|
|
max-width: 500px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
#qrcode {
|
|
/* display: none; */
|
|
/* Showed when qr code received */
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
border: 1px solid #efefef;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
ul.logs {
|
|
max-height: 150px;
|
|
padding: 15px 15px 15px 30px;
|
|
margin-top: 5px;
|
|
border-radius: 4px;
|
|
overflow-y: auto;
|
|
background: #efefef;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
ul.logs li:first-child {
|
|
color: green;
|
|
font-weight: bold;
|
|
}
|
|
::placeholder {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
<div style="text-align:center;">
|
|
<h1>Whatsapp API</h1>
|
|
<br><br>
|
|
<div id="divQRPage" style="display:none;"></div>
|
|
<div id="countdown" style="margin-top:-25px"></div>
|
|
<div id="postman" style="display:flex;justify-content:center;">
|
|
<div>
|
|
<select id="tipoMensaje">
|
|
<option>Mensaje</option>
|
|
<option>Imagen</option>
|
|
<option>Botones</option>
|
|
</select>
|
|
</div>
|
|
<div id="postMsg">
|
|
<table>
|
|
<tr>
|
|
<td>Número:</td>
|
|
<td><input type="text" id="number" value="5215554192439"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mensaje:</td>
|
|
<td><input type="text" id="message" value="test1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td align="center"><input type="button" id="btnMessage" value="Enviar Mensaje"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="postBtn" style="display:none;">
|
|
<table>
|
|
<tr>
|
|
<td>Número:</td>
|
|
<td><input type="text" id="btnnumber" value="5215554192439"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Titulo:</td>
|
|
<td><input type="text" id="btntitle" placeholder="El título"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Mensaje:</td>
|
|
<td><input type="text" id="btnmsg" placeholder="El mensaje"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Boton 1:</td>
|
|
<td><input type="text" id="btn1" placeholder="Texto del botón 1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Boton 2:</td>
|
|
<td><input type="text" id="btn2" placeholder="Texto del botón 1"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Boton 3:</td>
|
|
<td><input type="text" id="btn3" placeholder="Texto del botón 1"></td>
|
|
</tr> <tr>
|
|
<td>Footer:</td>
|
|
<td><input type="text" id="btnfooter" placeholder="Texto del footer"></td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td align="center"><input type="button" id="btnBtn" value="Enviar Botones"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="postImg">
|
|
<table>
|
|
<form action="/send-image" method="POST" id="imgForm" enctype="multipart/form-data">
|
|
<tr>
|
|
<td>Número:</td>
|
|
<td><input type="text" id="imgnumber" value="5215554192439" style="width:160px;"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Imagen:</td>
|
|
<td><input type="file" id="imgimage" name="imgimage" style="width:160px;" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Texto:</td>
|
|
<td><input type="text" id="imgcaption" placeholder="El texto aquí" style="width:160px;"></td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td align="center"><input type="button" id="btnImg" value="Enviar Mensaje"></td>
|
|
</tr>
|
|
</form>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <input type="button" id="chkConn" value="QR"> -->
|
|
<br>
|
|
<h3>Logs:</h3>
|
|
<ul class="logs"></ul>
|
|
</div>
|
|
<div id="div_wa_msg" style="display: none;"></div>
|
|
|
|
|
|
<!-- <form action="/send-image" method="POST" enctype="multipart/form-data">
|
|
<input type="text" name="number" value="5215554192439"><br>
|
|
<input type="text" name="caption" placeholder="El texto de la imagen"><br>
|
|
<input type="file" name="image" />
|
|
<button type="submit">Upload</button>
|
|
</form> -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
|
|
<script src="/socket.io/socket.io.js" crossorigin="anonymous"></script>
|
|
<script>
|
|
let downloadTimer;
|
|
let IntervaloABorrar
|
|
let waReady = false
|
|
let IOSTATUS = "NONE"
|
|
$(document).ready( function(){
|
|
$("#postBtn").hide(); $("#postImg").hide();
|
|
if (waReady == false && IOSTATUS == "wa_ready") { $("#btnMessage").attr("disabled", true); $("#btnBtn").attr("disabled", true); }
|
|
var socket = io();
|
|
socket.on('ioStatus', function ( msg ){
|
|
IOSTATUS = msg;
|
|
console.log("IOSTATUS="+msg);
|
|
console.log("XXXXXXXXXXXXX " + IOSTATUS)
|
|
if(msg == 'wa_msg') { IOSTATUS = "wa_ready" }
|
|
if (IOSTATUS == 'wa_ready') { $("#postman").show(); $("#divQRPage").hide() }
|
|
else if (IOSTATUS == 'wa_qr') { $("#divQRPage").show(); loadQR(); $("#postman").hide(); console.log("mostramos QRPage") }
|
|
else { $("#divQRPage").hide(); $("#postman").hide(); }
|
|
})
|
|
socket.on('wa_msg', function( msg ){
|
|
$("#div_wa_msg").fadeIn()
|
|
$("#div_wa_msg").html(msg)
|
|
setTimeout(() => {
|
|
$("#div_wa_msg").fadeOut("slow")
|
|
}, 1500);
|
|
})
|
|
socket.on('imgOk', function (msg) {
|
|
alert("¡Imagen mandada con exito!")
|
|
})
|
|
socket.on('message', function (msg) {
|
|
$('.logs').prepend($('<li>').text(msg));
|
|
console.log("|" + msg + "|");
|
|
console.log("MENSAJES = " + $(".logs li").length)
|
|
if($(".logs li").length >= 15){ $('.logs li').last().remove(); }
|
|
if (msg == 'Conectando...' && IOSTATUS == "wa_ready") { $('#divQRPage').hide(); $('#postman').show(); waReady = false, $("#btnMessage").attr("disabled", true); $("#btnBtn").attr("disabled", true); }
|
|
// if (msg == 'Whatsapp esta listo!') { $("#btnMessage").attr("disabled", false); $("#btnBtn").attr("disabled", false); }
|
|
})
|
|
socket.on('qr', function (src) {
|
|
var extra = Date.now();
|
|
console.log(extra)
|
|
loadQR()
|
|
// $('#qrcode').attr('src', src + '?' + extra);
|
|
$('#postman').hide();
|
|
$('#divQRPage').show();
|
|
waReady = false;
|
|
$("#btnMessage").attr("disabled", true);
|
|
$("#btnBtn").attr("disabled", true);
|
|
startImer()
|
|
})
|
|
socket.on('ready', function (data) {
|
|
$("#divQRPage").hide();
|
|
$('#postman').show();
|
|
$("#btnMessage").attr("disabled", false);
|
|
$("#btnBtn").attr("disabled", false);
|
|
clearInterval(IntervaloABorrar);
|
|
})
|
|
socket.on('authenticated', function (data) {
|
|
$('#divQRPage').hide();
|
|
$('#postman').show();
|
|
})
|
|
socket.on("connect_error", (err) => {
|
|
$("#btnMessage").attr("disabled", true);
|
|
$("#btnBtn").attr("disabled", true);
|
|
$('.logs').prepend($('<li>').text("¡Error de conexión!"));
|
|
if ($(".logs li").length >= 15) { $('.logs li').last().remove(); }
|
|
console.log("MENSAJES = " + $(".logs li").length)
|
|
waReady = false
|
|
console.log(`connect_error due to ${err.message}`);
|
|
})
|
|
socket.on('incomming', function () {
|
|
if (waReady == false) {
|
|
$('.logs').prepend($('<li>').text('Whatsapp está listo!'));
|
|
if ($(".logs li").length >= 15) { $('.logs li').last().remove(); }
|
|
console.log("MENSAJES = " + $(".logs li").length)
|
|
console.log("incomming")
|
|
$("#btnMessage").attr("disabled", false);
|
|
$("#btnBtn").attr("disabled", false);
|
|
waReady = true
|
|
}
|
|
})
|
|
socket.on('connOk', function () {
|
|
console.log("connOk")
|
|
if (waReady == false && IOSTATUS == "wa_ready") {
|
|
$('.logs').prepend($('<li>').text('Whatsapp está listo!'));
|
|
if ($(".logs li").length >= 15) { $('.logs li').last().remove(); }
|
|
console.log("MENSAJES = " + $(".logs li").length)
|
|
console.log("incomming")
|
|
$("#btnMessage").attr("disabled", false);
|
|
$("#btnBtn").attr("disabled", false);
|
|
waReady = true
|
|
}
|
|
})
|
|
$("#chkConn").on('click', async function () {
|
|
// console.log("check Conn");
|
|
// socket.emit('checkConn', 'check conn');
|
|
loadQR()
|
|
})
|
|
function revisaConexion() {
|
|
var checkConnection = setInterval(function () {
|
|
if (waReady == false) {
|
|
socket.emit('checkConn', 'check conn');
|
|
console.log("chk conn")
|
|
IntervaloABorrar = checkConnection
|
|
clearInterval(IntervaloABorrar)
|
|
console.log("borrado " + IntervaloABorrar)
|
|
}
|
|
}, 2000);
|
|
}
|
|
revisaConexion();
|
|
function loadQR(){
|
|
$('#divQRPage').load("qr.html");
|
|
console.log("Load QR page!")
|
|
}
|
|
function startImer() {
|
|
clearInterval(IntervaloABorrar);
|
|
var timeleft = 60;
|
|
console.log(typeof downloadTimer)
|
|
var downloadTimer = setInterval(function () {
|
|
if (timeleft <= 0) {
|
|
IntervaloABorrar = downloadTimer
|
|
clearInterval(IntervaloABorrar);
|
|
document.getElementById("countdown").innerHTML = "Finished";
|
|
// startImer();
|
|
} else {
|
|
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
|
|
}
|
|
console.log(typeof downloadTimer + "|" + downloadTimer)
|
|
IntervaloABorrar = downloadTimer
|
|
timeleft -= 1;
|
|
}, 1000);
|
|
}
|
|
$('#btnMessage').on('click', function () {
|
|
console.log("msg clicked")
|
|
$.post("http://localhost:3005/send-message/", { "number": $("#number").val(), "message": $("#message").val() })
|
|
.done(function (data) {
|
|
console.log(data.status);
|
|
if (data.status == true) { alert("¡Mensaje enviado!") }
|
|
});
|
|
})
|
|
$('#btnBtn').on('click', function () {
|
|
console.log("btn clicked")
|
|
if($("#btnnumber").val() != "" && $("#btnmsg").val() != "" && $("#btn1").val() != ""){
|
|
let data = {}
|
|
data.number = $("#btnnumber").val()
|
|
data.title = $("#btntitle").val()
|
|
data.btnmsg = $("#btnmsg").val()
|
|
if($("#btn1").val() != "") {data.btn1 = $("#btn1").val()}
|
|
if ($("#btn2").val() != "") {data.btn2 = $("#btn2").val()}
|
|
if ($("#btn3").val() != "") {data.btn3 = $("#btn3").val()}
|
|
if ($("#btnfooter").val() != "") {data.footer = $("#btnfooter").val()}
|
|
$.post("http://localhost:3005/send-buttons/", data)
|
|
.done(function (data) {
|
|
console.log(data.status);
|
|
if (data.status == true) { alert("¡Mensaje enviado!") }
|
|
});
|
|
}
|
|
else{alert("Es necesario llenar por lo menos el número, mensaje y boton1.")}
|
|
})
|
|
|
|
$("#btnImg").click(function () {
|
|
var fd = new FormData();
|
|
console.log("IMAGEN=" + $('#imgimage')[0]?.files[0])
|
|
var files = $('#imgimage')[0].files[0];
|
|
fd.append('image', files);
|
|
fd.append('number', $("#imgnumber").val())
|
|
fd.append('caption', $("#imgcaption").val())
|
|
$.ajax({
|
|
url: 'http://localhost:3005/send-image/',
|
|
type: 'POST',
|
|
data: fd,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (response) {
|
|
if (response != 0) {
|
|
// alert('file uploaded');
|
|
}
|
|
else {
|
|
alert('file not uploaded');
|
|
}
|
|
},
|
|
});
|
|
});
|
|
|
|
$("#tipoMensaje").change(function () {
|
|
let sel = $("select option:selected").val()
|
|
console.log(sel)
|
|
if(sel == 'Mensaje'){ $("#postMsg").show(); $("#postBtn").hide(); $("#postImg").hide(); }
|
|
else if(sel == 'Imagen') { $("#postMsg").hide(); $("#postBtn").hide(); $("#postImg").show(); }
|
|
else if (sel == 'Botones') { $("#postMsg").hide(); $("#postBtn").show(); $("#postImg").hide(); }
|
|
})
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |