vue

2023-07-26 11:58:01 -04:00 · 2023-07-26 11:58:01 -04:00 · 10a216a37d
commit 10a216a37d
parent 38b3cc0b13
4 changed files with 114 additions and 11 deletions
--- a/benchtopdevices/benchtopdevices/settings.py
+++ b/benchtopdevices/benchtopdevices/settings.py
@ -131,4 +131,3 @@ INTERNAL_IPS = [
    "127.0.0.1",
    # ...
 ]
-
--- a/benchtopdevices/sheets/forms.py
+++ b/benchtopdevices/sheets/forms.py
@ -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})
--- a/benchtopdevices/sheets/templates/sheets/upload.html
+++ b/benchtopdevices/sheets/templates/sheets/upload.html
@ -1,7 +1,94 @@
-<form action="." method="post" enctype="multipart/form-data">
-    {% csrf_token %}
-    <table>
-        {{ form.as_table }}
-    </table>
-    <input type="submit" value="Submit">
-</form>
+<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_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 %}