Moved connect into a display panel tab
This commit is contained in:
Joel Collins
parent
2982720017
commit
cceaa645be
6 changed files with 256 additions and 105 deletions
|
|
@ -168,6 +168,7 @@
|
||||||
|
|
||||||
.uk-card {
|
.uk-card {
|
||||||
border-radius: @paper-border-radius;
|
border-radius: @paper-border-radius;
|
||||||
|
border: 1px solid rgba(180, 180, 180, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-card-media-top img {
|
.uk-card-media-top img {
|
||||||
|
|
|
||||||
44
src/components/controlComponents/paneStatus.vue
Normal file
44
src/components/controlComponents/paneStatus.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="host-input">
|
||||||
|
|
||||||
|
<div v-if="$store.getters.ready">
|
||||||
|
<p><b>Host:</b> {{ $store.state.host }}</p>
|
||||||
|
<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
|
||||||
|
<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="$store.state.waiting"><div uk-spinner></div></div>
|
||||||
|
<div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
|
||||||
|
<div v-else>No active connection</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'paneStatus',
|
||||||
|
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
// When savedHosts changes, serialise to JSON and save to localStorage
|
||||||
|
watch: {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped lang="less">
|
||||||
|
</style>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<!-- Vertical tab bar -->
|
<!-- Vertical tab bar -->
|
||||||
<div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
|
<div id="switcher-left" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1">
|
||||||
<tabIcon id="connect" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
|
<tabIcon id="status" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab">
|
||||||
<i class="material-icons">settings_ethernet</i>
|
<i class="material-icons">settings_ethernet</i>
|
||||||
</tabIcon>
|
</tabIcon>
|
||||||
<tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
|
<tabIcon id="navigate" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab">
|
||||||
|
|
@ -31,8 +31,8 @@
|
||||||
<!-- Corresponding vertical tab content -->
|
<!-- Corresponding vertical tab content -->
|
||||||
<div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
|
<div v-bind:hidden="!showControlBar" id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
|
||||||
<div id="component-left" class="uk-padding-remove uk-flex uk-flex-1 panel-content">
|
<div id="component-left" class="uk-padding-remove uk-flex uk-flex-1 panel-content">
|
||||||
<tabContent id="connect" :requireConnection="false" :currentTab="currentTab">
|
<tabContent id="status" :requireConnection="false" :currentTab="currentTab">
|
||||||
<paneConnect/>
|
<paneStatus/>
|
||||||
</tabContent>
|
</tabContent>
|
||||||
<tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
|
<tabContent id="navigate" :requireConnection="true" :currentTab="currentTab">
|
||||||
<paneNavigate/>
|
<paneNavigate/>
|
||||||
|
|
@ -79,7 +79,7 @@ import tabIcon from './genericComponents/tabIcon'
|
||||||
import tabContent from './genericComponents/tabContent'
|
import tabContent from './genericComponents/tabContent'
|
||||||
|
|
||||||
// Import pane components
|
// Import pane components
|
||||||
import paneConnect from './controlComponents/paneConnect'
|
import paneStatus from './controlComponents/paneStatus'
|
||||||
import paneNavigate from './controlComponents/paneNavigate'
|
import paneNavigate from './controlComponents/paneNavigate'
|
||||||
import paneCapture from './controlComponents/paneCapture'
|
import paneCapture from './controlComponents/paneCapture'
|
||||||
import paneSettings from './controlComponents/paneSettings'
|
import paneSettings from './controlComponents/paneSettings'
|
||||||
|
|
@ -94,7 +94,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
tabIcon,
|
tabIcon,
|
||||||
tabContent,
|
tabContent,
|
||||||
paneConnect,
|
paneStatus,
|
||||||
paneNavigate,
|
paneNavigate,
|
||||||
paneCapture,
|
paneCapture,
|
||||||
paneSettings,
|
paneSettings,
|
||||||
|
|
@ -103,7 +103,7 @@ export default {
|
||||||
|
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
currentTab: 'connect',
|
currentTab: 'status',
|
||||||
showControlBar: true
|
showControlBar: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,12 @@
|
||||||
<!-- Tabbed panel for gallery and live views -->
|
<!-- Tabbed panel for gallery and live views -->
|
||||||
<div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
|
<div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
|
||||||
<ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
|
<ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
|
||||||
<li><a href="#" uk-switcher-item="preview">Live</a></li>
|
<li><a href="#" uk-switcher-item="connect">Connect</a></li>
|
||||||
|
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="preview">Live</a></li>
|
||||||
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
|
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="uk-switcher uk-flex uk-flex-1">
|
<ul class="uk-switcher uk-flex uk-flex-1">
|
||||||
|
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="connectDisplayTab"><connectDisplay/></li>
|
||||||
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
|
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
|
||||||
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
|
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -19,6 +21,7 @@ import axios from 'axios'
|
||||||
import UIkit from 'uikit';
|
import UIkit from 'uikit';
|
||||||
|
|
||||||
// Import components
|
// Import components
|
||||||
|
import connectDisplay from './viewComponents/connectDisplay.vue'
|
||||||
import streamDisplay from './viewComponents/streamDisplay.vue'
|
import streamDisplay from './viewComponents/streamDisplay.vue'
|
||||||
import galleryDisplay from './viewComponents/galleryDisplay.vue'
|
import galleryDisplay from './viewComponents/galleryDisplay.vue'
|
||||||
|
|
||||||
|
|
@ -27,6 +30,7 @@ export default {
|
||||||
name: 'panelRight',
|
name: 'panelRight',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
|
connectDisplay,
|
||||||
streamDisplay,
|
streamDisplay,
|
||||||
galleryDisplay,
|
galleryDisplay,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
68
src/components/viewComponents/connectComponents/hostCard.vue
Normal file
68
src/components/viewComponents/connectComponents/hostCard.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div class="hostCard uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
|
||||||
|
|
||||||
|
<div class="uk-card-body uk-padding-small uk-height-small">
|
||||||
|
|
||||||
|
<div class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
|
||||||
|
<div class="uk-width-expand host-description"><b>{{ name }}</b> ({{ hostname }}:{{ port }})</div>
|
||||||
|
<a href="#" v-on:click="$emit('delete')" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="uk-card-footer uk-padding-small">
|
||||||
|
<button
|
||||||
|
class="uk-button uk-button-default uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
|
||||||
|
v-on:click="$emit('connect')"
|
||||||
|
>Connect</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import UIkit from 'uikit';
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
// Export main app
|
||||||
|
export default {
|
||||||
|
name: 'hostCard',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
hostname: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
port: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
|
||||||
|
created: function () {
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.host-description {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,80 +1,107 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="host-input">
|
<div class="connectDisplay uk-padding uk-padding-remove-left">
|
||||||
<div class="uk-margin">
|
|
||||||
|
|
||||||
<form @submit.prevent="handleSubmit">
|
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
||||||
<div class="uk-form-controls uk-margin">
|
|
||||||
<label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
|
<div class="uk-width-auto">
|
||||||
<label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="false" checked> Connect remotely</label>
|
|
||||||
</div>
|
<div class="uk-card uk-card-default uk-card-hover uk-padding-remove uk-width-medium">
|
||||||
|
|
||||||
|
<div class="uk-card-body uk-padding-small">
|
||||||
|
<form @submit.prevent="handleSubmit">
|
||||||
|
<div class="uk-form-controls uk-margin">
|
||||||
|
<label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="true"> Connect locally</label><br>
|
||||||
|
<label><input class="uk-radio" type="radio" name="radio_local" v-model="computedLocalMode" v-bind:value="false" checked> Connect remotely</label>
|
||||||
|
</div>
|
||||||
|
<div v-if="!localMode">
|
||||||
|
<div class="uk-inline uk-width-1-1">
|
||||||
|
<span class="uk-form-icon"><i class="material-icons">dns</i></span>
|
||||||
|
<input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
|
||||||
|
</div>
|
||||||
|
<label class="uk-form-label" for="form-stacked-text">Port</label>
|
||||||
|
<div class="uk-form-controls">
|
||||||
|
<input v-model="computedPort" class="uk-input uk-form-small" id="form-stacked-text" type="number" value=5000>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="uk-card-footer uk-padding-small">
|
||||||
|
<button
|
||||||
|
v-on:click="handleSubmit"
|
||||||
|
class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
|
||||||
|
Connect
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="$store.getters.ready"
|
||||||
|
v-on:click="saveHost()"
|
||||||
|
class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">
|
||||||
|
Save Current
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="$store.getters.ready"
|
||||||
|
v-on:click="$store.commit('resetState')"
|
||||||
|
class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
|
||||||
|
Disconnect
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="!localMode">
|
|
||||||
<div class="uk-inline uk-width-1-1">
|
|
||||||
<span class="uk-form-icon"><i class="material-icons">dns</i></span>
|
|
||||||
<input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul uk-accordion="multiple: true">
|
<div class="uk-width-expand">
|
||||||
<li>
|
<ul uk-accordion="multiple: true">
|
||||||
<a class="uk-accordion-title" href="#">Advanced</a>
|
|
||||||
<div class="uk-accordion-content">
|
<li class="uk-open">
|
||||||
<label class="uk-form-label" for="form-stacked-text">Port</label>
|
<a class="uk-accordion-title" href="#">Saved devices</a>
|
||||||
<div class="uk-form-controls">
|
<div class="uk-accordion-content">
|
||||||
<input v-model="computedPort" class="uk-input uk-form-small" id="form-stacked-text" type="number" value=5000>
|
|
||||||
|
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
|
||||||
|
|
||||||
|
<div v-for="host in savedHosts" :key="host.name">
|
||||||
|
<hostCard
|
||||||
|
:name="host.name"
|
||||||
|
:hostname="host.hostname"
|
||||||
|
:port="host.port"
|
||||||
|
v-on:connect="connectToHost(host)"
|
||||||
|
v-on:delete="delSavedHost(host)"
|
||||||
|
></hostCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
|
||||||
|
<li class="uk-open">
|
||||||
|
<a class="uk-accordion-title" href="#">Nearby devices</a>
|
||||||
|
<div class="uk-accordion-content">
|
||||||
|
|
||||||
|
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
|
||||||
|
|
||||||
|
<div v-for="host in Object.values(foundHosts)" :key="host.name">
|
||||||
|
<hostCard
|
||||||
|
:name="host.name"
|
||||||
|
:hostname="host.hostname"
|
||||||
|
:port="host.port"
|
||||||
|
:deletable="false"
|
||||||
|
v-on:connect="connectToHost(host)"
|
||||||
|
></hostCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="uk-accordion-title" href="#">Status</a>
|
|
||||||
<div class="uk-accordion-content">
|
|
||||||
<div v-if="$store.getters.ready">
|
|
||||||
<p><b>Host:</b> {{ $store.state.host }}</p>
|
|
||||||
<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
|
|
||||||
<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="$store.state.waiting"><div uk-spinner></div></div>
|
</li>
|
||||||
<div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
|
|
||||||
<div v-else>No active connection</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li v-if="!localMode" class="uk-open">
|
</ul>
|
||||||
<a class="uk-accordion-title" href="#">Nearby devices</a>
|
</div>
|
||||||
<div class="uk-accordion-content">
|
|
||||||
<div v-for="host in Object.values(foundHosts)" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
|
|
||||||
<a href="#" v-on:click="autofillHost(host)" class="uk-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li v-if="!localMode" class="uk-open">
|
</div>
|
||||||
<a class="uk-accordion-title" href="#">Saved devices</a>
|
|
||||||
<div class="uk-accordion-content">
|
|
||||||
<button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
|
|
||||||
<div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
|
|
||||||
<a href="#" v-on:click="autofillHost(host)" class="uk-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a>
|
|
||||||
<a href="#" v-on:click="delSavedHost(host)" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
<button class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">Connect</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<button
|
|
||||||
v-if="$store.getters.ready"
|
|
||||||
v-on:click="$store.commit('resetState')"
|
|
||||||
class="uk-button uk-button-danger uk-form-small uk-float-right uk-margin uk-margin-remove-top uk-width-1-1">
|
|
||||||
Disconnect
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -86,9 +113,15 @@ if (userAgent.indexOf(' electron/') > -1) {
|
||||||
var mdns = require('mdns-js');
|
var mdns = require('mdns-js');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
import hostCard from './connectComponents/hostCard.vue'
|
||||||
|
|
||||||
|
// Export main app
|
||||||
export default {
|
export default {
|
||||||
name: 'paneConnect',
|
name: 'connectDisplay',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
hostCard
|
||||||
|
},
|
||||||
|
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -98,7 +131,7 @@ export default {
|
||||||
selectedHost: "",
|
selectedHost: "",
|
||||||
savedHosts: [],
|
savedHosts: [],
|
||||||
foundHosts: {}
|
foundHosts: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -148,23 +181,16 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleSubmit: function(event) {
|
connectToHost: function(host) {
|
||||||
// Split host and port if needed
|
console.log(host)
|
||||||
if (this.hostname.includes(':')) {
|
// Set the global form values
|
||||||
this.port = this.computedPort;
|
this.hostname = host.hostname
|
||||||
this.hostname = this.hostname.split(':')[0];
|
this.port = host.port
|
||||||
}
|
|
||||||
// Handle auto-local-connect
|
|
||||||
if (this.localMode) {
|
|
||||||
var hostname = "localhost";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var hostname = this.hostname;
|
|
||||||
}
|
|
||||||
// Commit the hostname and port to store
|
// Commit the hostname and port to store
|
||||||
this.$store.commit('changeHost', [
|
this.$store.commit('changeHost', [
|
||||||
hostname,
|
host.hostname,
|
||||||
this.port
|
host.port
|
||||||
]);
|
]);
|
||||||
// Try to get config and state JSON from the newly submitted host
|
// Try to get config and state JSON from the newly submitted host
|
||||||
this.$store.dispatch('firstConnect')
|
this.$store.dispatch('firstConnect')
|
||||||
|
|
@ -174,7 +200,30 @@ export default {
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
this.modalError(error) // Let mixin handle error
|
this.modalError(error) // Let mixin handle error
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSubmit: function(event) {
|
||||||
|
// Split host and port if needed
|
||||||
|
if (this.hostname.includes(':')) {
|
||||||
|
this.port = this.computedPort;
|
||||||
|
this.hostname = this.hostname.split(':')[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle auto-local-connect
|
||||||
|
if (this.localMode) {
|
||||||
|
var hostname = "localhost";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var hostname = this.hostname;
|
||||||
|
}
|
||||||
|
|
||||||
|
var selectedHost = {
|
||||||
|
hostname: hostname,
|
||||||
|
port: this.port
|
||||||
|
}
|
||||||
|
|
||||||
|
this.connectToHost(selectedHost)
|
||||||
},
|
},
|
||||||
|
|
||||||
checkServerVersion: function () {
|
checkServerVersion: function () {
|
||||||
|
|
@ -217,11 +266,6 @@ export default {
|
||||||
//this.$root.$emit('globalTogglePreview', state)
|
//this.$root.$emit('globalTogglePreview', state)
|
||||||
},
|
},
|
||||||
|
|
||||||
autofillHost: function (host) {
|
|
||||||
this.hostname = host.hostname;
|
|
||||||
this.port = host.port
|
|
||||||
},
|
|
||||||
|
|
||||||
delSavedHost: function (host) {
|
delSavedHost: function (host) {
|
||||||
console.log(host)
|
console.log(host)
|
||||||
var index = this.savedHosts.indexOf(host);
|
var index = this.savedHosts.indexOf(host);
|
||||||
|
|
@ -279,16 +323,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computedSelectedHost: {
|
|
||||||
get: function() {
|
|
||||||
return this.selectedHost
|
|
||||||
},
|
|
||||||
set: function(host) {
|
|
||||||
this.selectedHost = host;
|
|
||||||
this.hostname = host.hostname;
|
|
||||||
this.port = host.port;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue