@ -27,6 +27,15 @@
< div class = "ui container" id = "app" > < div class = "ui container" id = "app" >
< h1 class = "ui header center aligned" > [[ app_name ]]< / h1 > < h1 class = "ui header center aligned" > [[ app_name ]]< / h1 >
< div class = "ui success message" v-if = "connected_devices != null" >
< div class = "header" >
Device is connected
< / div >
< p >
Device ID: < b > [[ connected_devices[0].device ]]< / b >
< / p >
< / div >
< div class = "ui horizontal divider" > < div class = "ui horizontal divider" >
App App
< / div > < / div >
@ -60,22 +69,22 @@
< / div > < / div >
< div class = "ui horizontal divider" > < div class = "ui horizontal divider" >
Send Private Message
Message
< / div > < / div >
< div class = "ui three column doubling grid cards" > < div class = "ui three column doubling grid cards" >
< div class = "green card" @ click = "sendMessageModal('user' )" style = "cursor: pointer" >
< div class = "blue card" @ click = "sendMessageModal()" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< a class = "ui blue right ribbon label" > Private < / a >
< a class = "ui blue right ribbon label" > Send < / a >
< div class = "header" > Send Message< / div > < div class = "header" > Send Message< / div >
< div class = "description" > < div class = "description" >
Send any message to any whatsapp number Send any message to any whatsapp number
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "green card" @ click = "sendImageModal('user' )" style = "cursor:pointer;" >
< div class = "blue card" @ click = "sendImageModal()" style = "cursor:pointer;" >
< div class = "content" > < div class = "content" >
< a class = "ui blue right ribbon label" > Private < / a >
< a class = "ui blue right ribbon label" > Send < / a >
< div class = "header" > Send Image< / div > < div class = "header" > Send Image< / div >
< div class = "description" > < div class = "description" >
Send image with Send image with
@ -84,9 +93,9 @@
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "green card" @ click = "sendFileModal('user' )" style = "cursor: pointer" >
< div class = "blue card" @ click = "sendFileModal()" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< a class = "ui blue right ribbon label" > Private < / a >
< a class = "ui blue right ribbon label" > Send < / a >
< div class = "header" > Send File< / div > < div class = "header" > Send File< / div >
< div class = "description" > < div class = "description" >
Send any file up to Send any file up to
@ -94,9 +103,9 @@
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "green card" @ click = "sendVideoModal('user' )" style = "cursor: pointer" >
< div class = "blue card" @ click = "sendVideoModal()" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< a class = "ui blue right ribbon label" > Private < / a >
< a class = "ui blue right ribbon label" > Send < / a >
< div class = "header" > Send Video< / div > < div class = "header" > Send Video< / div >
< div class = "description" > < div class = "description" >
Send video Send video
@ -106,99 +115,50 @@
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "green card" @ click = "sendContactModal('user' )" style = "cursor: pointer" >
< div class = "blue card" @ click = "sendContactModal()" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< a class = "ui blue right ribbon label" > Private < / a >
< a class = "ui blue right ribbon label" > Send < / a >
< div class = "header" > Send Contact< / div > < div class = "header" > Send Contact< / div >
< div class = "description" > < div class = "description" >
Send contact to any whatsapp number Send contact to any whatsapp number
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div >
< div class = "ui horizontal divider" >
Send Group Message
< / div >
< div class = "ui three column doubling grid cards" >
< div class = "green card" @ click = "sendMessageModal('group')" style = "cursor: pointer" >
< div class = "red card" @ click = "sendRevokeModal()" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< a class = "ui teal right ribbon label" > Group < / a >
< div class = "header" > Send Message< / div >
< a class = "ui red right ribbon label" > Revoke< / a >
< div class = "header" > Revoke Message< / div >
< div class = "description" > < div class = "description" >
Send any message to any whatsapp number
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendImageModal('group')" style = "cursor:pointer;" >
< div class = "content" >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send Image< / div >
< div class = "description" >
Send image with
< div class = "ui teal horizontal label" > jpg/jpeg/png< / div >
type
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendFileModal('group')" style = "cursor: pointer" >
< div class = "content" >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send File< / div >
< div class = "description" >
Send any file up to
< div class = "ui teal horizontal label" > {{ .MaxFileSize }}< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendVideoModal('group')" style = "cursor: pointer" >
< div class = "content" >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send Video< / div >
< div class = "description" >
Send video
< div class = "ui teal horizontal label" > mp4< / div >
up to
< div class = "ui teal horizontal label" > {{ .MaxVideoSize }}< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendContactModal('group')" style = "cursor: pointer" >
< div class = "content" >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send Contact< / div >
< div class = "description" >
Send contact to any whatsapp number
Revoke any message in private or group chat
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "ui horizontal divider" > < div class = "ui horizontal divider" >
User
Account
< / div > < / div >
< div class = "ui four column doubling grid cards" > < div class = "ui four column doubling grid cards" >
< div class = "green card" @ click = "info Modal" style = "cursor: pointer;" >
< div class = "green card" @ click = "avatarModal" style = "cursor: pointer;" >
< div class = "content" > < div class = "content" >
< div class = "header" > User Info < / div >
< div class = "header" > Avatar< / div >
< div class = "description" > < div class = "description" >
You can search someone user info by phone
You can search someone avatar by phone
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "green card" @ click = "avatar Modal" style = "cursor: pointer;" >
< div class = "green card" @ click = "infoModal" style = "cursor: pointer;" >
< div class = "content" > < div class = "content" >
< div class = "header" > User Avatar < / div >
< div class = "header" > User Info< / div >
< div class = "description" > < div class = "description" >
You can search someone avatar by phone
You can search someone user info by phone
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div class = "green card" @ click = "groupModal" style = "cursor: pointer" > < div class = "green card" @ click = "groupModal" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< div class = "header" > User List Groups< / div >
< div class = "header" > My List Groups< / div >
< div class = "description" > < div class = "description" >
Display all groups you joined Display all groups you joined
< / div > < / div >
@ -206,7 +166,7 @@
< / div > < / div >
< div class = "green card" @ click = "privacyModal" style = "cursor: pointer" > < div class = "green card" @ click = "privacyModal" style = "cursor: pointer" >
< div class = "content" > < div class = "content" >
< div class = "header" > User Privacy Setting< / div >
< div class = "header" > My Privacy Setting< / div >
< div class = "description" > < div class = "description" >
Get your privacy settings Get your privacy settings
< / div > < / div >
@ -249,10 +209,18 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "message_type" v-model = "message_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone / Group ID< / label > < label > Phone / Group ID< / label >
< input v-model = "message_phone" type = "text" placeholder = "6289..." < input v-model = "message_phone" type = "text" placeholder = "6289..."
aria-label="phone"> aria-label="phone">
< input :value = "message_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< div class = "field" > < div class = "field" >
< label > Message< / label > < label > Message< / label >
@ -262,7 +230,8 @@
< / form > < / form >
< / div > < / div >
< div class = "actions" > < div class = "actions" >
< div class = "ui positive right labeled icon button" @ click = "sendMessageProcess" >
< div class = "ui approve positive right labeled icon button" :class = "{'loading': this.message_loading}"
@click="sendMessageProcess">
Send Send
< i class = "send icon" > < / i > < i class = "send icon" > < / i >
< / div > < / div >
@ -277,10 +246,18 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "image_type" v-model = "image_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone / Group ID< / label > < label > Phone / Group ID< / label >
< input v-model = "image_phone" type = "text" placeholder = "6289..." < input v-model = "image_phone" type = "text" placeholder = "6289..."
aria-label="phone"> aria-label="phone">
< input :value = "image_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< div class = "field" > < div class = "field" >
< label > Caption< / label > < label > Caption< / label >
@ -313,7 +290,8 @@
< / form > < / form >
< / div > < / div >
< div class = "actions" > < div class = "actions" >
< div class = "ui positive right labeled icon button" @ click = "sendImageProcess" >
< div class = "ui approve positive right labeled icon button" :class = "{'loading': this.image_loading}"
@click="sendImageProcess">
Send Send
< i class = "send icon" > < / i > < i class = "send icon" > < / i >
< / div > < / div >
@ -328,10 +306,18 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "file_type" v-model = "file_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone / Group ID< / label > < label > Phone / Group ID< / label >
< input v-model = "file_phone" type = "text" placeholder = "6289..." < input v-model = "file_phone" type = "text" placeholder = "6289..."
aria-label="phone"> aria-label="phone">
< input :value = "file_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< div class = "field" > < div class = "field" >
< label > Caption< / label > < label > Caption< / label >
@ -349,14 +335,15 @@
< / form > < / form >
< / div > < / div >
< div class = "actions" > < div class = "actions" >
< div class = "ui positive right labeled icon button" @ click = "sendFileProcess" >
< div class = "ui approve positive right labeled icon button" :class = "{'loading': this.file_loading}"
@click="sendFileProcess">
Send Send
< i class = "send icon" > < / i > < i class = "send icon" > < / i >
< / div > < / div >
< / div > < / div >
< / div > < / div >
<!-- Modal SendFile -->
<!-- Modal SendVideo -->
< div class = "ui small modal" id = "modalSendVideo" > < div class = "ui small modal" id = "modalSendVideo" >
< i class = "close icon" > < / i > < i class = "close icon" > < / i >
< div class = "header" > < div class = "header" >
@ -364,6 +351,13 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "video_type" v-model = "video_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone / Group ID< / label > < label > Phone / Group ID< / label >
< input v-model = "video_phone" type = "text" placeholder = "6289..." < input v-model = "video_phone" type = "text" placeholder = "6289..."
@ -373,6 +367,7 @@
< label > Caption< / label > < label > Caption< / label >
< input v-model = "video_caption" type = "text" placeholder = "Type some caption (optional)..." < input v-model = "video_caption" type = "text" placeholder = "Type some caption (optional)..."
aria-label="caption"> aria-label="caption">
< input :value = "video_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< div class = "field" > < div class = "field" >
< label > View Once< / label > < label > View Once< / label >
@ -399,7 +394,8 @@
< / form > < / form >
< / div > < / div >
< div class = "actions" > < div class = "actions" >
< div class = "ui positive right labeled icon button" @ click = "sendVideoProcess" >
< div class = "ui approve positive right labeled icon button" :class = "{'loading': this.video_loading}"
@click="sendVideoProcess">
Send Send
< i class = "send icon" > < / i > < i class = "send icon" > < / i >
< / div > < / div >
@ -414,10 +410,18 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "contact_type" v-model = "contact_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone / Group ID< / label > < label > Phone / Group ID< / label >
< input v-model = "contact_phone" type = "text" placeholder = "6289..." < input v-model = "contact_phone" type = "text" placeholder = "6289..."
aria-label="phone"> aria-label="phone">
< input :value = "contact_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< div class = "field" > < div class = "field" >
< label > Contact Name< / label > < label > Contact Name< / label >
@ -432,7 +436,45 @@
< / form > < / form >
< / div > < / div >
< div class = "actions" > < div class = "actions" >
< div class = "ui positive right labeled icon button" @ click = "sendContactProcess" >
< div class = "ui approve positive right labeled icon button" :class = "{'loading': this.contact_loading}"
@click="sendContactProcess">
Send
< i class = "send icon" > < / i >
< / div >
< / div >
< / div >
<!-- Modal SendRevoke -->
< div class = "ui small modal" id = "modalSendRevoke" >
< i class = "close icon" > < / i >
< div class = "header" >
Send Revoke
< / div >
< div class = "content" >
< form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "revoke_type" v-model = "revoke_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" >
< label > Phone / Group ID< / label >
< input v-model = "revoke_phone" type = "text" placeholder = "6289..."
aria-label="phone">
< input :value = "revoke_phone_id" disabled aria-label = "whatsapp_id" >
< / div >
< div class = "field" >
< label > Revoke Message ID< / label >
< input v-model = "revoke_message_id" type = "text" placeholder = "Please enter your message id"
aria-label="card_phone">
< / div >
< / form >
< / div >
< div class = "actions" >
< div class = "ui approve positive right labeled icon button" :class = "{'loading': this.revoke_loading}"
@click="sendRevokeProcess">
Send Send
< i class = "send icon" > < / i > < i class = "send icon" > < / i >
< / div > < / div >
@ -492,10 +534,18 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "avatar_type" v-model = "avatar_type" aria-label = "type" >
< option value = "group" > Group Message< / option >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone< / label > < label > Phone< / label >
< input v-model = "avatar_phone" type = "text" placeholder = "6289..." < input v-model = "avatar_phone" type = "text" placeholder = "6289..."
aria-label="phone"> aria-label="phone">
< input :value = "avatar_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< button type = "button" class = "ui primary button" :class = "{'loading': avatar_loading}" < button type = "button" class = "ui primary button" :class = "{'loading': avatar_loading}"
@ -505,7 +555,7 @@
< / form > < / form >
< div v-if = "avatar_image != null" class = "center" > < div v-if = "avatar_image != null" class = "center" >
< img :src = "avatar_image" alt = "profile picture" style = "padding-top: 10px;" >
< img :src = "avatar_image" alt = "profile picture" style = "padding-top: 10px; max-height: 200px " >
< / div > < / div >
< / div > < / div >
< / div > < / div >
@ -518,10 +568,17 @@
< / div > < / div >
< div class = "content" > < div class = "content" >
< form class = "ui form" > < form class = "ui form" >
< div class = "field" >
< label > Type< / label >
< select name = "info_type" v-model = "info_type" aria-label = "type" >
< option value = "user" > Private Message< / option >
< / select >
< / div >
< div class = "field" > < div class = "field" >
< label > Phone< / label > < label > Phone< / label >
< input v-model = "info_phone" type = "text" placeholder = "6289..." < input v-model = "info_phone" type = "text" placeholder = "6289..."
aria-label="phone"> aria-label="phone">
< input :value = "info_phone_id" disabled aria-label = "whatsapp_id" >
< / div > < / div >
< button type = "button" class = "ui primary button" :class = "{'loading': info_loading}" < button type = "button" class = "ui primary button" :class = "{'loading': info_loading}"
@ -620,6 +677,9 @@
try { try {
await this.logoutApi() await this.logoutApi()
showSuccessInfo("Logout success") showSuccessInfo("Logout success")
// fetch devices
this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} }
@ -648,6 +708,8 @@
try { try {
await this.reconnectApi() await this.reconnectApi()
showSuccessInfo("Reconnect success") showSuccessInfo("Reconnect success")
// fetch devices
this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} }
@ -676,17 +738,27 @@
message_type: 'user', message_type: 'user',
message_phone: '', message_phone: '',
message_text: '', message_text: '',
message_loading: false,
}
},
computed: {
message_phone_id() {
return this.message_type === 'user' ? `${this.message_phone}@${this.type_user}` : `${this.message_phone}@${this.type_group}`
} }
}, },
methods: { methods: {
sendMessageModal(type) {
this.message_type = type
$('#modalSendMessage').modal('show');
sendMessageModal() {
$('#modalSendMessage').modal({
onApprove: function () {
return false;
}
}).modal('show');
}, },
async sendMessageProcess() { async sendMessageProcess() {
try { try {
let response = await this.sendMessageApi() let response = await this.sendMessageApi()
showSuccessInfo(response) showSuccessInfo(response)
$('#modalSendMessage').modal('hide');
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} }
@ -694,10 +766,10 @@
sendMessageApi() { sendMessageApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
this.message_loading = true;
let payload = new FormData(); let payload = new FormData();
payload.append("phone", this.message_phone)
payload.append("phone", this.message_phone_id )
payload.append("message", this.message_text) payload.append("message", this.message_text)
payload.append("type", this.message_type)
let response = await http.post(`/send/message`, payload) let response = await http.post(`/send/message`, payload)
this.sendMessageReset(); this.sendMessageReset();
resolve(response.data.message) resolve(response.data.message)
@ -707,6 +779,8 @@
} else { } else {
reject(error.message) reject(error.message)
} }
} finally {
this.message_loading = false;
} }
}) })
}, },
@ -726,17 +800,27 @@
image_compress: false, image_compress: false,
image_caption: '', image_caption: '',
image_type: 'user', image_type: 'user',
image_loading: false,
}
},
computed: {
image_phone_id() {
return this.image_type === 'user' ? `${this.image_phone}@${this.type_user}` : `${this.image_phone}@${this.type_group}`
} }
}, },
methods: { methods: {
sendImageModal(type) {
this.image_type = type
$('#modalSendImage').modal('show');
sendImageModal() {
$('#modalSendImage').modal({
onApprove: function () {
return false;
}
}).modal('show');
}, },
async sendImageProcess() { async sendImageProcess() {
try { try {
let response = await this.sendImageApi() let response = await this.sendImageApi()
showSuccessInfo(response) showSuccessInfo(response)
$('#modalSendImage').modal('hide');
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} }
@ -744,13 +828,13 @@
sendImageApi() { sendImageApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
this.image_loading = true;
let payload = new FormData(); let payload = new FormData();
payload.append("phone", this.image_phone)
payload.append("phone", this.image_phone_id )
payload.append("view_once", this.image_view_once) payload.append("view_once", this.image_view_once)
payload.append("compress", this.image_compress) payload.append("compress", this.image_compress)
payload.append("caption", this.image_caption) payload.append("caption", this.image_caption)
payload.append("image", $("#image_file")[0].files[0]) payload.append("image", $("#image_file")[0].files[0])
payload.append("type", this.image_type)
let response = await http.post(`/send/image`, payload) let response = await http.post(`/send/image`, payload)
this.sendImageReset(); this.sendImageReset();
resolve(response.data.message) resolve(response.data.message)
@ -760,6 +844,8 @@
} else { } else {
reject(error.message) reject(error.message)
} }
} finally {
this.image_loading = false;
} }
}) })
}, },
@ -780,17 +866,27 @@
file_caption: '', file_caption: '',
file_type: 'user', file_type: 'user',
file_phone: '', file_phone: '',
file_loading: false,
}
},
computed: {
file_phone_id() {
return this.file_type === 'user' ? `${this.file_phone}@${this.type_user}` : `${this.file_phone}@${this.type_group}`
} }
}, },
methods: { methods: {
sendFileModal(type) {
this.file_type = type
$('#modalSendFile').modal('show');
sendFileModal() {
$('#modalSendFile').modal({
onApprove: function () {
return false;
}
}).modal('show');
}, },
async sendFileProcess() { async sendFileProcess() {
try { try {
let response = await this.sendFileApi() let response = await this.sendFileApi()
showSuccessInfo(response) showSuccessInfo(response)
$('#modalSendFile').modal('hide');
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} }
@ -798,11 +894,11 @@
sendFileApi() { sendFileApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
this.file_loading = true;
let payload = new FormData(); let payload = new FormData();
payload.append("caption", this.file_caption) payload.append("caption", this.file_caption)
payload.append("phone", this.file_phone)
payload.append("phone", this.file_phone_id )
payload.append("file", $("#file_file")[0].files[0]) payload.append("file", $("#file_file")[0].files[0])
payload.append("type", this.file_type)
let response = await http.post(`/send/file`, payload) let response = await http.post(`/send/file`, payload)
this.sendFileReset(); this.sendFileReset();
resolve(response.data.message) resolve(response.data.message)
@ -812,6 +908,8 @@
} else { } else {
reject(error.message) reject(error.message)
} }
} finally {
this.file_loading = false;
} }
}) })
}, },
@ -832,17 +930,27 @@
video_compress: false, video_compress: false,
video_type: 'user', video_type: 'user',
video_phone: '', video_phone: '',
video_loading: false,
}
},
computed: {
video_phone_id() {
return this.video_type === 'user' ? `${this.video_phone}@${this.type_user}` : `${this.video_phone}@${this.type_group}`
} }
}, },
methods: { methods: {
sendVideoModal(type) {
this.video_type = type
$('#modalSendVideo').modal('show');
sendVideoModal() {
$('#modalSendVideo').modal({
onApprove: function () {
return false;
}
}).modal('show');
}, },
async sendVideoProcess() { async sendVideoProcess() {
try { try {
let response = await this.sendVideoApi() let response = await this.sendVideoApi()
showSuccessInfo(response) showSuccessInfo(response)
$('#modalSendVideo').modal('hide');
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} }
@ -850,13 +958,13 @@
sendVideoApi() { sendVideoApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
this.video_loading = true;
let payload = new FormData(); let payload = new FormData();
payload.append("phone", this.video_phone)
payload.append("phone", this.video_phone_id )
payload.append("caption", this.video_caption) payload.append("caption", this.video_caption)
payload.append("view_once", this.video_view_once) payload.append("view_once", this.video_view_once)
payload.append("compress", this.video_compress) payload.append("compress", this.video_compress)
payload.append("video", $("#video_file")[0].files[0]) payload.append("video", $("#video_file")[0].files[0])
payload.append("type", this.video_type)
let response = await http.post(`/send/video`, payload) let response = await http.post(`/send/video`, payload)
this.sendVideoReset(); this.sendVideoReset();
resolve(response.data.message) resolve(response.data.message)
@ -866,6 +974,8 @@
} else { } else {
reject(error.message) reject(error.message)
} }
} finally {
this.video_loading = false;
} }
}) })
}, },
@ -887,29 +997,41 @@
contact_phone: '', contact_phone: '',
contact_card_name: '', contact_card_name: '',
contact_card_phone: '', contact_card_phone: '',
contact_loading: false,
}
},
computed: {
contact_phone_id() {
return this.contact_type === 'user' ? `${this.contact_phone}@${this.type_user}` : `${this.contact_phone}@${this.type_group}`
} }
}, },
methods: { methods: {
sendContactModal(type) {
this.contact_type = type
$('#modalSendContact').modal('show');
sendContactModal() {
$('#modalSendContact').modal({
onApprove: function () {
return false;
}
}).modal('show');
}, },
async sendContactProcess() { async sendContactProcess() {
try { try {
this.contact_loading = true;
let response = await this.sendContactApi() let response = await this.sendContactApi()
showSuccessInfo(response) showSuccessInfo(response)
$('#modalSendContact').modal('hide');
} catch (err) { } catch (err) {
showErrorInfo(err) showErrorInfo(err)
} finally {
this.contact_loading = false;
} }
}, },
sendContactApi() { sendContactApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
let payload = new FormData(); let payload = new FormData();
payload.append("phone", this.contact_phone)
payload.append("phone", this.contact_phone_id )
payload.append("contact_name", this.contact_card_name) payload.append("contact_name", this.contact_card_name)
payload.append("contact_phone", this.contact_card_phone) payload.append("contact_phone", this.contact_card_phone)
payload.append("type", this.contact_type)
let response = await http.post(`/send/contact`, payload) let response = await http.post(`/send/contact`, payload)
this.sendContactReset(); this.sendContactReset();
resolve(response.data.message) resolve(response.data.message)
@ -926,7 +1048,66 @@
this.contact_phone = ''; this.contact_phone = '';
this.contact_card_name = ''; this.contact_card_name = '';
this.contact_card_phone = ''; this.contact_card_phone = '';
this.message_type = 'user';
this.contact_type = 'user';
},
}
}
const sendRevoke = {
data() {
return {
revoke_type: 'user',
revoke_phone: '',
revoke_message_id: '',
revoke_loading: false,
}
},
computed: {
revoke_phone_id() {
return this.revoke_type === 'user' ? `${this.revoke_phone}@${this.type_user}` : `${this.revoke_phone}@${this.type_group}`
}
},
methods: {
sendRevokeModal() {
$('#modalSendRevoke').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async sendRevokeProcess() {
try {
let response = await this.sendRevokeApi()
showSuccessInfo(response)
$('#modalSendRevoke').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
sendRevokeApi() {
return new Promise(async (resolve, reject) => {
try {
this.revoke_loading = true;
let payload = new FormData();
payload.append("phone", this.revoke_phone_id)
let response = await http.post(`/message/${this.revoke_message_id}/revoke`, payload)
this.sendRevokeReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
} finally {
this.revoke_loading = false;
}
})
},
sendRevokeReset() {
this.revoke_phone = '';
this.revoke_message_id = '';
this.revoke_type = 'user';
}, },
} }
} }
@ -1006,11 +1187,17 @@
const userAvatar = { const userAvatar = {
data() { data() {
return { return {
avatar_type: 'user',
avatar_phone: '', avatar_phone: '',
avatar_image: null, avatar_image: null,
avatar_loading: false, avatar_loading: false,
} }
}, },
computed: {
avatar_phone_id() {
return this.avatar_type === 'user' ? `${this.avatar_phone}@${this.type_user}` : `${this.avatar_phone}@${this.type_group}`
}
},
methods: { methods: {
async avatarModal() { async avatarModal() {
this.avatarReset(); this.avatarReset();
@ -1030,7 +1217,7 @@
avatarApi() { avatarApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
let response = await http.get(`/user/avatar?phone=${this.avatar_phone}`)
let response = await http.get(`/user/avatar?phone=${this.avatar_phone_id }`)
this.avatar_image = response.data.results.url; this.avatar_image = response.data.results.url;
resolve() resolve()
} catch (error) { } catch (error) {
@ -1045,6 +1232,7 @@
avatarReset() { avatarReset() {
this.avatar_phone = ''; this.avatar_phone = '';
this.avatar_image = null; this.avatar_image = null;
this.avatar_type = 'user';
} }
} }
} }
@ -1052,6 +1240,7 @@
const userInfo = { const userInfo = {
data() { data() {
return { return {
info_type: 'user',
info_phone: '', info_phone: '',
// //
info_name: null, info_name: null,
@ -1061,6 +1250,12 @@
info_loading: false, info_loading: false,
} }
}, },
computed: {
info_phone_id() {
return this.info_type === 'user' ? `${this.info_phone}@${this.type_user}` : `${this.info_phone}@${this.type_group}`
}
},
methods: { methods: {
async infoModal() { async infoModal() {
this.infoReset(); this.infoReset();
@ -1080,7 +1275,7 @@
infoApi() { infoApi() {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
let response = await http.get(`/user/info?phone=${this.info_phone}`)
let response = await http.get(`/user/info?phone=${this.info_phone_id }`)
this.info_name = response.data.results.verified_name; this.info_name = response.data.results.verified_name;
this.info_status = response.data.results.status; this.info_status = response.data.results.status;
this.info_devices = response.data.results.devices; this.info_devices = response.data.results.devices;
@ -1099,6 +1294,7 @@
this.info_name = null; this.info_name = null;
this.info_status = null; this.info_status = null;
this.info_devices = []; this.info_devices = [];
this.info_type = 'user';
} }
} }
} }
@ -1107,27 +1303,39 @@
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
data() { data() {
return { return {
app_ws: null,
app_host: {{ .AppHost }}, app_host: {{ .AppHost }},
app_name: 'Whatsapp API Multi Device ({{ .AppVersion }})', app_name: 'Whatsapp API Multi Device ({{ .AppVersion }})',
is_logged_in: false, is_logged_in: false,
connected_devices: null,
type_group: "g.us",
type_user: "s.whatsapp.net"
} }
}, },
mounted() { mounted() {
if (window["WebSocket"]) { if (window["WebSocket"]) {
let wsType = location.protocol !== 'https:' ? 'ws://' : 'wss://'; let wsType = location.protocol !== 'https:' ? 'ws://' : 'wss://';
let conn = new WebSocket(wsType + document.location.host + "/ws");
this.app_ws = new WebSocket(wsType + document.location.host + "/ws");
conn.onclose = (evt) => {
console.log(evt)
this.app_ws.onopen = (evt) => {
this.app_ws.send(JSON.stringify({
"code": "FETCH_DEVICES",
"message": "List device"
}))
}; };
conn.onmessage = (evt) => {
console.log(evt)
this.app_ws.onmessage = (evt) => {
const message = JSON.parse(evt.data) const message = JSON.parse(evt.data)
switch (message.code) { switch (message.code) {
case 'LOGIN_SUCCESS': case 'LOGIN_SUCCESS':
showSuccessInfo(message.message) showSuccessInfo(message.message)
$('#modalLogin').modal('hide'); $('#modalLogin').modal('hide');
// fetch devices
this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
break;
case 'LIST_DEVICES':
this.connected_devices = message.result
break; break;
default: default:
console.log(message) console.log(message)
@ -1144,7 +1352,7 @@
return tanggal.format('LLL'); return tanggal.format('LLL');
} }
}, },
mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, sendVideo, sendContact, userGroups, userPrivacy, userAvatar, userInfo]
mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, sendVideo, sendContact, sendRevoke, userGroups, userPrivacy, userAvatar, userInfo]
}).mount('#app') }).mount('#app')
< / script > < / script >
< / body > < / body >
Aldino Kemal
3 years ago
GitHub