update status is good now

src/pages/makerspace/EquipmentCard.tsx

@@ -17,6 +17,7 @@ import type { Category } from "../../types/Category";
 
 interface EquipmentCardProps {
     equipment: Equipment;
+    onUpdate: () => void;
 }
 
 type EquipmentStatus = "available" | "error" | "paused" | "busy" | "offline";
@@ -51,11 +52,14 @@ const { Paragraph } = Typography;
 
 const EquipmentCard: React.FC<EquipmentCardProps> = ({
     equipment,
+    onUpdate,
 }: EquipmentCardProps) => {
     const [category, setCategory] = useState<Category>();
     const [isLoading, setIsLoading] = useState(true);
     const navigate = useNavigate();
 
+    const delay = 5000;
+
     useEffect(() => {
         const fetchData = async () => {
             const response = await axios.get<Category>(
@@ -64,9 +68,29 @@ const EquipmentCard: React.FC<EquipmentCardProps> = ({
                 }`
             );
             setCategory(response.data);
+
             setIsLoading(false);
         };
+
+        const fetchStatus = async () => {
+            if (equipment.ipUrl) {
+                const updatedStatus = await axios.get<Equipment>(
+                    `${import.meta.env.VITE_BACKEND_URL}/equipment/status/${
+                        equipment._id
+                    }`
+                );
+                if (equipment !== updatedStatus.data) {
+                    onUpdate();
+                }
+            }
+        };
         fetchData();
+
+        const interval = setInterval(() => {
+            fetchStatus();
+        }, delay);
+
+        return () => clearInterval(interval);
     }, [equipment]);
 
     return (
@@ -119,13 +143,13 @@ const EquipmentCard: React.FC<EquipmentCardProps> = ({
                         >
                             <Tag
                                 style={{ textTransform: "capitalize" }}
+                                bordered
                                 color={
                                     statusStyles[
                                         (equipment.status as EquipmentStatus) ||
                                             "offline"
                                     ].color
                                 }
-                                bordered
                                 icon={
                                     statusStyles[
                                         (equipment.status as EquipmentStatus) ||
@@ -135,7 +159,6 @@ const EquipmentCard: React.FC<EquipmentCardProps> = ({
                             >
                                 {equipment.status}
                             </Tag>
-
                             <Button
                                 variant="outlined"
                                 size="small"

src/pages/makerspace/Makerspace.tsx

@@ -119,7 +119,7 @@ const Makerspace: React.FC<MakerspaceProps> = ({
                             {equipments.map((equipment: Equipment, index) => {
                                 return (
                                     <Col span={24} lg={8} key={index}>
-                                        <EquipmentCard equipment={equipment} />
+                                        <EquipmentCard onUpdate={() => setRefreshEquipment(refreshEquipment + 1)} equipment={equipment} />
                                     </Col>
                                 );
                             })}

src/pages/remotePrint/Review.tsx

@@ -16,6 +16,7 @@ import { useEffect } from "react";
 import { Material } from "../../types/Material";
 import { FilamentMoreSettings } from "../../types/Equipment";
 import ConfirmAction from "../../components/ConfirmAction";
+import "./remotePrint.css";
 
 interface ReviewProps {
     prev: () => void;
@@ -203,10 +204,12 @@ const Review: React.FC<ReviewProps> = ({
                         confirmText="Is the bed clear? If not, please select cancel and try again at another time."
                         target={<Button type="primary">Submit</Button>}
                     >
-                        <iframe
-                            src={import.meta.env.VITE_CAMERA_URL}
-                            style={{ width: "100%" }}
-                        />
+                        <div className="responsive-iframe-wrapper">
+                            <iframe
+                                src={import.meta.env.VITE_CAMERA_URL}
+                                className="responsive-iframe"
+                            />
+                        </div>
                     </ConfirmAction>
                 </Flex>
             </Space>

src/pages/remotePrint/remotePrint.css

@@ -0,0 +1,17 @@
+.responsive-iframe-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+/* Then style the iframe to fit in the container div with full height and width */
+.responsive-iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+}

src/types/Equipment.tsx

@@ -3,6 +3,7 @@ import { FilamentTemperatures } from "./Material";
 export interface Equipment {
     _id: string;
     name: string;
+    ipUrl?: string;
     routePath: string;
     headline?: string;
     category: string;