Added new card
This commit is contained in:
timhaller
parent
15516490a8
commit
0c30f3b43a
|
|
@ -15,8 +15,8 @@ export default function Home() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={""}>
|
||||||
<h1>Calendrier-avent</h1>
|
<h1 className={"border-l-blue-600"}>Calendrier-avent</h1>
|
||||||
<p>Please enter the password :</p>
|
<p>Please enter the password :</p>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)}></input>
|
<input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)}></input>
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,11 @@
|
||||||
"use client";
|
"use client";
|
||||||
import {Bar} from "react-chartjs-2";
|
|
||||||
|
|
||||||
import prisma from "@lib/prisma";
|
import {DayCard} from "@components/custom/dayCard";
|
||||||
|
|
||||||
import Head from 'next/head'
|
|
||||||
|
|
||||||
import {
|
|
||||||
Chart as ChartJS,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
PointElement,
|
|
||||||
LineElement,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
Filler,
|
|
||||||
} from "chart.js";
|
|
||||||
|
|
||||||
ChartJS.register (
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
PointElement,
|
|
||||||
LineElement,
|
|
||||||
Filler,
|
|
||||||
Title,
|
|
||||||
Tooltip,
|
|
||||||
Legend
|
|
||||||
);
|
|
||||||
|
|
||||||
interface IPower {
|
|
||||||
date: string,
|
|
||||||
value: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IChart {
|
|
||||||
labels : string[],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: string,
|
|
||||||
data: number[],
|
|
||||||
fill: true,
|
|
||||||
backgroundColor: string,
|
|
||||||
borderColor: string,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
export default async function Results() {
|
|
||||||
const grades = await prisma.grade.findMany()
|
|
||||||
const gradesArray = grades.map(grade => grade.grade.toString())
|
|
||||||
const allGrades = ["1", "1,5", "2", "2,5", "3", "3,5", "4", "4,5", "5", "5,5", "6"]
|
|
||||||
const gradesCount = allGrades.map(grade => gradesArray.filter(g => g === grade).length)
|
|
||||||
console.log(allGrades)
|
|
||||||
console.log(gradesCount)
|
|
||||||
|
|
||||||
const options = {
|
|
||||||
responsive: true,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
position: 'top' as const,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: 'Energy Production/Consumption',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default function Results() {
|
||||||
return (
|
return (
|
||||||
<>
|
<div>
|
||||||
<Head>
|
<DayCard day={1} enabled={true} name={"Michal Polka"}/>
|
||||||
<title>Solar</title>
|
</div>
|
||||||
<meta name="description" content="Generated by create next app" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
<main>
|
|
||||||
{ gradesCount ?
|
|
||||||
<>
|
|
||||||
{console.log("datas", gradesArray)}
|
|
||||||
<Bar data={gradesCount} width={100} height={40} options={options}/>
|
|
||||||
</>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
</main>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { BellRing, Check } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card"
|
||||||
|
|
||||||
|
type CardProps = React.ComponentProps<typeof Card>
|
||||||
|
|
||||||
|
interface DayCardProps extends CardProps {
|
||||||
|
day: number,
|
||||||
|
name: string,
|
||||||
|
enabled: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DayCard({ className, ...props }: DayCardProps) {
|
||||||
|
return (
|
||||||
|
<Card className={cn("w-[300px]", className)} {...props}>
|
||||||
|
<CardContent className="grid gap-4">
|
||||||
|
{props.enabled ?
|
||||||
|
<div className="rounded-md p-4">
|
||||||
|
<h1 className="text-[100px] font-bold bg-red-700">1</h1>
|
||||||
|
<div className="flex flex-col bg-blue-500">
|
||||||
|
<h2 className="text-2xl font-bold">Michal Polka</h2>
|
||||||
|
<p className="text-xl">Description</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="rounded-md p-4">
|
||||||
|
<h1 className="text-[100px] font-bold bg-red-700">1</h1>
|
||||||
|
<div className="flex flex-col bg-blue-500">
|
||||||
|
<h2 className="text-2xl font-bold">Michal Polka</h2>
|
||||||
|
<p className="text-xl">Description</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -21,8 +21,8 @@
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./*"],
|
"@/*": ["./*"],
|
||||||
"@components/*": ["./components/*"],
|
"@components/*": ["./components/*"],
|
||||||
"@lib/*": ["./lib/*"],
|
"@lib/*": ["/lib/*"],
|
||||||
"@styles/*": ["./styles/*"],
|
"@styles/*": ["/styles/*"],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue