refresh credits and use document.hidden inteligently

This commit is contained in:
Kevin F 2022-10-28 06:03:34 +00:00
parent b576ac113f
commit 7d360f2a36
3 changed files with 226 additions and 223 deletions

View File

@ -11,7 +11,7 @@
<div id="app">
<div class="main">
<div v-if="userID">
<div>
<div class="showUserID">
<button v-if="! showUserID" @click="showUserID = userID">Show User ID (KEEP SAFE & SECRET)</button>
<span v-else><input type="text" v-model="showUserID"></span>
</div>
@ -46,9 +46,10 @@
<div v-else>
<div v-if="threads.length">
<br>
<span v-for="person in threads">
{{ person }}
<button @click="openThread(person)">Open Thread</button>
<button @click="openThread(person)">{{ formatPhone(person) }} - Open Thread</button>
<br><br>
</span>
<div v-if="showingThreadNum">
<div v-for="message in threadMessages">
@ -92,224 +93,7 @@ __ __ _____ __ __ _____
</div>
</div>
</div>
<script>
const { createApp } = Vue
let app = createApp({
computed: {
crypto: () => window.crypto
},
data() {
return {
userIDInput: '',
userID: "",
showUserID: "",
backend: 'https://api.sms.voidnet.tech/',
availableNumbers: "",
credits: "",
threads: [],
ownedNumber: "Getting number...",
numberPurchaseMessage: "",
moneroAddress: 'Getting monero address...',
darkMode: true,
disableSMSSend: false,
messageToSend: "",
sendToNumber: "",
showingThreadNum: "",
threadOffset: 0,
threadMessages: [],
lastThreadLineHeader: 0,
threadLineHeader: 0
}
},
methods: {
openThread(num){
this.showingThreadNum = num
this.threadOffset = 0
this.threadMessages.length = 0
this.threadLineHeader = 0
this.lastThreadLineHeader = 0
this.getThreadMessages(num)
},
getThreadMessages(num){
if (!num){return}
fetch(this.backend + this.userID + '/thread/' + num + '/' + Number(this.threadOffset).toString()).then(response => {
if (response.ok) {
console.debug(response.headers)
console.debug(response.headers.get('x-total-lines'))
this.threadLineHeader = parseInt(response.headers.get('x-total-lines'))
return response.text()
} else {
throw new Error('Network response was not ok.')
}
}).then(messages => {
if (this.lastThreadLineHeader === this.threadLineHeader){
return
}
this.lastThreadLineHeader = this.threadLineHeader
messages = messages.split('\n')
if (messages.length > 0){
for (let i = 0; i < messages.length; i++){
if (messages[i] !== ''){
this.threadMessages.push(messages[i])
}
}
this.threadOffset = this.threadLineHeader
}
})
},
sendSMS(){
this.disableSMSSend = true
fetch(this.backend + this.userID + '/send/' + this.sendToNumber, {
method: 'POST',
body: this.messageToSend
}).then(resp => {
this.disableSMSSend = false
if (resp.status === 200) {
this.messageToSend = ""
}
else{
console.debug(resp)
}
}).catch(err => {
this.disableSMSSend = false
console.log(err)
})
return false
},
getThreads(doInterval){
let updateThreads = async (data) => {
if (! this.userID){
return
}
let response = await fetch(this.backend + this.userID + '/list')
if (response.ok){
let textResp = await response.text()
if (! RegExp('You').test(textResp)){
// Only update threads that changed
let newThreads = textResp.split('\n')
for (let i = 0; i < newThreads.length; i++){
newThreads[i] = newThreads[i].trim()
if (! this.threads.includes(newThreads[i])){
if (newThreads[i]){
console.debug('added thread')
this.threads.push(newThreads[i])
}
}
}
let removeThreads = []
for (let i = 0; i < this.threads.length; i++){
this.threads[i] = this.threads[i].trim()
if (! newThreads.includes(this.threads[i])){
if (this.threads[i]){
removeThreads.push(this.threads[i])
}
}
}
for (let i = 0; i < removeThreads.length; i++){
this.threads.splice(this.threads.indexOf(removeThreads[i]), 1)
}
}
}
}
updateThreads()
if (doInterval){setInterval(updateThreads, 10000)}
},
async buyNum(e){
let numToBuy = e.target.dataset.number
console.log("Buying number " + numToBuy)
fetch(this.backend + this.userID + '/buynumber/' + numToBuy, {'method': 'POST'}).catch((err) => {
console.log(err)
this.numberPurchaseMessage = "Error purchasing number"
}).then((res) =>{
if (res.ok) {
console.log("Number bought")
this.ownedNumber = numToBuy
this.numberPurchaseMessage = "Successfully purchased number"
} else {
if (res.status === 402){
console.debug("Not enough credits")
this.numberPurchaseMessage = "Not enough credits"
} else {
this.numberPurchaseMessage = "Error purchasing number"
console.log("Error buying number " + res.status)
}
}
})
},
async userLogin() {
this.getXMRAddress()
this.getCredits()
this.getThreads(false)
await this.getOwnedNumber()
},
async getText(endpoint){
let response = await fetch(this.backend + endpoint)
if (! response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
return response.text();
}
},
formatPhone(phoneNumberString) {
let cleaned = ('' + phoneNumberString).replace(/\D/g, '')
let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
if (match) {
return '(' + match[1] + ') ' + match[2] + '-' + match[3]
}
return null;
},
async getCredits(){
this.getText(this.userID + '/creditbal').then((data) => {
this.credits = data
}).catch((error) => {
this.credits = 'Error getting credit balance'
})
},
async getXMRAddress() {
this.getText(this.userID + '/get_user_wallet').then((data) => {
this.moneroAddress = data
}).catch((error) => {
this.moneroAddress = 'Error getting monero address'
})
},
async getOwnedNumber() {
return fetch(this.backend + this.userID + '/number').then((response) => {
if (response.status == 402){
this.ownedNumber = "No number owned"
}
else{
response.text().then((num) => {
this.ownedNumber = num
})
}
}).catch((error) => {
console.debug(error)
this.ownedNumber = 'Error getting phone number'
})
},
async showNumbers(e) {
let req = await fetch(this.backend + 'availablenumbers')
let numbers = await req.text()
this.availableNumbers = numbers.replaceAll('\n\n', '').split('\n').map((number) => {
return number
})
}
},
mounted() {
// do this to get a connection to the backend so we don't have to wait for DNS later
fetch(this.backend + 'ping')
this.getThreads(true)
setInterval(()=>{
this.getThreadMessages(this.showingThreadNum)
}, 5000)
}
})
app.mount('#app')
</script>
<script src="main.js"></script>
<!--

View File

@ -53,6 +53,6 @@ h1, h2, h3, h4, h5, h6{
}
}
.darkMode{
.showUserID{
margin-left: 75%;
}

219
main.js Normal file
View File

@ -0,0 +1,219 @@
const { createApp } = Vue
let app = createApp({
computed: {
crypto: () => window.crypto
},
data() {
return {
userIDInput: '',
userID: "",
showUserID: "",
backend: 'https://api.sms.voidnet.tech/',
availableNumbers: "",
credits: "",
threads: [],
ownedNumber: "Getting number...",
numberPurchaseMessage: "",
moneroAddress: 'Getting monero address...',
darkMode: true,
disableSMSSend: false,
messageToSend: "",
sendToNumber: "",
showingThreadNum: "",
threadOffset: 0,
threadMessages: [],
lastThreadLineHeader: 0,
threadLineHeader: 0
}
},
methods: {
openThread(num){
this.showingThreadNum = num
this.threadOffset = 0
this.threadMessages.length = 0
this.threadLineHeader = 0
this.lastThreadLineHeader = 0
this.getThreadMessages(num)
},
getThreadMessages(num){
if (!num){return}
fetch(this.backend + this.userID + '/thread/' + num + '/' + Number(this.threadOffset).toString()).then(response => {
if (response.ok) {
this.threadLineHeader = parseInt(response.headers.get('x-total-lines'))
return response.text()
} else {
throw new Error('Network response was not ok.')
}
}).then(messages => {
if (this.lastThreadLineHeader === this.threadLineHeader){
return
}
this.lastThreadLineHeader = this.threadLineHeader
messages = messages.split('\n')
if (messages.length > 0){
for (let i = 0; i < messages.length; i++){
if (messages[i] !== ''){
this.threadMessages.push(messages[i])
}
}
this.threadOffset = this.threadLineHeader
}
})
},
sendSMS(){
this.disableSMSSend = true
fetch(this.backend + this.userID + '/send/' + this.sendToNumber, {
method: 'POST',
body: this.messageToSend
}).then(resp => {
this.disableSMSSend = false
if (resp.status === 200) {
this.messageToSend = ""
}
else{
console.debug(resp)
}
}).catch(err => {
this.disableSMSSend = false
console.log(err)
})
return false
},
getThreads(doInterval){
let updateThreads = async (data) => {
if (! this.userID || document.hidden){
return
}
let response = await fetch(this.backend + this.userID + '/list')
if (response.ok){
let textResp = await response.text()
if (! RegExp('You').test(textResp)){
// Only update threads that changed
let newThreads = textResp.split('\n')
for (let i = 0; i < newThreads.length; i++){
newThreads[i] = newThreads[i].trim()
if (! this.threads.includes(newThreads[i])){
if (newThreads[i]){
console.debug('added thread')
this.threads.push(newThreads[i])
}
}
}
let removeThreads = []
for (let i = 0; i < this.threads.length; i++){
this.threads[i] = this.threads[i].trim()
if (! newThreads.includes(this.threads[i])){
if (this.threads[i]){
removeThreads.push(this.threads[i])
}
}
}
for (let i = 0; i < removeThreads.length; i++){
this.threads.splice(this.threads.indexOf(removeThreads[i]), 1)
}
}
}
}
updateThreads()
if (doInterval){setInterval(updateThreads, 10000)}
},
async buyNum(e){
let numToBuy = e.target.dataset.number
console.log("Buying number " + numToBuy)
fetch(this.backend + this.userID + '/buynumber/' + numToBuy, {'method': 'POST'}).catch((err) => {
console.log(err)
this.numberPurchaseMessage = "Error purchasing number"
}).then((res) =>{
if (res.ok) {
console.log("Number bought")
this.ownedNumber = numToBuy
this.numberPurchaseMessage = "Successfully purchased number"
} else {
if (res.status === 402){
console.debug("Not enough credits")
this.numberPurchaseMessage = "Not enough credits"
} else {
this.numberPurchaseMessage = "Error purchasing number"
console.log("Error buying number " + res.status)
}
}
})
},
async userLogin() {
this.getXMRAddress()
this.getThreads(false)
this.getCredits()
await this.getOwnedNumber()
},
async getText(endpoint){
let response = await fetch(this.backend + endpoint)
if (! response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
return response.text();
}
},
formatPhone(phoneNumberString) {
let cleaned = ('' + phoneNumberString).replace(/\D/g, '')
let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
if (match) {
return '(' + match[1] + ') ' + match[2] + '-' + match[3]
}
return null;
},
getCredits(){
if (! this.userID || document.hidden){return}
this.getText(this.userID + '/creditbal').then((data) => {
this.credits = data
}).catch((error) => {
this.credits = 'Error getting credit balance'
})
},
async getXMRAddress() {
this.getText(this.userID + '/get_user_wallet').then((data) => {
this.moneroAddress = data
}).catch((error) => {
this.moneroAddress = 'Error getting monero address'
})
},
async getOwnedNumber() {
return fetch(this.backend + this.userID + '/number').then((response) => {
if (response.status == 402){
this.ownedNumber = "No number owned"
}
else{
response.text().then((num) => {
this.ownedNumber = num
})
}
}).catch((error) => {
console.debug(error)
this.ownedNumber = 'Error getting phone number'
})
},
async showNumbers(e) {
let req = await fetch(this.backend + 'availablenumbers')
let numbers = await req.text()
this.availableNumbers = numbers.replaceAll('\n\n', '').split('\n').map((number) => {
return number
})
}
},
mounted() {
// do this to get a connection to the backend so we don't have to wait for DNS later
fetch(this.backend + 'ping')
this.getThreads(true)
setInterval(()=>{
this.getThreadMessages(this.showingThreadNum)
}, 5000)
setInterval(()=>{
this.getCredits()
}, 30000)
}
})
app.mount('#app')