Initial upload of files

AmarPivcic · Nov 17, 2023 · d19b4cd · d19b4cd
1 parent 4c36d07
commit d19b4cd
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Smart Heating</title>
+</head>
+<body id="body">
+    <div>
+        <h3 id="temperature"></h3>
+        <h3 id="humidity"></h3>
+        <label>Wanted setting</label>
+        <input type="number" id="setting" readonly>
+        <button id="dec">Decrease</button>
+        <button id="inc">Increase</button>       
+    </div>   
+    <div>
+        <h3>Auto Mode: </h3> <h3 id="modeText"></h3>
+        <button id="modeToggle">Auto On/Off</button>
+        <br>
+        <label>Wanted temperature</label>
+        <input type="number" id="wantedTemp" min = "18" max = "32">
+        <button id="decTemp">Decrease</button>
+        <button id="incTemp">Increase</button>  
+    </div>
+<script src="./index.js" type="module"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,168 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-app.js";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyBN53IxSp887GFfnfqTtjnVV6i01cT0spo",
+    authDomain: "smart-heating-11b6f.firebaseapp.com",
+    databaseURL: "https://smart-heating-11b6f-default-rtdb.europe-west1.firebasedatabase.app",
+    projectId: "smart-heating-11b6f",
+    storageBucket: "smart-heating-11b6f.appspot.com",
+    messagingSenderId: "998820917243",
+    appId: "1:998820917243:web:d823e09c995cdece85a55e"
+};
+
+const app = initializeApp(firebaseConfig);
+
+import {
+    getDatabase,
+    ref,
+    child,
+    update,
+    set,
+    get,
+  } from "https://www.gstatic.com/firebasejs/10.5.2/firebase-database.js";
+
+  const db = getDatabase();
+
+  var temperature = document.getElementById("temperature");
+  var humidity = document.getElementById("humidity");
+  var setting = document.getElementById("setting");
+  var dec = document.getElementById("dec");
+  var inc = document.getElementById("inc");
+  var modeBtn = document.getElementById("modeToggle");
+  var modeTxt = document.getElementById("modeText");
+  var wantedTemp = document.getElementById("wantedTemp");
+  var decTemp = document.getElementById("decTemp");
+  var incTemp = document.getElementById("incTemp");
+
+  inc.addEventListener("click", increase);
+  dec.addEventListener("click", decrease);
+  incTemp.addEventListener("click", increaseTemp);
+  decTemp.addEventListener("click", decreaseTemp);
+  modeBtn.addEventListener("click", changeMode);
+  wantedTemp.addEventListener("change", newTemp);
+
+  function newSetting() {
+    update(ref(db, "values/"), {
+      setting: parseInt(setting.value),
+    })
+      .catch((error) => {
+        alert("error" + error);
+      });
+  }
+
+  function changeMode() {
+    if(modeTxt.innerHTML=="ON")
+    {
+      update(ref(db, "values/"), {
+        auto: parseInt(0),
+      })
+        .catch((error) => {
+          alert("error" + error);
+        });
+    }
+
+    else
+    {
+      update(ref(db, "values/"), {
+        auto: parseInt(1),
+      })
+        .catch((error) => {
+          alert("error" + error);
+        });
+    }
+  }
+
+  function newTemp(){
+    update(ref(db, "values/"), {
+      wantedtemp: parseInt(wantedTemp.value),
+    })
+      .catch((error) => {
+        alert("error" + error);
+      });
+  }
+
+  function checkMode()
+  {
+    if(modeTxt.innerHTML=="ON")
+    {
+      inc.disabled=true;
+      dec.disabled=true;
+      incTemp.disabled=false;
+      decTemp.disabled=false;
+    }
+
+    else{
+      inc.disabled=false;
+      dec.disabled=false;
+      incTemp.disabled=true;
+      decTemp.disabled=true;
+    }
+  }
+
+
+  function Load() {
+    const dbRef = ref(db);
+
+    get(child(dbRef, "values/")).then((snapshot)=>{
+        if(snapshot.exists()) {
+            temperature.innerHTML = "Temperature: " + snapshot.val().temp +" °C";
+            humidity.innerHTML = "Humidity: " + snapshot.val().hum +"%";
+            setting.value = snapshot.val().setting;
+            wantedTemp.value = snapshot.val().wantedtemp;
+            if(snapshot.val().auto == 1)
+            {
+              modeTxt.innerHTML = "ON";
+            }
+            else
+            {
+              modeTxt.innerHTML = "OFF";
+            }
+        }
+        else {
+            console.log("No data available");
+          }
+    }).catch((error) => {
+        console.error(error);
+      });
+    checkMode();
+  }
+
+  function decrease()
+  {
+    if(setting.value>0)
+    {
+        setting.value--;
+    }
+    newSetting();
+  }
+
+  function increase()
+  {
+    if(setting.value<6)
+    {
+        setting.value++;
+    }
+    newSetting();
+  }
+
+  function decreaseTemp()
+  {
+    if(wantedTemp.value>18)
+    {
+      wantedTemp.value--;
+    }
+    newTemp();
+  }
+
+  function increaseTemp()
+  {
+    if(wantedTemp.value<32)
+    {
+      wantedTemp.value++;
+    }
+    newTemp();
+  }
+
+  Load();
+  window.setInterval(Load, 500);
+
diff --git a/style.css b/style.css
@@ -0,0 +1,4 @@
+*{
+    padding: 0;
+    margin: 0;
+}