Merge pull request #5 from hendriksen-mark/main

add update button
diyhue · Mar 3, 2024 · a2f47ee · a2f47ee
2 parents d6da298 + 60c482b
commit a2f47ee
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 3 deletions.
diff --git a/src/containers/TheHeader.js b/src/containers/TheHeader.js
@@ -2,9 +2,13 @@ import { useState, useEffect } from "react";
 import { FaBars } from "react-icons/fa";
 import axios from "axios";
 import { motion } from "framer-motion";
+import { toast } from 'react-hot-toast';
 
 const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
   const [group0State, setGroup0State] = useState(false);
+  const [install, setInstall] = useState(false);
+  const [check, setCheck] = useState(false);
+  const [swstate, getState] = useState("noupdates");
 
   const iconVariants = {
     opened: {
@@ -18,6 +22,21 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
   };
 
   useEffect(() => {
+    const fetchUpdate = () => {
+      if (API_KEY !== undefined) {
+        axios
+          .get(`${HOST_IP}/api/${API_KEY}/config/swupdate2`)
+          .then((result) => {
+            setInstall(result.data["install"]);
+            setCheck(result.data["checkforupdate"]);
+            getState(result.data["state"]);
+          })
+          .catch((error) => {
+            console.error(error);
+            toast.error(`Error occurred: ${error.message}`);
+          });
+      }
+    };
     const fetchGroups = () => {
       if (API_KEY !== undefined) {
         axios
@@ -28,13 +47,16 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
           })
           .catch((error) => {
             console.error(error);
+            toast.error(`Error occurred: ${error.message}`);
           });
       }
     };
 
+    fetchUpdate();
     fetchGroups();
     const interval = setInterval(() => {
       fetchGroups();
+      fetchUpdate();
     }, 5000); // <<-- ⏱ 1000ms = 1s
     return () => clearInterval(interval);
   }, [HOST_IP, API_KEY]);
@@ -46,6 +68,61 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
     axios.put(`${HOST_IP}/api/${API_KEY}/groups/0/action`, newState);
   };
 
+  const handleupdate = (state) => {
+    if (state == "anyreadytoinstall" || state == "allreadytoinstall") {
+      axios
+        .put(`${HOST_IP}/api/${API_KEY}/config`, {
+          swupdate2: { install: true },
+        })
+        .then((fetchedData) => {
+          console.log(fetchedData.data);
+          toast.success("Install update");
+        })
+        .catch((error) => {
+          console.error(error);
+          toast.error(`Error occurred: ${error.message}`);
+        });
+    }
+    if (state == "noupdates" || state == "unknown") {
+      axios
+        .put(`${HOST_IP}/api/${API_KEY}/config`, {
+          swupdate2: { checkforupdate: true, install: false },
+        })
+        .then((fetchedData) => {
+          console.log(fetchedData.data);
+          toast.success("Check update");
+        })
+        .catch((error) => {
+          console.error(error);
+          toast.error(`Error occurred: ${error.message}`);
+        });
+    }
+  }
+
+  const getValueState = (state) => {
+    if (state == "anyreadytoinstall" || state == "allreadytoinstall") {
+      return "Update available";
+    }
+    else if (state == "noupdates" || state == "unknown") {
+      return "No Update";
+    }
+    else if (state == "installing"){
+      return "installing..."
+    }
+  }
+
+  const getClassState = (state) => {
+    if (state == "anyreadytoinstall" || state == "allreadytoinstall") {
+      return "updatebtn";
+    }
+    else if (state == "noupdates" || state == "unknown") {
+      return "checkbtn";
+    }
+    else if (state == "installing"){
+      return "installbtn"
+    }
+  }
+
   return (
     <div className="topbarRight">
       <motion.div
@@ -57,6 +134,17 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
       >
         <FaBars />
       </motion.div>
+
+      <div className="switchContainer">
+        <form className="add-form" onSubmit={(e) => handleupdate(swstate, e)}>
+          <input
+            type="submit"
+            value={getValueState(swstate, "value")}
+            className={getClassState(swstate, "className")}
+          />
+        </form>
+      </div>
+
       <div className="onbtn">
         <p>Turn all lights {group0State ? "off" : "on"}</p>
         <div className="switchContainer">

diff --git a/src/icons/hass-hue-icons.js b/src/icons/hass-hue-icons.js
diff --git a/src/scss/mainframe.scss b/src/scss/mainframe.scss
@@ -112,6 +112,59 @@ body {
     }
   }
 
+  .checkbtn {
+    display: flex;
+    align-items: center;
+    margin: 15px 15px;
+    background: rgb(85, 106, 120);
+    padding: 10px 10px;
+    border-radius: 10px;
+    color: #eee;
+    font-size: 18px;
+    font-weight: 0;
+    border: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      border: none;
+      background: rgb(61, 177, 255);
+    }
+  }
+
+  .updatebtn {
+    display: flex;
+    align-items: center;
+    margin: 15px 15px;
+    background: rgb(0, 185, 34);
+    padding: 10px 10px;
+    border-radius: 10px;
+    color: #eee;
+    font-size: 18px;
+    font-weight: 0;
+    border: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      border: none;
+      background: rgb(67, 255, 61);
+    }
+  }
+
+  .installbtn {
+    display: flex;
+    align-items: center;
+    margin: 15px 15px;
+    background: rgb(128, 0, 255);
+    padding: 10px 10px;
+    border-radius: 10px;
+    color: #eee;
+    font-size: 18px;
+    font-weight: 0;
+    border: none;
+  }
+
   .hamburger {
     display: flex;
     color: #ccc;

diff --git a/src/views/About.js b/src/views/About.js
@@ -51,7 +51,7 @@ function About() {
         <div className="supportsection">
           <p>Support:</p>
           <a href="https://github.com/diyhue/diyhue"><FaGithub /></a>
-          <a href="https://slackinvite.squishedmooo.com/"><FaSlack /></a>
+          <a href="https://diyhue.slack.com/"><FaSlack /></a>
         </div>
         <div className="supportsection">
           <p>License:</p>
@@ -112,6 +112,15 @@ function About() {
           </div>
         </div>
 
+        <div className="contactCard">
+          <div className="name">Mark</div>
+          <div className="position">Maintainer & Support</div>
+          <div className="about">Maintaining the Github repository, Add api features, Fix bugs, Slack & Github support.</div>
+          <div className="iconbox">
+            <a href="https://github.com/hendriksen-mark"><FaGithub /></a>
+          </div>
+        </div>
+
         <div className="contactCard">
           <div className="name">Thank you!</div>
           <div className="position">A big thank you to everyone contributing to this project:</div>