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

savedHost now persistant via localStorage

Browse source
This commit is contained in:
Joel Collins 2019-02-15 15:42:44 +00:00
parent ca38e1cd6b
commit 0a2dd91b86
1 changed files with 59 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/paneConnect.vue
View file

@ -2,6 +2,8 @@
<div class="host-input"> <div class="host-input">
<div class="uk-margin"> <div class="uk-margin">
<h3>Connect</h3>
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="uk-inline"> <div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: server"></span> <span class="uk-form-icon" uk-icon="icon: server"></span>
@ -23,6 +25,9 @@
</form> </form>
<div class="host-display"> <div class="host-display">
<h3>Status</h3>
<div v-if="$store.getters.ready"> <div v-if="$store.getters.ready">
<p><b>Host:</b> {{ $store.state.host }}</p> <p><b>Host:</b> {{ $store.state.host }}</p>
<p><b>Base URI:</b> {{ $store.getters.uri }}</p> <p><b>Base URI:</b> {{ $store.getters.uri }}</p>
@ -32,24 +37,16 @@
</div> </div>
<div v-else-if="$store.state.waiting"> <div v-else-if="$store.state.waiting"><div uk-spinner></div></div>
<div uk-spinner></div> <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
</div> <div v-else>No active connection</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>
<h3>Saved hosts</h3> <h3>Saved hosts</h3>
<div v-for="host in savedHosts" :key="host.name"> <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
<a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link" uk-icon="trash"></a> <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a>
<a href="#" v-on:click="autofillHost(host)">{{ host.name }} ({{ host.hostname }}:{{ host.port }})</a> <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto" uk-icon="trash"></a>
</div> </div>
</div> </div>
@ -84,6 +81,25 @@ export default {
} }
}, },
mounted() {
// Try loading and parsing savedHosts from localStorage
if (localStorage.getItem('savedHosts')) {
try {
this.savedHosts = JSON.parse(localStorage.getItem('savedHosts'));
} catch(e) {
localStorage.removeItem('savedHosts');
}
}
},
// When savedHosts changes, serialise to JSON and save to localStorage
watch: {
savedHosts(newSavedHosts) {
const parsed = JSON.stringify(this.savedHosts);
localStorage.setItem('savedHosts', parsed);
}
},
methods: { methods: {
handleSubmit: function(event) { handleSubmit: function(event) {
if (this.hostname.includes(':')) { if (this.hostname.includes(':')) {