Actually gets config from API (with loading spinner!) (001edce4) · Commits · OpenFlexure / openflexure-microscope-server

src/App.vue

+6 −6

Original line number	Diff line number	Diff line
		<template>
		<div id="app">
		<IpInput msg="Is your name good or bad?."/>
		<hostInput/>
		<img alt="Vue logo" src="./assets/images/logo.png">
		<IpDisplay/>
		<hostDisplay/>
		</div>
		</template>

		@@ -16,15 +16,15 @@ import Icons from 'uikit/dist/js/uikit-icons';
		UIkit.use(Icons);

		// Import components
		import IpInput from './components/IpInput.vue'
		import IpDisplay from './components/IpDisplay'
		import hostInput from './components/hostInput.vue'
		import hostDisplay from './components/hostDisplay'

		// Export main app
		export default {
		name: 'app',
		components: {
		IpInput,
		IpDisplay
		hostInput,
		hostDisplay
		}
		}
		</script>

src/components/IpDisplay.vue

deleted100644 → 0

+0 −5

Original line number	Diff line number	Diff line
		<template>
		<div>
		<p>Current hostname is: {{ $store.getters.host }}</p>
		</div>
		</template>
		No newline at end of file

src/components/hostDisplay.vue

0 → 100644

+16 −0

Original line number	Diff line number	Diff line
		<template>
		<div v-if="$store.state.connected">
		<p>Current host is: {{ $store.state.host }}</p>
		<p>Current base URI is: {{ $store.getters.uri }}</p>
		<p v-if="$store.state.apiConfig.name"><b>Connected to:</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">
		Error: {{ $store.state.error }}
		</div>
		<div v-else>
		Enter a hostname and connect to start.
		</div>
		</template>
		No newline at end of file

src/components/IpInput.vue→src/components/hostInput.vue

+7 −20

Original line number	Diff line number	Diff line
		<template>
		<div class="hello">
		{{ msg }}
		<div class="host-input">
		<div class="uk-margin">
		<form @submit.prevent="handleSubmit">
		<div class="uk-inline">
		@@ -17,30 +16,18 @@
		<script>

		export default {
		name: 'HelloWorld',

		props: {
		msg: String
		},
		name: 'hostInput',

		methods: {
		IpChanged: function(event) {
		if (!(event.target.value == this.$store.getters.host)) {
		if (!(event.target.value == this.$store.state.host)) {
		this.hostname = event.target.value
		}
		},

		handleSubmit: function(event) {
		if (this.hostname != "badhost") {
		this.$store.commit('changeHost', this.hostname)
		alert(`Connecting to ${this.$store.getters.host}`)
		this.$store.commit('changeConnected', true)
		}
		else {
		alert("I won't connect to a bad host!")
		this.$store.commit('changeConnected', false)
		this.$store.commit('changeAvailable', false)
		}
		this.$store.commit('changeHost', this.hostname);
		this.$store.dispatch('updateConfig');
		}
		},

		@@ -53,8 +40,8 @@ export default {
		computed: {
		IpFormClasses: function () {
		return {
		'uk-form-danger': !this.$store.getters.available,
		'uk-form-success': this.$store.getters.connected
		'uk-form-danger': !this.$store.state.available,
		'uk-form-success': this.$store.state.connected
		}
		}
		}

src/store.js

+50 −9

Original line number	Diff line number	Diff line
		import Vue from 'vue'
		import Vuex from 'vuex'
		import axios from 'axios'

		Vue.use(Vuex)

		@@ -7,29 +8,69 @@ export default new Vuex.Store({

		state: {
		host: '',
		connected: '',
		available: ''
		port: 5000,
		apiVer: 'v1',
		connected: false,
		available: true,
		waiting: false,
		error: '',
		apiConfig: {}
		},

		mutations: {
		changeHost(state, host) {
		state.host = host
		changeHost(state, host, port=5000, apiVer='v1') {
		state.host = host;
		state.port = port;
		state.apiVer = apiVer;
		},
		changeConnected(state, connected) {
		state.connected = connected
		},
		changeAvailable(state, available) {
		state.available = available
		},
		changeWaiting(state, waiting) {
		state.waiting = waiting
		},
		commitError(state, errorString) {
		state.error = errorString;
		},
		commitConfig(state, configData) {
		state.apiConfig = configData;
		}
		},

		getters: {
		host: state => state.host,
		connected: state => state.connected,
		available: state => state.available
		actions: {
		updateConfig(context, uri=`${context.getters.uri}/config`) {
		// Reset the state when reconnecting starts
		context.dispatch('resetState');
		// Mark as loading
		context.commit('changeWaiting', true);
		// Do GET request
		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);
		}, (error) => {
		context.commit('changeWaiting', false);
		context.commit('commitError', error.message);
		context.commit('changeConnected', false);
		context.commit('changeAvailable', false);
		})
		},
		resetState(context) {
		context.commit('changeWaiting', false);
		context.commit('changeConnected', false);
		context.commit('changeAvailable', true);
		context.commit('commitError', '');
		}
		},

		actions: {
		getters: {
		uri: state => `http://${state.host}:${state.port}/api/${state.apiVer}`
		}

		})