Skip to content
Snippets Groups Projects
Commit e6433cc8 authored by Martyna Maria Juga's avatar Martyna Maria Juga
Browse files

styled buttons and sizes

parent 51815f1b
Branches
No related tags found
2 merge requests!57Dev branch,!56Overview
......@@ -32,7 +32,7 @@ export function DatePicker({dates, setDate, allowedDate} : Props) {
<Button
variant={"outline"}
className={cn(
"w-[270px] justify-start text-left font-normal",
"w-[280px] justify-start text-left font-normal",
!dates && "text-muted-foreground"
)}
>
......
......@@ -65,7 +65,7 @@ body {
main{
display: grid;
grid-template-columns: 20px 280px 20px 1fr 20px;
grid-template-columns: 20px 350px 20px 1fr 20px;
grid-template-rows: 20px 1fr 20px;
width: 100vw; /* Set the width to 100% of the viewport width */
height: calc(100vh - 102px); /* Set the height to 100% of the viewport height */
......
......@@ -27,6 +27,7 @@ import { Button } from '@/components/ui/button';
import { DatePicker } from '@/components/ui/datepicker'
import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons"
import { Input } from '@/components/ui/input';
import { Separator } from "@/components/ui/separator"
const IngressAPI: String = import.meta.env.VITE_IAPI_URL
const EgressAPI: String = import.meta.env.VITE_EAPI_URL
......@@ -117,22 +118,26 @@ function Overview() {
<main>
<div id = "rightbar">
<div className = "rightbar">
<div className="h-[100%] w-[100%] relative overflow-auto rounded-md border shadow-md">
<LineChart data={buildingData}/>
</div>
</div>
<div id = "leftbar">
<div className ="rounded-md border shadow-md py-[10px] px-[5px]">
<div className = "leftbar">
<div>
<label>
Interval between data points
<Input type='number' value={interval} onChange={event => setInterval(parseInt(event.target.value))}></Input>
</label> <br/>
</label>
<br/>
<br/>
<div className='h-[30px] flex items-center justify-between'>
<label>Date From:</label>
<div>
<div className='flex items-end'>
<Button className='h-[25px]' variant="outline" size="icon" onClick={e => { //TODO: CLEAN UP THESE LATER ------------------------------- NO REALLY, THEY SUCK ATM
var date = new Date;
if(startDate !== undefined){
......@@ -152,12 +157,15 @@ function Overview() {
}}}}>
<Minus className='h-[22px]'></Minus>
</Button>
</div>
</div>
<DatePicker dates={startDate} setDate={setStartDate} allowedDate={new Date()}/>
</div> <br/> <br/>
<br/> <br/>
<div className='bg-amber-400 justify-center'>
<div className='h-[30px] flex items-center justify-between'>
<label>Date To:</label>
<div className='flex items-end'>
<Button className='h-[25px]' variant="outline" size="icon" onClick={e => { //TODO: CLEAN UP THESE LATER ------------------------------- NO REALLY, THEY SUCK ATM
var date = new Date; var sdate = startDate
if(endDate !== undefined){
......@@ -177,18 +185,22 @@ function Overview() {
}}>
<Minus className='h-[22px]'></Minus>
</Button>
</div>
</div>
<DatePicker dates={endDate} setDate={setEndDate} allowedDate={startDate} />
</div> <br/> <br/>
<br/> <br/>
<div>
<Button onClick={e => {
<div className="flex items-center justify-around">
<Button variant="outline" onClick={e => {
var sdate: Date = new Date;
var edate: Date = new Date;
if(startDate !== undefined && endDate !== undefined){
sdate.setTime(startDate.getTime() - 1 * millisInDays); edate.setTime(endDate.getTime() - 1 * millisInDays)
setStartDate(sdate); setEndDate(edate)
}}}>-1 day</Button>
<Button onClick={e => {
<Button variant="outline" onClick={e => {
var sdate: Date = new Date;
var edate: Date = new Date;
if(startDate !== undefined && endDate !== undefined){
......@@ -196,13 +208,15 @@ function Overview() {
setStartDate(sdate); setEndDate(edate)
}}}>-1 week</Button>
</div>
<div className='w-[280px] h-[100px] justify-around bg-orange-400'>
<Button onClick={e => {setStartDate(new Date()); var d = new Date(); d.setTime(d.getTime() - 1 * millisInDays); setEndDate(d); setInterval(10)}}>Last day</Button>
<Button onClick={e => {setStartDate(new Date()); var d = new Date(); d.setTime(d.getTime() - 7 * millisInDays); setEndDate(d); setInterval(30)}}>Last week</Button>
<br/>
<div className="flex items-center justify-around">
<Button variant="outline" onClick={e => {setStartDate(new Date()); var d = new Date(); d.setTime(d.getTime() - 1 * millisInDays); setEndDate(d); setInterval(10)}}>Last day</Button>
<Button variant="outline" onClick={e => {setStartDate(new Date()); var d = new Date(); d.setTime(d.getTime() - 7 * millisInDays); setEndDate(d); setInterval(30)}}>Last week</Button>
</div>
</div>
<br/>
<Button variant="outline" size="icon" onClick={e => setRecall(!recall)}><RefreshCw/></Button>
<div className="flex items-center align-center justify-center"><Button variant="outline" size="icon" onClick={e => setRecall(!recall)}><RefreshCw/></Button></div>
</div> <br/>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment