122 lines
3.8 KiB
HTML
122 lines
3.8 KiB
HTML
<html>
|
|
<body class="app">
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.js"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div id="app">
|
|
<form action="." method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<table>
|
|
<tdata>
|
|
<tr><td>Customer Name</td><td>{{ form.customer_name }}</td></tr>
|
|
<tr><td>Customer Address</td><td>{{ form.customer_address }}</td></tr>
|
|
<tr><td colspan=2><hr></td></tr>
|
|
|
|
<tr><td>Instrument</td><td>{{ form.instrument }}</td></tr>
|
|
<tr><td>Control Number</td><td>{{ form.control_number }}</td></tr>
|
|
<tr><td>Serial Number</td><td>{{ form.serial_number }}</td></tr>
|
|
<tr><td colspan=2><hr></td></tr>
|
|
|
|
<tr><td>Accuracy</td><td>{{ form.accuracy }}</td></tr>
|
|
<tr><td>Barometric Pressure (mbar)</td><td>{{ form.barometric_pressure }}</td></tr>
|
|
<tr><td>Temperature (°F)</td><td>{{ form.temperature }}</td></tr>
|
|
<tr><td>Humidity</td><td>{{ form.humidity }}</td></tr>
|
|
<tr><td colspan=2><hr></td></tr>
|
|
|
|
<tr><td>Report Type</td><td>{{ form.report_type }}</td></tr>
|
|
<tr><td>Configuration(s)</td><td>{{ form.configuration }}</td></tr>
|
|
<tr><td colspan=2><hr></td></tr>
|
|
|
|
|
|
<tr><td>As Found: {{ form.as_found }}</td><td>As Left:{{ form.as_left }}</td></tr>
|
|
<tr><td colspan=2>One File: {{ form.both }}</td></tr>
|
|
<tr><td colspan=2><hr></td></tr>
|
|
<tr><td> </td><td align="right"><input type="submit" value="Generate PDF and Label"></td></tr>
|
|
|
|
</tdata>
|
|
</table>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
{% verbatim %}
|
|
<script type="module">
|
|
import { createApp, ref, reactive, computed } from 'vue'
|
|
|
|
// Vue.config.delimiters = ['${', '}'];
|
|
const vm = createApp({
|
|
el: "#app",
|
|
data() {
|
|
const instrument = ""
|
|
const customer_name = ""
|
|
const customer_address = ""
|
|
const control_number = ""
|
|
const serial_number = ""
|
|
const accuracy = ref("0.5")
|
|
const barometric_pressure = ref(1013.25)
|
|
const temperature = ref("50")
|
|
const humidity = ref("50.0")
|
|
const report_type = ""
|
|
const as_found = ""
|
|
const as_left = ""
|
|
const both = ""
|
|
const show_as_found = reactive(true)
|
|
const show_as_left = reactive(true)
|
|
const show_both = reactive(true)
|
|
|
|
return {
|
|
instrument,
|
|
customer_name,
|
|
customer_address,
|
|
control_number,
|
|
serial_number,
|
|
accuracy,
|
|
barometric_pressure,
|
|
temperature,
|
|
humidity,
|
|
report_type,
|
|
as_found,
|
|
as_left,
|
|
both,
|
|
show_as_found,
|
|
show_as_left,
|
|
show_both
|
|
}
|
|
},
|
|
ready: () => {
|
|
this.watchFileInput();
|
|
},
|
|
methods: {
|
|
change_as_found: function(event) {
|
|
console.log(this)
|
|
this.show_both = false
|
|
},
|
|
change_as_left: function(event) {
|
|
this.show_both = false
|
|
},
|
|
change_both: function(event) {
|
|
this.show_as_found = false
|
|
this.show_as_left = false
|
|
},
|
|
watchFileInput: function() {
|
|
// will notify a file input
|
|
$('input[type="file"]').change(this.notifyFileInput.bind(this));
|
|
},
|
|
|
|
notifyFileInput: function(event) {
|
|
var fileName = event.target.files[0].name;
|
|
// update file name value
|
|
this.file = fileName;
|
|
}
|
|
}
|
|
}).mount("#app")
|
|
</script>
|
|
{% endverbatim %}
|
|
</body>
|
|
</html> |