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

Removed 'connected' state in favour of 'ready' state

Browse source
This commit is contained in:
Joel Collins 2019-02-12 11:10:30 +00:00
parent 9acf4d874d
commit 9610b91cb8
6 changed files with 46 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div class="host-display">
<h2>Debug</h2>
<div v-if="$store.state.connected">
<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>

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

@ -36,10 +36,8 @@ export default {
this.hostname,
this.port
]);
// Try to get config JSON from the newly submitted host
this.$store.dispatch('updateConfig');
// Update the microscope state while we're at it
this.$store.dispatch('updateState');
// Try to get config and state JSON from the newly submitted host
this.$store.dispatch('firstConnect')
}
},
@ -55,7 +53,7 @@ export default {
IpFormClasses: function () {
return {
'uk-form-danger': !this.$store.state.available,
'uk-form-success': this.$store.state.connected
'uk-form-success': this.$store.getters.ready
}
}
}

2
src/components/paneDisplayComponents/streamDisplay.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="streamDisplay scrollTarget">
<img v-on:dblclick="clickmonitor" v-if="$store.state.connected" v-bind:src="streamImgUri" alt="Stream">
<img v-on:dblclick="clickmonitor" v-if="$store.getters.ready" v-bind:src="streamImgUri" alt="Stream">
<div v-else-if="$store.state.waiting" class="uk-position-center">
<div uk-spinner="ratio: 4.5" ></div>

15
src/components/paneNavigate.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="$store.state.connected" id="paneNavigate">
<div id="paneNavigate">
<ul uk-accordion>
<li>
@ -35,21 +35,21 @@
<div>
<label class="uk-form-label" for="form-stacked-text">x</label>
<div class="uk-form-controls">
<input v-model="$store.state.apiState.stage.position.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
<input v-model="setPosition.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
</div>
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">y</label>
<div class="uk-form-controls">
<input v-model="$store.state.apiState.stage.position.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
<input v-model="setPosition.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
</div>
</div>
<div>
<label class="uk-form-label" for="form-stacked-text">z</label>
<div class="uk-form-controls">
<input v-model="$store.state.apiState.stage.position.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
<input v-model="setPosition.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
</div>
</div>
</div>
@ -82,7 +82,12 @@ export default {
data: function () {
return {
stepXy: 50,
stepZz: 20
stepZz: 20,
setPosition: {
x: this.$store.state.apiState.stage.position.x,
y: this.$store.state.apiState.stage.position.y,
z: this.$store.state.apiState.stage.position.z
}
}
},

4
src/components/panelLeft.vue
View file

@ -12,7 +12,7 @@
</ul>
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
<li class="uk-width-expand"><paneConnect/></li>
<li class="uk-width-expand"><paneNavigate/></li>
<li v-if="$store.getters.ready" class="uk-width-expand"><paneNavigate/></li>
</ul>
</div>
</template>
@ -34,7 +34,7 @@ export default {
computed: {
disableIfDisconnected: function () {
return {
'uk-disabled': !this.$store.state.connected
'uk-disabled': !this.$store.getters.ready
}
}
}

53
src/store.js
View file

@ -11,7 +11,6 @@ export default new Vuex.Store({
host: '',
port: 5000,
apiVer: 'v1',
connected: false,
available: true,
waiting: false,
error: '',
@ -25,9 +24,6 @@ export default new Vuex.Store({
state.port = port;
state.apiVer = apiVer;
},
changeConnected(state, connected) {
state.connected = connected
},
changeAvailable(state, available) {
state.available = available
},
@ -46,50 +42,47 @@ export default new Vuex.Store({
},
actions: {
updateConfig(context, uri=`${context.getters.uri}/config`) {
firstConnect(context) {
// Reset the state when reconnecting starts
context.dispatch('resetState');
// Mark as loading
context.commit('changeWaiting', true);
// Do GET request
// Do requests
context.dispatch('updateConfig')
context.dispatch('updateState')
},
updateConfig(context, uri=`${context.getters.uri}/config`) {
context.dispatch('waitingState')
axios.get(uri)
.then(response => {
context.commit('changeWaiting', false);
context.commit('changeConnected', true);
context.commit('changeAvailable', true);
context.commit('commitError', '');
context.commit('commitConfig', response.data);
context.dispatch('connectedState')
})
.catch(error => {
var errormsg = '';
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
errormsg = `${error.response.status}: ${error.response.data}`
console.log(errormsg)
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
errormsg = `${error.message}`
console.log(errormsg)
} else {
// Something happened in setting up the request that triggered an Error
errormsg = `${error.message}`
console.log(errormsg)
}
// Update store state for a major connection error
context.dispatch('errorState', errormsg);
// Show a notification
UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${errormsg}`, status: 'danger'})
})
},
updateState(context, uri=`${context.getters.uri}/state`) {
context.dispatch('waitingState')
axios.get(uri)
.then(response => {
context.commit('commitError', '');
context.commit('commitState', response.data);
context.dispatch('connectedState')
})
.catch(error => {
var errormsg = '';
@ -109,20 +102,32 @@ export default new Vuex.Store({
resetState(context) {
context.commit('changeWaiting', false);
context.commit('changeConnected', false);
context.commit('changeAvailable', true);
context.commit('commitError', '');
context.commit('commitError', null);
context.commit('commitConfig', {});
context.commit('commitState', {});
},
waitingState(context) {
context.commit('changeWaiting', true);
},
connectedState(context) {
context.commit('changeWaiting', false);
context.commit('changeAvailable', true);
},
errorState(context, msg) {
context.commit('changeWaiting', false);
context.commit('changeConnected', false);
context.commit('changeAvailable', false);
context.commit('commitError', msg);
UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${msg}`, status: 'danger'})
}
},
getters: {
uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`
uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`,
ready: state => ((Object.keys(state.apiConfig).length !== 0) && (Object.keys(state.apiState).length !== 0))
}
})