move more into js

benchtop-fe/package.json

@@ -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",

benchtop-fe/src/App.vue

@@ -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" />
+  <Sheet />
-  <PDF v-if="sheet_or_pdf==1" />
 </template>
 
 <style scoped>

benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue

@@ -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>

benchtop-fe/src/components/Instrument/NewInstrumentForm.vue

@@ -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(""),
+  due_date = ref(new Date),
-  date = ref(""),
+  date = ref(new Date),
   flow = ["year", "month", "calendar"];
 
 const emit = defineEmits();

benchtop-fe/src/components/PDF/PDF.vue

@@ -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>Customer: {{props.customer?.customer_name}}</div>
-        <div>Onsite cal (yes/no): {onsite_cal}</div>
+            <div>Onsite cal (yes/no): {{onsite()}}</div>
-        <div>Control Doc#: {control_doc_number}</div>
+            <div>Control Doc#: {{props.customer?.control_doc}}</div>
-        <div>Technician: {technician}</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">Model :</span>{{props.instrument?.model}}</div>
-        <div><span class="label">Serial# :</span>{Serial_no}</div>
+            <div><span class="label">Serial# :</span>{{props.instrument?.serial_number}}</div>
-        <div><span class="label">Channel :</span>{channel}</div>
+            <div><span class="label">Channel :</span>{{props.instrument?.channel}}</div>
-        <div><span class="label">Transducer Model :</span>{t_model}</div>
+            <div><span class="label">Transducer Model :</span>{{props.instrument?.transducer_model}}</div>
-        <div><span class="label">Transducer Span :</span>{t_span}</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 Date :</span>{{i_date()}}</div>
-        <div><span class="label">Cal Due Date :</span>{Serial_no}</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 #
+          Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006 Cert
-      1535483 07/24/23 (Cal Date) (Precision Psychrometer)
+          # 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%;

benchtop-fe/src/components/Sheet.vue

@@ -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();
-  new_calibration_form_data = ref(),
-  show_new_instrument = ref(false),
-  show_new_calibration = ref(false);
 
 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>

benchtop-fe/src/components/UploadForm.vue

@@ -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

benchtop-fe/src/style.css

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