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

added rightbar styling on overview

parent 6daedfb9
No related branches found
No related tags found
2 merge requests!59Dev branch,!58Overview
Show whitespace changes
Inline Side-by-side
Frontend/power-tracker/src/index.css
+ 12
− 0
View file @ 150b61fe
......@@ -98,3 +98,15 @@ main{
padding: 20px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
\ No newline at end of file
Frontend/power-tracker/src/pages/overview.tsx
+ 49
− 41
View file @ 150b61fe
......@@ -127,27 +127,34 @@ function Overview() {
<div className = "leftbar">
<div>
<label>
Interval between data points
<Input type='number' value={interval} onChange={event => setInterval(parseInt(event.target.value))}></Input>
</label>
<br/>
<br/>
{/* GOTTA IMPLEMENT FUNCTIONALITY TO THE 2 BUTTONS TO CHNAGE INOUT */}
<label className='text-primary text-sm'>Interval between data points</label>
<div className='flex'>
<Input className="w-[280px] h-[40px]" type='number' value={interval} onChange={event => setInterval(parseInt(event.target.value))}></Input>
<div className="flex flex-col h-[40px] ml-[5px]">
<Button className='h-[20px] w-[25px] rounded-none rounded-r-lg' variant="ghost" size="icon">
<Plus className='h-[20px]'></Plus>
</Button>
<Button className='h-[20px] w-[25px] rounded-none rounded-r-lg' variant="ghost" size="icon">
<Minus className='h-[20px]'></Minus>
</Button>
</div>
</div>
<div className='h-[30px] flex items-center justify-between'>
<label>Date From:</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
<label className='text-primary text-sm'>Date From</label>
<div className='flex'>
<DatePicker width={280} dates={startDate} setDate={setStartDate} allowedDate={new Date()}/>
<div className='flex flex-col h-[40px] ml-[5px]'>
<Button className='h-[20px] w-[25px] rounded-none rounded-r-lg' variant="ghost" size="icon" onClick={e => { //TODO: CLEAN UP THESE LATER ------------------------------- NO REALLY, THEY SUCK ATM
var date = new Date;
if(startDate !== undefined){
date.setTime(startDate.getTime() + 1 * millisInDays);
setStartDate(date);
}
}}>
<Plus className='h-[22px]'></Plus>
<Plus className='h-[20px]'></Plus>
</Button>
<Button className='h-[20px]' variant="outline" size="icon" onClick={e => {
<Button className='h-[20px] w-[25px] rounded-none rounded-r-lg' variant="ghost" size="icon" onClick={e => {
var date = new Date; var edate = endDate
if(startDate !== undefined){
if(edate === undefined) edate = new Date(1)
......@@ -159,14 +166,12 @@ function Overview() {
</Button>
</div>
</div>
<div className="flex flex-row-reverse"><DatePicker width={320} dates={startDate} setDate={setStartDate} allowedDate={new Date()}/></div>
<br/> <br/>
<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
<label className='text-primary text-sm'>Date To</label>
<div className='flex mb-[10px]'>
<DatePicker width={280} dates={endDate} setDate={setEndDate} allowedDate={startDate} />
<div className='flex flex-col h-[40px] ml-[5px]'>
<Button className='h-[20px] w-[25px] rounded-none rounded-r-lg' variant="ghost" size="icon" onClick={e => { //TODO: CLEAN UP THESE LATER ------------------------------- NO REALLY, THEY SUCK ATM
var date = new Date; var sdate = startDate
if(endDate !== undefined){
if(sdate === undefined) sdate = new Date(1)
......@@ -174,9 +179,9 @@ function Overview() {
date.setTime(endDate.getTime() + 1 * millisInDays);
setEndDate(date);
}}}}>
<Plus className='h-[22px]'></Plus>
<Plus className='h-[20px]'></Plus>
</Button>
<Button className='h-[25px]' variant="outline" size="icon" onClick={e => {
<Button className='h-[20px] w-[25px] rounded-none rounded-r-lg' variant="ghost" size="icon" onClick={e => {
var date = new Date;
if(endDate !== undefined){
date.setTime(endDate.getTime() - 1 * millisInDays);
......@@ -187,38 +192,41 @@ function Overview() {
</Button>
</div>
</div>
<div className="flex flex-row-reverse"><DatePicker width={320} dates={endDate} setDate={setEndDate} allowedDate={startDate} /></div>
<br/> <br/>
<div>
<div className="flex items-center justify-around">
<Button variant="outline" onClick={e => {
<div className="flex items-center justify-between mb-[5px]">
<Button className="w-[100px] h-[30px]" 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 variant="outline" onClick={e => {
}}}>-1 day
</Button>
<Separator orientation="vertical"></Separator>
<Button className="w-[100px] h-[30px]" variant="outline" onClick={e => {
var sdate: Date = new Date;
var edate: Date = new Date;
if(startDate !== undefined && endDate !== undefined){
sdate.setTime(startDate.getTime() - 7); edate.setTime(endDate.getTime() - 7 * millisInDays)
setStartDate(sdate); setEndDate(edate)
}}}>-1 week</Button>
}}}>-1 week
</Button>
</div>
<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>
<Separator className='mb-[5px]'></Separator>
<div className="flex items-center justify-between">
<Button className="w-[100px] h-[30px]" variant="outline" onClick={e => {setStartDate(new Date()); var d = new Date(); d.setTime(d.getTime() - 1 * millisInDays); setEndDate(d); setInterval(10)}}>Last day</Button>
<Separator orientation="vertical"></Separator>
<Button className="w-[100px] h-[30px]" 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/>
<div className="flex items-center align-center justify-center"><Button variant="outline" size="icon" onClick={e => setRecall(!recall)}><RefreshCw/></Button></div>
<div className="flex items-center align-center justify-center mb-[10px]"><Button className="h-[25px] w-[25px]" variant="outline" size="icon" onClick={e => setRecall(!recall)}><RefreshCw className='h-[15px] w-[15px]'/></Button></div>
</div> <br/>
</div>
<div className ="rounded-md border shadow-md py-[10px] px-[5px]">
{buildingsState.buildings.map((building, i) => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment