tyrel/benchtopdevices
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 2 Releases Wiki Activity

emit changes

Browse Source
This commit is contained in:
Tyrel Souza 2023-10-06 23:32:36 -04:00
parent f728948f6b
commit a822acfe31
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
11 changed files with 293 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
benchtop-fe/package-lock.json generated
View File

@ -12,8 +12,7 @@
"@vuepic/vue-datepicker": "^7.0.0", "@vuepic/vue-datepicker": "^7.0.0",
"vls": "^0.8.5", "vls": "^0.8.5",
"volar-service-vetur": "^0.0.13", "volar-service-vetur": "^0.0.13",
"vue": "^3.3.4", "vue": "^3.3.4"
"vue-upload-component": "^3.1.8"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",
@ -2513,11 +2512,6 @@
"eslint": ">=6.0.0" "eslint": ">=6.0.0"
} }
}, },
"node_modules/vue-upload-component": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/vue-upload-component/-/vue-upload-component-3.1.8.tgz",
"integrity": "sha512-8LHCrgmEZPg+1hbkKjQgMce2uasmGLEnIsLE8YG+vNyfNDuaQA71T+5t6kdDSG/szeh+E8mjb26uEd9WkVSFtg=="
},
"node_modules/which": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
benchtop-fe/package.json
View File

@ -13,8 +13,7 @@
"@vuepic/vue-datepicker": "^7.0.0", "@vuepic/vue-datepicker": "^7.0.0",
"vls": "^0.8.5", "vls": "^0.8.5",
"volar-service-vetur": "^0.0.13", "volar-service-vetur": "^0.0.13",
"vue": "^3.3.4", "vue": "^3.3.4"
"vue-upload-component": "^3.1.8"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",

BIN
benchtop-fe/public/funky-lines.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

120
benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
View File

@ -3,49 +3,93 @@
<div class="card-body"> <div class="card-body">
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><h3>Calibration Date</h3> <td>
<VueDatePicker v-model="calibration_date" inline auto-apply :flow="flow"></VueDatePicker> <h3>Calibration Date</h3>
</td> <VueDatePicker
<td><h3>Calibration Due Date</h3> v-model="date"
<VueDatePicker v-model="calibration_due_date" inline auto-apply :flow="flow"></VueDatePicker> inline
</td> auto-apply
</tr> :flow="flow"
<tr> ></VueDatePicker>
<td>Model</td> </td>
<td> <td>
<input type="text" name="calibration_model" maxlength="100" v-model="calibration_model" required <h3>Calibration Due Date</h3>
id="id_calibration_model"> <VueDatePicker
</td> v-model="due_date"
</tr> inline
<tr> auto-apply
<td>Serial #</td> :flow="flow"
<td> ></VueDatePicker>
<input type="text" name="calibration_serial" maxlength="100" v-model="calibration_serial" required </td>
id="id_calibration_serial"> </tr>
</td> <tr>
</tr> <td>Model</td>
<td>
<input
type="text"
name="model"
maxlength="100"
v-model="model"
required
id="id_model"
/>
</td>
</tr>
<tr>
<td>Serial #</td>
<td>
<input
type="text"
name="serial"
maxlength="100"
v-model="serial"
required
id="id_serial"
/>
</td>
</tr>
<tr> <tr>
<td>Cert ID</td> <td>Cert ID</td>
<td> <td>
<input type="text" name="calibration_cert_id" maxlength="100" v-model="calibration_cert_id" required <input
id="id_calibration_cert_id"> type="text"
</td> name="cert_id"
</tr> maxlength="100"
v-model="cert_id"
required
id="id_cert_id"
/>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue' import { ref, defineEmits, watchEffect } from "vue";
import VueDatePicker from '@vuepic/vue-datepicker'; import VueDatePicker from "@vuepic/vue-datepicker";
import '@vuepic/vue-datepicker/dist/main.css'; import "@vuepic/vue-datepicker/dist/main.css";
const calibration_model = ref( "")
const calibration_serial = ref( "") const
const calibration_cert_id = ref( "") model = ref(""),
const calibration_due_date = ref( "") serial = ref(""),
const calibration_date = ref( "") cert_id = ref(""),
const flow = ref( ['year', 'month', 'calendar']) due_date = ref(""),
date = ref("")
const flow = ref(["year", "month", "calendar"]);
const emit = defineEmits();
watchEffect(() => {
emit("new-calibration-form", {
model,
serial,
cert_id,
due_date,
date,
});
});
</script> </script>

21
benchtop-fe/src/components/CustomerForm.vue
View File

@ -34,10 +34,21 @@
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue' import { ref, watchEffect } from 'vue'
const customer_name = ref("") const
const onsite_cal = ref(false) customer_name = ref(""),
const control_doc = ref("") onsite_cal = ref(false),
const technician = ref("") control_doc = ref(""),
technician = ref("")
const emit = defineEmits();
watchEffect(() => {
emit("customer-form", {
customer_name,
onsite_cal,
control_doc,
technician,
});
});
</script> </script>

31
benchtop-fe/src/components/EnvironmentForm.vue
View File

@ -6,14 +6,14 @@
<tr> <tr>
<td>Accuracy</td> <td>Accuracy</td>
<td> <td>
<input type="number" name="accuracy" step="0.01" v-model="accuracy" required id="id_accuracy"> <input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Barometric Pressure (mbar)</td> <td>Barometric Pressure (psi)</td>
<td> <td>
<input type="number" name="barometric_pressure" step="0.01" max="1100" min="800" v-model="barometric_pressure" <input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
required id="id_barometric_pressure"> required id="id_pressure">
</td> </td>
</tr> </tr>
<tr> <tr>
@ -24,7 +24,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Humidity</td> <td>Humidity (%RH)</td>
<td> <td>
<input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required <input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
id="id_humidity"> id="id_humidity">
@ -35,10 +35,21 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue' import { ref, defineEmits, watchEffect } from 'vue'
const accuracy = ref(0.05) const
const barometric_pressure = ref(1013.25) accuracy = ref(0.05),
const temperature = ref(50.0) pressure = ref(14.7),
const humidity = ref(50.0) temperature = ref(50.0),
humidity = ref(50.0)
const emit = defineEmits();
watchEffect(() => {
emit("environment-form", {
accuracy,
pressure,
temperature,
humidity,
});
});
</script> </script>

164
benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
View File

@ -3,65 +3,121 @@
<div class="card-body"> <div class="card-body">
<table class="table"> <table class="table">
<tbody> <tbody>
<tr>
<tr> <td>
<td><h3>Calibration Date</h3> <h3>Calibration Date</h3>
<VueDatePicker v-model="instrument_calibration_date" inline auto-apply :flow="flow"></VueDatePicker> <VueDatePicker
</td> v-model="date"
<td><h3>Calibration Due Date</h3> inline
<VueDatePicker v-model="instrument_calibration_due_date" inline auto-apply :flow="flow"></VueDatePicker> auto-apply
</td> :flow="flow"
</tr> ></VueDatePicker>
<tr> </td>
<td>Model</td> <td>
<td> <h3>Calibration Due Date</h3>
<input type="text" name="instrument_model" maxlength="256" v-model="instrument_model" required <VueDatePicker
id="id_instrument_model"> v-model="due_date"
</td> inline
</tr> auto-apply
<tr> :flow="flow"
<td>Serial Number</td> ></VueDatePicker>
<td> </td>
<input type="text" name="serial_number" maxlength="256" v-model="serial_number" required </tr>
id="id_serial_number"> <tr>
</td> <td>Model</td>
</tr> <td>
<tr> <input
<td>Channel</td> type="text"
<td> name="model"
<input type="text" name="channel" maxlength="256" v-model="channel" required id="id_channel"> maxlength="256"
</td> v-model="model"
</tr> required
<tr> id="id_model"
<td>Transducer Model</td> />
<td> </td>
<input type="text" name="transducer_model" maxlength="256" v-model="transducer_model" required </tr>
id="id_transducer_model"> <tr>
</td> <td>Serial Number</td>
</tr> <td>
<tr> <input
<td>Transducer Span</td> type="text"
<td> name="serial_number"
<input type="text" name="transducer_span" maxlength="256" v-model="transducer_span" required maxlength="256"
id="id_transducer_span"> v-model="serial_number"
</td> required
</tr> id="id_serial_number"
/>
</td>
</tr>
<tr>
<td>Channel</td>
<td>
<input
type="text"
name="channel"
maxlength="256"
v-model="channel"
required
id="id_channel"
/>
</td>
</tr>
<tr>
<td>Transducer Model</td>
<td>
<input
type="text"
name="transducer_model"
maxlength="256"
v-model="transducer_model"
required
id="id_transducer_model"
/>
</td>
</tr>
<tr>
<td>Transducer Span</td>
<td>
<input
type="text"
name="transducer_span"
maxlength="256"
v-model="transducer_span"
required
id="id_transducer_span"
/>
</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue' import { ref, defineEmits, watchEffect } from "vue";
import VueDatePicker from '@vuepic/vue-datepicker'; import VueDatePicker from "@vuepic/vue-datepicker";
import '@vuepic/vue-datepicker/dist/main.css'; import "@vuepic/vue-datepicker/dist/main.css";
const channel = ref("") const
const serial_number = ref("") channel = ref(""),
const instrument_model = ref("") serial_number = ref(""),
const transducer_model = ref("") model = ref(""),
const transducer_span = ref("") transducer_model = ref(""),
const instrument_calibration_due_date = ref("") transducer_span = ref(""),
const instrument_calibration_date = ref("") due_date = ref(""),
const flow = ['year', 'month', 'calendar'] date = ref(""),
flow = ["year", "month", "calendar"]
const emit = defineEmits();
watchEffect(() => {
emit("new-instrument-form", {
channel,
serial_number,
model,
transducer_model,
transducer_span,
due_date,
date,
});
});
</script> </script>

54
benchtop-fe/src/components/Sheet.vue
View File

@ -7,19 +7,18 @@
<div class="container"> <div class="container">
<div class="item card"> <div class="item card">
<CustomerForm /> <CustomerForm @customerForm="customerForm" />
</div> </div>
<div class="item card"> <div class="item card">
<EnvironmentForm /> <EnvironmentForm @environmentForm="environmentForm" />
</div> </div>
<div class="item card"> <div class="item card">
<NewInstrumentForm /> <NewInstrumentForm @newInstrumentForm="newInstrumentForm" />
</div> </div>
<div class="item card"> <div class="item card">
<NewCalibrationDeviceForm /> <NewCalibrationDeviceForm @newCalibrationForm="newCalibrationForm" />
</div> </div>
</div> </div>
</template> </template>
@ -32,12 +31,51 @@ import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceFo
import EnvironmentForm from "./EnvironmentForm.vue"; import EnvironmentForm from "./EnvironmentForm.vue";
import UploadForm from "./UploadForm.vue"; import UploadForm from "./UploadForm.vue";
const upload_form_data = ref(); const
upload_form_data = ref(),
calibration_form_data = ref(),
customer_form_data = ref(),
environment_form_data = ref(),
new_instrument_form_data = ref(),
instrument_form_data = ref(),
new_calibration_form_data = ref()
const uploadForm = (form) => { const uploadForm = (form) => {
upload_form_data.value = form; upload_form_data.value = form;
} };
const customerForm = (form) => {
customer_form_data.value = form;
};
const emits = defineEmits(["uploadForm"]); const environmentForm = (form) => {
environment_form_data.value = form;
};
const newInstrumentForm = (form) => {
new_instrument_form_data.value = form;
};
const instrumentForm = (form) => {
instrument_form_data.value = form;
};
const newCalibrationForm = (form) => {
new_calibration_form_data.value = form;
};
const calibrationForm = (form) => {
calibration_form_data.value = form;
};
const emits = defineEmits([
"uploadForm",
"customerForm",
"environmentForm",
"instrumentForm",
"newInstrumentForm",
"calibrationForm",
"newCalibrationForm",
]);
</script> </script>

9
benchtop-fe/src/components/UploadForm.vue
View File

@ -81,10 +81,11 @@
<script setup> <script setup>
import { ref, computed, watchEffect } from "vue"; import { ref, computed, watchEffect } from "vue";
const report_type = ref(""); const
const files = ref([]); report_type = ref(""),
const current_file = ref(null); files = ref([]),
const doc = ref(); current_file = ref(null),
doc = ref();
const showUpload = computed({ const showUpload = computed({
get() { get() {

111
benchtop-fe/src/components/_UploadForm.vue
View File

@ -1,111 +0,0 @@
<template>
<div class="card-header">Report Uploads</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Report Type</td>
<td>
<select name="report_type" v-model="report_type" required id="id_report_type">
<option value="" selected>---------</option>
<option value="TV">Transducer Verify</option>
<option value="HC">Hardware Calibration</option>
</select>
</td>
</tr>
<tr>
<td colspan=2>
<ul>
<li v-for="file in files" :key="file.id">
{{ file.name }}
<label>
<input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
</label>
<label>
<input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
</label>
<label>
<input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
</label>
</li>
</ul>
<file-upload
class="btn btn-primary"
post-action="/upload/post"
extensions="txt"
accept="text/plain"
:multiple="true"
:size="1024 * 1024 * 10"
v-model="files"
@input-filter="inputFilter"
@input-file="inputFile"
ref="upload">
<i class="fa fa-plus"></i>
Select files
</file-upload>
<button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
Start Upload
</button>
<button type="button" class="btn btn-danger" v-else @click.prevent="upload.active = false">
<i class="fa fa-stop" aria-hidden="true"></i>
Stop Upload
</button>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="right">
<input type="submit" value="Generate PDF and Label">
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
import {VueUploadComponent as FileUpload} from 'vue-upload-component'
const report_type = ref('')
const files = ref([])
const upload = ref(null)
const inputFile = (newFile, oldFile) => {
if (newFile && oldFile && !newFile.active && oldFile.active) {
// Get response data
console.log('response', newFile.response)
if (newFile.xhr) {
// Get the response status code
console.log('status', newFile.xhr.status)
}
}
}
const inputFilter = (newFile, oldFile, prevent) => {
if (newFile && !oldFile) {
// Filter non-image file
if (!/\.(txt)$/i.test(newFile.name)) {
return prevent()
}
}
// Create a blob field
newFile.blob = ''
const URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.blob = URL.createObjectURL(newFile.file)
}
console.log(URL)
}
const kindChange = (opt, file) => {
// Change the file kind metadata, (both, as found, as left) for the uploaded file
file.kind = opt
console.log(file)
}
</script>

12
benchtop-fe/src/style.css
View File

@ -1,5 +1,6 @@
body { body {
margin: 1rem; margin: 1rem;
background: url("/public/funky-lines.webp")
} }
.card { .card {
@ -7,6 +8,9 @@ body {
} }
.card-header{ .card-header{
font-size: 2rem; font-size: 2rem;
color:black;
font-weight: bold;
} }
.container { .container {
@ -15,7 +19,7 @@ body {
align-content: space-between; align-content: space-between;
/* Your container needs a fixed height, and it /* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */ * needs to be taller than your tallest column. */
height: 1300px; height: 1200px;
border-radius: 3px; border-radius: 3px;
counter-reset: items; counter-reset: items;
@ -34,7 +38,7 @@ body {
0 8px 8px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05); 0 16px 16px rgba(0,90,250,0.05);
color: #fff; color: #fff;
padding: 15px; /* padding: 15px; */
box-sizing: border-box; box-sizing: border-box;
} }
.item::before { .item::before {
@ -53,4 +57,6 @@ body {
width: 0; width: 0;
order: 2; order: 2;
} }
h3 { text-align: center; } h3 {
text-align: center;
}