pdf display

benchtop-fe/src/App.vue

@@ -1,5 +1,4 @@
 <script setup>
-import {ref} from "vue"
 import Sheet from './components/Sheet.vue'
 </script>
 

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

@@ -2,48 +2,27 @@
   <div class="card-header">Calibration Devices</div>
   <div class="card-body">
     <h3>Primary Device</h3>
-    <select
+    <select name="primary_device" v-model="report_type" required id="id_report_type">
-      name="primary_device"
-      v-model="report_type"
-      required
-      id="id_report_type"
-    >
       <option value="-" selected>----Primary-----</option>
       <option value="TV">Menzer1</option>
       <option value="HC">Blackbelt</option>
     </select>
-    <td colspan="2">
       <h3>Calibration Date</h3>
       <div class="date-picker">
-        <VueDatePicker
+        <VueDatePicker v-model="date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
-          v-model="date"
-          auto-apply
-          :enableTimePicker="false"
-          :flow="flow"
-        ></VueDatePicker>
       </div>
-    </td>
     <hr />
     <h3>Secondary Device</h3>
 
-    <select
+    <select name="secondary_device" v-model="report_type" required id="id_report_type">
-      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
+      <VueDatePicker v-model="date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
-        v-model="date"
-        auto-apply
-        :enableTimePicker="false"
-        :flow="flow"
-      ></VueDatePicker>
     </div>
   </div>
 </template>

benchtop-fe/src/components/EnvironmentForm.vue

@@ -10,7 +10,7 @@
         </td>
       </tr>
       <tr>
-        <td>Barometric Pressure (psi)</td>
+        <td>Pressure (psi)</td>
         <td>
           <input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
                  required id="id_pressure">

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

@@ -4,7 +4,9 @@
     <button class="custom-button" @click="exportToPDF">
       Generate PDF and Label
     </button>
-    <div :class="{ hide: hide }">
+    <br>
+    <br>
+    <div :class="{ hide: hide }" class="px666">
       <div id="pdf" ref="document">
         <div class="header">
           <div class="flex-container">
@@ -84,7 +86,7 @@
               </div>
               <div>
                 <span class="label">Humidity (%RH):</span
-                >{{ props.environment?.humidity }}}
+                >{{ props.environment?.humidity }}
               </div>
             </div>
           </div>
@@ -308,7 +310,7 @@ import { ref, defineProps } from "vue";
 import html2pdf from "html2pdf.js";
 import BenchTopLogoUrl from "../../assets/BenchTopLogo.png";
 import Al2pCertUrl from "../../assets/al2pCert.png";
-const hide = ref(true);
+const hide = ref(false);
 
 const props = defineProps({
   upload: Object,

benchtop-fe/src/components/Sheet.vue

@@ -1,49 +1,51 @@
 <template>
-  <div class="container">
+  <div class="flextainer">
-    <div class="item card">
+    <div class="left">
-      <UploadForm @uploadForm="uploadForm" />
+      <div class="grid">
+        <div class="grid-item item card">
+          <UploadForm @uploadForm="uploadForm" />
+        </div>
+        <div class="grid-item item card">
+          <CustomerForm @customerForm="customerForm" />
+        </div>
+        </div>
+      <div class="grid">
+        <div class="grid-item item card">
+          <EnvironmentForm @environmentForm="environmentForm" />
+        </div>
+        <div class="grid-item item card">
+          <InstrumentForm
+            v-if="!show_new_instrument"
+            @instrumentForm="instrumentForm"
+            @showNewInstrument="showNewInstrument"
+          />
+          <NewInstrumentForm
+            v-if="show_new_instrument"
+            @newInstrumentForm="newInstrumentForm"
+          />
+        </div>
+      </div>
+      <div class="grid-item item card">
+        <CalibrationDeviceForm
+          v-if="!show_new_calibration"
+          @calibrationForm="calibrationForm"
+          @showNewCalibration="showNewCalibration"
+        />
+        <NewCalibrationDeviceForm
+          v-if="show_new_calibration"
+          @newCalibrationForm="newCalibrationForm"
+        />
+      </div>
     </div>
 
-    <div class="item card">
+    <div class="right">
-      <CustomerForm @customerForm="customerForm" />
+        <PDF
-    </div>
+          :upload="upload_form_data"
-
+          :customer="customer_form_data"
-    <div class="item card">
+          :environment="environment_form_data"
-      <EnvironmentForm @environmentForm="environmentForm" />
+          :instrument="new_instrument_form_data"
-    </div>
+          :calibration="new_calibration_form_data"
-
+        />
-    <div class="item card">
-      <InstrumentForm
-        v-if="!show_new_instrument"
-        @instrumentForm="instrumentForm"
-        @showNewInstrument="showNewInstrument"
-      />
-      <NewInstrumentForm
-        v-if="show_new_instrument"
-        @newInstrumentForm="newInstrumentForm"
-      />
-    </div>
-
-    <div class="item card">
-      <CalibrationDeviceForm
-        v-if="!show_new_calibration"
-        @calibrationForm="calibrationForm"
-        @showNewCalibration="showNewCalibration"
-      />
-      <NewCalibrationDeviceForm
-        v-if="show_new_calibration"
-        @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>

benchtop-fe/src/components/UploadForm.vue

@@ -29,12 +29,12 @@
           <td>
             <ul>
               <li v-for="(file, index) in files" :key="index" class="file-list">
-                <button class="custom-button red" @click="removeUpload(index)">x</button>
+                <button class="custom-button red" @click="removeUpload(index)">x</button> {{ file.name }}
-                {{ file.name }}
+                <div>
                 <label>
                   <input
                     type="radio"
-                    name="alignment"
+                    :name="'kind_' + index"
                     value="both"
                     @change="kindChange('both', file)"
                   />
@@ -43,7 +43,7 @@
                 <label>
                   <input
                     type="radio"
-                    name="alignment"
+                    :name="'kind_' + index"
                     value="left"
                     @change="kindChange('left', file)"
                   />
@@ -52,12 +52,13 @@
                 <label>
                   <input
                     type="radio"
-                    name="alignment"
+                    :name="'kind_' + index"
                     value="found"
                     @change="kindChange('found', file)"
                   />
                   As Found
                 </label>
+              </div>
               </li>
             </ul>
 

benchtop-fe/src/style.css

@@ -5,7 +5,6 @@ body {
 
 .card {
     border: 1px solid;
-    min-height: 300px;
 }
 .card-header{
     font-size: 2rem;
@@ -14,19 +13,6 @@ body {
 
 }
 
-.container {
-  display: flex;
-  flex-flow: column wrap;
-  align-content: space-between;
-  /* Your container needs a fixed height, and it
-   * needs to be taller than your tallest column. */
-  height: 1800px;
-
-  border-radius: 3px;
-  counter-reset: items;
-}
-
-
 .item {
   /* Optional */
   position: relative;
@@ -44,29 +30,7 @@ body {
     0 16px 16px rgba(0,90,250,0.05);
   color: #fff;
   box-sizing: border-box;
-  min-width:466px;
-  min-height:325px;
 }
-.item::before {
-    counter-increment: items;
-}
-
-/* Re-order items into 3 rows */
-.item:nth-child(3n+1) { order: 1; }
-.item:nth-child(3n+2) { order: 2; }
-.item:nth-child(3n)   { order: 3; }
-
-/* Force new columns */
-.container::before,
-.container::after {
-  content: "";
-  flex-basis: 100%;
-  width: 0;
-  order: 2;
-}
-
-
-
 
 
 h3 {
@@ -92,4 +56,41 @@ h3 {
 
 .dp__flex_display {
   display:block ! important;
+}
+
+
+
+
+.flextainer {
+  display: flex;
+  height: 100vh;
+}
+
+.left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-bottom: 10px;
+  flex-basis: 33%;
+}
+
+.grid-item {
+  width: 425px;
+
+}
+
+.right {
+  padding-left: 1rem;
+  padding-right:4rem;
+  background-color: #fff;
+}
+
+.px666 {
+  width: 666px;
 }