@ -27,11 +27,10 @@
< h1 class = "ui dividing header" > [[ app_name ]]< / h1 >
< h1 class = "ui dividing header" > [[ app_name ]]< / h1 >
< h3 class = "first" > Features< / h3 >
< h3 class = "first" > Features< / h3 >
< div class = "ui three cards" >
< div class = "ui three column stackable grid c ards" >
< div class = "green card" @ click = "loginModal" style = "cursor: pointer" >
< div class = "green card" @ click = "loginModal" style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Login< / div >
< div class = "header" > Login< / div >
< div class = "meta" > App< / div >
< div class = "description" >
< div class = "description" >
Scan your QRCode and you can use all this API feature
Scan your QRCode and you can use all this API feature
< / div >
< / div >
@ -40,7 +39,6 @@
< div class = "green card" @ click = "logoutProcess" style = "cursor: pointer" >
< div class = "green card" @ click = "logoutProcess" style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Logout< / div >
< div class = "header" > Logout< / div >
< div class = "meta" > App< / div >
< div class = "description" >
< div class = "description" >
Remove your login session in application
Remove your login session in application
< / div >
< / div >
@ -49,7 +47,6 @@
< div class = "green card" @ click = "reconnectProcess" style = "cursor: pointer" >
< div class = "green card" @ click = "reconnectProcess" style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Reconnect< / div >
< div class = "header" > Reconnect< / div >
< div class = "meta" > App< / div >
< div class = "description" >
< div class = "description" >
Reconnect to whatsapp server, please do this if your api doesn't work or your application is down or
Reconnect to whatsapp server, please do this if your api doesn't work or your application is down or
restart
restart
@ -58,53 +55,55 @@
< / div >
< / div >
< / div >
< / div >
< div class = "ui three cards" >
< div class = "green card" @ click = "sendMessageModal('user') " style = "cursor: pointer" >
< div class = "ui four column doubling grid cards" >
< div class = "green card" @ click = "infoModal " style = "cursor: pointer; " >
< div class = "content" >
< div class = "content" >
< div class = "header" > Send Message (Text) | Private Message< / div >
< div class = "meta" > App< / div >
< div class = "header" > User Info< / div >
< div class = "description" >
< div class = "description" >
Send any message to any whatsapp number
You can search someone user info by phone
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendImageModal('user') " style = "cursor:pointer;" >
< div class = "green card" @ click = "avatarModal " style = "cursor: pointer;" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Send Message (Image) | Private Message< / div >
< div class = "meta" > App< / div >
< div class = "header" > User Avatar< / div >
< div class = "description" >
< div class = "description" >
Send image with
< div class = "ui blue horizontal label" > jpg/jpeg/png< / div >
type
You can search someone avatar by phone
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendFileModal('user') " style = "cursor: pointer" >
< div class = "green card" @ click = "groupModal " style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Send Message (File) | Private Message< / div >
< div class = "meta" > App< / div >
< div class = "header" > User List Groups< / div >
< div class = "description" >
< div class = "description" >
Send any file up to
< div class = "ui blue horizontal label" > 10MB< / div >
Display all groups you joined
< / div >
< / div >
< / div >
< div class = "green card" @ click = "privacyModal" style = "cursor: pointer" >
< div class = "content" >
< div class = "header" > User Privacy Setting< / div >
< div class = "description" >
Get your privacy settings
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "ui three cards" >
< div class = "green card" @ click = "sendMessageModal('group')" style = "cursor: pointer" >
< div class = "ui four column doubling grid cards" >
< div class = "green card" @ click = "sendMessageModal('user ')" style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Send Message (Text) | Group< / div >
< div class = "meta" > App < / div >
< a class = "ui blue right ribbon label" > Private< / a >
< 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('group ')" style = "cursor:pointer;" >
< div class = "green card" @ click = "sendImageModal('user ')" style = "cursor:pointer;" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Send Message (Image) | Group< / div >
< div class = "meta" > App < / div >
< a class = "ui blue right ribbon label" > Private< / a >
< div class = "header" > Send Image < / div >
< div class = "description" >
< div class = "description" >
Send image with
Send image with
< div class = "ui blue horizontal label" > jpg/jpeg/png< / div >
< div class = "ui blue horizontal label" > jpg/jpeg/png< / div >
@ -112,52 +111,66 @@
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendFileModal('group ')" style = "cursor: pointer" >
< div class = "green card" @ click = "sendFileModal('user ')" style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > Send Message (File) | Group< / div >
< div class = "meta" > App < / div >
< a class = "ui blue right ribbon label" > Private< / a >
< div class = "header" > Send File < / div >
< div class = "description" >
< div class = "description" >
Send any file up to
Send any file up to
< div class = "ui blue horizontal label" > 10MB< / div >
< div class = "ui blue horizontal label" > {{ .MaxFileSize }}< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "sendVideoModal('user')" style = "cursor: pointer" >
< div class = "content" >
< a class = "ui blue right ribbon label" > Private< / a >
< div class = "header" > Send Video< / div >
< div class = "description" >
Send video < div class = "ui blue horizontal label" > mp4< / div > up to
< div class = "ui blue horizontal label" > {{ .MaxVideoSize }}< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "ui four cards" >
< div class = "green card" @ click = "infoModal" style = "cursor: pointer;" >
< div class = "ui four column doubling grid c ards" >
< div class = "green card" @ click = "sendMessageModal('group') " style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > User Info< / div >
< div class = "meta" > App< / div >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send Message < / div >
< div class = "description" >
< div class = "description" >
You can search someone user info by phone
Send any message to any whatsapp number
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "avatarModal " style = "cursor: pointer;" >
< div class = "green card" @ click = "sendImageModal('group') " style = "cursor:pointer;" >
< div class = "content" >
< div class = "content" >
< div class = "header" > User Avatar< / div >
< div class = "meta" > App < / div >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send Image < / div >
< div class = "description" >
< div class = "description" >
You can search someone avatar by phone
Send image with
< div class = "ui teal horizontal label" > jpg/jpeg/png< / div >
type
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "groupModal " style = "cursor: pointer" >
< div class = "green card" @ click = "sendFileModal('group') " style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header "> User List Groups < / div >
< div class = "meta" > App < / div >
< a class = "ui teal right ribbon label "> Group< / a >
< div class = "header" > Send File < / div >
< div class = "description" >
< div class = "description" >
Display all groups you joined
Send any file up to
< div class = "ui teal horizontal label" > {{ .MaxFileSize }}< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "green card" @ click = "privacyModal " style = "cursor: pointer" >
< div class = "green card" @ click = "sendVideoModal('group') " style = "cursor: pointer" >
< div class = "content" >
< div class = "content" >
< div class = "header" > User Privacy Setting< / div >
< div class = "meta" > App < / div >
< a class = "ui teal right ribbon label" > Group< / a >
< div class = "header" > Send Video < / div >
< div class = "description" >
< div class = "description" >
Get your privacy settings
Send video < div class = "ui teal horizontal label" > mp4< / div > up to
< div class = "ui teal horizontal label" > {{ .MaxVideoSize }}< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -283,6 +296,37 @@
< / div >
< / div >
< / div >
< / div >
<!-- Modal SendFile -->
< div class = "ui small modal" id = "modalSendVideo" >
< i class = "close icon" > < / i >
< div class = "header" >
Send Video
< / div >
< div class = "content" >
< form class = "ui form" >
< div class = "field" >
< label > Phone / Group ID< / label >
< input v-model = "video_phone" type = "text" placeholder = "6289..."
aria-label="phone">
< / div >
< div class = "field" style = "padding-bottom: 30px" >
< label > Video< / label >
< input type = "file" class = "inputfile" id = "video_file" style = "display: none" accept = "video/*" / >
< label for = "video_file" class = "ui positive medium green left floated button" style = "color: white" >
< i class = "ui upload icon" > < / i >
Upload video
< / label >
< / div >
< / form >
< / div >
< div class = "actions" >
< div class = "ui positive right labeled icon button" @ click = "sendVideoProcess" >
Send
< i class = "send icon" > < / i >
< / div >
< / div >
< / div >
<!-- Modal UserGroup -->
<!-- Modal UserGroup -->
< div class = "ui small modal" id = "modalUserGroup" >
< div class = "ui small modal" id = "modalUserGroup" >
< i class = "close icon" > < / i >
< i class = "close icon" > < / i >
@ -301,7 +345,7 @@
< / thead >
< / thead >
< tbody v-if = "data_groups != null" >
< tbody v-if = "data_groups != null" >
< tr v-for = "g in data_groups" >
< tr v-for = "g in data_groups" >
< td data-label = "GID" > [[ g.JID.User ]]< / td >
< td data-label = "GID" > [[ g.JID.split('@')[0] ]]< / td >
< td data-label = "Name" > [[ g.Name ]]< / td >
< td data-label = "Name" > [[ g.Name ]]< / td >
< td data-label = "Age" > [[ g.Participants.length ]]< / td >
< td data-label = "Age" > [[ g.Participants.length ]]< / td >
< td data-label = "Job" > [[ g.GroupCreated ]]< / td >
< td data-label = "Job" > [[ g.GroupCreated ]]< / td >
@ -666,6 +710,59 @@
}
}
}
}
const sendVideo = {
data() {
return {
video_type: 'user',
video_phone: '',
}
},
methods: {
sendVideoModal(type) {
this.video_type = type
$('#modalSendVideo').modal('show');
},
async sendVideoProcess() {
try {
let response = await this.sendVideoApi()
showSuccessInfo(response)
} catch (err) {
showErrorInfo(err)
}
},
sendVideoApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("phone", this.video_phone)
payload.append("video", $("#video_file")[0].files[0])
payload.append("type", this.video_type)
let response = await axios.post(`${this.app_host}/send/video`, payload, {
// Axios Bug, always content-type that make boundary not set default by browser https://github.com/axios/axios/issues/1603
transformRequest: (data, headers) => {
delete headers.post['Content-Type'];
return data;
}
})
this.sendVideoReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendVideoReset() {
this.video_phone = '';
this.video_type = 'user';
$("#video_file").val('');
},
}
}
const userGroups = {
const userGroups = {
data() {
data() {
return {
return {
@ -843,10 +940,10 @@
data() {
data() {
return {
return {
app_host: {{ .AppHost }},
app_host: {{ .AppHost }},
app_name: 'Whatsapp API Multi Device App'
app_name: 'Whatsapp API Multi Device App ({{ .AppVersion }}) '
}
}
},
},
mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, userGroups, userPrivacy, userAvatar, userInfo]
mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, sendVideo, userGroups, userPrivacy, userAvatar, userInfo]
}).mount('#app')
}).mount('#app')
< / script >
< / script >
< / body >
< / body >