Skip to content

Commit 5514623

Browse files
saulotarsobcsaulotarsobc
committed
Initial commit
0 parents  commit 5514623

File tree

9 files changed

+400
-0
lines changed

9 files changed

+400
-0
lines changed

‎.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# csv_tabela_myzap
2+
Converte um csv com contatos para um tabela. Tambem podemos usar os campos de dados como variáveis.

‎api/processar-csv.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?php
2+
header('content-type:applcation/json');
3+
function csvToJson($tmp_file_name)
4+
{
5+
$csv = array_map('str_getcsv', file($tmp_file_name));
6+
array_walk($csv, function (&$a) use ($csv) {
7+
$a = array_combine($csv[0], $a);
8+
});
9+
return json_encode($csv);
10+
}
11+
$tmp_file_name = $_FILES['file']['tmp_name'];
12+
echo csvToJson($tmp_file_name);

‎index.php

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
10+
</head>
11+
12+
<body>
13+
14+
<div class="container col-md-10 col-sm-12">
15+
16+
<!-- CREDENCIAS DA API -->
17+
<h2>
18+
Envio de Mensagem no Whatsapp usando a API
19+
<a class="text-success" target="_blank" href="https://github.com/billbarsch/myzap">Myzap</a>
20+
</h2>
21+
22+
<h5>Versão 4.0.3</h5>
23+
24+
<hr>
25+
26+
27+
<!-- FORMULARIO DA API -->
28+
<label for="">Credenciais da API:</label>
29+
30+
<div class="row mt-2">
31+
<div class="col-sm-12">
32+
<label for="urlApi">URL:</label>
33+
<input id="urlApi" name="urlApi" class="form-control" type="text">
34+
</div>
35+
36+
<div class="col-6">
37+
<label for="session">Session:</label>
38+
<input id="session" class="form-control" type="password" value="">
39+
</div>
40+
41+
<div class="col-6">
42+
<label for="sessionkey">Session Key:</label>
43+
<input id="sessionkey" class="form-control" type="password" value="">
44+
</div>
45+
46+
<div class="col-12 mt-2">
47+
<input id="testarConexao" class="form-control btn btn-secondary" type="button"
48+
value="Testar conexão com API">
49+
</div>
50+
</div>
51+
52+
<hr>
53+
54+
<!-- FORMULARIO COM CSV -->
55+
<div class="row">
56+
<form class="col" id="form" method="post" enctype="multipart/form-data">
57+
<div class="form-group">
58+
<input required class="form-control custom-file-input" id="file" name="file" type="file"
59+
accept=".csv">
60+
<input class="form-control btn btn-primary mt-2" type="submit" value="Carregar contatos">
61+
</div>
62+
</form>
63+
64+
<hr class="mt-2">
65+
66+
<div class="form-group">
67+
<label for="variaveis">Variaveis que voçê pode usar na mensagem:</label>
68+
<textarea disabled class="form-control" name="variaveis" id="variaveis" rows="3"
69+
placeholder="Listarei as variaveis que voçê pode usar na composição de sua mensagem"></textarea>
70+
71+
</div>
72+
</div>
73+
74+
<hr>
75+
76+
<!-- COMPOR MENSAGEM -->
77+
<div class="row">
78+
<!-- Oi *{{nome}}*, tudo bem? id:{{id}} whatsapp: {{whatsapp}} -->
79+
<div class="mt-2 col-md-6 col-sm-12">
80+
<label class="custom-file-label" for="mensagem">Compor Mensagem:</label>
81+
<textarea class="form-control" name="mensagem" id="mensagem" rows="5"
82+
placeholder="Sem mensagem definida"></textarea>
83+
</div>
84+
85+
<div class="mt-2 col-md-6 col-sm-12">
86+
<label class="custom-file-label" for="mensagemModelo">Modelo baseado no primeiro
87+
contato:</label>
88+
<textarea disabled class="form-control" name="mensagemModelo" id="mensagemModelo" rows="5"
89+
placeholder="Sem mensagem definida"></textarea>
90+
</div>
91+
92+
<div class="col-sm-12">
93+
<button class="col btn btn-success mt-2 form-control " id="enviarMensagens">ENVIAR MENSAGENS</button>
94+
</div>
95+
</div>
96+
97+
<hr>
98+
99+
<!-- TABELA -->
100+
<div class="row m-2">
101+
<h2>Contatos:</h2>
102+
<table class="table table-striped table-light table-hover">
103+
<!-- <table class="table"> -->
104+
<thead>
105+
<tr id="thead">
106+
<th scope="col">ID</th>
107+
<th scope="col">NOME</th>
108+
<th scope="col">WHATSAPP</th>
109+
</tr>
110+
</thead>
111+
<tbody id="tbody">
112+
<tr>
113+
<td>1</td>
114+
<td>Exemplo 1</td>
115+
<td>55999999999</td>
116+
</tr>
117+
<tr>
118+
<td>2</td>
119+
<td>Exemplo 2</td>
120+
<td>55988888888</td>
121+
</tr>
122+
</tbody>
123+
</table>
124+
</div>
125+
</div>
126+
<script src="./node_modules/jquery/dist/jquery.js"></script>
127+
<script src="./js/app.js"></script>
128+
</body>
129+
130+
</html>

‎js/app.js

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
let form = document.querySelector("#form");
2+
let contatos = "";
3+
let variaveis = "";
4+
5+
$("#form").on("submit", function (event) {
6+
event.preventDefault();
7+
processarTabela();
8+
});
9+
10+
$("#mensagem").on("input", function () {
11+
criarModelo();
12+
});
13+
14+
function processarTabela() {
15+
$("#thead").html("");
16+
$("#tbody").html("");
17+
$("#variaveis").html("");
18+
variaveis = [];
19+
$.ajax({
20+
url: "./api/processar-csv.php",
21+
method: "POST",
22+
data: new FormData(form),
23+
dataType: "json",
24+
contentType: false,
25+
cache: false,
26+
processData: false,
27+
success: function (data) {
28+
let tableHeader = data[0];
29+
for (let i in tableHeader) {
30+
$("#thead").append(`<th scope="col">${i.toUpperCase()}</th>`);
31+
let variavel = "{{" + i + "}}";
32+
variaveis.push(variavel);
33+
$("#variaveis").append(` ${variavel}`);
34+
};
35+
$("#thead").append(`<th scope="col" colspan="2">STATUS DE ENVIO</th>`);
36+
data.shift();
37+
contatos = data;
38+
data.forEach(element => {
39+
let row = "<tr>";
40+
for (let i in element) {
41+
row += `<td>${element[i]}</td>`;
42+
}
43+
if (element["id"]) {
44+
row += `<td colspan="2" ><input disabled class="form-control style="background-color:yellow;width:100%" type="text" name="${element["id"]}" id="${element["id"]}" value="Não enviado"></td>`;
45+
} else {
46+
row += `<td>Sem identificador único </td>`;
47+
}
48+
row += "</tr>";
49+
$("#tbody").append(row);
50+
});
51+
},
52+
});
53+
};
54+
55+
function criarModelo() {
56+
let mensagemModelo = comporMensagem(contatos[0]);
57+
$("#mensagemModelo").html(mensagemModelo);
58+
// console.log(mensagemModelo);
59+
};
60+
61+
$("#enviarMensagens").on("click", function () {
62+
console.warn("enviarMensagens")
63+
contatos.forEach(contato => {
64+
const options = {
65+
method: "POST",
66+
headers: {
67+
"Content-Type": "application/json",
68+
"sessionkey": $("#sessionkey").val(),
69+
},
70+
body: JSON.stringify({
71+
"session": $("#session").val(),
72+
"number": contato["whatsapp"],
73+
"text": comporMensagem(contato),
74+
})
75+
};
76+
fetch($("#urlApi").val() + "/sendText", options)
77+
.then(res => {
78+
return res;
79+
}).then(function (res) {
80+
return (res.json())
81+
}).then(function (res) {
82+
console.log(res);
83+
if (res['result'] == 200) {
84+
$("#" + contato["id"]).val("Enviado").css("background-color", "#70da70"); // sucesso
85+
} else {
86+
if (res["error"]) {
87+
$("#" + contato["id"]).val(res["error"]).css("background-color", "#f49090"); // falha
88+
} else {
89+
$("#" + contato["id"]).val("Falha ao enviar").css("background-color", "#f49090"); // falha
90+
}
91+
if (res["status"] == "error") {
92+
if (res["message"]) {
93+
$("#" + contato["id"]).val(res["message"]).css("background-color", "#f49090"); // falha
94+
}
95+
}
96+
}
97+
98+
if (res['result'] == 401) {
99+
if (res["messages"]) {
100+
$("#" + contato["id"]).val(res["messages"]).css("background-color", "#f49090"); // falha
101+
}
102+
}
103+
})
104+
.catch(err => {
105+
// console.error(err);
106+
});
107+
});
108+
});
109+
110+
$("#testarConexao").on("click", () => {
111+
const form = new FormData();
112+
form.append("session", $("#session").val());
113+
form.append("number", "559392135722");
114+
115+
const options = {
116+
method: 'POST',
117+
headers: {
118+
'sessionkey': $("#sessionkey").val(),
119+
}
120+
};
121+
122+
options.body = form;
123+
124+
fetch($("#urlApi").val() + "/verifyNumber", options)
125+
.then(res => {
126+
console.warn(JSON.stringify(res));
127+
if (res.status == 200) {
128+
$("#testarConexao").removeClass("btn-danger");
129+
$("#testarConexao").removeClass("btn-secondary");
130+
$("#testarConexao").addClass("btn-success");
131+
}
132+
if (res.status != 200) {
133+
$("#testarConexao").removeClass("btn-secondary");
134+
$("#testarConexao").removeClass("btn-success");
135+
$("#testarConexao").addClass("btn-danger");
136+
}
137+
return res.json();
138+
}).then(json => {
139+
console.log(json);
140+
$("#testarConexao").val(json['messages'])
141+
if(json.error){
142+
$("#testarConexao").removeClass("btn-secondary");
143+
$("#testarConexao").removeClass("btn-success");
144+
$("#testarConexao").addClass("btn-danger");
145+
$("#testarConexao").val(json.error);
146+
}
147+
})
148+
.catch(err => {
149+
$("#testarConexao").val("Falha! Verifique URL").removeClass("btn-secondary").addClass("btn-danger")
150+
console.error(err)
151+
});
152+
});
153+
154+
function comporMensagem(contato) {
155+
let messagem = $("#mensagem").val();
156+
if (typeof (contatos) != "string") {
157+
variaveis.forEach(variavel => {
158+
let variavelLimpa = (variavel.replace(/\{|\}/g, ""));
159+
messagem = messagem.replace(variavel, contato[variavelLimpa])
160+
});
161+
}
162+
return messagem;
163+
};

‎package-lock.json

Lines changed: 69 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)