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

feat(add-user-interface): add ui for wa service

pull/1/head
Aldino Kemal 4 years ago
parent
815f074a66
commit
4759c3a793
2 changed files with 347 additions and 4 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. 2
      main.go
  2. 349
      views/index.html

2
main.go
View File

@ -45,7 +45,7 @@ func main() {
userController.Route(app)
app.Get("/", func(ctx *fiber.Ctx) error {
return ctx.JSON(map[string]interface{}{"Status": "Ok"})
return ctx.Render("index", fiber.Map{"AppHost": "http://localhost:3000"})
})
err := app.Listen(":3000")

349
views/index.html
View File

@ -1,10 +1,353 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Whatsapp Web Multi</title>
<style>
.container {
padding-top: 2em;
}
</style>
</head>
<body>
<h2>Hello</h2>
<div class="ui container" id="app">
<h1 class="ui dividing header">[[ app_name ]]</h1>
<h3 class="first">Features</h3>
<div class="ui three cards">
<div class="green card" @click="loginModal" style="cursor: pointer">
<div class="content">
<div class="header">Login</div>
<div class="meta">App</div>
<div class="description">
Scan your QRCode and you can use all this API feature
</div>
</div>
</div>
<div class="green card" @click="logoutProcess" style="cursor: pointer">
<div class="content">
<div class="header">Logout</div>
<div class="meta">App</div>
<div class="description">
Remove your login session in application
</div>
</div>
</div>
<div class="green card" @click="reconnectProcess" style="cursor: pointer">
<div class="content">
<div class="header">Reconnect</div>
<div class="meta">App</div>
<div class="description">
Reconnect to whatsapp server, please do this if your api doesn't work or your application is down or
restart
</div>
</div>
</div>
</div>
<div class="ui four cards">
<div class="green card">
<div class="content">
<div class="header">User Info</div>
<div class="meta">App</div>
<div class="description">
You can search someone user info by phone
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">User Avatar</div>
<div class="meta">App</div>
<div class="description">
You can search someone avatar by phone
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">User List Groups</div>
<div class="meta">App</div>
<div class="description">
Display all groups you joined
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">User Privacy Setting</div>
<div class="meta">App</div>
<div class="description">
Get your privacy settings
</div>
</div>
</div>
</div>
<div class="ui three cards">
<div class="green card" @click="sendMessageModal">
<div class="content">
<div class="header">Send Message (Text)</div>
<div class="meta">App</div>
<div class="description">
Send any message to any
<div class="ui blue horizontal label">indonesian</div>
whatsapp number
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">Send Message (Image)</div>
<div class="meta">App</div>
<div class="description">
Send image with
<div class="ui blue horizontal label">jpg/jpeg/png</div>
type
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">Send Message (File)</div>
<div class="meta">App</div>
<div class="description">
Send any file up to
<div class="ui blue horizontal label">10MB</div>
</div>
</div>
</div>
</div>
<!-- Modal Login -->
<div class="ui small modal" id="modalLogin">
<i class="close icon"></i>
<div class="header">
Login Whatsapp
</div>
<div class="image content">
<div class="ui medium image">
<img :src="login_link">
</div>
<div class="description">
<div class="ui header">Please scan to connect</div>
<p>Open Setting > Linked Devices > Link Device</p>
</div>
</div>
<div class="actions">
<div class="ui positive right labeled icon button">
Done
<i class="checkmark icon"></i>
</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>Phone</label>
<input v-model="message_phone" type="text" name="first-name" 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"
aria-label="message">
</div>
</form>
</div>
<div class="actions">
<div class="ui positive right labeled icon button" @click="sendMessageProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
</div>
<script>
const showErrorInfo = (message) => {
$('body').toast({
position: 'bottom right',
title: 'Error',
message: message,
showProgress: 'bottom',
classProgress: 'red'
});
}
const showSuccessInfo = (message) => {
$('body').toast({
position: 'bottom right',
title: 'Success',
message: message,
showProgress: 'bottom',
classProgress: 'green'
});
}
const login = {
data() {
return {
login_link: '',
login_duration_sec: 0,
}
},
methods: {
async loginModal() {
try {
await this.loginApiGetQrCode();
$('#modalLogin').modal('show');
} catch (err) {
showErrorInfo(err)
}
},
loginApiGetQrCode() {
return new Promise(async (resolve, reject) => {
try {
let response = await axios.get(`${this.app_host}/app/login`)
let results = response.data.results;
this.login_link = results.qr_link;
this.login_duration_sec = results.qr_duration;
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const logout = {
methods: {
async logoutProcess() {
try {
await this.logoutApi()
showSuccessInfo("Logout success")
} catch (err) {
showErrorInfo(err)
}
},
logoutApi() {
return new Promise(async (resolve, reject) => {
try {
await axios.get(`${this.app_host}/app/logout`)
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const reconnect = {
methods: {
async reconnectProcess() {
try {
await this.reconnectApi()
showSuccessInfo("Reconnect success")
} catch (err) {
showErrorInfo(err)
}
},
reconnectApi() {
return new Promise(async (resolve, reject) => {
try {
await axios.get(`${this.app_host}/app/reconnect`)
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const sendMessage = {
data() {
return {
message_phone: '6289685024091',
message_text: 'halo ini test',
}
},
methods: {
sendMessageModal() {
$('#modalSendMessage').modal('show');
},
async sendMessageProcess() {
try {
let response = await this.sendMessageApi()
showSuccessInfo(response)
} catch (err) {
showErrorInfo(err)
}
},
sendMessageApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("phone", this.message_phone)
payload.append("message", this.message_text)
let response = await axios.post(`${this.app_host}/send/message`, payload)
this.sendMessageReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendMessageReset() {
this.message_phone = '';
this.message_text = '';
},
}
}
Vue.createApp({
delimiters: ['[[', ']]'],
data() {
return {
app_host: "http://localhost:3000",
app_name: 'Whatsapp API Multi Device App'
}
},
mixins: [login, logout, reconnect, sendMessage]
}).mount('#app')
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save