mirror of
https://github.com/Cronocide/WebMessage.git
synced 2025-01-22 11:18:25 +00:00
Popover for status indicator and tunnel status
This commit is contained in:
parent
4349f20079
commit
2dfb6bd3b5
@ -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",
|
||||
|
30
src/App.vue
30
src/App.vue
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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({
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user