forms

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

@@ -43,7 +43,7 @@ import '@vuepic/vue-datepicker/dist/main.css';
 
 export default {
   components: {VueDatePicker},
-  name: 'CalibrationDeviceForm',
+  name: 'NewCalibrationDeviceForm',
   data() {
     return {
       calibration_model: "",

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

@@ -56,7 +56,7 @@ import '@vuepic/vue-datepicker/dist/main.css';
 
 export default {
   components: {VueDatePicker},
-  name: 'InstrumentForm',
+  name: 'NewInstrumentForm',
   data() {
     return {
       channel: "",

benchtop-fe/src/components/Sheet.vue

@@ -1,31 +1,31 @@
-<script setup>
-import CustomerForm from "./CustomerForm.vue";
-import InstrumentForm from "./InstrumentForm.vue";
-import CalibrationDeviceForm from "./CalibrationDeviceForm.vue";
-import EnvironmentForm from "./EnvironmentForm.vue";
-import UploadForm from "./UploadForm.vue";
-
-</script>
-
 <template>
   <div>
     <div class="item card">
-      <UploadForm/>
+      <UploadForm />
     </div>
   </div>
+
   <div class="container">
     <div class="item card">
-      <CustomerForm/>
+      <CustomerForm />
     </div>
     <div class="item card">
-      <EnvironmentForm/>
+      <EnvironmentForm />
     </div>
 
     <div class="item card">
-      <InstrumentForm/>
+      <NewInstrumentForm />
     </div>
     <div class="item card">
-      <CalibrationDeviceForm/>
+      <NewCalibrationDeviceForm />
     </div>
   </div>
 </template>
+
+<script setup>
+import CustomerForm from "./CustomerForm.vue";
+import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
+import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
+import EnvironmentForm from "./EnvironmentForm.vue";
+import UploadForm from "./UploadForm.vue";
+</script>

benchtop-fe/src/components/UploadForm.vue

@@ -16,8 +16,17 @@
       <tr>
         <td colspan=2>
           <ul>
-            <li v-for="file in files">
+            <li v-for="file in files" :key="file.id">
               {{ file.name }}
+                <label>
+                  <input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
+                </label>
+                <label>
+                    <input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
+                </label>
+                <label>
+                    <input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
+                </label>
             </li>
           </ul>
           <file-upload
@@ -79,7 +88,7 @@ export default {
      * @param  Object|undefined   oldFile   Read only
      * @return undefined
      */
-    inputFile: function (newFile, oldFile) {
+    inputFile(newFile, oldFile) {
       if (newFile && oldFile && !newFile.active && oldFile.active) {
         // Get response data
         console.log('response', newFile.response)
@@ -96,7 +105,7 @@ export default {
      * @param  Function           prevent   Prevent changing
      * @return undefined
      */
-    inputFilter: function (newFile, oldFile, prevent) {
+    inputFilter(newFile, oldFile, prevent) {
       if (newFile && !oldFile) {
         // Filter non-image file
         if (!/\.(txt)$/i.test(newFile.name)) {
@@ -110,6 +119,12 @@ export default {
       if (URL && URL.createObjectURL) {
         newFile.blob = URL.createObjectURL(newFile.file)
       }
+      console.log(URL)
+    },
+    kindChange(opt, file) {
+      // Change the file kind metadata, (both, as found, as left) for the uploaded file
+      file.kind = opt
+      console.log(file)
     }
   }
 }