Compare commits
4 Commits
e0489f5ca8
...
291ff7d68d
| Author | SHA1 | Date | |
|---|---|---|---|
|
291ff7d68d | ||
|
|
450c9ec991 | ||
|
|
098b616db2 | ||
|
|
5001030746 |
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card-header">
|
||||
Primary Cal Device
|
||||
<button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineEmits, watchEffect } from "vue";
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card-header">Calibration Devices</div>
|
||||
<div class="card-body">
|
||||
<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="TV">Menzer1</option>
|
||||
<option value="HC">Blackbelt</option>
|
||||
<option value="Menzer1">Menzer1</option>
|
||||
<option value="Blackbelt">Blackbelt</option>
|
||||
</select>
|
||||
<h3>Calibration Date</h3>
|
||||
<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>
|
||||
<hr />
|
||||
<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="TV">Menzer1</option>
|
||||
<option value="HC">Blackbelt</option>
|
||||
<option value="Menzer1">Menzer1</option>
|
||||
<option value="Blackbelt">Blackbelt</option>
|
||||
</select>
|
||||
|
||||
<h3>Calibration Date</h3>
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -32,22 +34,20 @@ import { ref, defineEmits, watchEffect } from "vue";
|
|||
import VueDatePicker from "@vuepic/vue-datepicker";
|
||||
import "@vuepic/vue-datepicker/dist/main.css";
|
||||
|
||||
const model = ref(""),
|
||||
serial = ref(""),
|
||||
cert_id = ref(""),
|
||||
due_date = ref(new Date()),
|
||||
date = ref(new Date());
|
||||
const primary_device = ref(""),
|
||||
secondary_device = ref(""),
|
||||
primary_calibration_date = ref(new Date()),
|
||||
secondary_calibration_date = ref(new Date());
|
||||
|
||||
const flow = ref(["year", "month", "calendar"]);
|
||||
|
||||
const emit = defineEmits();
|
||||
watchEffect(() => {
|
||||
emit("new-calibration-form", {
|
||||
model,
|
||||
serial,
|
||||
cert_id,
|
||||
due_date,
|
||||
date,
|
||||
primary_device,
|
||||
secondary_device,
|
||||
primary_calibration_date,
|
||||
secondary_calibration_date,
|
||||
});
|
||||
});
|
||||
</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>
|
||||
<div>
|
||||
<div class="card-header">
|
||||
Instrument
|
||||
<button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineEmits, watchEffect } from "vue";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card-header">Instrument</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
|
|
@ -97,6 +98,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineEmits, watchEffect } from "vue";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="card-header">Finished?</div>
|
||||
<div class="card-body">
|
||||
<button class="custom-button" @click="exportToPDF">
|
||||
|
|
@ -7,12 +8,12 @@
|
|||
<br>
|
||||
<br>
|
||||
<div :class="{ hide: hide }" class="px666 scroll-pdf">
|
||||
<div v-for="table of tables">
|
||||
<div id="pdf" ref="document">
|
||||
<div v-for="table of tables">
|
||||
<div class="header">
|
||||
<div class="flex-container">
|
||||
<div class="column pct-25">
|
||||
<img :src="BenchTopLogoUrl"/>
|
||||
<img :src="BenchTopLogoUrl" alt="benchtop devices logo" />
|
||||
</div>
|
||||
<div class="column pct-50">
|
||||
<div>Customer: {{ props.customer?.customer_name }}</div>
|
||||
|
|
@ -116,7 +117,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ output() }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -193,7 +194,9 @@ const c_due_date = () => {
|
|||
};
|
||||
|
||||
const exportToPDF = () => {
|
||||
if (props.upload !== undefined && props.upload.files.length > 0) {
|
||||
const element = document.getElementById("pdf");
|
||||
|
||||
var opt = {
|
||||
margin: 0.4,
|
||||
filename: `${props.instrument.model}_${i_date()}.pdf`,
|
||||
|
|
@ -202,6 +205,7 @@ const exportToPDF = () => {
|
|||
jsPDF: {unit: "in", format: "letter", orientation: "portrait"},
|
||||
};
|
||||
html2pdf().from(element).set(opt).save();
|
||||
}
|
||||
};
|
||||
|
||||
const output = () => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="readings">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
|
|
@ -95,6 +96,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {defineProps, ref} from "vue";
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- these props don't recalculate -->
|
||||
<PDF
|
||||
:upload="upload_form_data"
|
||||
:customer="customer_form_data"
|
||||
|
|
@ -51,13 +52,13 @@
|
|||
<script setup>
|
||||
import { ref, defineEmits } from "vue";
|
||||
|
||||
import CustomerForm from "./CustomerForm.vue";
|
||||
import CustomerForm from "./Customer/CustomerForm.vue";
|
||||
import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
|
||||
import InstrumentForm from "./Instrument/InstrumentForm.vue";
|
||||
import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
|
||||
import CalibrationDeviceForm from "./CalibrationDevice/CalibrationDeviceForm.vue";
|
||||
import EnvironmentForm from "./EnvironmentForm.vue";
|
||||
import UploadForm from "./UploadForm.vue";
|
||||
import EnvironmentForm from "./Environment/EnvironmentForm.vue";
|
||||
import UploadForm from "./Upload/UploadForm.vue";
|
||||
import PDF from "./PDF/PDF.vue";
|
||||
|
||||
// Not needed yet
|
||||
|
|
@ -121,6 +122,8 @@ const emits = defineEmits([
|
|||
"showNewInstrument",
|
||||
"showNewCalibration",
|
||||
]);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<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 './reset.css'
|
||||
import './buttons.css'
|
||||
import './radio.css'
|
||||
import './style.css'
|
||||
import './styles/reset.css'
|
||||
import './styles/buttons.css'
|
||||
import './styles/radio.css'
|
||||
import './styles/style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
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