emit changes
This commit is contained in:
Tyrel Souza
parent
f728948f6b
commit
a822acfe31
8
benchtop-fe/package-lock.json
generated
8
benchtop-fe/package-lock.json
generated
@ -12,8 +12,7 @@
|
||||
"@vuepic/vue-datepicker": "^7.0.0",
|
||||
"vls": "^0.8.5",
|
||||
"volar-service-vetur": "^0.0.13",
|
||||
"vue": "^3.3.4",
|
||||
"vue-upload-component": "^3.1.8"
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
@ -2513,11 +2512,6 @@
|
||||
"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": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
"@vuepic/vue-datepicker": "^7.0.0",
|
||||
"vls": "^0.8.5",
|
||||
"volar-service-vetur": "^0.0.13",
|
||||
"vue": "^3.3.4",
|
||||
"vue-upload-component": "^3.1.8"
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
|
||||
BIN
benchtop-fe/public/funky-lines.webp
Normal file
BIN
benchtop-fe/public/funky-lines.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
@ -4,33 +4,63 @@
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><h3>Calibration Date</h3>
|
||||
<VueDatePicker v-model="calibration_date" inline auto-apply :flow="flow"></VueDatePicker>
|
||||
<td>
|
||||
<h3>Calibration Date</h3>
|
||||
<VueDatePicker
|
||||
v-model="date"
|
||||
inline
|
||||
auto-apply
|
||||
:flow="flow"
|
||||
></VueDatePicker>
|
||||
</td>
|
||||
<td><h3>Calibration Due Date</h3>
|
||||
<VueDatePicker v-model="calibration_due_date" inline auto-apply :flow="flow"></VueDatePicker>
|
||||
<td>
|
||||
<h3>Calibration Due Date</h3>
|
||||
<VueDatePicker
|
||||
v-model="due_date"
|
||||
inline
|
||||
auto-apply
|
||||
:flow="flow"
|
||||
></VueDatePicker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Model</td>
|
||||
<td>
|
||||
<input type="text" name="calibration_model" maxlength="100" v-model="calibration_model" required
|
||||
id="id_calibration_model">
|
||||
<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="calibration_serial" maxlength="100" v-model="calibration_serial" required
|
||||
id="id_calibration_serial">
|
||||
<input
|
||||
type="text"
|
||||
name="serial"
|
||||
maxlength="100"
|
||||
v-model="serial"
|
||||
required
|
||||
id="id_serial"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Cert ID</td>
|
||||
<td>
|
||||
<input type="text" name="calibration_cert_id" maxlength="100" v-model="calibration_cert_id" required
|
||||
id="id_calibration_cert_id">
|
||||
<input
|
||||
type="text"
|
||||
name="cert_id"
|
||||
maxlength="100"
|
||||
v-model="cert_id"
|
||||
required
|
||||
id="id_cert_id"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -38,14 +68,28 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import { ref, defineEmits, watchEffect } from "vue";
|
||||
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
const calibration_model = ref( "")
|
||||
const calibration_serial = ref( "")
|
||||
const calibration_cert_id = ref( "")
|
||||
const calibration_due_date = ref( "")
|
||||
const calibration_date = ref( "")
|
||||
const flow = ref( ['year', 'month', 'calendar'])
|
||||
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||
import "@vuepic/vue-datepicker/dist/main.css";
|
||||
|
||||
const
|
||||
model = ref(""),
|
||||
serial = ref(""),
|
||||
cert_id = ref(""),
|
||||
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>
|
||||
@ -34,10 +34,21 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import { ref, watchEffect } from 'vue'
|
||||
|
||||
const customer_name = ref("")
|
||||
const onsite_cal = ref(false)
|
||||
const control_doc = ref("")
|
||||
const technician = ref("")
|
||||
const
|
||||
customer_name = ref(""),
|
||||
onsite_cal = ref(false),
|
||||
control_doc = ref(""),
|
||||
technician = ref("")
|
||||
|
||||
const emit = defineEmits();
|
||||
watchEffect(() => {
|
||||
emit("customer-form", {
|
||||
customer_name,
|
||||
onsite_cal,
|
||||
control_doc,
|
||||
technician,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -6,14 +6,14 @@
|
||||
<tr>
|
||||
<td>Accuracy</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Barometric Pressure (mbar)</td>
|
||||
<td>Barometric Pressure (psi)</td>
|
||||
<td>
|
||||
<input type="number" name="barometric_pressure" step="0.01" max="1100" min="800" v-model="barometric_pressure"
|
||||
required id="id_barometric_pressure">
|
||||
<input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
|
||||
required id="id_pressure">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -24,7 +24,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Humidity</td>
|
||||
<td>Humidity (%RH)</td>
|
||||
<td>
|
||||
<input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
|
||||
id="id_humidity">
|
||||
@ -35,10 +35,21 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import { ref, defineEmits, watchEffect } from 'vue'
|
||||
|
||||
const accuracy = ref(0.05)
|
||||
const barometric_pressure = ref(1013.25)
|
||||
const temperature = ref(50.0)
|
||||
const humidity = ref(50.0)
|
||||
const
|
||||
accuracy = ref(0.05),
|
||||
pressure = ref(14.7),
|
||||
temperature = ref(50.0),
|
||||
humidity = ref(50.0)
|
||||
|
||||
const emit = defineEmits();
|
||||
watchEffect(() => {
|
||||
emit("environment-form", {
|
||||
accuracy,
|
||||
pressure,
|
||||
temperature,
|
||||
humidity,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -3,47 +3,89 @@
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td><h3>Calibration Date</h3>
|
||||
<VueDatePicker v-model="instrument_calibration_date" inline auto-apply :flow="flow"></VueDatePicker>
|
||||
<td>
|
||||
<h3>Calibration Date</h3>
|
||||
<VueDatePicker
|
||||
v-model="date"
|
||||
inline
|
||||
auto-apply
|
||||
:flow="flow"
|
||||
></VueDatePicker>
|
||||
</td>
|
||||
<td><h3>Calibration Due Date</h3>
|
||||
<VueDatePicker v-model="instrument_calibration_due_date" inline auto-apply :flow="flow"></VueDatePicker>
|
||||
<td>
|
||||
<h3>Calibration Due Date</h3>
|
||||
<VueDatePicker
|
||||
v-model="due_date"
|
||||
inline
|
||||
auto-apply
|
||||
:flow="flow"
|
||||
></VueDatePicker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Model</td>
|
||||
<td>
|
||||
<input type="text" name="instrument_model" maxlength="256" v-model="instrument_model" required
|
||||
id="id_instrument_model">
|
||||
<input
|
||||
type="text"
|
||||
name="model"
|
||||
maxlength="256"
|
||||
v-model="model"
|
||||
required
|
||||
id="id_model"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serial Number</td>
|
||||
<td>
|
||||
<input type="text" name="serial_number" maxlength="256" v-model="serial_number" required
|
||||
id="id_serial_number">
|
||||
<input
|
||||
type="text"
|
||||
name="serial_number"
|
||||
maxlength="256"
|
||||
v-model="serial_number"
|
||||
required
|
||||
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">
|
||||
<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">
|
||||
<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">
|
||||
<input
|
||||
type="text"
|
||||
name="transducer_span"
|
||||
maxlength="256"
|
||||
v-model="transducer_span"
|
||||
required
|
||||
id="id_transducer_span"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -51,17 +93,31 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import { ref, defineEmits, watchEffect } from "vue";
|
||||
|
||||
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||
import "@vuepic/vue-datepicker/dist/main.css";
|
||||
|
||||
const channel = ref("")
|
||||
const serial_number = ref("")
|
||||
const instrument_model = ref("")
|
||||
const transducer_model = ref("")
|
||||
const transducer_span = ref("")
|
||||
const instrument_calibration_due_date = ref("")
|
||||
const instrument_calibration_date = ref("")
|
||||
const flow = ['year', 'month', 'calendar']
|
||||
const
|
||||
channel = ref(""),
|
||||
serial_number = ref(""),
|
||||
model = ref(""),
|
||||
transducer_model = ref(""),
|
||||
transducer_span = ref(""),
|
||||
due_date = ref(""),
|
||||
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>
|
||||
@ -7,19 +7,18 @@
|
||||
|
||||
<div class="container">
|
||||
<div class="item card">
|
||||
<CustomerForm />
|
||||
<CustomerForm @customerForm="customerForm" />
|
||||
</div>
|
||||
<div class="item card">
|
||||
<EnvironmentForm />
|
||||
<EnvironmentForm @environmentForm="environmentForm" />
|
||||
</div>
|
||||
|
||||
<div class="item card">
|
||||
<NewInstrumentForm />
|
||||
<NewInstrumentForm @newInstrumentForm="newInstrumentForm" />
|
||||
</div>
|
||||
<div class="item card">
|
||||
<NewCalibrationDeviceForm />
|
||||
<NewCalibrationDeviceForm @newCalibrationForm="newCalibrationForm" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,12 +31,51 @@ import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceFo
|
||||
import EnvironmentForm from "./EnvironmentForm.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) => {
|
||||
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>
|
||||
|
||||
@ -81,10 +81,11 @@
|
||||
<script setup>
|
||||
import { ref, computed, watchEffect } from "vue";
|
||||
|
||||
const report_type = ref("");
|
||||
const files = ref([]);
|
||||
const current_file = ref(null);
|
||||
const doc = ref();
|
||||
const
|
||||
report_type = ref(""),
|
||||
files = ref([]),
|
||||
current_file = ref(null),
|
||||
doc = ref();
|
||||
|
||||
const showUpload = computed({
|
||||
get() {
|
||||
|
||||
@ -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> </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>
|
||||
@ -1,5 +1,6 @@
|
||||
body {
|
||||
margin: 1rem;
|
||||
background: url("/public/funky-lines.webp")
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -7,6 +8,9 @@ body {
|
||||
}
|
||||
.card-header{
|
||||
font-size: 2rem;
|
||||
color:black;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -15,7 +19,7 @@ body {
|
||||
align-content: space-between;
|
||||
/* Your container needs a fixed height, and it
|
||||
* needs to be taller than your tallest column. */
|
||||
height: 1300px;
|
||||
height: 1200px;
|
||||
|
||||
border-radius: 3px;
|
||||
counter-reset: items;
|
||||
@ -34,7 +38,7 @@ body {
|
||||
0 8px 8px rgba(0,90,250,0.05),
|
||||
0 16px 16px rgba(0,90,250,0.05);
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.item::before {
|
||||
@ -53,4 +57,6 @@ body {
|
||||
width: 0;
|
||||
order: 2;
|
||||
}
|
||||
h3 { text-align: center; }
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user