Skip to content

Commit

Permalink
Merge pull request #76 from RGarrido03/general-improvments-2
Browse files Browse the repository at this point in the history 
🏁 General improvements 2
  • Loading branch information
@RGarrido03
RGarrido03 authored Dec 19, 2023
2 parents a01722c + 5395f1d commit 34245f6
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 53 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/home/costs/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function Costs() {
client.connect(
{},
() => {
client.subscribe("/houses/1/costs", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/costs`, function (new_data) {
console.log("New notification: ", JSON.parse(new_data.body));
const parsedData = JSON.parse(new_data.body);
setData(parsedData);
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/app/home/devices/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,14 @@ export default function Devices() {
const [data, setData] = useState<Device[]>([]);
const [openCreateModal, setOpenCreateModal] = useState<boolean>(false);

// Fetch data from API
useEffect(() => {
const ws = new SockJS(`http://${process.env.NEXT_PUBLIC_HOST_URL}/api/ws`);
const client = Stomp.over(ws);

client.connect(
{},
() => {
client.subscribe("/houses/1/devices", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/devices`, function (new_data) {
console.log("New notification: ", JSON.parse(new_data.body));
const parsedData = JSON.parse(new_data.body);
setData(parsedData);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/home/electricity/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@ export default function Electricity() {
client.connect(
{},
() => {
client.subscribe("/houses/1/electricity", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/electricity`, function (new_data) {
console.log("New notification: ", JSON.parse(new_data.body));
setData((old) => [...old, JSON.parse(new_data.body)]);
});
// notifications
client.subscribe("/houses/1/notification/grid", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/notification/grid`, function (new_data) {
const parsedData = JSON.parse(new_data.body);
setNotificationData(parsedData);
});
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/app/home/environment/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@ export default function Environment() {
client.connect(
{},
() => {
client.subscribe("/houses/1/environment", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/environment`, function (new_data) {
console.log("New notification: ", JSON.parse(new_data.body));
setData((old) => [...old, JSON.parse(new_data.body)]);
});
// notifications
client.subscribe("/houses/1/notification/power", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/notification/power`, function (new_data) {
const parsedData = JSON.parse(new_data.body);
setNotificationData(parsedData);
});
Expand Down Expand Up @@ -126,7 +126,7 @@ export default function Environment() {
data={data}
dataKey="renewable"
className="fill-emerald-300 dark:fill-emerald-600"
unitOfMeasurement="W"
unitOfMeasurement="%"
/>
</CardContent>
</Card>
Expand Down Expand Up @@ -162,7 +162,8 @@ export default function Environment() {
data={data}
dataKey="emissions"
className="fill-emerald-300 dark:fill-emerald-600"
unitOfMeasurement="%"
unitOfMeasurement="g"
label="d"
/>
</CardContent>
</Card>
Expand Down
108 changes: 68 additions & 40 deletions frontend/src/app/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
CardFooter,
CardHeader,
CardDescription,
DevicesCard,
} from "@/components/ui/card";
import Link from "next/link";
import Wave from "react-wavify";
Expand All @@ -18,9 +17,11 @@ import { MaterialSymbol } from "react-material-symbols";
import { Button } from "@/components/ui/button";
import { useCookies } from "next-client-cookies";
import { User } from "@/app/login/user";
import { deviceTypes } from "../home/devices/types";
//websocket
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import { Device } from "./devices/page";

type ElectricityDataProps = {
time: string;
Expand Down Expand Up @@ -63,6 +64,9 @@ export default function Home() {
const [costData, setCostData] = useState<CostDataProps>();
const [waterData, setWaterData] = useState<WaterValues>([]);
const [environmentData, setEnvironmentData] = useState<EnvironmentData>([]);
const [openDeleteModal, setOpenDeleteModal] = useState<boolean>(false);
const [deleteId, setDeleteId] = useState<number>(0);
const [deviceData, setDeviceData] = useState<Device[]>([]);

const cookies = useCookies();
const user: User = JSON.parse(cookies.get("currentUser") ?? "");
Expand All @@ -75,22 +79,29 @@ export default function Home() {
{},
() => {
// electricity
client.subscribe("/houses/1/electricity", function (new_data) {
setData((old) => [...old, JSON.parse(new_data.body)]);
client.subscribe(`/houses/${cookies.get("house")}/electricity`, function (new_data) {
const parsedData = JSON.parse(new_data.body);
setCostData(parsedData);
});
// costs
client.subscribe("/houses/1/costs", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/costs`, function (new_data) {
const parsedData = JSON.parse(new_data.body);
setCostData(parsedData);
});
// water
client.subscribe("/houses/1/water", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/water`, function (new_data) {
setWaterData((old) => [...old, JSON.parse(new_data.body)]);
});
// environment
client.subscribe("/houses/1/environment", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/environment`, function (new_data) {
setEnvironmentData((old) => [...old, JSON.parse(new_data.body)]);
});
// devices
client.subscribe(`/houses/${cookies.get("house")}/devices`, function (new_data) {
console.log("New notification: ", JSON.parse(new_data.body));
const parsedData = JSON.parse(new_data.body);
setDeviceData(parsedData);
});
},
() => {
console.error("ERROR: WEBSOCKET NOT WORKING");
Expand Down Expand Up @@ -149,6 +160,19 @@ export default function Home() {
);
const environmentData = await environmentResponse.json();
setEnvironmentData(environmentData);

const devicesResponse = await fetch(
`http://${process.env.NEXT_PUBLIC_HOST_URL}/api/houses/${cookies.get(
"house",
)}/devices`,
{
headers: {
Authorization: "Bearer " + user.token,
},
},
);
const devicesData = await devicesResponse.json();
devicesData(devicesData);
} catch (error) {
console.error("Error fetching data:", error);
}
Expand Down Expand Up @@ -230,7 +254,7 @@ export default function Home() {
</CardHome>

<div className="grid grid-flow-row grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<Link href={"/home"}>
<Link href={"/home/water"}>
<Card className="overflow-hidden">
<CardHeader className="pb-6">
<CardTitle>Water output now</CardTitle>
Expand Down Expand Up @@ -266,50 +290,54 @@ export default function Home() {
</Card>
</Link>

<Link href={"/home"}>
<Link href={"/home/devices"}>
<Card className="overflow-hidden">
<CardHeader>
<CardTitle>Devices</CardTitle>
<CardDescription className="pb-4">
The more power consuming devices
</CardDescription>
</CardHeader>
<CardContent>
<CardContent className="h-36 overflow-y-auto">
<div className="space-y-4">
<DevicesCard>
<div className="flex items-center justify-between">
{(data === null || data.length === 0) && (
<div className="flex flex-1 flex-col justify-center text-center">
<MaterialSymbol
icon="vacuum"
size={24}
className="pl-3"
></MaterialSymbol>
<CardHeader>Aspirador</CardHeader>
icon="error"
size={48}
className="text-center"
/>
<p className="text-center text-lg font-bold">
Oops! It looks like you don&apos;t have any device yet.
</p>
<p>Start by creating one.</p>
</div>
<Button className="bg-orange-300 px-2">
)}
{deviceData.map((device) => (
<div
key={device.id}
className="flex items-center gap-4 rounded-card bg-secondary p-4"
>
<MaterialSymbol
icon="close"
icon={deviceTypes[device.type].icon}
size={24}
color="black"
></MaterialSymbol>
</Button>
</DevicesCard>
<DevicesCard>
<div className="flex items-center justify-between">
<MaterialSymbol
icon="electric_car"
size={24}
className="pl-3"
></MaterialSymbol>
<CardHeader>Tesla Charger</CardHeader>
/>
<div className="flex-1">
<p className="font-semibold">{device.name}</p>
<p className="text-sm">{deviceTypes[device.type].name}</p>
</div>
<Button
variant="destructive"
className="h-fit p-2"
onClick={() => {
setDeleteId(device.id);
setOpenDeleteModal(true);
}}
>
<MaterialSymbol icon="close" size={20} />
</Button>
</div>
<Button className="bg-orange-300 px-2">
<MaterialSymbol
icon="close"
size={24}
color="black"
></MaterialSymbol>
</Button>
</DevicesCard>
))}
</div>
</CardContent>
<CardFooter>
Expand Down Expand Up @@ -403,7 +431,7 @@ export default function Home() {
</Card>
</Link>

<Link href={"/home"}>
<Link href={"/home/environment"}>
<Card className="overflow-hidden">
<CardHeader>
<CardTitle>Self suficiency</CardTitle>
Expand All @@ -430,7 +458,7 @@ export default function Home() {
</Card>
</Link>

<Link href={"/home"}>
<Link href={"/home/costs"}>
<Card className="overflow-hidden">
<CardHeader>
<CardTitle>Costs summary</CardTitle>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/home/water/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,12 @@ export default function Water() {
client.connect(
{},
() => {
client.subscribe("/houses/1/water", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/water`, function (new_data) {
console.log("New notification: ", JSON.parse(new_data.body));
setData((old) => [...old, JSON.parse(new_data.body)]);
});
// notifications
client.subscribe("/houses/1/notification/water", function (new_data) {
client.subscribe(`/houses/${cookies.get("house")}/notification/water`, function (new_data) {
const parsedData = JSON.parse(new_data.body);
setNotificationData(parsedData);
});
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/area-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ type CustomAreaChartProps = {
className?: string;
height?: number | string | undefined;
unitOfMeasurement?: string;
label?: string;
width?: number | string | undefined;
};

export function CustomTooltip({
payload,
label,
active,
unitOfMeasurement,
}: TooltipProps<number, string> & {
Expand All @@ -29,7 +29,7 @@ export function CustomTooltip({
<p className="font-semibold">
{payload ? payload[0].value : 0} {unitOfMeasurement}
</p>
<p className="text-sm">{label}</p>
<p className="text-sm">{payload ? payload[0].payload.time.slice(11, -11) : 0}</p>
</div>
);
}
Expand Down

0 comments on commit 34245f6

Please sign in to comment.