wa_gc_api / up_gr.html
DmitrMakeev's picture
Update up_gr.html
cec61c0 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Group with Members</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 0;
border-bottom: 2px solid #388E3C;
}
.input-row {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.input-row input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#fileInput {
margin-top: 20px;
}
#createGroupButton {
color: white;
background-color: #4CAF50;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-top: 20px;
}
#createGroupButton:hover {
background-color: #388E3C;
}
.group-id-container {
margin-top: 20px;
}
.group-id {
display: inline-block;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Создание закрытой группы пользователей</h1>
<div class="input-row">
<input type="text" id="apiKeyInput" placeholder="Enter API key">
<input type="text" id="groupNameInput" placeholder="Enter group name">
</div>
<input type="file" id="fileInput" accept=".txt">
<button id="createGroupButton">Добавть группу</button>
<div class="group-id-container">
<span class="group-id" id="groupIdToCopy" onclick="copyToClipboard(this)">После создание группы, кликните что бы скопировать ИД</span>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script>
document.getElementById('createGroupButton').addEventListener('click', async function() {
const apiKey = document.getElementById('apiKeyInput').value;
const groupName = document.getElementById('groupNameInput').value;
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!apiKey || !groupName || !file) {
alert('Please enter an API key, group name, and select a file.');
return;
}
const reader = new FileReader();
reader.onload = async function(event) {
const text = event.target.result;
const chatIds = text.split('\n')
.map(line => line.trim())
.filter(line => line && /^\d+$/.test(line))
.map(line => line + '@c.us');
if (chatIds.length === 0) {
alert('The file must contain valid phone numbers.');
return;
}
const payload = {
groupName: groupName,
chatIds: chatIds
};
console.log('Payload:', payload);
try {
const url = `https://api.green-api.com/waInstance1101952913/createGroup/${apiKey}`;
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
console.log('Response status:', response.status);
if (!response.ok) {
const errorText = await response.text();
console.error('Error response:', errorText);
throw new Error(`HTTP error! status: ${response.status} - ${errorText}`);
}
const data = await response.json();
document.getElementById('groupIdToCopy').innerText = data.chatId;
Toastify({
text: "Группв созданна успешно, пользователи добавленны!",
duration: 3000,
gravity: "top",
position: "right",
backgroundColor: "#96fa9d",
}).showToast();
console.log('Response JSON:', data);
} catch (error) {
Toastify({
text: "Ошибка создания группы!",
duration: 3000,
gravity: "top",
position: "right",
backgroundColor: "#fa0202",
}).showToast();
}
};
reader.readAsText(file);
});
function copyToClipboard(element) {
const tempInput = document.createElement('input');
document.body.appendChild(tempInput);
tempInput.value = element.innerText;
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
Toastify({
text: "ИД группы скопировано, обязательно сохраните его, в последующем вы не сможете его получить!",
duration: 3000,
gravity: "top",
position: "right",
backgroundColor: "#fa8202",
}).showToast();
}
</script>
</body>
</html>