DmitrMakeev
commited on
Commit
•
b654efd
1
Parent(s):
6632feb
Update settings.html
Browse files- settings.html +4 -156
settings.html
CHANGED
@@ -1,163 +1,11 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
-
|
4 |
-
<head>
|
5 |
-
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
6 |
-
<meta content="utf-8" http-equiv="encoding">
|
7 |
-
<style>
|
8 |
-
.button {
|
9 |
-
border: none;
|
10 |
-
color: white;
|
11 |
-
padding: 16px 32px;
|
12 |
-
text-align: center;
|
13 |
-
text-decoration: none;
|
14 |
-
display: inline-block;
|
15 |
-
font-size: 16px;
|
16 |
-
margin: 4px 2px;
|
17 |
-
transition-duration: 0.4s;
|
18 |
-
cursor: pointer;
|
19 |
-
}
|
20 |
-
|
21 |
-
.buttonGreen {
|
22 |
-
background-color: white;
|
23 |
-
color: black;
|
24 |
-
border: 2px solid #4CAF50;
|
25 |
-
}
|
26 |
-
|
27 |
-
.buttonGreen:hover {
|
28 |
-
background-color: #4CAF50;
|
29 |
-
color: white;
|
30 |
-
}
|
31 |
-
</style>
|
32 |
-
</head>
|
33 |
-
|
34 |
<body>
|
35 |
|
36 |
-
|
37 |
-
|
38 |
-
<form>
|
39 |
-
<label for="idInstance">Id Instance:</label><br>
|
40 |
-
<input required type="text" id="idInstance" name="idInstance"><br>
|
41 |
-
<label for="apiTokenIsntance">API Token:</label><br>
|
42 |
-
<input required type="text" id="apiTokenIsntance" name="apiTokenIsntance"><br>
|
43 |
-
</form>
|
44 |
-
|
45 |
-
<p style="color:blue" id="statusText"></p>
|
46 |
-
<p style="color:blue" id="resultText"></p>
|
47 |
-
<p>Press button to get qr code</p>
|
48 |
-
<div style="display:grid; width: 20%">
|
49 |
-
<button id="getQrBtn" class="button buttonGreen">Get QR</button>
|
50 |
-
<button style="display: none" hidden id="logoutQrBtn" class="button buttonGreen">Logout</button>
|
51 |
-
<img hidden id="img-qr-code" alt="QR-Code" class="sb-qr-wizard-qr-code" aria-hidden="false" src="data:image/png;base64,%QR_DATA%" style="">
|
52 |
-
</div>
|
53 |
-
<script type="text/javascript" src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script>
|
54 |
-
<script>
|
55 |
-
document.addEventListener("DOMContentLoaded", function () {
|
56 |
-
var intervalId = null;
|
57 |
-
const qrCodeElement = document.getElementById("img-qr-code");
|
58 |
-
const qrTempalte = qrCodeElement.getAttribute('src');
|
59 |
-
|
60 |
-
document.getElementById("getQrBtn").addEventListener("click", function () {
|
61 |
-
try {
|
62 |
-
if (typeof whatsAppClient === 'undefined') {
|
63 |
-
throw new Error("whatsAppClient is not defined. Make sure the script is loaded correctly.");
|
64 |
-
}
|
65 |
-
isAuthed();
|
66 |
-
clearInterval(intervalId);
|
67 |
-
updateQRCode();
|
68 |
-
intervalId = setInterval(updateQRCode, 5000);
|
69 |
|
70 |
-
|
71 |
-
console.error(reason);
|
72 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
73 |
-
}
|
74 |
-
});
|
75 |
-
|
76 |
-
document.getElementById("logoutQrBtn").addEventListener("click", function () {
|
77 |
-
try {
|
78 |
-
const restAPI = whatsAppClient.restAPI(({
|
79 |
-
idInstance: document.getElementById("idInstance").value,
|
80 |
-
apiTokenInstance: document.getElementById("apiTokenIsntance").value
|
81 |
-
}));
|
82 |
-
|
83 |
-
restAPI.instance.logout()
|
84 |
-
.then((data) => {
|
85 |
-
document.getElementById("resultText").innerHTML = "isLogout=" + data.isLogout;
|
86 |
-
isAuthed();
|
87 |
-
}).catch((reason) => {
|
88 |
-
console.error(reason);
|
89 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
90 |
-
});
|
91 |
-
} catch (reason) {
|
92 |
-
console.error(reason);
|
93 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
94 |
-
}
|
95 |
-
});
|
96 |
-
|
97 |
-
function updateQRCode() {
|
98 |
-
try {
|
99 |
-
if (typeof whatsAppClient === 'undefined') {
|
100 |
-
throw new Error("whatsAppClient is not defined. Make sure the script is loaded correctly.");
|
101 |
-
}
|
102 |
-
const restAPI = whatsAppClient.restAPI(({
|
103 |
-
idInstance: document.getElementById("idInstance").value,
|
104 |
-
apiTokenInstance: document.getElementById("apiTokenIsntance").value
|
105 |
-
}));
|
106 |
-
restAPI.instance.qr()
|
107 |
-
.then((data) => {
|
108 |
-
console.log(data);
|
109 |
-
document.getElementById("resultText").innerHTML = "";
|
110 |
-
if (data.type === 'qrCode') {
|
111 |
-
qrCodeElement.hidden = false;
|
112 |
-
qrCodeElement.setAttribute('src', qrTempalte.replace("%QR_DATA%", data.message));
|
113 |
-
} else {
|
114 |
-
qrCodeElement.hidden = true;
|
115 |
-
clearInterval(intervalId);
|
116 |
-
isAuthed();
|
117 |
-
document.getElementById("resultText").innerHTML = data.message;
|
118 |
-
}
|
119 |
-
}).catch((reason) => {
|
120 |
-
console.error(reason);
|
121 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
122 |
-
});
|
123 |
-
} catch (reason) {
|
124 |
-
console.error(reason);
|
125 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
126 |
-
}
|
127 |
-
}
|
128 |
-
|
129 |
-
function isAuthed() {
|
130 |
-
try {
|
131 |
-
if (typeof whatsAppClient === 'undefined') {
|
132 |
-
throw new Error("whatsAppClient is not defined. Make sure the script is loaded correctly.");
|
133 |
-
}
|
134 |
-
const restAPI = whatsAppClient.restAPI(({
|
135 |
-
idInstance: document.getElementById("idInstance").value,
|
136 |
-
apiTokenInstance: document.getElementById("apiTokenIsntance").value
|
137 |
-
}));
|
138 |
-
restAPI.instance.getStateInstance().then(data => {
|
139 |
-
document.getElementById("statusText").innerHTML = data.stateInstance;
|
140 |
-
|
141 |
-
if (data.stateInstance === 'authorized') {
|
142 |
-
document.getElementById("getQrBtn").style.display = "none";
|
143 |
-
document.getElementById("logoutQrBtn").style.display = "block";
|
144 |
-
} else {
|
145 |
-
document.getElementById("getQrBtn").style.display = "block";
|
146 |
-
document.getElementById("logoutQrBtn").style.display = "none";
|
147 |
-
}
|
148 |
-
|
149 |
-
}).catch((reason) => {
|
150 |
-
console.error(reason);
|
151 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
152 |
-
});
|
153 |
-
} catch (reason) {
|
154 |
-
console.error(reason);
|
155 |
-
document.getElementById("resultText").innerHTML = reason + ". See logs for details";
|
156 |
-
}
|
157 |
-
}
|
158 |
-
});
|
159 |
-
</script>
|
160 |
|
161 |
</body>
|
162 |
-
|
163 |
-
</html>
|
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3 |
<body>
|
4 |
|
5 |
+
<h2>HTML Iframes</h2>
|
6 |
+
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
7 |
|
8 |
+
<iframe src="https://qr.green-api.com/waInstance1101761238/88b54820abd5445894bf547dca2fb2f32ee6e70a29004c18ab" style="height:480px;width:780px" title="Iframe Example"></iframe>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
9 |
|
10 |
</body>
|
11 |
+
</html>
|
|