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

Remove unnecessary components

Browse source
This commit is contained in:
Richard Bowman 2023-11-30 23:22:00 +00:00
parent 54df1faeeb
commit 8865d88e20
3 changed files with 0 additions and 379 deletions
Download patch file Download diff file Expand all files Collapse all files

123
webapp/src/components/genericComponents/multiNumericSettingLine.vue
View file

@ -1,123 +0,0 @@
<template>
<div>
<label class="uk-form-label">{{ label }}</label>
<div class="input-and-buttons-container">
<input
v-for="(_v, key) in value"
:key="key"
v-model="value[key]"
class="uk-form-small numeric-setting-line-input"
type="number"
@focusin="focusIn"
@focusout="focusOut"
@keydown="keyDown"
/>
<a class="button-next-to-input" @click="readProperty">
<i class="material-icons">refresh</i>
</a>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "MultiNumericSettingLine",
props: {
label: {
type: String,
required: true
},
propertyUrl: {
type: String,
required: true
},
readBackDelay: {
type: Number,
default: undefined,
required: false
}
},
data: () => {
return {
value: {},
valueOnEnter: undefined
};
},
computed: {
readBack: function() {
return this.readBackDelay !== undefined;
}
},
mounted() {
this.readProperty();
},
methods: {
readProperty: async function() {
let response = await axios.get(this.propertyUrl);
this.value = response.data;
console.log("Read property", this.propertyUrl, response.data);
return response.data;
},
writeProperty: async function() {
try {
let requestedValue = Number(this.value);
await axios.post(this.propertyUrl, requestedValue);
if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty();
if (newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`);
} else {
await this.modalNotify(
`Set ${this.label} to ${newVal} (requested ${requestedValue}).`
);
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
focusIn: function(event) {
this.valueOnEnter = event.target.value;
},
focusOut: function(event) {
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
},
keyDown: function(event) {
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
}
}
};
</script>
<style scoped>
.input-and-buttons-container {
display: table;
width: 100%;
}
.numeric-setting-line-input {
display: table-cell;
width: 100%;
}
.button-next-to-input {
display: table-cell;
padding-left: 20px;
padding-right: 5px;
vertical-align: middle;
cursor: pointer;
}
</style>

129
webapp/src/components/genericComponents/numericArraySettingLine.vue
View file

@ -1,129 +0,0 @@
<template>
<div>
<label class="uk-form-label">{{ label }}</label>
<div class="input-and-buttons-container">
<input
v-for="i in value.length"
:key="i"
v-model="value[i - 1]"
class="uk-form-small numeric-setting-line-input"
type="number"
@focusin="focusIn"
@focusout="focusOut"
@keydown="keyDown"
/>
<a class="button-next-to-input" @click="readProperty">
<i class="material-icons">refresh</i>
</a>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "NumericArraySettingLine",
props: {
label: {
type: String,
required: true
},
propertyUrl: {
type: String,
required: true
},
readBackDelay: {
type: Number,
default: undefined,
required: false
}
},
data: () => {
return {
value: {},
valueOnEnter: undefined
};
},
computed: {
readBack: function() {
return this.readBackDelay !== undefined;
}
},
mounted() {
this.readProperty();
},
methods: {
readProperty: async function() {
let response = await axios.get(this.propertyUrl);
this.value = response.data;
console.log("Read property", this.propertyUrl, response.data);
return response.data;
},
writeProperty: async function() {
try {
let requestedValue = this.value;
await axios.post(this.propertyUrl, requestedValue);
if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty();
if (newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`);
} else {
await this.modalNotify(
`Set ${this.label} to ${newVal} (requested ${requestedValue}).`
);
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
focusIn: function(event) {
this.valueOnEnter = event.target.value;
},
focusOut: function(event) {
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
},
keyDown: function(event) {
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
}
}
};
</script>
<style scoped>
.input-and-buttons-container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: stretch;
align-items: center;
width: 100%;
}
.numeric-setting-line-input {
flex-grow: 1;
margin-left: 5px;
margin-right: 5px;
width: 6em;
}
.button-next-to-input {
flex-grow: 0;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
cursor: pointer;
}
</style>

127
webapp/src/components/genericComponents/numericSettingLine.vue
View file

@ -1,127 +0,0 @@
<template>
<div>
<label class="uk-form-label">{{ label }}</label>
<div class="input-and-buttons-container">
<input
v-model="value"
class="uk-form-small numeric-setting-line-input"
type="number"
@focusin="focusIn"
@focusout="focusOut"
@keydown="keyDown"
/>
<a class="button-next-to-input" @click="readProperty">
<i class="material-icons">refresh</i>
</a>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "NumericSettingLine",
props: {
label: {
type: String,
required: true
},
propertyUrl: {
type: String,
required: true
},
readBackDelay: {
type: Number,
default: undefined,
required: false
}
},
data: () => {
return {
value: undefined,
valueOnEnter: undefined
};
},
computed: {
readBack: function() {
return this.readBackDelay !== undefined;
}
},
mounted() {
this.readProperty();
},
methods: {
readProperty: async function() {
let response = await axios.get(this.propertyUrl);
this.value = response.data;
console.log("Read property", this.propertyUrl, response.data);
return response.data;
},
writeProperty: async function() {
try {
let requestedValue = Number(this.value);
await axios.post(this.propertyUrl, requestedValue);
if (this.readBack) {
await new Promise(r => setTimeout(r, this.readBackDelay));
let newVal = await this.readProperty();
if (newVal == requestedValue) {
await this.modalNotify(`Set ${this.label} to ${newVal}.`);
} else {
await this.modalNotify(
`Set ${this.label} to ${newVal} (requested ${requestedValue}).`
);
}
} else {
await this.modalNotify(`Set ${this.label} to ${this.value}.`);
}
} catch (error) {
this.modalError(error); // Let mixin handle error
}
},
focusIn: function(event) {
this.valueOnEnter = event.target.value;
},
focusOut: function(event) {
if (this.valueOnEnter != event.target.value) {
this.writeProperty(event.target.value);
}
},
keyDown: function(event) {
// Pressing enter should set the property, whether or not we think it's changed.
if (event.keyCode == 13) {
this.writeProperty();
}
}
}
};
</script>
<style scoped>
.input-and-buttons-container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: stretch;
align-items: center;
width: 100%;
}
.numeric-setting-line-input {
flex-grow: 1;
margin-left: 5px;
margin-right: 5px;
width: 6em;
}
.button-next-to-input {
flex-grow: 0;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
cursor: pointer;
}
</style>