Compare commits
4 Commits
e0489f5ca8
...
291ff7d68d
| Author | SHA1 | Date | |
|---|---|---|---|
|
291ff7d68d | ||
|
|
450c9ec991 | ||
|
|
098b616db2 | ||
|
|
5001030746 |
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
Primary Cal Device
|
Primary Cal Device
|
||||||
<button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
|
<button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
|
||||||
|
|
@ -27,6 +28,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineEmits, watchEffect } from "vue";
|
import { ref, defineEmits, watchEffect } from "vue";
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="card-header">Calibration Devices</div>
|
<div class="card-header">Calibration Devices</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h3>Primary Device</h3>
|
<h3>Primary Device</h3>
|
||||||
<select name="primary_device" v-model="report_type" required id="id_report_type">
|
<select name="primary_device" v-model="primary_device" required id="id_report_type">
|
||||||
<option value="-" selected>----Primary-----</option>
|
<option value="-" selected>----Primary-----</option>
|
||||||
<option value="TV">Menzer1</option>
|
<option value="Menzer1">Menzer1</option>
|
||||||
<option value="HC">Blackbelt</option>
|
<option value="Blackbelt">Blackbelt</option>
|
||||||
</select>
|
</select>
|
||||||
<h3>Calibration Date</h3>
|
<h3>Calibration Date</h3>
|
||||||
<div class="date-picker">
|
<div class="date-picker">
|
||||||
<VueDatePicker v-model="date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
|
<VueDatePicker v-model="primary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<h3>Secondary Device</h3>
|
<h3>Secondary Device</h3>
|
||||||
|
|
||||||
<select name="secondary_device" v-model="report_type" required id="id_report_type">
|
<select name="secondary_device" v-model="secondary_device" required id="id_report_type">
|
||||||
<option value="-" selected>----Secondary-----</option>
|
<option value="-" selected>----Secondary-----</option>
|
||||||
<option value="TV">Menzer1</option>
|
<option value="Menzer1">Menzer1</option>
|
||||||
<option value="HC">Blackbelt</option>
|
<option value="Blackbelt">Blackbelt</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<h3>Calibration Date</h3>
|
<h3>Calibration Date</h3>
|
||||||
<div class="date-picker">
|
<div class="date-picker">
|
||||||
<VueDatePicker v-model="date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
|
<VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -32,22 +34,20 @@ import { ref, defineEmits, watchEffect } from "vue";
|
||||||
import VueDatePicker from "@vuepic/vue-datepicker";
|
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||||
import "@vuepic/vue-datepicker/dist/main.css";
|
import "@vuepic/vue-datepicker/dist/main.css";
|
||||||
|
|
||||||
const model = ref(""),
|
const primary_device = ref(""),
|
||||||
serial = ref(""),
|
secondary_device = ref(""),
|
||||||
cert_id = ref(""),
|
primary_calibration_date = ref(new Date()),
|
||||||
due_date = ref(new Date()),
|
secondary_calibration_date = ref(new Date());
|
||||||
date = ref(new Date());
|
|
||||||
|
|
||||||
const flow = ref(["year", "month", "calendar"]);
|
const flow = ref(["year", "month", "calendar"]);
|
||||||
|
|
||||||
const emit = defineEmits();
|
const emit = defineEmits();
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
emit("new-calibration-form", {
|
emit("new-calibration-form", {
|
||||||
model,
|
primary_device,
|
||||||
serial,
|
secondary_device,
|
||||||
cert_id,
|
primary_calibration_date,
|
||||||
due_date,
|
secondary_calibration_date,
|
||||||
date,
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
62
benchtop-fe/src/components/Customer/CustomerForm.vue
Normal file
62
benchtop-fe/src/components/Customer/CustomerForm.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card-header">Customer</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Customer Name</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
|
||||||
|
id="id_customer_name">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>On Site Calibration</td>
|
||||||
|
<td>
|
||||||
|
<div class="checkbox-wrapper-55">
|
||||||
|
<label class="rocker rocker-small">
|
||||||
|
<input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
|
||||||
|
<span class="switch-left">Yes</span>
|
||||||
|
<span class="switch-right">No</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Control Doc#</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Technician</td>
|
||||||
|
<td>
|
||||||
|
<input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watchEffect } from 'vue'
|
||||||
|
|
||||||
|
const
|
||||||
|
customer_name = ref(""),
|
||||||
|
onsite_cal = ref(false),
|
||||||
|
control_doc = ref(""),
|
||||||
|
technician = ref("")
|
||||||
|
|
||||||
|
const emit = defineEmits();
|
||||||
|
watchEffect(() => {
|
||||||
|
emit("customer-form", {
|
||||||
|
customer_name,
|
||||||
|
onsite_cal,
|
||||||
|
control_doc,
|
||||||
|
technician,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-header">Customer</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<table class="table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Customer Name</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
|
|
||||||
id="id_customer_name">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>On Site Calibration</td>
|
|
||||||
<td>
|
|
||||||
<div class="checkbox-wrapper-55">
|
|
||||||
<label class="rocker rocker-small">
|
|
||||||
<input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
|
|
||||||
<span class="switch-left">Yes</span>
|
|
||||||
<span class="switch-right">No</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Control Doc#</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Technician</td>
|
|
||||||
<td>
|
|
||||||
<input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watchEffect } from 'vue'
|
|
||||||
|
|
||||||
const
|
|
||||||
customer_name = ref(""),
|
|
||||||
onsite_cal = ref(false),
|
|
||||||
control_doc = ref(""),
|
|
||||||
technician = ref("")
|
|
||||||
|
|
||||||
const emit = defineEmits();
|
|
||||||
watchEffect(() => {
|
|
||||||
emit("customer-form", {
|
|
||||||
customer_name,
|
|
||||||
onsite_cal,
|
|
||||||
control_doc,
|
|
||||||
technician,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
57
benchtop-fe/src/components/Environment/EnvironmentForm.vue
Normal file
57
benchtop-fe/src/components/Environment/EnvironmentForm.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card-header">Environment</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Accuracy</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Pressure (psi)</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
|
||||||
|
required id="id_pressure">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Temperature (°F)</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
|
||||||
|
id="id_temperature">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Humidity (%RH)</td>
|
||||||
|
<td>
|
||||||
|
<input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
|
||||||
|
id="id_humidity">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, defineEmits, watchEffect } from 'vue'
|
||||||
|
|
||||||
|
const
|
||||||
|
accuracy = ref(0.05),
|
||||||
|
pressure = ref(14.7),
|
||||||
|
temperature = ref(50.0),
|
||||||
|
humidity = ref(50.0)
|
||||||
|
|
||||||
|
const emit = defineEmits();
|
||||||
|
watchEffect(() => {
|
||||||
|
emit("environment-form", {
|
||||||
|
accuracy,
|
||||||
|
pressure,
|
||||||
|
temperature,
|
||||||
|
humidity,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-header">Environment</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<table class="table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Accuracy</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Pressure (psi)</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
|
|
||||||
required id="id_pressure">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Temperature (°F)</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
|
|
||||||
id="id_temperature">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Humidity (%RH)</td>
|
|
||||||
<td>
|
|
||||||
<input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
|
|
||||||
id="id_humidity">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, defineEmits, watchEffect } from 'vue'
|
|
||||||
|
|
||||||
const
|
|
||||||
accuracy = ref(0.05),
|
|
||||||
pressure = ref(14.7),
|
|
||||||
temperature = ref(50.0),
|
|
||||||
humidity = ref(50.0)
|
|
||||||
|
|
||||||
const emit = defineEmits();
|
|
||||||
watchEffect(() => {
|
|
||||||
emit("environment-form", {
|
|
||||||
accuracy,
|
|
||||||
pressure,
|
|
||||||
temperature,
|
|
||||||
humidity,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
Instrument
|
Instrument
|
||||||
<button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
|
<button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
|
||||||
|
|
@ -27,6 +28,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineEmits, watchEffect } from "vue";
|
import { ref, defineEmits, watchEffect } from "vue";
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="card-header">Instrument</div>
|
<div class="card-header">Instrument</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
|
|
@ -97,6 +98,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineEmits, watchEffect } from "vue";
|
import { ref, defineEmits, watchEffect } from "vue";
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="card-header">Finished?</div>
|
<div class="card-header">Finished?</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<button class="custom-button" @click="exportToPDF">
|
<button class="custom-button" @click="exportToPDF">
|
||||||
|
|
@ -7,12 +8,12 @@
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<div :class="{ hide: hide }" class="px666 scroll-pdf">
|
<div :class="{ hide: hide }" class="px666 scroll-pdf">
|
||||||
<div v-for="table of tables">
|
|
||||||
<div id="pdf" ref="document">
|
<div id="pdf" ref="document">
|
||||||
|
<div v-for="table of tables">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="flex-container">
|
<div class="flex-container">
|
||||||
<div class="column pct-25">
|
<div class="column pct-25">
|
||||||
<img :src="BenchTopLogoUrl"/>
|
<img :src="BenchTopLogoUrl" alt="benchtop devices logo" />
|
||||||
</div>
|
</div>
|
||||||
<div class="column pct-50">
|
<div class="column pct-50">
|
||||||
<div>Customer: {{ props.customer?.customer_name }}</div>
|
<div>Customer: {{ props.customer?.customer_name }}</div>
|
||||||
|
|
@ -116,7 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{{ output() }}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -193,7 +194,9 @@ const c_due_date = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const exportToPDF = () => {
|
const exportToPDF = () => {
|
||||||
|
if (props.upload !== undefined && props.upload.files.length > 0) {
|
||||||
const element = document.getElementById("pdf");
|
const element = document.getElementById("pdf");
|
||||||
|
|
||||||
var opt = {
|
var opt = {
|
||||||
margin: 0.4,
|
margin: 0.4,
|
||||||
filename: `${props.instrument.model}_${i_date()}.pdf`,
|
filename: `${props.instrument.model}_${i_date()}.pdf`,
|
||||||
|
|
@ -202,6 +205,7 @@ const exportToPDF = () => {
|
||||||
jsPDF: {unit: "in", format: "letter", orientation: "portrait"},
|
jsPDF: {unit: "in", format: "letter", orientation: "portrait"},
|
||||||
};
|
};
|
||||||
html2pdf().from(element).set(opt).save();
|
html2pdf().from(element).set(opt).save();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const output = () => {
|
const output = () => {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
<div class="readings">
|
<div class="readings">
|
||||||
<table class="table table-striped">
|
<table class="table table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
|
|
@ -95,6 +96,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import {defineProps, ref} from "vue";
|
import {defineProps, ref} from "vue";
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
<!-- these props don't recalculate -->
|
||||||
<PDF
|
<PDF
|
||||||
:upload="upload_form_data"
|
:upload="upload_form_data"
|
||||||
:customer="customer_form_data"
|
:customer="customer_form_data"
|
||||||
|
|
@ -51,13 +52,13 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineEmits } from "vue";
|
import { ref, defineEmits } from "vue";
|
||||||
|
|
||||||
import CustomerForm from "./CustomerForm.vue";
|
import CustomerForm from "./Customer/CustomerForm.vue";
|
||||||
import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
|
import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
|
||||||
import InstrumentForm from "./Instrument/InstrumentForm.vue";
|
import InstrumentForm from "./Instrument/InstrumentForm.vue";
|
||||||
import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
|
import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
|
||||||
import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue";
|
import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue";
|
||||||
import EnvironmentForm from "./EnvironmentForm.vue";
|
import EnvironmentForm from "./Environment/EnvironmentForm.vue";
|
||||||
import UploadForm from "./UploadForm.vue";
|
import UploadForm from "./Upload/UploadForm.vue";
|
||||||
import PDF from "./PDF/PDF.vue";
|
import PDF from "./PDF/PDF.vue";
|
||||||
|
|
||||||
// Not needed yet
|
// Not needed yet
|
||||||
|
|
@ -121,6 +122,8 @@ const emits = defineEmits([
|
||||||
"showNewInstrument",
|
"showNewInstrument",
|
||||||
"showNewCalibration",
|
"showNewCalibration",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
177
benchtop-fe/src/components/Upload/UploadForm.vue
Normal file
177
benchtop-fe/src/components/Upload/UploadForm.vue
Normal file
|
|
@ -0,0 +1,177 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="card-header">Report Uploads</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Report Type
|
||||||
|
<select
|
||||||
|
name="report_type"
|
||||||
|
v-model="report_type"
|
||||||
|
required
|
||||||
|
id="id_report_type"
|
||||||
|
>
|
||||||
|
<option value="-" selected>----Select-----</option>
|
||||||
|
<option value="Transducer Verify">Transducer Verify</option>
|
||||||
|
<option value="Hardware Calibration">Hardware Calibration</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="report_type != '-' || showUpload">
|
||||||
|
<td>
|
||||||
|
<button
|
||||||
|
class="custom-button"
|
||||||
|
@click="openFileInput"
|
||||||
|
v-if="showUpload"
|
||||||
|
>
|
||||||
|
Select {{ report_type }} File
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="files.length > 0">
|
||||||
|
<td>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(file, index) in files" :key="index" class="file-list">
|
||||||
|
<button class="custom-button red" @click="removeUpload(index)">
|
||||||
|
X
|
||||||
|
</button>
|
||||||
|
<span>{{ file.name }}</span>
|
||||||
|
<div class="kind btn-group">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
class="btn-check"
|
||||||
|
:id="'both_kind_' + index"
|
||||||
|
:name="'kind_' + index"
|
||||||
|
value="both"
|
||||||
|
@change="kindChange('both', file)"
|
||||||
|
/>
|
||||||
|
<label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
class="btn-check"
|
||||||
|
:id="'af_kind_' + index"
|
||||||
|
:name="'kind_' + index"
|
||||||
|
value="found"
|
||||||
|
@change="kindChange('found', file)"
|
||||||
|
/>
|
||||||
|
<label class="btn btn-primary" :for="'af_kind_' + index">
|
||||||
|
As Found
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
class="btn-check"
|
||||||
|
:id="'al_kind_' + index"
|
||||||
|
:name="'kind_' + index"
|
||||||
|
value="left"
|
||||||
|
@change="kindChange('left', file)"
|
||||||
|
/>
|
||||||
|
<label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<input
|
||||||
|
ref="doc"
|
||||||
|
type="file"
|
||||||
|
style="display: none"
|
||||||
|
@change="readFile($event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, watchEffect } from "vue";
|
||||||
|
|
||||||
|
const report_type = ref("-"),
|
||||||
|
files = ref([]),
|
||||||
|
current_file = ref(null),
|
||||||
|
doc = ref();
|
||||||
|
|
||||||
|
const showUpload = computed({
|
||||||
|
get() {
|
||||||
|
/// default select
|
||||||
|
if (report_type.value === "-") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// no more more than 2 files
|
||||||
|
if (files.value.length >= 2) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if the first item is both, disable upload
|
||||||
|
if (files.value.length > 0 && files.value[0].kind == "both") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const openFileInput = () => {
|
||||||
|
// Trigger a click event on the file input element
|
||||||
|
doc.value.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const kindChange = (opt, file) => {
|
||||||
|
// Change the file kind metadata, (both, as found, as left) for the uploaded file
|
||||||
|
file.kind = opt;
|
||||||
|
console.log(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeUpload = (index) => {
|
||||||
|
files.value.splice(index, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const readFile = ($event) => {
|
||||||
|
const target = $event.target;
|
||||||
|
if (target && target.files) {
|
||||||
|
current_file.value = target.files[0];
|
||||||
|
}
|
||||||
|
if (!current_file.value.name.includes(".txt")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (res) => {
|
||||||
|
let content = res.target.result;
|
||||||
|
files.value.push({
|
||||||
|
name: current_file.value.name,
|
||||||
|
value: content,
|
||||||
|
kind: "",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
reader.onerror = (err) => console.log(err);
|
||||||
|
reader.readAsText(current_file.value);
|
||||||
|
doc.value.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const emit = defineEmits([
|
||||||
|
"upload-form",
|
||||||
|
]);
|
||||||
|
watchEffect(() => {
|
||||||
|
emit("upload-form", {
|
||||||
|
report_type: report_type,
|
||||||
|
files: files,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
.kind {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,173 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="card-header">Report Uploads</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<table class="table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
Report Type
|
|
||||||
<select
|
|
||||||
name="report_type"
|
|
||||||
v-model="report_type"
|
|
||||||
required
|
|
||||||
id="id_report_type"
|
|
||||||
>
|
|
||||||
<option value="-" selected>----Select-----</option>
|
|
||||||
<option value="Transducer Verify">Transducer Verify</option>
|
|
||||||
<option value="Hardware Calibration">Hardware Calibration</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="report_type != '-' || showUpload">
|
|
||||||
<td>
|
|
||||||
<button
|
|
||||||
class="custom-button"
|
|
||||||
@click="openFileInput"
|
|
||||||
v-if="showUpload"
|
|
||||||
>
|
|
||||||
Select {{ report_type }} File
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr v-if="files.length > 0">
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
<li v-for="(file, index) in files" :key="index" class="file-list">
|
|
||||||
<button class="custom-button red" @click="removeUpload(index)">
|
|
||||||
X
|
|
||||||
</button>
|
|
||||||
<span>{{ file.name }}</span>
|
|
||||||
<div class="kind btn-group">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
class="btn-check"
|
|
||||||
:id="'both_kind_' + index"
|
|
||||||
:name="'kind_' + index"
|
|
||||||
value="both"
|
|
||||||
@change="kindChange('both', file)"
|
|
||||||
/>
|
|
||||||
<label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
class="btn-check"
|
|
||||||
:id="'af_kind_' + index"
|
|
||||||
:name="'kind_' + index"
|
|
||||||
value="found"
|
|
||||||
@change="kindChange('found', file)"
|
|
||||||
/>
|
|
||||||
<label class="btn btn-primary" :for="'af_kind_' + index">
|
|
||||||
As Found
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
class="btn-check"
|
|
||||||
:id="'al_kind_' + index"
|
|
||||||
:name="'kind_' + index"
|
|
||||||
value="left"
|
|
||||||
@change="kindChange('left', file)"
|
|
||||||
/>
|
|
||||||
<label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<input
|
|
||||||
ref="doc"
|
|
||||||
type="file"
|
|
||||||
style="display: none"
|
|
||||||
@change="readFile($event)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, watchEffect } from "vue";
|
|
||||||
|
|
||||||
const report_type = ref("-"),
|
|
||||||
files = ref([]),
|
|
||||||
current_file = ref(null),
|
|
||||||
doc = ref();
|
|
||||||
|
|
||||||
const showUpload = computed({
|
|
||||||
get() {
|
|
||||||
/// default select
|
|
||||||
if (report_type.value === "-") {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// no more more than 2 files
|
|
||||||
if (files.value.length >= 2) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if the first item is both, disable upload
|
|
||||||
if (files.value.length > 0 && files.value[0].kind == "both") {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const openFileInput = () => {
|
|
||||||
// Trigger a click event on the file input element
|
|
||||||
doc.value.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const kindChange = (opt, file) => {
|
|
||||||
// Change the file kind metadata, (both, as found, as left) for the uploaded file
|
|
||||||
file.kind = opt;
|
|
||||||
console.log(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeUpload = (index) => {
|
|
||||||
files.value.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const readFile = ($event) => {
|
|
||||||
const target = $event.target;
|
|
||||||
if (target && target.files) {
|
|
||||||
current_file.value = target.files[0];
|
|
||||||
}
|
|
||||||
if (!current_file.value.name.includes(".txt")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = (res) => {
|
|
||||||
let content = res.target.result;
|
|
||||||
files.value.push({
|
|
||||||
name: current_file.value.name,
|
|
||||||
value: content,
|
|
||||||
kind: "",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
reader.onerror = (err) => console.log(err);
|
|
||||||
reader.readAsText(current_file.value);
|
|
||||||
doc.value.value = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const emit = defineEmits();
|
|
||||||
watchEffect(() => {
|
|
||||||
emit("upload-form", {
|
|
||||||
report_type,
|
|
||||||
files,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
.kind {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import './reset.css'
|
import './styles/reset.css'
|
||||||
import './buttons.css'
|
import './styles/buttons.css'
|
||||||
import './radio.css'
|
import './styles/radio.css'
|
||||||
import './style.css'
|
import './styles/style.css'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
const app = createApp(App).mount('#app')
|
const app = createApp(App).mount('#app')
|
||||||
|
|
|
||||||
4961
benchtop-fe/yarn.lock
Normal file
4961
benchtop-fe/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user