From c22c7e2b06db4329273fc94051e0418f754b83c7 Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrelsouza@gmail.com>
Date: Wed, 11 Oct 2023 00:57:27 -0400
Subject: [PATCH] date stuff

---
 .../NewCalibrationDeviceForm.vue              |   4 +-
 benchtop-fe/src/components/PDF/PDF.vue        | 632 ++++++++++--------
 2 files changed, 351 insertions(+), 285 deletions(-)

diff --git a/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue b/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
index fa6ddc2..e66a5f9 100644
--- a/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
+++ b/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
@@ -80,8 +80,8 @@ import "@vuepic/vue-datepicker/dist/main.css";
 const model = ref(""),
   serial = ref(""),
   cert_id = ref(""),
-  due_date = ref(""),
-  date = ref("");
+  due_date = ref(new Date),
+  date = ref(new Date);
 
 const flow = ref(["year", "month", "calendar"]);
 
diff --git a/benchtop-fe/src/components/PDF/PDF.vue b/benchtop-fe/src/components/PDF/PDF.vue
index 88fce68..b1a1cc9 100644
--- a/benchtop-fe/src/components/PDF/PDF.vue
+++ b/benchtop-fe/src/components/PDF/PDF.vue
@@ -1,273 +1,310 @@
 <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() }}
+    <button class="custom-button" @click="exportToPDF">
+      Generate PDF and Label
+    </button>
     <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: {{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" />
+      <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: {{ 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" />
+            </div>
           </div>
         </div>
-      </div>
-      <!-- EndHeader -->
-      <h1>Calibration Certificate</h1>
+        <!-- EndHeader -->
+        <h1>Calibration Certificate</h1>
 
-      <!-- Instrument Info -->
-      <div class="instrument-information">
-        <div class="flex-container">
-          <div class="column pct-33">
-            <div><span class="ul">Instrument</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>
-            <div><span class="label">Model :</span>{Model}</div>
-            <div><span class="label">Serial# :</span>{Serial_no}</div>
-            <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">Cert ID :</span>{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>{Baro}</div>
-            <div><span class="label">Temp (&deg;F):</span>{Temp}</div>
-            <div><span class="label">Humidity (%RH):</span>{Humidity}</div>
+        <!-- Instrument Info -->
+        <div class="instrument-information">
+          <div class="flex-container">
+            <div class="column pct-33">
+              <div><span class="ul">Instrument</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>
+              <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 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>
-      <br />
-      <!-- End InstrumentInfo -->
-      <!-- As Found -->
-      <div class="readings">
-        <table class="table table-striped">
-          <thead>
-            <tr>
-              <th>Gauge Reading</th>
-              <th>Accuracy (+/- FS)</th>
-              <th>Low Limit</th>
-              <th>High Limit</th>
-              <th>As Found (units)</th>
-              <th>OOT</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr><tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr><tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <br />
-      <!-- As Left -->
-      <div class="readings">
-        <table class="table table-striped">
-          <thead>
-            <tr>
-              <th>Gauge Reading</th>
-              <th>Accuracy (+/- FS)</th>
-              <th>Low Limit</th>
-              <th>High Limit</th>
-              <th>As Left (units)</th>
-              <th>OOT</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>-12.500</td>
-              <td>0.050%</td>
-              <td>-12.510</td>
-              <td>-12.490</td>
-              <td>-12.500</td>
-              <td>0</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-            <tr>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-              <td>&nbsp;</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <!-- 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)
-        </p>
-        <p>
-          Uncertainty Statement: The accuracy of measurement is determined by the
-          standards uncertainty, with a coverage factor of k=2 (confidence of
-          roughly 95%).
-        </p>
+        <br />
+        <!-- End InstrumentInfo -->
+        <!-- As Found -->
+        <div class="readings">
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>Gauge Reading</th>
+                <th>Accuracy (+/- FS)</th>
+                <th>Low Limit</th>
+                <th>High Limit</th>
+                <th>As Found (units)</th>
+                <th>OOT</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <br />
+        <!-- As Left -->
+        <div class="readings">
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>Gauge Reading</th>
+                <th>Accuracy (+/- FS)</th>
+                <th>Low Limit</th>
+                <th>High Limit</th>
+                <th>As Left (units)</th>
+                <th>OOT</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>-12.500</td>
+                <td>0.050%</td>
+                <td>-12.510</td>
+                <td>-12.490</td>
+                <td>-12.500</td>
+                <td>0</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+              <tr>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+                <td>&nbsp;</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!-- 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)
+          </p>
+          <p>
+            Uncertainty Statement: The accuracy of measurement is determined by
+            the standards uncertainty, with a coverage factor of k=2 (confidence
+            of roughly 95%).
+          </p>
+        </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
-import {ref, defineProps} from "vue"
-import { format } from 'date-fns';
+import { ref, defineProps } from "vue";
 import html2pdf from "html2pdf.js";
 import BenchTopLogoUrl from "../../assets/BenchTopLogo.png";
 import Al2pCertUrl from "../../assets/al2pCert.png";
@@ -278,46 +315,76 @@ const props = defineProps({
   customer: Object,
   environment: Object,
   instrument: Object,
-  calibration: Object
-})
+  calibration: Object,
+});
 
 const onsite = () => {
-  return props.customer?.onsite_cal ? "Yes" : "No"
-}
+  return props.customer?.onsite_cal ? "Yes" : "No";
+};
 
 const i_date = () => {
-  if (props.instrument?.date === undefined){
+  if (props.instrument === 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}`
-}
+  if (props.instrument.date === undefined) {
+    return
+  }
+  const d = props.instrument.date
+  const year = d.getFullYear();
+  const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
+  const day = d.getDate().toString().padStart(2, "0");
+  return `${year}/${month}/${day}`;
+};
+
+
 
 const i_due_date = () => {
-  if (props.instrument?.due_date === undefined){
-    return
+  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 d = props.instrument.due_date
+  const year = d.getFullYear();
+  const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
+  const day = d.getDate().toString().padStart(2, "0");
+  return `${year}/${month}/${day}`;
+};
+
+const c_date = () => {
+  if (props.calibration?.date === undefined) {
+    return;
+  }
+  const d = props.calibration.date
+  const year = d.getFullYear();
+  const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
+  const day = d.getDate().toString().padStart(2, "0");
+  return `${year}/${month}/${day}`;
+};
+const c_due_date = () => {
+  if (props.calibration?.due_date === undefined) {
+    return;
+  }
+  const d = props.calibration.due_date
+  const year = d.getFullYear();
+  const month = (d.getMonth() + 1).toString().padStart(2, "0"); // Month is zero-based, so we add 1
+  const day = d.getDate().toString().padStart(2, "0");
+  return `${year}/${month}/${day}`;
+};
 
 const exportToPDF = () => {
-  const element = document.getElementById("pdf")
+  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' }
+    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();
 };
+
+const dt = (d) => {
+
+};
 </script>
 
 <style scoped>
@@ -327,14 +394,14 @@ const exportToPDF = () => {
   }
 }
 body {
-  margin:1rem;
+  margin: 1rem;
 }
 
 .hide {
   display: none;
 }
 .pdf-container {
-  max-width:960px;
+  max-width: 960px;
   margin: auto;
 }
 h1 {
@@ -363,7 +430,6 @@ h1 {
   font-size: 8pt;
 }
 
-
 .pct-50 {
   width: 45%;
 }