Popover for status indicator and tunnel status

This commit is contained in:
Aziz Hasanain 2021-02-11 16:33:27 +03:00
parent 4349f20079
commit 2dfb6bd3b5
5 changed files with 47 additions and 13 deletions

View File

@ -35,6 +35,7 @@
"usbmux": "^0.1.0",
"vue": "^2.6.11",
"vue-feather": "^1.1.1",
"vue-js-popover": "^1.2.1",
"vue-linkify": "^1.0.1",
"vue-native-websocket": "^2.0.14",
"vue-router": "^3.2.0",

View File

@ -15,8 +15,11 @@
</div>
</div>
<div class="statusIndicator" style="margin-top: 1px;">
<feather type="circle" stroke="rgba(25,25,25,0.5)" :fill="statusColor" size="10"></feather>
<feather type="circle" stroke="rgba(25,25,25,0.5)" :fill="statusColor" size="10" v-popover:status.bottom></feather>
</div>
<popover name="status" event="hover" transition="fade">
{{ statusText }}
</popover>
<div class="menuBtn">
<feather type="settings" stroke="rgba(152,152,152,0.5)" size="20" @click="$refs.settingsModal.openModal()"></feather>
</div>
@ -79,6 +82,11 @@ export default {
status: 0 // 0 for disconnected, 1 for connecting, 2 for connected
}
},
watch: {
$socket(to, from) {
console.log(to)
}
},
computed: {
filteredChats() {
return this.chats.filter((chat) => {
@ -93,6 +101,15 @@ export default {
} else if (this.status == 2) {
return "rgba(0,255,0,0.5)"
}
},
statusText () {
if (this.status == 0) {
return "Device not found"
} else if (this.status == 1) {
return "Device found. Retrieving data..."
} else if (this.status == 2) {
return "Device connected"
}
}
},
methods: {
@ -141,6 +158,7 @@ export default {
this.offset = 0
this.loading = false
this.$disconnect()
this.status = 0
this.$store.commit('resetMessages')
const baseURI = this.$store.getters.baseURI
@ -299,7 +317,7 @@ export default {
},
onerror () {
this.loading = false
this.status = 0
this.status = 1
this.$store.commit('resetMessages')
this.$router.push('/').catch(()=>{})
},
@ -314,6 +332,14 @@ export default {
</script>
<style lang="scss">
.vue-popover {
background: rgba(25,25,25,0.8) !important;
font-size: 14px;
&::before {
border-bottom-color: rgba(25,25,25,0.8) !important;
}
}
.emoji {
position: relative;
top: 0.15em;

View File

@ -1,19 +1,15 @@
<template>
<transition name="fade">
<div class="modal" v-if="show">
<popover name="tunnel" event="click" transition="fade">{{ relayMessage }}</popover>
<div class="modal__backdrop" @click="closeModal()" :class="{ nostyle: !($store.state.macstyle || process.platform === 'darwin') }"/>
<div class="modal__dialog">
<h3>Settings</h3>
<input type="password" placeholder="Password" class="textinput" v-model="password" />
<input type="text" placeholder="IP Address" class="textinput" v-model="ipAddress"/>
<input type="text" placeholder="IP Address" class="textinput" v-model="ipAddress" :disabled="this.enableTunnel"/>
<div class="tunnelToggle">
<feather type="circle" size="20" @click="toggleTunnel" @mouseover="showTunnelDesc = true" @mouseout="showTunnelDesc = false"
:fill="relayColor"
></feather>
<div class="desc" v-show="showTunnelDesc">
{{ relayMessage }}
</div>
<feather type="circle" size="20" @click="toggleTunnel" :fill="relayColor" v-popover:tunnel.bottom></feather>
</div>
<input ref="portField" type="number" placeholder="Port" class="textinput" min="1" max="65535" @keyup="enforceConstraints" v-model="port" />
<label class="switch">
@ -77,7 +73,6 @@ export default {
acceleration: true,
version: '',
process: window.process,
showTunnelDesc: false,
relay: null,
relayStatus: -1,
relayMessage: "Tunneling is currently disabled. Click the circle and ensure your device is attached to enable it.",
@ -120,7 +115,7 @@ export default {
this.relay = new usbmux.Relay(this.port, this.port)
.on('error', (err) => {
if (err.message.includes('No devices connected')) {
this.relayMessage = "Tunneling is currently deactivated. No device is attached. Ensure you have iTunes installed."
this.relayMessage = "Error: No device is attached. Ensure that your device is plugged in and that you have iTunes installed."
this.relayStatus = 0
this.$store.commit('setIPAddress', this.ipAddress)
this.$emit('saved')
@ -129,7 +124,7 @@ export default {
})
.on('warning', (err) => {
if (err.message.includes('No devices connected')) {
this.relayMessage = "Tunneling is currently deactivated. No device is attached. Ensure you have iTunes installed."
this.relayMessage = "Error: No device is attached. Ensure that your device is plugged in and that you have iTunes installed."
this.relayStatus = 0
this.$store.commit('setIPAddress', this.ipAddress)
this.$emit('saved')
@ -301,6 +296,12 @@ export default {
-webkit-appearance: none;
margin: 0;
}
&:disabled {
color: gray !important;
text-decoration: line-through;
cursor: not-allowed;
}
}
h3 {

View File

@ -10,6 +10,7 @@ import VueFeather from 'vue-feather'
import Twemoji from './plugins/Twemoji'
import linkify from 'vue-linkify'
import $ from 'jquery'
import Popover from 'vue-js-popover'
window.$ = $
const https = require('https')
@ -18,13 +19,13 @@ Vue.use(Twemoji, {
extension: '.svg',
size: 'svg'
})
Vue.use(VueNativeSock, 'ws://', {
format: 'json',
reconnection: true,
connectManually: true,
})
Vue.use(VueFeather)
Vue.use(Popover, { tooltip: true })
Vue.config.productionTip = false
Vue.prototype.$http = axios.create({

View File

@ -10489,6 +10489,11 @@ vue-hot-reload-api@^2.3.0:
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
vue-js-popover@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/vue-js-popover/-/vue-js-popover-1.2.1.tgz#ef48ea253483c9357bdb92bbe213e602cb28a279"
integrity sha512-kcnbv2qIJ26fCWtaDgzBq7A+K8/+w78fr0sQhmqLv66NewggwbsbFX4yqN9KeL4PwHrLfqr1QTBgaR+/TKZWyQ==
vue-linkify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/vue-linkify/-/vue-linkify-1.0.1.tgz#2c62181978ef1c65d874d9b156479531d6630cb3"