diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 33a781d4..abe229b0 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -1,19 +1,9 @@
-import React from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
import backgroundImage from "../Misc/compute-ea4c57a4.png";
-import Navbar from "./Navbar/Navbar";
-import { Link } from "react-router-dom";
import { useAuth } from "react-oidc-context";
const LandingPage = () => {
const auth = useAuth();
- React.useEffect(() => {
- document.body.style.overflow = "hidden";
- return () => {
- document.body.style.overflow = "auto";
- };
- }, []);
return (
diff --git a/frontend/src/Components/Loading.tsx b/frontend/src/Components/Loading.tsx
new file mode 100644
index 00000000..66f5f944
--- /dev/null
+++ b/frontend/src/Components/Loading.tsx
@@ -0,0 +1,11 @@
+const Loading = () => (
+
+ Loading...
+
+);
+
+export default Loading;
diff --git a/frontend/src/Components/Navbar.tsx b/frontend/src/Components/Navbar.tsx
new file mode 100644
index 00000000..51286c38
--- /dev/null
+++ b/frontend/src/Components/Navbar.tsx
@@ -0,0 +1,104 @@
+import { Link } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
+import { useState } from "react";
+
+const Navbar = () => {
+ const auth = useAuth();
+ const [activePage, setActivePage] = useState("Pet Page");
+
+ const loginButtonStyles = {
+ color: "#fff",
+ backgroundColor: "#006400",
+ fontWeight: "bold",
+ };
+
+ const navbarItemStyles = {
+ marginRight: "20px",
+ };
+
+ const handlePageClick = (page: string) => {
+ setActivePage(page);
+ };
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
deleted file mode 100644
index 5a9b6094..00000000
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import Settings from "../Settings.tsx";
-import PetPage from "../PetPage.tsx";
-import { useAuth } from "react-oidc-context";
-import "./navbar.css";
-import { useState } from "react";
-
-const Navbar = () => {
- const auth = useAuth();
- const [activePage, setActivePage] = useState("Pet Page");
-
- const loginButtonStyles = {
- color: "#fff",
- backgroundColor: "#006400",
- fontWeight: "bold",
- };
-
- const navbarItemStyles = {
- marginRight: "20px",
- };
-
- const handlePageClick = (page: string) => {
- setActivePage(page);
- };
-
- return (
-
- );
-};
-export default Navbar;
diff --git a/frontend/src/Components/Navbar/navbar.css b/frontend/src/Components/Navbar/navbar.css
deleted file mode 100644
index 203a5ba9..00000000
--- a/frontend/src/Components/Navbar/navbar.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.navbar-nav .nav-item.active .nav-link {
- color: #ffffff; /* Change to the desired color */
- text-shadow: 0 0 10px #ffffff;
-}
\ No newline at end of file
diff --git a/frontend/src/Components/NotFound.tsx b/frontend/src/Components/NotFound.tsx
new file mode 100644
index 00000000..575e7e61
--- /dev/null
+++ b/frontend/src/Components/NotFound.tsx
@@ -0,0 +1,16 @@
+const NotFound = () => {
+ return (
+
+
+
+
404
+
+
+
Not found
+
+
+
+ );
+};
+
+export default NotFound;
diff --git a/frontend/src/Components/PetDetails.tsx b/frontend/src/Components/PetDetails.tsx
index bc7768aa..c9d3e5ab 100644
--- a/frontend/src/Components/PetDetails.tsx
+++ b/frontend/src/Components/PetDetails.tsx
@@ -1,23 +1,25 @@
import { Pet } from "../lib/api/usePetApi";
import PetDetailsProgressBar from "./PetDetailsProgressBar";
-const PetDetails = (props: { pet: Pet; petImageSrc: string }) => {
- const { pet, petImageSrc } = props;
+const PetDetails = (props: { pet: Pet; petImageSrc: string; deadPetImageSrc: string }) => {
+ const { pet, petImageSrc, deadPetImageSrc } = props;
if (!pet.state) return;
const petState = pet.state;
+ const petIsAlive = petState.health! > 0;
+ const petImage = petIsAlive ? petImageSrc : deadPetImageSrc;
return (
- <>
-
+
+
-
{pet.name}
+
{pet.name}{petIsAlive || " died... 👻"}
{
color="red"
/>
-
+
);
};
diff --git a/frontend/src/Components/PetPage.tsx b/frontend/src/Components/PetPage.tsx
index 4a38a4e4..fd7daf7f 100644
--- a/frontend/src/Components/PetPage.tsx
+++ b/frontend/src/Components/PetPage.tsx
@@ -1,14 +1,16 @@
import { useEffect, useState } from "react";
import petImage from "../Misc/frog.png";
-import CreatePetModal from "./CreatePetModal";
-import { Device, useDeviceApi } from "../lib/api/useDeviceApi";
+import petImageGray from "../Misc/frog-gray.png";
+import { useDeviceApi } from "../lib/api/useDeviceApi";
import { Pet, usePetApi } from "../lib/api/usePetApi";
import PetDetails from "./PetDetails";
+import Loading from "./Loading";
+import { Link } from "react-router-dom";
// https://github.com/RavinRau/react-progressbar-fancy?tab=readme-ov-file
const PetPage = () => {
- const [devices, setDevices] = useState
([]);
+ const [loading, setLoading] = useState(true);
const [pet, setPet] = useState();
const deviceApi = useDeviceApi();
const petApi = usePetApi();
@@ -20,26 +22,52 @@ const PetPage = () => {
const devices = await deviceApi.getDevices();
const defaultDevice = devices[0];
- setDevices(devices);
-
if (defaultDevice && defaultDevice.petId) {
const pet = await petApi.getPetById(defaultDevice.petId);
setPet(pet);
}
+
+ setLoading(false);
};
- fetchData();
+ const interval = setInterval(() => {
+ fetchData()
+ .catch(err => console.error(err));
+ }, 1500); // Reload ever 1.5s
+
+ return () => clearInterval(interval);
}, [deviceApi, petApi]);
- console.log("loaded-devices", devices);
+ if (loading) {
+ return (
+
+
+
+ )
+ }
return (
-
- {pet != undefined ? (
-
- ) : (
-
- )}
+
+
+ {pet != undefined ? (
+
+ ) : (
+
+
+
+
+
+
Your journey is about to begin!
+ Create a pet or connect your device.
+
+
+ )}
+
);
};
diff --git a/frontend/src/Components/Settings.tsx b/frontend/src/Components/Settings.tsx
index 78557f01..925f4c98 100644
--- a/frontend/src/Components/Settings.tsx
+++ b/frontend/src/Components/Settings.tsx
@@ -1,44 +1,90 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import profile_pic1 from '../Misc/defaultUserPic.png';
import 'bootstrap/dist/css/bootstrap.min.css';
-import LinkDevice from "../Components/LinkDevice";
+import LinkDevice from "./SettingsLinkDevice";
import { Pet, usePetApi } from "../lib/api/usePetApi";
+import { Device, useDeviceApi } from "../lib/api/useDeviceApi";
+import SettingsDeviceList from "./SettingsDeviceList";
+import SettingsPetList from "./SettingsPetList";
+import Loading from "./Loading";
+import CreatePetModal, { OpenState } from "./CreatePetModal";
interface SettingsProps {
username: string;
}
-function Settings(
- { username }: SettingsProps
-) {
+function Settings({ username }: SettingsProps) {
const [pets, setPets] = useState
([]);
+ const [devices, setDevices] = useState([]);
const [items, setItems] = useState(['Pet 1', 'Pet 2', 'Pet 3']);
const [showLinkDevice, setShowLinkDevice] = useState(true);
const [selectedIndex, setSelectedIndex] = useState(null);
const [showModal, setShowModal] = useState(false);
const [itemToRemove, setItemToRemove] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const createPetModalOpenState = useRef(null);
const petApi = usePetApi();
+ const deviceApi = useDeviceApi();
useEffect(() => {
- if ( !petApi ) return;
+ if ( !petApi || ! deviceApi ) return;
const fetchData = async () => {
+ const pets = await petApi.getPets();
+ setPets(pets);
- const pets = await petApi?.getPets();
-
- setPets(pets);
+ const devices = await deviceApi.getDevices();
+ setDevices(devices);
+ setLoading(false);
}
- fetchData;
- }, [petApi]);
- const handleRemoveItem = (index: number) => {
- setShowModal(true);
- setItemToRemove(index);
+ fetchData();
+ }, [petApi, deviceApi]);
+
+ const handleRemoveDevice = async (deviceId: number) => {
+ if ( ! deviceApi ) return;
+
+ await deviceApi.deleteDevice(deviceId);
+
+ const updated = devices.filter(device => device.id != deviceId);
+ setDevices(updated);
};
- console.log("loaded-Pets", pets);
+ const handleOpenCreatePetModal = async (open: boolean) => {
+ if ( ! petApi ) return;
+
+ createPetModalOpenState.current?.setOpen(open)
+ }
+
+ const handleCloseCreatePetModal = async () => {
+ if ( ! petApi ) return;
+
+ const pets = await petApi.getPets();
+ setPets(pets);
+ }
+
+ const handleRemovePet = async (petId: number) => {
+ if ( ! petApi ) return;
+
+ await petApi.removePet(petId);
+
+ const updated = pets.filter(pet => pet.id != petId);
+ setPets(updated);
+ }
+
+ const handleSelectPet = async (petId: number | undefined) => {
+ if ( ! deviceApi || ! devices[0] ) return;
+
+ const currentDevice = devices[0];
+ currentDevice.petId = (currentDevice.petId !== petId) ? petId : undefined;
+
+ await deviceApi.updateDevice(currentDevice); //TODO deselect?
+
+ const updatedDevices = devices.filter(device => device.id !== currentDevice.id);
+ setDevices([...updatedDevices, currentDevice]);
+ }
const confirmRemoveItem = () => {
if (itemToRemove !== null) {
@@ -56,12 +102,21 @@ function Settings(
setItemToRemove(null);
};
- const selectItem = (index: number) => {
- setSelectedIndex(index);
- };
+ console.log({
+ devices: devices,
+ pets: pets,
+ })
+
+ if (loading) {
+ return (
+
+
+
+ )
+ }
return (
-
+
-
-
+
+
Device
+ {devices.length == 0 ?
+ (
+
+ ) : (
+
+ )
+ }
@@ -114,8 +180,16 @@ function Settings(
Are you sure you want to remove this pet?
-
-
+
+