Move all other local storage into the store.
This commit is contained in:
Julian Stirling
parent
e9eec20027
commit
97fa0b03b2
5 changed files with 62 additions and 77 deletions
|
|
@ -23,23 +23,15 @@ export default {
|
|||
|
||||
data: function() {
|
||||
return {
|
||||
newOrigin: this.$store.state.origin,
|
||||
newOrigin: this.$store.state.overrideOrigin,
|
||||
reloadWhenOverridingOrigin: true,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (localStorage.overrideOrigin) {
|
||||
this.newOrigin = localStorage.overrideOrigin;
|
||||
} else {
|
||||
this.newOrigin = "http://microscope.local:5000";
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
overrideAPIHost: function(event) {
|
||||
// Save the origin override, so that if we reload the web app, you can easily
|
||||
localStorage.overrideOrigin = this.newOrigin;
|
||||
this.$store.commit("changeOverrideOrigin", this.newOrigin);
|
||||
|
||||
// If we have elected not to reload the interface, just update the origin
|
||||
// in the store. Otherwise, the form's default action will do the job for us.
|
||||
|
|
|
|||
|
|
@ -10,12 +10,7 @@
|
|||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">x</label>
|
||||
<div class="uk-form-controls">
|
||||
<input
|
||||
v-model="stepSize.x"
|
||||
class="uk-input uk-form-small"
|
||||
type="number"
|
||||
name="inputStepXy"
|
||||
/>
|
||||
<input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
|
||||
</div>
|
||||
<label class="uk-margin-small-right"
|
||||
><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
|
||||
|
|
@ -25,12 +20,7 @@
|
|||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">y</label>
|
||||
<div class="uk-form-controls">
|
||||
<input
|
||||
v-model="stepSize.y"
|
||||
class="uk-input uk-form-small"
|
||||
type="number"
|
||||
name="inputStepY"
|
||||
/>
|
||||
<input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
|
||||
</div>
|
||||
<label class="uk-margin-small-right"
|
||||
><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
|
||||
|
|
@ -40,12 +30,7 @@
|
|||
<div>
|
||||
<label class="uk-form-label" for="form-stacked-text">z</label>
|
||||
<div class="uk-form-controls">
|
||||
<input
|
||||
v-model="stepSize.z"
|
||||
class="uk-input uk-form-small"
|
||||
type="number"
|
||||
name="inputStepZz"
|
||||
/>
|
||||
<input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,18 +162,6 @@ export default {
|
|||
|
||||
data: function() {
|
||||
return {
|
||||
stepXy: 200,
|
||||
stepZz: 50,
|
||||
stepSize: {
|
||||
x: 200,
|
||||
y: 200,
|
||||
z: 50,
|
||||
},
|
||||
invert: {
|
||||
x: false,
|
||||
y: false,
|
||||
z: false,
|
||||
},
|
||||
setPosition: null,
|
||||
isAutofocusing: 0,
|
||||
moveLock: false,
|
||||
|
|
@ -196,6 +169,15 @@ export default {
|
|||
},
|
||||
|
||||
computed: {
|
||||
// Note that as stepSize and invert are set based on internals we can use
|
||||
// get() and set() to interact with the store. Instead use a deep watcher to
|
||||
// update the store (see ``watch:`` below)
|
||||
stepSize() {
|
||||
return this.$store.state.navigationStepSize;
|
||||
},
|
||||
invert() {
|
||||
return this.$store.state.navigationInvert;
|
||||
},
|
||||
baseUri: function() {
|
||||
return this.$store.getters.baseUri;
|
||||
},
|
||||
|
|
@ -210,22 +192,19 @@ export default {
|
|||
watch: {
|
||||
stepSize: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.setLocalStorageObj("navigation_stepSize", this.stepSize);
|
||||
handler(newVal) {
|
||||
this.$store.commit("changeNavigationStepSize", newVal);
|
||||
},
|
||||
},
|
||||
invert: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.setLocalStorageObj("navigation_invert", this.invert);
|
||||
handler(newVal) {
|
||||
this.$store.commit("changeNavigationInvert", newVal);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// Reload saved settings
|
||||
this.stepSize = this.getLocalStorageObj("navigation_stepSize") || this.stepSize;
|
||||
this.invert = this.getLocalStorageObj("navigation_invert") || this.invert;
|
||||
let self = this;
|
||||
// A global signal listener to perform a move action
|
||||
this.$root.$on("globalMoveEvent", self.move);
|
||||
|
|
|
|||
|
|
@ -32,14 +32,6 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
// Cache the stream settings to local storage for persistence
|
||||
// (the next 3 functions all relate to this)
|
||||
disableStream: function(newValue) {
|
||||
this.setLocalStorageObj("disableStream", newValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -193,22 +193,6 @@ Vue.mixin({
|
|||
toggleModalElement: function(element) {
|
||||
UIkit.modal(element).toggle();
|
||||
},
|
||||
|
||||
getLocalStorageObj: function(keyName) {
|
||||
if (localStorage.getItem(keyName)) {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(keyName));
|
||||
} catch (e) {
|
||||
localStorage.removeItem(keyName);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setLocalStorageObj: function(keyName, object) {
|
||||
const parsed = JSON.stringify(object);
|
||||
localStorage.setItem(keyName, parsed);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import wotStoreModule from "./wot-client";
|
|||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const LOCALSTORAGE_KEYS = ["appTheme"];
|
||||
|
||||
function getOriginFromLocation() {
|
||||
// This will default to the same origin that's serving
|
||||
// the web app - but can be overridden by the URL.
|
||||
|
|
@ -49,6 +47,14 @@ function mutationToKey(mutationName) {
|
|||
return key.charAt(0).toLowerCase() + key.slice(1);
|
||||
}
|
||||
|
||||
const LOCALSTORAGE_KEYS = [
|
||||
"appTheme",
|
||||
"disableStream",
|
||||
"overrideOrigin",
|
||||
"navigationStepSize",
|
||||
"navigationInvert",
|
||||
];
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
wot: wotStoreModule,
|
||||
|
|
@ -58,13 +64,29 @@ export default new Vuex.Store({
|
|||
available: false,
|
||||
waiting: false,
|
||||
error: "",
|
||||
disableStream: false,
|
||||
autoGpuPreview: false,
|
||||
trackWindow: true,
|
||||
galleryEnabled: true,
|
||||
appTheme: "system",
|
||||
activeStreams: {},
|
||||
microscopeHostname: "",
|
||||
// Persistent items:
|
||||
// The app theme (e.g. light/dark)
|
||||
appTheme: "system",
|
||||
disableStream: false,
|
||||
// The origin to use if overriding with dev tools
|
||||
overrideOrigin: "http://microscope.local:5000",
|
||||
// The step sizes for navigation via control pane/keys presses
|
||||
navigationStepSize: {
|
||||
x: 200,
|
||||
y: 200,
|
||||
z: 50,
|
||||
},
|
||||
// The axis inversion for navigation via control pane/keys presses
|
||||
navigationInvert: {
|
||||
x: false,
|
||||
y: false,
|
||||
z: false,
|
||||
},
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
|
@ -110,6 +132,15 @@ export default new Vuex.Store({
|
|||
changeMicroscopeHostname(state, value) {
|
||||
state.microscopeHostname = value;
|
||||
},
|
||||
changeOverrideOrigin(state, value) {
|
||||
state.overrideOrigin = value;
|
||||
},
|
||||
changeNavigationStepSize(state, value) {
|
||||
state.navigationStepSize = value;
|
||||
},
|
||||
changeNavigationInvert(state, value) {
|
||||
state.navigationInvert = value;
|
||||
},
|
||||
},
|
||||
|
||||
actions: {},
|
||||
|
|
@ -123,10 +154,17 @@ export default new Vuex.Store({
|
|||
store => {
|
||||
// Load initial state from localStorage
|
||||
LOCALSTORAGE_KEYS.forEach(key => {
|
||||
console.log(key);
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved !== null) {
|
||||
const mutationName = keyToMutationName(key);
|
||||
store.commit(mutationName, JSON.parse(saved));
|
||||
try {
|
||||
const parsed = JSON.parse(saved);
|
||||
const mutationName = keyToMutationName(key);
|
||||
store.commit(mutationName, parsed);
|
||||
} catch (e) {
|
||||
console.warn(`Failed to parse localStorage key "${key}":`, e);
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue