alamin
/
go-whatsapp-web-multidevice
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: take out send contact, file and video

pull/120/head
Aldino Kemal 2 years ago
parent
98f6075c13
commit
6282a83c5f
4 changed files with 397 additions and 372 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 118
      src/views/components/SendContact.js
  2. 123
      src/views/components/SendFile.js
  3. 146
      src/views/components/SendVideo.js
  4. 382
      src/views/index.html

118
src/views/components/SendContact.js
View File

@ -0,0 +1,118 @@
export default {
name: 'SendContact',
data() {
return {
type: 'user',
phone: '',
card_name: '',
card_phone: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendContact').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
this.loading = true;
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendContact').modal('hide');
} catch (err) {
showErrorInfo(err)
} finally {
this.loading = false;
}
},
async sendApi() {
this.loading = true;
try {
const payload = {
phone: this.phone_id,
contact_name: this.card_name,
contact_phone: this.card_phone
}
let response = await window.http.post(`/send/contact`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
} else {
throw new Error(error.message);
}
} finally {
this.loading = false;
}
},
handleReset() {
this.phone = '';
this.card_name = '';
this.card_phone = '';
this.type = 'user';
},
},
template:`
<div class="blue card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send Contact</div>
<div class="description">
Send contact to user or group
</div>
</div>
</div>
<!-- Modal SendContact -->
<div class="ui small modal" id="modalSendContact">
<i class="close icon"></i>
<div class="header">
Send Contact
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Type</label>
<select name="type" v-model="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="phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Contact Name</label>
<input v-model="card_name" type="text" placeholder="Please enter contact name"
aria-label="contact name">
</div>
<div class="field">
<label>Contact Phone</label>
<input v-model="card_phone" type="text" placeholder="Please enter contact phone"
aria-label="contact phone">
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</div>
</div>
</div>
`
}

123
src/views/components/SendFile.js
View File

@ -0,0 +1,123 @@
export default {
name: 'SendFile',
props: {
maxFileSize: {
type: String,
required: true,
}
},
data() {
return {
caption: '',
type: 'user',
phone: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendFile').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendFile').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async sendApi() {
this.loading = true;
try {
let payload = new FormData();
payload.append("caption", this.caption)
payload.append("phone", this.phone_id)
payload.append("file", $("#file")[0].files[0])
let response = await http.post(`/send/file`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
} else {
throw new Error(error.message);
}
} finally {
this.loading = false;
}
},
handleReset() {
this.caption = '';
this.phone = '';
this.type = 'user';
$("#file").val('');
},
},
template: `
<div class="blue card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send File</div>
<div class="description">
Send any file up to
<div class="ui blue horizontal label">{{ maxFileSize }}</div>
</div>
</div>
</div>
<!-- Modal SendFile -->
<div class="ui small modal" id="modalSendFile">
<i class="close icon"></i>
<div class="header">
Send File
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Type</label>
<select name="type" v-model="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="phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="caption" type="text" placeholder="Type some caption (optional)..."
aria-label="caption"></textarea>
</div>
<div class="field" style="padding-bottom: 30px">
<label>File</label>
<input type="file" class="inputfile" id="file" style="display: none"/>
<label for="file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload file
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</div>
</div>
</div>
`
}

146
src/views/components/SendVideo.js
View File

@ -0,0 +1,146 @@
export default {
name: 'SendVideo',
// define props
props: {
maxVideoSize: {
type: String,
required: true,
}
},
data() {
return {
caption: '',
view_once: false,
compress: false,
type: 'user',
phone: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendVideo').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendVideo').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async sendApi() {
this.loading = true;
try {
let payload = new FormData();
payload.append("phone", this.phone_id)
payload.append("caption", this.caption)
payload.append("view_once", this.view_once)
payload.append("compress", this.compress)
payload.append("video", $("#file")[0].files[0])
let response = await window.http.post(`/send/video`, payload)
this.handleReset();
return response.data.message;
} catch (error) {
if (error.response) {
throw new Error(error.response.data.message);
} else {
throw new Error(error.message);
}
} finally {
this.loading = false;
}
},
handleReset() {
this.caption = '';
this.view_once = false;
this.compress = false;
this.phone = '';
this.type = 'user';
$("#file").val('');
},
},
template: `
<div class="blue card" @click="openModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</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>
<!-- Modal SendVideo -->
<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>Type</label>
<select name="type" v-model="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="phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="caption" placeholder="Type some caption (optional)..."
aria-label="caption"></textarea>
</div>
<div class="field">
<label>View Once</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="view_once">
<label>Check for enable one time view</label>
</div>
</div>
<div class="field">
<label>Compress</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="compress" v-model="compress">
<label>Check for compressing video to smaller size</label>
</div>
</div>
<div class="field" style="padding-bottom: 30px">
<label>Video</label>
<input type="file" id="file" style="display: none" accept="video/*"/>
<label for="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 approve positive right labeled icon button" :class="{'loading': this.loading}"
@click="handleSubmit">
Send
<i class="send icon"></i>
</div>
</div>
</div>
`
}

382
src/views/index.html
View File

@ -12,7 +12,7 @@
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.semanticui.min.js"></script> <script src="https://cdn.datatables.net/1.11.4/js/dataTables.semanticui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.21/vue.cjs.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script> <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<title>Whatsapp API Multi Device {{ .AppVersion }}</title> <title>Whatsapp API Multi Device {{ .AppVersion }}</title>
@ -93,37 +93,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="blue card" @click="sendFileModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send File</div>
<div class="description">
Send any file up to
<div class="ui blue horizontal label">{{ .MaxFileSize }}</div>
</div>
</div>
</div>
<div class="blue card" @click="sendVideoModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</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 class="blue card" @click="sendContactModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send Contact</div>
<div class="description">
Send contact to user or group
</div>
</div>
</div>
<send-file max-file-size="{{ .MaxFileSize }}"></send-file>
<send-video max-video-size="{{ .MaxVideoSize }}"></send-video>
<send-contact></send-contact>
<send-location></send-location> <send-location></send-location>
<send-audio></send-audio> <send-audio></send-audio>
@ -309,152 +282,6 @@
</div> </div>
</div> </div>
<!-- Modal SendFile -->
<div class="ui small modal" id="modalSendFile">
<i class="close icon"></i>
<div class="header">
Send File
</div>
<div class="content">
<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">
<label>Phone / Group ID</label>
<input v-model="file_phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="file_phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="file_caption" type="text" placeholder="Type some caption (optional)..."
aria-label="caption"></textarea>
</div>
<div class="field" style="padding-bottom: 30px">
<label>File</label>
<input type="file" class="inputfile" id="file_file" style="display: none"/>
<label for="file_file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload file
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.file_loading}"
@click="sendFileProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal SendVideo -->
<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>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">
<label>Phone / Group ID</label>
<input v-model="video_phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="video_phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="video_caption" type="text" placeholder="Type some caption (optional)..."
aria-label="caption"></textarea>
</div>
<div class="field">
<label>View Once</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="video_view_once">
<label>Check for enable one time view</label>
</div>
</div>
<div class="field">
<label>Compress</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="compress" v-model="video_compress">
<label>Check for compressing video to smaller size</label>
</div>
</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 approve positive right labeled icon button" :class="{'loading': this.video_loading}"
@click="sendVideoProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal SendContact -->
<div class="ui small modal" id="modalSendContact">
<i class="close icon"></i>
<div class="header">
Send Contact
</div>
<div class="content">
<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">
<label>Phone / Group ID</label>
<input v-model="contact_phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="contact_phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Contact Name</label>
<input v-model="contact_card_name" type="text" placeholder="Please enter contact name"
aria-label="contact name">
</div>
<div class="field">
<label>Contact Phone</label>
<input v-model="contact_card_phone" type="text" placeholder="Please enter contact phone"
aria-label="contact phone">
</div>
</form>
</div>
<div class="actions">
<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 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>
@ -627,6 +454,9 @@
{{ end }} {{ end }}
</script> </script>
<script type="module"> <script type="module">
import SendFile from "./components/SendFile.js";
import SendVideo from "./components/SendVideo.js";
import SendContact from "./components/SendContact.js";
import SendLocation from "./components/SendLocation.js"; import SendLocation from "./components/SendLocation.js";
import SendAudio from "./components/SendAudio.js"; import SendAudio from "./components/SendAudio.js";
import SendPoll from "./components/SendPoll.js"; import SendPoll from "./components/SendPoll.js";
@ -888,199 +718,6 @@
} }
} }
const sendFile = {
data() {
return {
file_caption: '',
file_type: 'user',
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: {
sendFileModal() {
$('#modalSendFile').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async sendFileProcess() {
try {
let response = await this.sendFileApi()
showSuccessInfo(response)
$('#modalSendFile').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
sendFileApi() {
return new Promise(async (resolve, reject) => {
try {
this.file_loading = true;
let payload = new FormData();
payload.append("caption", this.file_caption)
payload.append("phone", this.file_phone_id)
payload.append("file", $("#file_file")[0].files[0])
let response = await http.post(`/send/file`, payload)
this.sendFileReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
} finally {
this.file_loading = false;
}
})
},
sendFileReset() {
this.file_caption = '';
this.file_phone = '';
this.file_type = 'user';
$("#file_file").val('');
},
}
}
const sendVideo = {
data() {
return {
video_caption: '',
video_view_once: false,
video_compress: false,
video_type: 'user',
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: {
sendVideoModal() {
$('#modalSendVideo').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async sendVideoProcess() {
try {
let response = await this.sendVideoApi()
showSuccessInfo(response)
$('#modalSendVideo').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
sendVideoApi() {
return new Promise(async (resolve, reject) => {
try {
this.video_loading = true;
let payload = new FormData();
payload.append("phone", this.video_phone_id)
payload.append("caption", this.video_caption)
payload.append("view_once", this.video_view_once)
payload.append("compress", this.video_compress)
payload.append("video", $("#video_file")[0].files[0])
let response = await http.post(`/send/video`, payload)
this.sendVideoReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
} finally {
this.video_loading = false;
}
})
},
sendVideoReset() {
this.video_caption = '';
this.video_view_once = false;
this.video_compress = false;
this.video_phone = '';
this.video_type = 'user';
$("#video_file").val('');
},
}
}
const sendContact = {
data() {
return {
contact_type: 'user',
contact_phone: '',
contact_card_name: '',
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: {
sendContactModal() {
$('#modalSendContact').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async sendContactProcess() {
try {
this.contact_loading = true;
let response = await this.sendContactApi()
showSuccessInfo(response)
$('#modalSendContact').modal('hide');
} catch (err) {
showErrorInfo(err)
} finally {
this.contact_loading = false;
}
},
sendContactApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("phone", this.contact_phone_id)
payload.append("contact_name", this.contact_card_name)
payload.append("contact_phone", this.contact_card_phone)
let response = await http.post(`/send/contact`, payload)
this.sendContactReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendContactReset() {
this.contact_phone = '';
this.contact_card_name = '';
this.contact_card_phone = '';
this.contact_type = 'user';
},
}
}
const userGroups = { const userGroups = {
data() { data() {
return { return {
@ -1309,6 +946,7 @@
Vue.createApp({ Vue.createApp({
components: { components: {
SendFile, SendVideo, SendContact,
SendLocation, SendAudio, SendPoll, SendLocation, SendAudio, SendPoll,
MessageUpdate, MessageReact, MessageRevoke, MessageUpdate, MessageReact, MessageRevoke,
}, },
@ -1366,7 +1004,7 @@
}, },
mixins: [ mixins: [
login, logout, reconnect, login, logout, reconnect,
sendMessage, sendImage, sendFile, sendVideo, sendContact,
sendMessage, sendImage,
userGroups, userPrivacy, userAvatar, userInfo userGroups, userPrivacy, userAvatar, userInfo
] ]
}).mount('#app') }).mount('#app')

Write Preview
Loading…
Cancel
Save