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

feat: refactor send image

pull/120/head
Aldino Kemal 2 years ago
parent
6282a83c5f
commit
8fabadeed4
5 changed files with 159 additions and 157 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/views/components/SendAudio.js
  2. 10
      src/views/components/SendFile.js
  3. 141
      src/views/components/SendImage.js
  4. 8
      src/views/components/SendVideo.js
  5. 146
      src/views/index.html

11
src/views/components/SendAudio.js
View File

@ -34,7 +34,7 @@ export default {
try {
let payload = new FormData();
payload.append("phone", this.phone_id)
payload.append("audio", $("#file")[0].files[0])
payload.append("audio", $("#file_audio")[0].files[0])
const response = await window.http.post(`/send/audio`, payload)
this.handleReset();
return response.data.message;
@ -51,7 +51,7 @@ export default {
handleReset() {
this.phone = '';
this.type = 'user';
$("#file").val('');
$("#file_audio").val('');
},
},
template:`
@ -87,10 +87,9 @@ export default {
<input :value="phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field" style="padding-bottom: 30px">
<label></label>
<input type="file" class="inputfile" id="file" style="display: none"
accept="audio/*"/>
<label for="file" class="ui positive medium green left floated button" style="color: white">
<label>Audio</label>
<input type="file" style="display: none" accept="audio/*" id="file_audio"/>
<label for="file_audio" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload
</label>

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

@ -42,7 +42,7 @@ export default {
let payload = new FormData();
payload.append("caption", this.caption)
payload.append("phone", this.phone_id)
payload.append("file", $("#file")[0].files[0])
payload.append("file", $("#file_file")[0].files[0])
let response = await http.post(`/send/file`, payload)
this.handleReset();
return response.data.message;
@ -60,7 +60,7 @@ export default {
this.caption = '';
this.phone = '';
this.type = 'user';
$("#file").val('');
$("#file_file").val('');
},
},
template: `
@ -98,13 +98,13 @@ export default {
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="caption" type="text" placeholder="Type some caption (optional)..."
<textarea v-model="caption" 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">
<input type="file" style="display: none" @change="handleFileSelected" id="file_file">
<label for="file_file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload file
</label>

141
src/views/components/SendImage.js
View File

@ -0,0 +1,141 @@
export default {
name: 'SendImage',
data() {
return {
phone: '',
view_once: false,
compress: false,
caption: '',
type: 'user',
loading: false,
selected_file: null
}
},
computed: {
phone_id() {
return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
}
},
methods: {
openModal() {
$('#modalSendImage').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async handleSubmit() {
try {
let response = await this.sendApi()
showSuccessInfo(response)
$('#modalSendImage').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
async sendApi() {
this.loading = true;
try {
let payload = new FormData();
payload.append("phone", this.phone_id)
payload.append("view_once", this.view_once)
payload.append("compress", this.compress)
payload.append("caption", this.caption)
payload.append('image', $("#file_image")[0].files[0])
let response = await window.http.post(`/send/image`, 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.view_once = false;
this.compress = false;
this.phone = '';
this.caption = '';
this.type = 'user';
$("#file_image").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 Image</div>
<div class="description">
Send image with
<div class="ui blue horizontal label">jpg/jpeg/png</div>
type
</div>
</div>
</div>
<!-- Modal SendImage -->
<div class="ui small modal" id="modalSendImage">
<i class="close icon"></i>
<div class="header">
Send Image
</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="Hello this is image caption"
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 image to smaller size</label>
</div>
</div>
<div class="field" style="padding-bottom: 30px">
<label>Image</label>
<input type="file" style="display: none" id="file_image"
accept="image/png,image/jpg,image/jpeg"/>
<label for="file_image" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload image
</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>
`
}

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

@ -47,7 +47,7 @@ export default {
payload.append("caption", this.caption)
payload.append("view_once", this.view_once)
payload.append("compress", this.compress)
payload.append("video", $("#file")[0].files[0])
payload.append('video', $("#file_video")[0].files[0])
let response = await window.http.post(`/send/video`, payload)
this.handleReset();
return response.data.message;
@ -67,7 +67,7 @@ export default {
this.compress = false;
this.phone = '';
this.type = 'user';
$("#file").val('');
$("#file_video").val('');
},
},
template: `
@ -126,8 +126,8 @@ export default {
</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">
<input type="file" style="display: none" accept="video/*" id="file_video">
<label for="file_video" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload video
</label>

146
src/views/index.html
View File

@ -82,18 +82,8 @@
</div>
</div>
</div>
<div class="blue card" @click="sendImageModal()" style="cursor:pointer;">
<div class="content">
<a class="ui blue right ribbon label">Send</a>
<div class="header">Send Image</div>
<div class="description">
Send image with
<div class="ui blue horizontal label">jpg/jpeg/png</div>
type
</div>
</div>
</div>
<send-image></send-image>
<send-file max-file-size="{{ .MaxFileSize }}"></send-file>
<send-video max-video-size="{{ .MaxVideoSize }}"></send-video>
<send-contact></send-contact>
@ -222,66 +212,6 @@
</div>
</div>
<!-- Modal SendImage -->
<div class="ui small modal" id="modalSendImage">
<i class="close icon"></i>
<div class="header">
Send Image
</div>
<div class="content">
<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">
<label>Phone / Group ID</label>
<input v-model="image_phone" type="text" placeholder="6289..."
aria-label="phone">
<input :value="image_phone_id" disabled aria-label="whatsapp_id">
</div>
<div class="field">
<label>Caption</label>
<textarea v-model="image_caption" type="text" placeholder="Hello this is image caption"
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="image_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="image_compress">
<label>Check for compressing image to smaller size</label>
</div>
</div>
<div class="field" style="padding-bottom: 30px">
<label>Image</label>
<input type="file" class="inputfile" id="image_file" style="display: none"
accept="image/png,image/jpg,image/jpeg"/>
<label for="image_file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload image
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui approve positive right labeled icon button" :class="{'loading': this.image_loading}"
@click="sendImageProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal UserGroup -->
<div class="ui small modal" id="modalUserGroup">
<i class="close icon"></i>
@ -454,6 +384,7 @@
{{ end }}
</script>
<script type="module">
import SendImage from "./components/SendImage.js";
import SendFile from "./components/SendFile.js";
import SendVideo from "./components/SendVideo.js";
import SendContact from "./components/SendContact.js";
@ -650,74 +581,6 @@
}
}
const sendImage = {
data() {
return {
image_phone: '',
image_view_once: false,
image_compress: false,
image_caption: '',
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: {
sendImageModal() {
$('#modalSendImage').modal({
onApprove: function () {
return false;
}
}).modal('show');
},
async sendImageProcess() {
try {
let response = await this.sendImageApi()
showSuccessInfo(response)
$('#modalSendImage').modal('hide');
} catch (err) {
showErrorInfo(err)
}
},
sendImageApi() {
return new Promise(async (resolve, reject) => {
try {
this.image_loading = true;
let payload = new FormData();
payload.append("phone", this.image_phone_id)
payload.append("view_once", this.image_view_once)
payload.append("compress", this.image_compress)
payload.append("caption", this.image_caption)
payload.append("image", $("#image_file")[0].files[0])
let response = await http.post(`/send/image`, payload)
this.sendImageReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
} finally {
this.image_loading = false;
}
})
},
sendImageReset() {
this.image_view_once = false;
this.image_compress = false;
this.image_phone = '';
this.image_caption = '';
this.image_type = 'user';
$("#image_file").val('');
},
}
}
const userGroups = {
data() {
return {
@ -946,8 +809,7 @@
Vue.createApp({
components: {
SendFile, SendVideo, SendContact,
SendLocation, SendAudio, SendPoll,
SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
MessageUpdate, MessageReact, MessageRevoke,
},
delimiters: ['[[', ']]'],
@ -1004,7 +866,7 @@
},
mixins: [
login, logout, reconnect,
sendMessage, sendImage,
sendMessage,
userGroups, userPrivacy, userAvatar, userInfo
]
}).mount('#app')

Write Preview
Loading…
Cancel
Save