tyrel/benchtopdevices
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 2 Releases Wiki Activity

vue

Browse Source
This commit is contained in:
Tyrel Souza 2023-07-26 11:58:01 -04:00
parent 38b3cc0b13
commit 10a216a37d
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
4 changed files with 114 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
benchtopdevices/benchtopdevices/settings.py
View File

@ -131,4 +131,3 @@ INTERNAL_IPS = [
"127.0.0.1", "127.0.0.1",
# ... # ...
] ]

21
benchtopdevices/sheets/forms.py
View File

@ -1,4 +1,5 @@
from django import forms from django import forms
from django.forms.widgets import ClearableFileInput
from django.db import models from django.db import models
from django.utils.translation import gettext_lazy as _ from django.utils.translation import gettext_lazy as _
@ -9,7 +10,7 @@ class UploadFileForm(forms.Form):
customer_address = forms.CharField() customer_address = forms.CharField()
control_number = forms.CharField() control_number = forms.CharField()
serial_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})) 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})) 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})) 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, 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})

89
benchtopdevices/sheets/templates/sheets/upload.html
View File

@ -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"> <form action="." method="post" enctype="multipart/form-data">
{% csrf_token %} {% csrf_token %}
<table> <table>
{{ form.as_table }} {{ form.as_p }}
</table> </table>
<input type="submit" value="Submit"> <input type="submit" value="Submit">
</form> </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 %}