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

Compare commits

base: tyrel:e0489f5ca80c812377a79a4b02ad8907af48b267
Branches Tags
tyrel:main
tyrel:csharp
..
compare: tyrel:291ff7d68d4cee8880e0d0728b2621d9dca3b836
Branches Tags
tyrel:main
tyrel:csharp

4 Commits
e0489f5ca8 ... 291ff7d68d

Author SHA1 Message Date
Tyrel Souza
291ff7d68d
organize: 2024-07-07 13:58:30 -04:00
Tyrel Souza
450c9ec991
closer to working 2024-07-05 00:06:32 -04:00
Tyrel Souza
098b616db2
<div></div> 2024-07-04 23:37:28 -04:00
Tyrel Souza
5001030746
small updates getting running 2024-07-04 23:25:51 -04:00
19 changed files with 5642 additions and 658 deletions
Show Stats Expand all files Collapse all files

2
benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div>
<div class="card-header"> <div class="card-header">
Primary Cal Device Primary Cal Device
<button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button> <button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
@ -27,6 +28,7 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, defineEmits, watchEffect } from "vue"; import { ref, defineEmits, watchEffect } from "vue";

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

@ -1,28 +1,30 @@
<template> <template>
<div class="card-header">Calibration Devices</div> <div>
<div class="card-body"> <div class="card-header">Calibration Devices</div>
<h3>Primary Device</h3> <div class="card-body">
<select name="primary_device" v-model="report_type" required id="id_report_type"> <h3>Primary Device</h3>
<option value="-" selected>----Primary-----</option> <select name="primary_device" v-model="primary_device" required id="id_report_type">
<option value="TV">Menzer1</option> <option value="-" selected>----Primary-----</option>
<option value="HC">Blackbelt</option> <option value="Menzer1">Menzer1</option>
</select> <option value="Blackbelt">Blackbelt</option>
</select>
<h3>Calibration Date</h3>
<div class="date-picker">
<VueDatePicker v-model="primary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
</div>
<hr />
<h3>Secondary Device</h3>
<select name="secondary_device" v-model="secondary_device" required id="id_report_type">
<option value="-" selected>----Secondary-----</option>
<option value="Menzer1">Menzer1</option>
<option value="Blackbelt">Blackbelt</option>
</select>
<h3>Calibration Date</h3> <h3>Calibration Date</h3>
<div class="date-picker"> <div class="date-picker">
<VueDatePicker v-model="date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker> <VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
</div> </div>
<hr />
<h3>Secondary Device</h3>
<select name="secondary_device" v-model="report_type" required id="id_report_type">
<option value="-" selected>----Secondary-----</option>
<option value="TV">Menzer1</option>
<option value="HC">Blackbelt</option>
</select>
<h3>Calibration Date</h3>
<div class="date-picker">
<VueDatePicker v-model="date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
</div> </div>
</div> </div>
</template> </template>
@ -32,22 +34,20 @@ 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 model = ref(""), const primary_device = ref(""),
serial = ref(""), secondary_device = ref(""),
cert_id = ref(""), primary_calibration_date = ref(new Date()),
due_date = ref(new Date()), secondary_calibration_date = ref(new Date());
date = ref(new Date());
const flow = ref(["year", "month", "calendar"]); const flow = ref(["year", "month", "calendar"]);
const emit = defineEmits(); const emit = defineEmits();
watchEffect(() => { watchEffect(() => {
emit("new-calibration-form", { emit("new-calibration-form", {
model, primary_device,
serial, secondary_device,
cert_id, primary_calibration_date,
due_date, secondary_calibration_date,
date,
}); });
}); });
</script> </script>

62
benchtop-fe/src/components/Customer/CustomerForm.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div>
<div class="card-header">Customer</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Customer Name</td>
<td>
<input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
id="id_customer_name">
</td>
</tr>
<tr>
<td>On Site Calibration</td>
<td>
<div class="checkbox-wrapper-55">
<label class="rocker rocker-small">
<input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
<span class="switch-left">Yes</span>
<span class="switch-right">No</span>
</label>
</div>
</td>
</tr>
<tr>
<td>Control Doc#</td>
<td>
<input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
</td>
</tr>
<tr>
<td>Technician</td>
<td>
<input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
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>

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

@ -1,60 +0,0 @@
<template>
<div class="card-header">Customer</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Customer Name</td>
<td>
<input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
id="id_customer_name">
</td>
</tr>
<tr>
<td>On Site Calibration</td>
<td>
<div class="checkbox-wrapper-55">
<label class="rocker rocker-small">
<input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
<span class="switch-left">Yes</span>
<span class="switch-right">No</span>
</label>
</div>
</td>
</tr>
<tr>
<td>Control Doc#</td>
<td>
<input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
</td>
</tr>
<tr>
<td>Technician</td>
<td>
<input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
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>

57
benchtop-fe/src/components/Environment/EnvironmentForm.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div>
<div class="card-header">Environment</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Accuracy</td>
<td>
<input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
</td>
</tr>
<tr>
<td>Pressure (psi)</td>
<td>
<input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
required id="id_pressure">
</td>
</tr>
<tr>
<td>Temperature (&deg;F)</td>
<td>
<input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
id="id_temperature">
</td>
</tr>
<tr>
<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">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { ref, defineEmits, watchEffect } from 'vue'
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>

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

@ -1,55 +0,0 @@
<template>
<div class="card-header">Environment</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Accuracy</td>
<td>
<input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
</td>
</tr>
<tr>
<td>Pressure (psi)</td>
<td>
<input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
required id="id_pressure">
</td>
</tr>
<tr>
<td>Temperature (&deg;F)</td>
<td>
<input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
id="id_temperature">
</td>
</tr>
<tr>
<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">
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, defineEmits, watchEffect } from 'vue'
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>

54
benchtop-fe/src/components/Instrument/InstrumentForm.vue
View File

@ -1,30 +1,32 @@
<template> <template>
<div class="card-header"> <div>
Instrument <div class="card-header">
<button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button> Instrument
</div> <button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
<div class="card-body"> </div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td>Serial #</td> <tr>
<td> <td>Serial #</td>
<input <td>
type="text" <input
name="serial" type="text"
maxlength="100" name="serial"
v-model="serial" maxlength="100"
required v-model="serial"
id="id_serial" required
/> id="id_serial"
</td> />
</tr> </td>
</tbody> </tr>
</table> </tbody>
<div class="summary"> </table>
<p>Enter a serial number to search for an existing <br/> <div class="summary">
Primary Calibration Device, or press New to log a new device. <p>Enter a serial number to search for an existing <br/>
</p> Primary Calibration Device, or press New to log a new device.
</p>
</div>
</div> </div>
</div> </div>
</template> </template>

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

@ -1,101 +1,103 @@
<template> <template>
<div class="card-header">Instrument</div> <div>
<div class="card-body"> <div class="card-header">Instrument</div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td colspan="2"> <tr>
<h3>Calibration Date</h3> <td colspan="2">
<div class="date-picker"> <h3>Calibration Date</h3>
<VueDatePicker <div class="date-picker">
v-model="date" <VueDatePicker
auto-apply v-model="date"
:enableTimePicker="false" auto-apply
:flow="flow" :enableTimePicker="false"
></VueDatePicker> :flow="flow"
</div> ></VueDatePicker>
</td> </div>
</tr> </td>
<tr> </tr>
<td colspan="2"> <tr>
<h3>Calibration Due Date</h3> <td colspan="2">
<div class="date-picker"> <h3>Calibration Due Date</h3>
<VueDatePicker <div class="date-picker">
v-model="due_date" <VueDatePicker
:enableTimePicker="false" v-model="due_date"
auto-apply :enableTimePicker="false"
:flow="flow" auto-apply
></VueDatePicker> :flow="flow"
</div> ></VueDatePicker>
</td> </div>
</tr> </td>
<tr> </tr>
<td>Model</td> <tr>
<td> <td>Model</td>
<input <td>
type="text" <input
name="model" type="text"
maxlength="256" name="model"
v-model="model" maxlength="256"
required v-model="model"
id="id_model" required
/> id="id_model"
</td> />
</tr> </td>
<tr> </tr>
<td>Serial Number</td> <tr>
<td> <td>Serial Number</td>
<input <td>
type="text" <input
name="serial_number" type="text"
maxlength="256" name="serial_number"
v-model="serial_number" maxlength="256"
required v-model="serial_number"
id="id_serial_number" required
/> id="id_serial_number"
</td> />
</tr> </td>
<tr> </tr>
<td>Channel</td> <tr>
<td> <td>Channel</td>
<input <td>
type="text" <input
name="channel" type="text"
maxlength="256" name="channel"
v-model="channel" maxlength="256"
required v-model="channel"
id="id_channel" required
/> id="id_channel"
</td> />
</tr> </td>
<tr> </tr>
<td>Transducer Model</td> <tr>
<td> <td>Transducer Model</td>
<input <td>
type="text" <input
name="transducer_model" type="text"
maxlength="256" name="transducer_model"
v-model="transducer_model" maxlength="256"
required v-model="transducer_model"
id="id_transducer_model" required
/> id="id_transducer_model"
</td> />
</tr> </td>
<tr> </tr>
<td>Transducer Span (psia)</td> <tr>
<td> <td>Transducer Span (psia)</td>
<input <td>
type="text" <input
name="transducer_span" type="text"
maxlength="256" name="transducer_span"
v-model="transducer_span" maxlength="256"
required v-model="transducer_span"
id="id_transducer_span" required
/> id="id_transducer_span"
</td> />
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>

232
benchtop-fe/src/components/PDF/PDF.vue
View File

@ -1,122 +1,123 @@
<template> <template>
<div class="card-header">Finished?</div> <div>
<div class="card-body"> <div class="card-header">Finished?</div>
<button class="custom-button" @click="exportToPDF"> <div class="card-body">
Generate PDF and Label <button class="custom-button" @click="exportToPDF">
</button> Generate PDF and Label
<br> </button>
<br> <br>
<div :class="{ hide: hide }" class="px666 scroll-pdf"> <br>
<div v-for="table of tables"> <div :class="{ hide: hide }" class="px666 scroll-pdf">
<div id="pdf" ref="document"> <div id="pdf" ref="document">
<div class="header"> <div v-for="table of tables">
<div class="flex-container"> <div class="header">
<div class="column pct-25"> <div class="flex-container">
<img :src="BenchTopLogoUrl"/> <div class="column pct-25">
</div> <img :src="BenchTopLogoUrl" alt="benchtop devices logo" />
<div class="column pct-50"> </div>
<div>Customer: {{ props.customer?.customer_name }}</div> <div class="column pct-50">
<div>Onsite cal (yes/no): {{ onsite() }}</div> <div>Customer: {{ props.customer?.customer_name }}</div>
<div>Control Doc#: {{ props.customer?.control_doc }}</div> <div>Onsite cal (yes/no): {{ onsite() }}</div>
<div>Technician: {{ props.customer?.technician }}</div> <div>Control Doc#: {{ props.customer?.control_doc }}</div>
</div> <div>Technician: {{ props.customer?.technician }}</div>
<div class="column pct-25"> </div>
<img :src="Al2pCertUrl"/> <div class="column pct-25">
<img :src="Al2pCertUrl"/>
</div>
</div> </div>
</div> </div>
</div> <!-- EndHeader -->
<!-- EndHeader --> <h1>Calibration Certificate</h1>
<h1>Calibration Certificate</h1>
<!-- Instrument Info --> <!-- Instrument Info -->
<div class="instrument-information"> <div class="instrument-information">
<div class="flex-container"> <div class="flex-container">
<div class="column pct-33"> <div class="column pct-33">
<div><span class="ul">Instrument</span></div> <div><span class="ul">Instrument</span></div>
<div> <div>
<span class="label">Model :</span>{{ props.instrument?.model }} <span class="label">Model :</span>{{ props.instrument?.model }}
</div>
<div>
<span class="label">Serial# :</span
>{{ props.instrument?.serial_number }}
</div>
<div>
<span class="label">Channel :</span
>{{ props.instrument?.channel }}
</div>
<div>
<span class="label">Transducer Model :</span
>{{ props.instrument?.transducer_model }}
</div>
<div>
<span class="label">Transducer Span :</span
>{{ props.instrument?.transducer_span }}
</div>
</div> </div>
<div> <div class="column pct-33">
<span class="label">Serial# :</span <div><span class="ul">Primary Cal Device</span></div>
>{{ props.instrument?.serial_number }} <div>
<span class="label">Model :</span>{{ props.calibration?.model }}
</div>
<div>
<span class="label">Serial# :</span
>{{ props.calibration?.serial }}
</div>
<div><span class="label">Cal Date :</span>{{ c_date() }}</div>
<div>
<span class="label">Cal Due Date :</span>{{ c_due_date() }}
</div>
<div>
<span class="label">Cert ID :</span
>{{ props.calibration?.cert_id }}
</div>
</div> </div>
<div> <div class="column pct-33">
<span class="label">Channel :</span <div><span class="label">Cal Date :</span>{{ i_date() }}</div>
>{{ props.instrument?.channel }} <div>
</div> <span class="label">Cal Due Date :</span>{{ i_due_date() }}
<div> </div>
<span class="label">Transducer Model :</span <div><span class="ul">Environmental Data</span></div>
>{{ props.instrument?.transducer_model }} <div>
</div> <span class="label">Baro (Psi) :</span
<div> >{{ props.environment?.pressure }}
<span class="label">Transducer Span :</span </div>
>{{ props.instrument?.transducer_span }} <div>
</div> <span class="label">Temp (&deg;F):</span
</div> >{{ props.environment?.temperature }}
<div class="column pct-33"> </div>
<div><span class="ul">Primary Cal Device</span></div> <div>
<div> <span class="label">Humidity (%RH):</span
<span class="label">Model :</span>{{ props.calibration?.model }} >{{ props.environment?.humidity }}
</div> </div>
<div>
<span class="label">Serial# :</span
>{{ props.calibration?.serial }}
</div>
<div><span class="label">Cal Date :</span>{{ c_date() }}</div>
<div>
<span class="label">Cal Due Date :</span>{{ c_due_date() }}
</div>
<div>
<span class="label">Cert ID :</span
>{{ props.calibration?.cert_id }}
</div>
</div>
<div class="column pct-33">
<div><span class="label">Cal Date :</span>{{ i_date() }}</div>
<div>
<span class="label">Cal Due Date :</span>{{ i_due_date() }}
</div>
<div><span class="ul">Environmental Data</span></div>
<div>
<span class="label">Baro (Psi) :</span
>{{ props.environment?.pressure }}
</div>
<div>
<span class="label">Temp (&deg;F):</span
>{{ props.environment?.temperature }}
</div>
<div>
<span class="label">Humidity (%RH):</span
>{{ props.environment?.humidity }}
</div> </div>
</div> </div>
</div> </div>
</div> <br/>
<br/> <!-- End InstrumentInfo -->
<!-- End InstrumentInfo --> <!-- As Found -->
<!-- As Found --> <ReadingTable :as_found="table.as_found" />
<ReadingTable :as_found="table.as_found" /> <br/>
<br/> <!-- As Left -->
<!-- As Left --> <ReadingTable :as_left="table.as_left" />
<ReadingTable :as_left="table.as_left" /> <!-- End Instruments-->
<!-- End Instruments--> <div class="box">
<div class="box"> <p>
<p> Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006 Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer) </p>
</p> <p>
<p> Uncertainty Statement: The accuracy of measurement is determined by
Uncertainty Statement: The accuracy of measurement is determined by the standards uncertainty, with a coverage factor of k=2 (confidence
the standards uncertainty, with a coverage factor of k=2 (confidence of roughly 95%).
of roughly 95%). </p>
</p> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div>
<div> </div>
{{ output() }}
</div> </div>
</template> </template>
@ -193,15 +194,18 @@ const c_due_date = () => {
}; };
const exportToPDF = () => { const exportToPDF = () => {
const element = document.getElementById("pdf"); if (props.upload !== undefined && props.upload.files.length > 0) {
var opt = { const element = document.getElementById("pdf");
margin: 0.4,
filename: `${props.instrument.model}_${i_date()}.pdf`, var opt = {
image: {type: "jpeg", quality: 0.98}, margin: 0.4,
html2canvas: {scale: 2}, filename: `${props.instrument.model}_${i_date()}.pdf`,
jsPDF: {unit: "in", format: "letter", orientation: "portrait"}, image: {type: "jpeg", quality: 0.98},
}; html2canvas: {scale: 2},
html2pdf().from(element).set(opt).save(); jsPDF: {unit: "in", format: "letter", orientation: "portrait"},
};
html2pdf().from(element).set(opt).save();
}
}; };
const output = () => { const output = () => {

192
benchtop-fe/src/components/PDF/ReadingTable.vue
View File

@ -1,99 +1,101 @@
<template> <template>
<div class="readings"> <div>
<table class="table table-striped"> <div class="readings">
<thead> <table class="table table-striped">
<tr> <thead>
<th>Gauge Reading</th> <tr>
<th>Accuracy (+/- FS)</th> <th>Gauge Reading</th>
<th>Low Limit</th> <th>Accuracy (+/- FS)</th>
<th>High Limit</th> <th>Low Limit</th>
<th>As Found (units)</th> <th>High Limit</th>
<th>OOT</th> <th>As Found (units)</th>
</tr> <th>OOT</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>

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

@ -37,6 +37,7 @@
</div> </div>
<div class="right"> <div class="right">
<!-- these props don't recalculate -->
<PDF <PDF
:upload="upload_form_data" :upload="upload_form_data"
:customer="customer_form_data" :customer="customer_form_data"
@ -51,13 +52,13 @@
<script setup> <script setup>
import { ref, defineEmits } from "vue"; import { ref, defineEmits } from "vue";
import CustomerForm from "./CustomerForm.vue"; import CustomerForm from "./Customer/CustomerForm.vue";
import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue"; import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
import InstrumentForm from "./Instrument/InstrumentForm.vue"; import InstrumentForm from "./Instrument/InstrumentForm.vue";
import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue"; import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue"; import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue";
import EnvironmentForm from "./EnvironmentForm.vue"; import EnvironmentForm from "./Environment/EnvironmentForm.vue";
import UploadForm from "./UploadForm.vue"; import UploadForm from "./Upload/UploadForm.vue";
import PDF from "./PDF/PDF.vue"; import PDF from "./PDF/PDF.vue";
// Not needed yet // Not needed yet
@ -121,6 +122,8 @@ const emits = defineEmits([
"showNewInstrument", "showNewInstrument",
"showNewCalibration", "showNewCalibration",
]); ]);
</script> </script>
<style scoped> <style scoped>

177
benchtop-fe/src/components/Upload/UploadForm.vue Normal file
View File

@ -0,0 +1,177 @@
<template>
<div>
<div class="card-header">Report Uploads</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>
Report Type
<select
name="report_type"
v-model="report_type"
required
id="id_report_type"
>
<option value="-" selected>----Select-----</option>
<option value="Transducer Verify">Transducer Verify</option>
<option value="Hardware Calibration">Hardware Calibration</option>
</select>
</td>
</tr>
<tr v-if="report_type != '-' || showUpload">
<td>
<button
class="custom-button"
@click="openFileInput"
v-if="showUpload"
>
Select {{ report_type }} File
</button>
</td>
</tr>
<tr v-if="files.length > 0">
<td>
<ul>
<li v-for="(file, index) in files" :key="index" class="file-list">
<button class="custom-button red" @click="removeUpload(index)">
X
</button>
<span>{{ file.name }}</span>
<div class="kind btn-group">
<input
type="radio"
class="btn-check"
:id="'both_kind_' + index"
:name="'kind_' + index"
value="both"
@change="kindChange('both', file)"
/>
<label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
<input
type="radio"
class="btn-check"
:id="'af_kind_' + index"
:name="'kind_' + index"
value="found"
@change="kindChange('found', file)"
/>
<label class="btn btn-primary" :for="'af_kind_' + index">
As Found
</label>
<input
type="radio"
class="btn-check"
:id="'al_kind_' + index"
:name="'kind_' + index"
value="left"
@change="kindChange('left', file)"
/>
<label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<input
ref="doc"
type="file"
style="display: none"
@change="readFile($event)"
/>
</div>
</div>
</template>
<script setup>
import { ref, computed, watchEffect } from "vue";
const report_type = ref("-"),
files = ref([]),
current_file = ref(null),
doc = ref();
const showUpload = computed({
get() {
/// default select
if (report_type.value === "-") {
return false;
}
// no more more than 2 files
if (files.value.length >= 2) {
return false;
}
// if the first item is both, disable upload
if (files.value.length > 0 && files.value[0].kind == "both") {
return false;
}
return true;
},
});
const openFileInput = () => {
// Trigger a click event on the file input element
doc.value.click();
};
const kindChange = (opt, file) => {
// Change the file kind metadata, (both, as found, as left) for the uploaded file
file.kind = opt;
console.log(file);
};
const removeUpload = (index) => {
files.value.splice(index, 1);
};
const readFile = ($event) => {
const target = $event.target;
if (target && target.files) {
current_file.value = target.files[0];
}
if (!current_file.value.name.includes(".txt")) {
return;
}
const reader = new FileReader();
reader.onload = (res) => {
let content = res.target.result;
files.value.push({
name: current_file.value.name,
value: content,
kind: "",
});
};
reader.onerror = (err) => console.log(err);
reader.readAsText(current_file.value);
doc.value.value = null;
};
const emit = defineEmits([
"upload-form",
]);
watchEffect(() => {
emit("upload-form", {
report_type: report_type,
files: files,
});
});
</script>
<style scoped>
ul {
list-style-type: none;
padding-left: 0;
}
button {
margin-right: 0.5rem;
}
.kind {
margin-top: 0.5rem;
}
</style>

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

@ -1,173 +0,0 @@
<template>
<div class="card-header">Report Uploads</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>
Report Type
<select
name="report_type"
v-model="report_type"
required
id="id_report_type"
>
<option value="-" selected>----Select-----</option>
<option value="Transducer Verify">Transducer Verify</option>
<option value="Hardware Calibration">Hardware Calibration</option>
</select>
</td>
</tr>
<tr v-if="report_type != '-' || showUpload">
<td>
<button
class="custom-button"
@click="openFileInput"
v-if="showUpload"
>
Select {{ report_type }} File
</button>
</td>
</tr>
<tr v-if="files.length > 0">
<td>
<ul>
<li v-for="(file, index) in files" :key="index" class="file-list">
<button class="custom-button red" @click="removeUpload(index)">
X
</button>
<span>{{ file.name }}</span>
<div class="kind btn-group">
<input
type="radio"
class="btn-check"
:id="'both_kind_' + index"
:name="'kind_' + index"
value="both"
@change="kindChange('both', file)"
/>
<label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
<input
type="radio"
class="btn-check"
:id="'af_kind_' + index"
:name="'kind_' + index"
value="found"
@change="kindChange('found', file)"
/>
<label class="btn btn-primary" :for="'af_kind_' + index">
As Found
</label>
<input
type="radio"
class="btn-check"
:id="'al_kind_' + index"
:name="'kind_' + index"
value="left"
@change="kindChange('left', file)"
/>
<label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<input
ref="doc"
type="file"
style="display: none"
@change="readFile($event)"
/>
</div>
</template>
<script setup>
import { ref, computed, watchEffect } from "vue";
const report_type = ref("-"),
files = ref([]),
current_file = ref(null),
doc = ref();
const showUpload = computed({
get() {
/// default select
if (report_type.value === "-") {
return false;
}
// no more more than 2 files
if (files.value.length >= 2) {
return false;
}
// if the first item is both, disable upload
if (files.value.length > 0 && files.value[0].kind == "both") {
return false;
}
return true;
},
});
const openFileInput = () => {
// Trigger a click event on the file input element
doc.value.click();
};
const kindChange = (opt, file) => {
// Change the file kind metadata, (both, as found, as left) for the uploaded file
file.kind = opt;
console.log(file);
};
const removeUpload = (index) => {
files.value.splice(index, 1);
};
const readFile = ($event) => {
const target = $event.target;
if (target && target.files) {
current_file.value = target.files[0];
}
if (!current_file.value.name.includes(".txt")) {
return;
}
const reader = new FileReader();
reader.onload = (res) => {
let content = res.target.result;
files.value.push({
name: current_file.value.name,
value: content,
kind: "",
});
};
reader.onerror = (err) => console.log(err);
reader.readAsText(current_file.value);
doc.value.value = null;
};
const emit = defineEmits();
watchEffect(() => {
emit("upload-form", {
report_type,
files,
});
});
</script>
<style scoped>
ul {
list-style-type: none;
padding-left: 0;
}
button {
margin-right: 0.5rem;
}
.kind {
margin-top: 0.5rem;
}
</style>

8
benchtop-fe/src/main.js
View File

@ -1,8 +1,8 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import './reset.css' import './styles/reset.css'
import './buttons.css' import './styles/buttons.css'
import './radio.css' import './styles/radio.css'
import './style.css' import './styles/style.css'
import App from './App.vue' import App from './App.vue'
const app = createApp(App).mount('#app') const app = createApp(App).mount('#app')

0
benchtop-fe/src/buttons.css → benchtop-fe/src/styles/buttons.css
View File

0
benchtop-fe/src/radio.css → benchtop-fe/src/styles/radio.css
View File

0
benchtop-fe/src/reset.css → benchtop-fe/src/styles/reset.css
View File

0
benchtop-fe/src/style.css → benchtop-fe/src/styles/style.css
View File

4961
benchtop-fe/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff