rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplified connect pane

Browse source
This commit is contained in:
Joel Collins 2019-02-15 14:14:51 +00:00
parent f9c4df28f4
commit 35fdaf33d2
3 changed files with 95 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/components/paneConnect.vue
View file

@ -1,25 +1,108 @@
<template> <template>
<div id="paneConnect"> <div class="host-input">
<hostInput/> <div class="uk-margin">
<hostDisplay/> <form @submit.prevent="handleSubmit">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: server"></span>
<input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">
</div>
<button class="uk-button uk-button-default uk-form-small uk-float-right">Connect</button>
<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Advanced</a>
<div class="uk-accordion-content">
<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-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
</div>
</div>
</li>
</ul>
</form>
<div class="host-display">
<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>
Enter a hostname and connect to start.
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
// Import components
import hostInput from './paneConnectComponents/hostInput.vue'
import hostDisplay from './paneConnectComponents/hostDisplay'
// Export main app
export default { export default {
name: 'paneConnect', name: 'paneConnect',
components: {
hostInput, methods: {
hostDisplay handleSubmit: function(event) {
if (this.hostname.includes(':')) {
this.port = this.computedPort
this.hostname = this.hostname.split(':')[0];
}
// Commit the hostname and port to store
this.$store.commit('changeHost', [
this.hostname,
this.port
]);
// Try to get config and state JSON from the newly submitted host
this.$store.dispatch('firstConnect')
}
},
data: function () {
return {
hostname: "localhost",
port: 5000
}
},
computed: {
// Stylises the hostname input box based on connection status
IpFormClasses: function () {
return {
'uk-form-danger': !this.$store.state.available,
'uk-form-success': this.$store.getters.ready
}
},
computedPort: {
get: function() {
if (this.hostname.includes(':')) {
var port = parseInt(this.hostname.split(':')[1]);
return !isNaN(port) ? port : this.port
}
else {
return this.port
}
},
set: function(newPort) {
this.port = newPort
if (this.hostname.includes(':')) {
this.hostname = this.hostname.split(':')[0] + ":" + this.port
}
}
}
} }
} }
</script> </script>
<style lang="less"> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.host-input {
text-align: left;
}
</style> </style>

18
src/components/paneConnectComponents/hostDisplay.vue
View file

@ -1,18 +0,0 @@
<template>
<div class="host-display">
<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>
Enter a hostname and connect to start.
</div>
</div>
</template>

90
src/components/paneConnectComponents/hostInput.vue
View file

@ -1,90 +0,0 @@
<template>
<div class="host-input">
<div class="uk-margin">
<form @submit.prevent="handleSubmit">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: server"></span>
<input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">
</div>
<button class="uk-button uk-button-default uk-form-small uk-float-right">Connect</button>
<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Advanced</a>
<div class="uk-accordion-content">
<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-width-medium uk-form-small" id="form-stacked-text" type="number" value=5000>
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'hostInput',
methods: {
handleSubmit: function(event) {
if (this.hostname.includes(':')) {
this.port = this.computedPort
this.hostname = this.hostname.split(':')[0];
}
// Commit the hostname and port to store
this.$store.commit('changeHost', [
this.hostname,
this.port
]);
// Try to get config and state JSON from the newly submitted host
this.$store.dispatch('firstConnect')
}
},
data: function () {
return {
hostname: "localhost",
port: 5000
}
},
computed: {
// Stylises the hostname input box based on connection status
IpFormClasses: function () {
return {
'uk-form-danger': !this.$store.state.available,
'uk-form-success': this.$store.getters.ready
}
},
computedPort: {
get: function() {
if (this.hostname.includes(':')) {
var port = parseInt(this.hostname.split(':')[1]);
return !isNaN(port) ? port : this.port
}
else {
return this.port
}
},
set: function(newPort) {
this.port = newPort
if (this.hostname.includes(':')) {
this.hostname = this.hostname.split(':')[0] + ":" + this.port
}
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.host-input {
text-align: left;
}
</style>