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

Compare commits

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

No commits in common. "291ff7d68d4cee8880e0d0728b2621d9dca3b836" and "e0489f5ca80c812377a79a4b02ad8907af48b267" have entirely different histories.
291ff7d68d ... e0489f5ca8

19 changed files with 658 additions and 5642 deletions
Show Stats Expand all files Collapse all files

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

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

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

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

@ -1,62 +0,0 @@
<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 Normal file
View File

@ -0,0 +1,60 @@
<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
View File

@ -1,57 +0,0 @@
<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 Normal file
View File

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

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

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

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

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

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

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

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

@ -37,7 +37,6 @@
</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"
@ -52,13 +51,13 @@
<script setup> <script setup>
import { ref, defineEmits } from "vue"; import { ref, defineEmits } from "vue";
import CustomerForm from "./Customer/CustomerForm.vue"; import CustomerForm from "./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 "./Environment/EnvironmentForm.vue"; import EnvironmentForm from "./EnvironmentForm.vue";
import UploadForm from "./Upload/UploadForm.vue"; import UploadForm from "./UploadForm.vue";
import PDF from "./PDF/PDF.vue"; import PDF from "./PDF/PDF.vue";
// Not needed yet // Not needed yet
@ -122,8 +121,6 @@ const emits = defineEmits([
"showNewInstrument", "showNewInstrument",
"showNewCalibration", "showNewCalibration",
]); ]);
</script> </script>
<style scoped> <style scoped>

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

@ -1,177 +0,0 @@
<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 Normal file
View File

@ -0,0 +1,173 @@
<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 './styles/reset.css' import './reset.css'
import './styles/buttons.css' import './buttons.css'
import './styles/radio.css' import './radio.css'
import './styles/style.css' import './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/styles/radio.css → benchtop-fe/src/radio.css
View File

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

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

4961
benchtop-fe/yarn.lock
View File

File diff suppressed because it is too large Load Diff