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

move more into js

Browse Source
This commit is contained in:
Tyrel Souza 2023-10-11 00:47:00 -04:00
parent 6e36dccc1f
commit 00b3607602
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
9 changed files with 1240 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

5
benchtop-fe/package.json
View File

@ -11,9 +11,12 @@
"dependencies": {
"@mdi/font": "^7.2.96",
"@vuepic/vue-datepicker": "^7.0.0",
"date-fns": "^2.30.0",
"html2pdf.js": "^0.10.1",
"vls": "^0.8.5",
"volar-service-vetur": "^0.0.13",
"vue": "^3.3.4"
"vue": "^3.3.4",
"vue-html2pdf": "^1.8.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",

6
benchtop-fe/src/App.vue
View File

@ -1,14 +1,10 @@
<script setup>
import {ref} from "vue"
import Sheet from './components/Sheet.vue'
import PDF from './components/PDF/PDF.vue'
const sheet_or_pdf = ref(1)
</script>
<template>
<Sheet v-if="sheet_or_pdf==0" />
<PDF v-if="sheet_or_pdf==1" />
<Sheet />
</template>
<style scoped>

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

@ -9,6 +9,7 @@
<VueDatePicker
v-model="date"
inline
:enableTimePicker="false"
auto-apply
:flow="flow"
></VueDatePicker>
@ -20,6 +21,7 @@
<VueDatePicker
v-model="due_date"
inline
:enableTimePicker="false"
auto-apply
:flow="flow"
></VueDatePicker>

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

@ -10,6 +10,7 @@
<VueDatePicker
v-model="date"
inline
:enableTimePicker="false"
auto-apply
:flow="flow"
></VueDatePicker>
@ -22,6 +23,7 @@
<div class="date-picker">
<VueDatePicker
v-model="due_date"
:enableTimePicker="false"
inline
auto-apply
:flow="flow"
@ -109,8 +111,8 @@ const channel = ref(""),
model = ref(""),
transducer_model = ref(""),
transducer_span = ref(""),
due_date = ref(""),
date = ref(""),
due_date = ref(new Date),
date = ref(new Date),
flow = ["year", "month", "calendar"];
const emit = defineEmits();

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

@ -1,14 +1,20 @@
<template>
<div class="card-header">Finished?</div>
<div class="card-body">
<button class="custom-button" @click="exportToPDF">Generate PDF and Label</button>
{{ i_date() }}, {{ i_due_date() }}
<div :class="{ hide: hide }">
<div id="pdf" ref="document">
<div class="header">
<div class="flex-container">
<div class="column pct-25">
<img :src="BenchTopLogoUrl" />
</div>
<div class="column pct-50">
<div>Customer: {customer}</div>
<div>Onsite cal (yes/no): {onsite_cal}</div>
<div>Control Doc#: {control_doc_number}</div>
<div>Technician: {technician}</div>
<div>Customer: {{props.customer?.customer_name}}</div>
<div>Onsite cal (yes/no): {{onsite()}}</div>
<div>Control Doc#: {{props.customer?.control_doc}}</div>
<div>Technician: {{props.customer?.technician}}</div>
</div>
<div class="column pct-25">
<img :src="Al2pCertUrl" />
@ -23,11 +29,11 @@
<div class="flex-container">
<div class="column pct-33">
<div><span class="ul">Instrument</span></div>
<div><span class="label">Model :</span>{Model}</div>
<div><span class="label">Serial# :</span>{Serial_no}</div>
<div><span class="label">Channel :</span>{channel}</div>
<div><span class="label">Transducer Model :</span>{t_model}</div>
<div><span class="label">Transducer Span :</span>{t_span}</div>
<div><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 class="column pct-33">
<div><span class="ul">Primary Cal Device</span></div>
@ -38,8 +44,8 @@
<div><span class="label">Cert ID :</span>{Cert ID}</div>
</div>
<div class="column pct-33">
<div><span class="label">Cal Date :</span>{Cal Date}</div>
<div><span class="label">Cal Due Date :</span>{Serial_no}</div>
<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>{Baro}</div>
<div><span class="label">Temp (&deg;F):</span>{Temp}</div>
@ -110,16 +116,14 @@
<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>
</tr>
<tr>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
@ -247,8 +251,8 @@
<!-- End Instruments-->
<div class="box">
<p>
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006 Cert #
1535483 07/24/23 (Cal Date) (Precision Psychrometer)
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006 Cert
# 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
</p>
<p>
Uncertainty Statement: The accuracy of measurement is determined by the
@ -256,14 +260,83 @@
roughly 95%).
</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref, defineProps} from "vue"
import { format } from 'date-fns';
import html2pdf from "html2pdf.js";
import BenchTopLogoUrl from "../../assets/BenchTopLogo.png";
import Al2pCertUrl from "../../assets/al2pCert.png";
const hide = ref(true);
const props = defineProps({
upload: Object,
customer: Object,
environment: Object,
instrument: Object,
calibration: Object
})
const onsite = () => {
return props.customer?.onsite_cal ? "Yes" : "No"
}
const i_date = () => {
if (props.instrument?.date === undefined){
return
}
const date = props.instrument.date
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-based, so we add 1
const day = date.getDate().toString().padStart(2, '0');
return `${year}/${month}/${day}`
}
const i_due_date = () => {
if (props.instrument?.due_date === undefined){
return
}
const date = props.instrument.due_date
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-based, so we add 1
const day = date.getDate().toString().padStart(2, '0');
return `${year}/${month}/${day}`
}
const exportToPDF = () => {
const element = document.getElementById("pdf")
var opt = {
margin: 0.4,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf().from(element).set(opt).save();
};
</script>
<style scoped>
@media print {
.custom-button {
display: none;
}
}
body {
margin:1rem;
}
.hide {
display: none;
}
.pdf-container {
max-width:960px;
margin: auto;
}
h1 {
text-align: center;
font-size: 1.75rem;
@ -290,9 +363,6 @@ h1 {
font-size: 8pt;
}
.column {
border: 1px solid #ccc;
}
.pct-50 {
width: 45%;

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

@ -24,7 +24,6 @@
/>
</div>
<div class="item card">
<CalibrationDeviceForm
v-if="!show_new_calibration"
@ -36,6 +35,16 @@
@newCalibrationForm="newCalibrationForm"
/>
</div>
<div class="item card">
<PDF
:upload="upload_form_data"
:customer="customer_form_data"
:environment="environment_form_data"
:instrument="new_instrument_form_data"
:calibration="new_calibration_form_data"
/>
</div>
</div>
</template>
@ -49,16 +58,22 @@ import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceFo
import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue";
import EnvironmentForm from "./EnvironmentForm.vue";
import UploadForm from "./UploadForm.vue";
import PDF from "./PDF/PDF.vue";
// Not needed yet
const instrument_form_data = ref(),
calibration_form_data = ref();
// Booleans
const show_new_instrument = ref(true),
show_new_calibration = ref(true);
// form Data
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(),
show_new_instrument = ref(false),
show_new_calibration = ref(false);
new_calibration_form_data = ref();
const uploadForm = (form) => {
upload_form_data.value = form;
@ -107,3 +122,10 @@ const emits = defineEmits([
"showNewCalibration",
]);
</script>
<style scoped>
body {
margin: 1rem;
background: url("/public/funky-lines.webp");
}
</style>

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

@ -1,4 +1,4 @@
d ..<template>
<template>
<div class="card-header">Report Uploads</div>
<div class="card-body">
<table class="table">
@ -63,11 +63,7 @@ d ..<template>
</td>
</tr>
<tr>
<td>
<input class="custom-button" type="submit" value="Generate PDF and Label" />
</td>
</tr>
</tbody>
</table>
<input

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

@ -1,7 +1,4 @@
body {
margin: 1rem;
background: url("/public/funky-lines.webp")
}
.card {
border: 1px solid;