From 5fab545bddd7734f25dd155d48bd54721293be8f Mon Sep 17 00:00:00 2001
From: Aldino Kemal <aldinokemal2104@gmail.com>
Date: Sun, 13 Feb 2022 10:14:43 +0700
Subject: [PATCH] feat(add-user-interface): add sample sendFile

---
 views/index.html | 97 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 90 insertions(+), 7 deletions(-)

diff --git a/views/index.html b/views/index.html
index 9a9119e..1857867 100644
--- a/views/index.html
+++ b/views/index.html
@@ -95,7 +95,7 @@
     </div>
 
     <div class="ui three cards">
-        <div class="green card" @click="sendMessageModal">
+        <div class="green card" @click="sendMessageModal" style="cursor: pointer">
             <div class="content">
                 <div class="header">Send Message (Text)</div>
                 <div class="meta">App</div>
@@ -106,7 +106,7 @@
                 </div>
             </div>
         </div>
-        <div class="green card">
+        <div class="green card" @click="sendImageModal" style="cursor:pointer;">
             <div class="content">
                 <div class="header">Send Message (Image)</div>
                 <div class="meta">App</div>
@@ -163,12 +163,12 @@
             <form class="ui form">
                 <div class="field">
                     <label>Phone</label>
-                    <input v-model="message_phone" type="text" name="first-name" placeholder="6289..."
+                    <input v-model="message_phone" type="text" placeholder="6289..."
                            aria-label="phone">
                 </div>
                 <div class="field">
                     <label>Message</label>
-                    <input v-model="message_text" type="text" name="last-name" placeholder="Hello this is message text"
+                    <input v-model="message_text" type="text" placeholder="Hello this is message text"
                            aria-label="message">
                 </div>
             </form>
@@ -180,6 +180,43 @@
             </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>Phone</label>
+                    <input v-model="image_phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                </div>
+                <div class="field">
+                    <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>
+                <div class="field">
+                    <label>Caption</label>
+                    <input v-model="image_caption" type="text" placeholder="Hello this is image caption"
+                           aria-label="caption">
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui positive right labeled icon button" @click="sendImageProcess">
+                Send
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>
@@ -297,8 +334,8 @@
     const sendMessage = {
         data() {
             return {
-                message_phone: '6289685024091',
-                message_text: 'halo ini test',
+                message_phone: '',
+                message_text: '',
             }
         },
         methods: {
@@ -338,6 +375,52 @@
         }
     }
 
+    const sendImage = {
+        data() {
+            return {
+                image_phone: '',
+                image_caption: '',
+            }
+        },
+        methods: {
+            sendImageModal() {
+                $('#modalSendImage').modal('show');
+            },
+            async sendImageProcess() {
+                try {
+                    let response = await this.sendImageApi()
+                    showSuccessInfo(response)
+                } catch (err) {
+                    showErrorInfo(err)
+                }
+            },
+            sendImageApi() {
+                return new Promise(async (resolve, reject) => {
+                    try {
+                        let payload = new FormData();
+                        payload.append("phone", this.image_phone)
+                        payload.append("caption", this.image_caption)
+                        payload.append("image", $("#image_file")[0].files[0])
+                        let response = await axios.post(`${this.app_host}/send/image`, payload)
+                        this.sendImageReset();
+                        resolve(response.data.message)
+                    } catch (error) {
+                        if (error.response) {
+                            reject(error.response.data.message)
+                        } else {
+                            reject(error.message)
+                        }
+                    }
+                })
+            },
+            sendImageReset() {
+                this.image_phone = '';
+                this.image_caption = '';
+                $("#image_file").val('');
+            },
+        }
+    }
+
     Vue.createApp({
         delimiters: ['[[', ']]'],
         data() {
@@ -346,7 +429,7 @@
                 app_name: 'Whatsapp API Multi Device App'
             }
         },
-        mixins: [login, logout, reconnect, sendMessage]
+        mixins: [login, logout, reconnect, sendMessage, sendImage]
     }).mount('#app')
 </script>
 </body>