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

feat: refactor send message

pull/120/head
Aldino Kemal 2 years ago
parent
a62bbb8f7c
commit
d9ba030b1b
2 changed files with 124 additions and 121 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. 119
      src/views/components/SendMessage.js
  2. 126
      src/views/index.html

119
src/views/components/SendMessage.js
View File

@ -0,0 +1,119 @@
export default {
name: 'SendMessage',
data() {
return {
type: 'user',
phone: '',
text: '',
reply_id: '',
loading: false,
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendMessage').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendMessage').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async sendApi() {
this.loading = true;
try {
const payload = {
phone: this.phone_id,
message: this.text,
}
if (this.reply_id !== '') {
payload.reply_id = this.reply_id;
}
let response = await http.post(`/send/message`, 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.text = '';
this.type = 'user';
this.reply_id = '';
},
},
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 Message</div>
<div class="description">
Send any message to user or group
</div>
</div>
</div>
<!-- Modal SendMessage -->
<div class="ui small modal" id="modalSendMessage">
<i class="close icon"></i>
<div class="header">
Send Message
</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>Reply Message ID</label>
<input v-model="reply_id" type="text"
placeholder="Optional: 57D29F74B7FC62F57D8AC2C840279B5B/3EB0288F008D32FCD0A424"
aria-label="reply_id">
</div>
<div class="field">
<label>Message</label>
<textarea v-model="text" placeholder="Hello this is message text"
aria-label="message"></textarea>
</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>
`
}

126
src/views/index.html
View File

@ -73,22 +73,14 @@
</div> </div>
<div class="ui three column doubling grid cards"> <div class="ui three column doubling grid cards">
<div class="blue card" @click="sendMessageModal()" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send Message</div>
<div class="description">
Send any message to user or group
</div>
</div>
</div>
<send-message></send-message>
<send-image></send-image> <send-image></send-image>
<send-file max-file-size="{{ .MaxFileSize }}"></send-file> <send-file max-file-size="{{ .MaxFileSize }}"></send-file>
<send-video max-video-size="{{ .MaxVideoSize }}"></send-video> <send-video max-video-size="{{ .MaxVideoSize }}"></send-video>
<send-contact></send-contact> <send-contact></send-contact>
<send-location></send-location> <send-location></send-location>
<send-audio></send-audio> <send-audio></send-audio>
<send-poll></send-poll> <send-poll></send-poll>
</div> </div>
@ -169,49 +161,6 @@
</div> </div>
</div> </div>
<!-- Modal SendMessage -->
<div class="ui small modal" id="modalSendMessage">
<i class="close icon"></i>
<div class="header">
Send Message
</div>
<div class="content">
<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">
<label>Phone / Group ID</label>
<input v-model="message_phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="message_phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Reply Message ID</label>
<input v-model="message_reply_message_id" type="text"
placeholder="Optional: 57D29F74B7FC62F57D8AC2C840279B5B/3EB0288F008D32FCD0A424"
aria-label="reply_message_id">
</div>
<div class="field">
<label>Message</label>
<textarea v-model="message_text" type="text" placeholder="Hello this is message text"
aria-label="message"></textarea>
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.message_loading}"
@click="sendMessageProcess">
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>
@ -384,6 +333,7 @@
{{ end }} {{ end }}
</script> </script>
<script type="module"> <script type="module">
import SendMessage from "./components/SendMessage.js";
import SendImage from "./components/SendImage.js"; import SendImage from "./components/SendImage.js";
import SendFile from "./components/SendFile.js"; import SendFile from "./components/SendFile.js";
import SendVideo from "./components/SendVideo.js"; import SendVideo from "./components/SendVideo.js";
@ -516,71 +466,6 @@
} }
} }
const sendMessage = {
data() {
return {
message_type: 'user',
message_phone: '',
message_text: '',
message_reply_message_id: '',
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: {
sendMessageModal() {
$('#modalSendMessage').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async sendMessageProcess() {
try {
let response = await this.sendMessageApi()
showSuccessInfo(response)
$('#modalSendMessage').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
sendMessageApi() {
return new Promise(async (resolve, reject) => {
try {
this.message_loading = true;
let payload = new FormData();
payload.append("phone", this.message_phone_id)
payload.append("message", this.message_text)
if (this.message_reply_message_id !== '') {
payload.append("reply_message_id", this.message_reply_message_id)
}
let response = await http.post(`/send/message`, payload)
this.sendMessageReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
} finally {
this.message_loading = false;
}
})
},
sendMessageReset() {
this.message_phone = '';
this.message_text = '';
this.message_type = 'user';
this.message_reply_message_id = '';
},
}
}
const userGroups = { const userGroups = {
data() { data() {
return { return {
@ -809,7 +694,7 @@
Vue.createApp({ Vue.createApp({
components: { components: {
SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
MessageUpdate, MessageReact, MessageRevoke, MessageUpdate, MessageReact, MessageRevoke,
}, },
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
@ -866,7 +751,6 @@
}, },
mixins: [ mixins: [
login, logout, reconnect, login, logout, reconnect,
sendMessage,
userGroups, userPrivacy, userAvatar, userInfo userGroups, userPrivacy, userAvatar, userInfo
] ]
}).mount('#app') }).mount('#app')

Write Preview
Loading…
Cancel
Save