Volar + pep8 formatting

app.py

@@ -4,15 +4,18 @@ from flask_cors import CORS
 app = Flask(__name__, static_folder="./dist/assets", template_folder="./dist")
 CORS(app)
 
+
 @app.route("/")
 def main():
     return render_template("index.html")
 
+
 @app.route("/values")
 def values():
     values = [{"N": 10}, {"P": 11}, {"K": 12}, {"T": 5}, {"H": 6}, {"M": 7}]
     return jsonify(values)
 
+
 @app.route('/favicon.ico')
 def favicon():
     return send_from_directory(app.template_folder,

src/App.vue

 <script setup>
-import ValueTabs from './components/ValueTabs.vue'
+import ValueTabs from "./components/ValueTabs.vue"
 </script>
 
 <template>

src/components/ValueTabs.vue

 <script>
-  import axios from 'axios'
+import axios from "axios"
 
-  export default {
-    data() {
-      return {
-        values: {0: {N:0}, 1: {P:0}, 2: {K:0}, 3: {T:0}, 4: {H:0}, 5: {M:0}},
-      }
-    },
-    mounted() {
-      this.getValues();
-      setInterval(this.getValues, 5000);
-    },
-    methods: {
-      getValues() {
-        axios
-          .get('http://127.0.0.1:5000/values')
-          .then((response) => {
-            this.values = response.data
+export default {
+  data() {
+    return {
+      values: { 0: { N: 0 }, 1: { P: 0 }, 2: { K: 0 }, 3: { T: 0 }, 4: { H: 0 }, 5: { M: 0 } },
+    }
+  },
+  mounted() {
+    this.getValues();
+    setInterval(this.getValues, 5000);
+  },
+  methods: {
+    getValues() {
+      axios
+        .get('http://127.0.0.1:5000/values')
+        .then((response) => {
+          this.values = response.data
         })
-      },
-      getClass(value, warn_min, good_min, good_max, warn_max) {
-        if (value > good_min && value <= good_max) {
-          return 'list-group-item-success'; // Success class
-        } else if ((value >= warn_min && value <= good_min) || (value > good_max && value <= warn_max)) {
-          return 'list-group-item-warning'; // Warning class
-        } else {
-          return 'list-group-item-danger'; // Danger class
-        }
-      },
     },
-  }
+    getClass(value, warn_min, good_min, good_max, warn_max) {
+      if (value > good_min && value <= good_max) {
+        return 'list-group-item-success'; // Success class
+      } else if ((value >= warn_min && value <= good_min) || (value > good_max && value <= warn_max)) {
+        return 'list-group-item-warning'; // Warning class
+      } else {
+        return 'list-group-item-danger'; // Danger class
+      }
+    },
+  },
+}
 </script>
 
 <template>
@@ -37,27 +37,27 @@
     <div>
       <div class="valueBox">
         Nitrogen (N):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[0].N, 0, 5, 10, 15)">{{values[0].N}} ppm</li>
+        <li class="list-group-item" v-bind:class="getClass(values[0].N, 0, 5, 10, 15)">{{ values[0].N }} ppm</li>
       </div>
       <div class="valueBox">
         Phosphorus (P):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[1].P, 0, 5, 10, 15)">{{values[1].P}} ppm</li>
+        <li class="list-group-item" v-bind:class="getClass(values[1].P, 0, 5, 10, 15)">{{ values[1].P }} ppm</li>
       </div>
       <div class="valueBox">
         Potassium (K):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[2].K, 0, 5, 10, 15)">{{values[2].K}} ppm</li>
+        <li class="list-group-item" v-bind:class="getClass(values[2].K, 0, 5, 10, 15)">{{ values[2].K }} ppm</li>
       </div>
       <div class="valueBox">
         Temperature:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[3].T, 0, 5, 10, 15)">{{values[3].T}} °C</li>
+        <li class="list-group-item" v-bind:class="getClass(values[3].T, 0, 5, 10, 15)">{{ values[3].T }} °C</li>
       </div>
       <div class="valueBox">
         Humidity:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[4].H, 0, 5, 10, 15)">{{values[4].H}} gm⁻³</li>
+        <li class="list-group-item" v-bind:class="getClass(values[4].H, 0, 5, 10, 15)">{{ values[4].H }} gm⁻³</li>
       </div>
       <div class="valueBox">
         Moisture:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[5].M, 0, 5, 10, 15)">{{values[5].M}} °C</li>
+        <li class="list-group-item" v-bind:class="getClass(values[5].M, 0, 5, 10, 15)">{{ values[5].M }} °C</li>
       </div>
     </div>
   </div>