vue
This commit is contained in:
parent
38b3cc0b13
commit
10a216a37d
@ -131,4 +131,3 @@ INTERNAL_IPS = [
|
||||
"127.0.0.1",
|
||||
# ...
|
||||
]
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
from django import forms
|
||||
from django.forms.widgets import ClearableFileInput
|
||||
from django.db import models
|
||||
from django.utils.translation import gettext_lazy as _
|
||||
|
||||
@ -9,7 +10,7 @@ class UploadFileForm(forms.Form):
|
||||
customer_address = forms.CharField()
|
||||
control_number = forms.CharField()
|
||||
serial_number = forms.CharField()
|
||||
accuracy = forms.FloatField(initial=0.05, widget=forms.NumberInput(attrs={'step': 0.01}))
|
||||
accuracy = forms.FloatField(widget=forms.NumberInput(attrs={'step': 0.01}))
|
||||
barometric_pressure = forms.FloatField(widget=forms.NumberInput(attrs={'step': 0.01, 'max': 1100, 'min': 800}))
|
||||
temperature = forms.FloatField(widget=forms.NumberInput(attrs={'step': 0.01, 'max': 1000.0, 'min': -459.67}))
|
||||
humidity = forms.FloatField(widget=forms.NumberInput(attrs={'step': 0.01, 'max': 100.0, 'min': 0.0}))
|
||||
@ -25,4 +26,20 @@ class UploadFileForm(forms.Form):
|
||||
choices=CHOICES,
|
||||
)
|
||||
|
||||
file = forms.FileField()
|
||||
as_found = forms.FileField(required=False, widget=ClearableFileInput(attrs={'placeholder': ...}))
|
||||
as_left = forms.FileField(required=False, widget=ClearableFileInput(attrs={'placeholder': ...}))
|
||||
both = forms.FileField(required=False, widget=ClearableFileInput(attrs={'placeholder': ...}))
|
||||
|
||||
def __init__(self, *args, **kwargs):
|
||||
super(UploadFileForm, self).__init__(*args, **kwargs)
|
||||
|
||||
for name, field in self.fields.items():
|
||||
# add v-model to each model field
|
||||
if isinstance(field, forms.fields.FileField):
|
||||
field.widget.attrs.update(
|
||||
{
|
||||
'v-on:change': f"change_{name}",
|
||||
'v-if': f"show_{name}"
|
||||
})
|
||||
else:
|
||||
field.widget.attrs.update({'v-model': name})
|
@ -1,7 +1,94 @@
|
||||
<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>
|
||||
{{ form.as_table }}
|
||||
{{ form.as_p }}
|
||||
</table>
|
||||
<input type="submit" value="Submit">
|
||||
</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 %}
|
Loading…
Reference in New Issue
Block a user