diff --git a/app.py b/app.py index a9d0bd23c094f73f1d9d9558914fb54c25bea96d..7f6bac956c1b302d511e15122235d573ae14d33d 100644 --- a/app.py +++ b/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, diff --git a/index.html b/index.html index 99f583aa2b835f6885f2c233a0e1f6d395fa42af..c6c273042ea8548696e9c233e88fd30a2b24df91 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html lang="en"> +<html lang="en" data-bs-theme="dark"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> diff --git a/package-lock.json b/package-lock.json index 287c55d18c4f6f0fba5fac96d631c5fd9b33f8fb..f3e54f4915b9426abc34c39984be1006481eec7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "axios": "^1.6.2", + "bootstrap": "^5.3.2", "vue": "^3.3.4" }, "devDependencies": { @@ -384,6 +385,16 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.1.tgz", @@ -514,6 +525,24 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", diff --git a/package.json b/package.json index ad3c6537ef78d2c8f833efa8baeb27ed35ed1fd8..2407abc91b69daedee390ec7e82c7c8541e6d1bf 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "axios": "^1.6.2", + "bootstrap": "^5.3.2", "vue": "^3.3.4" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index b920881dfcd8ba28b2e3392527c66f195010c67d..c0e49b96a51b70ce45ec68e6d54f70f0bf6c0493 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,13 @@ <script setup> -import ValueTabs from './components/ValueTabs.vue' +import ValueTabs from "./components/ValueTabs.vue" </script> <template> <header> <img alt="Vue logo" class="logo" src="./assets/NanoPatch.png" /> - <div class="greetings"> + <!-- <div class="greetings"> <h1 class="green">NanoPatch</h1> - </div> + </div> --> <!-- <div class="wrapper"> </div> --> </header> diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue index 1bd7e556cd6d5827bf1caab342e3b0c9895d1981..04e004e9d220621745d01d71d8fc465276b80853 100644 --- a/src/components/ValueTabs.vue +++ b/src/components/ValueTabs.vue @@ -1,35 +1,71 @@ -<script setup> - const N = 0, P = 0, K = 0, T = 0, H = 0, M = 0; -</script> - <script> - import axios from 'axios' +import axios from "axios" - export default { - mounted() { +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) => { - console.log(response.data); + 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 + } + }, + }, +} </script> <template> - <div> - <h1>Nitrogen (N): {{N}} ppm</h1> - <h1>Phosphorus (P): {{P}} ppm</h1> - <h1>Potassium (K): {{K}} ppm</h1> - </div> - - <div> - <h1>Temperature: {{T}}°C</h1> - <h1>Humidity: {{H}} gmâ»Â³</h1> - <h1>Moisture: {{M}}°C</h1> + <div style="font-size: 40px; width: fit-content;"> + <div> + <div class="valueBox"> + Nitrogen (N): + <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): + <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): + <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: + <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: + <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: + <li class="list-group-item" v-bind:class="getClass(values[5].M, 0, 5, 10, 15)">{{ values[5].M }} °C</li> + </div> + </div> </div> </template> <style scoped> - +.valueBox { + display: flex; + padding-bottom: 2%; +} </style> diff --git a/src/main.js b/src/main.js index 0ac3a5ff0ceea45d1a9066b2df477773977a338b..0406742d8ac8f7e13b423409488b2321d92e8850 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,5 @@ import './assets/main.css' +import "bootstrap/dist/css/bootstrap.min.css"; import { createApp } from 'vue' import App from './App.vue'