From 8df82986d77502c681f57766b5d3e8a18f90da03 Mon Sep 17 00:00:00 2001 From: Brupez Date: Mon, 11 Dec 2023 00:48:34 +0000 Subject: [PATCH 1/4] Skeleton --- frontend/src/app/home/costs/costs.tsx | 129 ++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 frontend/src/app/home/costs/costs.tsx diff --git a/frontend/src/app/home/costs/costs.tsx b/frontend/src/app/home/costs/costs.tsx new file mode 100644 index 0000000..e12d632 --- /dev/null +++ b/frontend/src/app/home/costs/costs.tsx @@ -0,0 +1,129 @@ +"use client"; + +import { CustomAreaChart } from "@/components/area-chart"; +import { TitleCard } from "@/components/title-card"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { useState, useEffect } from "react"; +import { MaterialSymbol } from "react-material-symbols"; + +type CostsProps = { + dayExpenses : number, + yesterdayExpenses : number, + water_mon : number, + electricity_mon: number, + monthExpenses: number +}[]; + +export default function Costs() { + const [data, setData] = useState([]); + + useEffect(() => { + async function fetchData() { + const temp = await fetch( + `http://${process.env.NEXT_PUBLIC_HOST_URL}/service/houses/1/costs`, + { + next: { revalidate: 60 }, // Revalidate every 60 seconds + }, + ); + setData(await temp.json()); + } + + fetchData().catch(console.error); + const interval = setInterval(() => { + fetchData().catch(console.error); + }, 5000); + return () => clearInterval(interval); + }, []); + + return ( +
+ + + + + + Net Expenses + + Your net expenses after considering earnings from the grid + + + + Today + + + Yesterday + + + + + + + + Expenses + + Water and eletricity expenses + + +
+ + Water + +
+
+ + Electricity + +
+ + + + + + + Oh snap! These devices are having a power party. + + Consider adjusting them if needed. + + + + + + + + + Expenses by month + + +
+
+

Air conditioner

+

2600 W

+
+
+

Dehumidifier

+

350 W

+
+
+

Oven

+

100 W

+
+
+ + + + + +
+ ); +} From 37166de794336590d55617e3bb73835c62c97d1b Mon Sep 17 00:00:00 2001 From: Brupez Date: Mon, 11 Dec 2023 18:34:51 +0000 Subject: [PATCH 2/4] Cards design --- frontend/src/app/home/costs/costs.tsx | 129 -------------------- frontend/src/app/home/costs/page.tsx | 167 ++++++++++++++++++++++++++ 2 files changed, 167 insertions(+), 129 deletions(-) delete mode 100644 frontend/src/app/home/costs/costs.tsx create mode 100644 frontend/src/app/home/costs/page.tsx diff --git a/frontend/src/app/home/costs/costs.tsx b/frontend/src/app/home/costs/costs.tsx deleted file mode 100644 index e12d632..0000000 --- a/frontend/src/app/home/costs/costs.tsx +++ /dev/null @@ -1,129 +0,0 @@ -"use client"; - -import { CustomAreaChart } from "@/components/area-chart"; -import { TitleCard } from "@/components/title-card"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { useState, useEffect } from "react"; -import { MaterialSymbol } from "react-material-symbols"; - -type CostsProps = { - dayExpenses : number, - yesterdayExpenses : number, - water_mon : number, - electricity_mon: number, - monthExpenses: number -}[]; - -export default function Costs() { - const [data, setData] = useState([]); - - useEffect(() => { - async function fetchData() { - const temp = await fetch( - `http://${process.env.NEXT_PUBLIC_HOST_URL}/service/houses/1/costs`, - { - next: { revalidate: 60 }, // Revalidate every 60 seconds - }, - ); - setData(await temp.json()); - } - - fetchData().catch(console.error); - const interval = setInterval(() => { - fetchData().catch(console.error); - }, 5000); - return () => clearInterval(interval); - }, []); - - return ( -
- - - - - - Net Expenses - - Your net expenses after considering earnings from the grid - - - - Today - - - Yesterday - - - - - - - - Expenses - - Water and eletricity expenses - - -
- - Water - -
-
- - Electricity - -
- - - - - - - Oh snap! These devices are having a power party. - - Consider adjusting them if needed. - - - - - - - - - Expenses by month - - -
-
-

Air conditioner

-

2600 W

-
-
-

Dehumidifier

-

350 W

-
-
-

Oven

-

100 W

-
-
- - - - - -
- ); -} diff --git a/frontend/src/app/home/costs/page.tsx b/frontend/src/app/home/costs/page.tsx new file mode 100644 index 0000000..95e15dc --- /dev/null +++ b/frontend/src/app/home/costs/page.tsx @@ -0,0 +1,167 @@ +"use client"; + +import { CustomAreaChart } from "@/components/area-chart"; +import { TitleCard } from "@/components/title-card"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; + +import { useState, useEffect } from "react"; +import {MaterialSymbol} from "react-material-symbols"; +import Link from "next/link"; +import {Button} from "@/components/ui/button"; + +type CostsProps = { + dayExpenses : number, + yesterdayExpenses : number, + water_mon : number, + electricity_mon: number, + monthExpenses: number +}[]; + +export default function Costs() { + const [data, setData] = useState([]); + + useEffect(() => { + async function fetchData() { + const temp = await fetch( + `http://${process.env.NEXT_PUBLIC_HOST_URL}/service/houses/1/costs`, + { + next: { revalidate: 60 }, // Revalidate every 60 seconds + }, + ); + setData(await temp.json()); + } + + fetchData().catch(console.error); + const interval = setInterval(() => { + fetchData().catch(console.error); + }, 5000); + return () => clearInterval(interval); + }, []); + + return ( +
+ + + + + + Net Expenses + + Your net expenses after considering earnings from the grid + + +
+
+

Today

+

294,43 €

+
+
+

Yesterday

+

356,48 €

+
+
+ + + + + + + Expenses + + Water and eletricity expenses + + +
+
+ +

Water

+

256,56 €

+
+
+ +

Electricity

+

256,56 €

+
+
+ + + + + + + Oh snap! These devices are having a power party. + + Consider adjusting them if needed. + + +
+
+ +
+ Microwave +
+
+ + + + + +
+ +
+
+ +
+ Microwave +
+
+ + + + + +
+ + + + + + + Expenses by month + + +
+
+

November

+

4654,5 €

+
+
+

Outubro

+

3600,63 €

+
+
+
+ +
+ + + + +
+ ); +} From 9585c70e7686c6dc70b69931cd7bff24d9371028 Mon Sep 17 00:00:00 2001 From: Brupez Date: Mon, 11 Dec 2023 20:06:15 +0000 Subject: [PATCH 3/4] Fetch API data --- frontend/src/app/home/costs/page.tsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/home/costs/page.tsx b/frontend/src/app/home/costs/page.tsx index 95e15dc..a6eb2c1 100644 --- a/frontend/src/app/home/costs/page.tsx +++ b/frontend/src/app/home/costs/page.tsx @@ -16,12 +16,10 @@ import Link from "next/link"; import {Button} from "@/components/ui/button"; type CostsProps = { - dayExpenses : number, - yesterdayExpenses : number, - water_mon : number, - electricity_mon: number, - monthExpenses: number -}[]; + electricity : number, + water : number, + today : number, +}; export default function Costs() { const [data, setData] = useState([]); @@ -59,7 +57,7 @@ export default function Costs() {

Today

-

294,43 €

+

{data.today} €

Yesterday

@@ -81,12 +79,12 @@ export default function Costs() {

Water

-

256,56 €

+

{data.water} €

Electricity

-

256,56 €

+

{data.electricity} €

@@ -153,13 +151,11 @@ export default function Costs() {
- -
From fa739c3086bd21ee30a4c02bfd1056e96cc02d0e Mon Sep 17 00:00:00 2001 From: Brupez Date: Tue, 12 Dec 2023 15:07:58 +0000 Subject: [PATCH 4/4] Refactor to fecth the last element from API --- frontend/src/app/home/costs/page.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/app/home/costs/page.tsx b/frontend/src/app/home/costs/page.tsx index a6eb2c1..888023a 100644 --- a/frontend/src/app/home/costs/page.tsx +++ b/frontend/src/app/home/costs/page.tsx @@ -19,7 +19,7 @@ type CostsProps = { electricity : number, water : number, today : number, -}; +}[]; export default function Costs() { const [data, setData] = useState([]); @@ -57,7 +57,7 @@ export default function Costs() {

Today

-

{data.today} €

+

{data.length !== 0 ? data[length-1].today : 0} €

Yesterday

@@ -79,12 +79,12 @@ export default function Costs() {

Water

-

{data.water} €

+

{data.length !== 0 ? data[length-1].water : 0} €

Electricity

-

{data.electricity} €

+

{data.length !== 0 ? data[length-1].electricity : 0} €

@@ -141,11 +141,11 @@ export default function Costs() {

November

-

4654,5 €

+

{data.length !== 0 ? data[length-1].today : 0} €

Outubro

-

3600,63 €

+

{data.length !== 0 ? data[length-1].water : 0} €