Skip to content

Commit 9019201

Browse files
naronchennaronchen
committedApr 23, 2023
finalized
1 parent b0d9f03 commit 9019201

File tree

12 files changed

+209
-30
lines changed

12 files changed

+209
-30
lines changed
 

‎package-lock.json

+48
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12+
"@fortawesome/fontawesome-svg-core": "^6.4.0",
13+
"@fortawesome/free-solid-svg-icons": "^6.4.0",
14+
"@fortawesome/react-fontawesome": "^0.2.0",
1215
"@supabase/auth-ui-react": "^0.3.5",
1316
"@supabase/supabase-js": "^2.20.0",
1417
"axios": "^1.3.6",

‎src/components/Habits/ScoreBoard.css

+38-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
.scoreboard__body{
2+
width: 100%;
3+
}
14
.scoreboard-input {
25
display: flex;
36
justify-content: space-between;
47
align-items: center;
5-
margin-bottom: 20px;
6-
8+
margin-bottom: 10px;
9+
width: 100%;
10+
margin-top: 5px;
711
}
812

913
.scoreboard-input input {
@@ -32,4 +36,36 @@
3236

3337
.scoreboard-input select:focus {
3438
outline: none;
39+
}
40+
41+
.scoreboard-delete {
42+
cursor: pointer;
43+
margin-left: 20px;
44+
45+
}
46+
.scoreboard-delete:hover {
47+
color: lightcoral;
48+
}
49+
50+
.scoreboard-btn{
51+
margin-top: 30px;
52+
display: flex;
53+
justify-content: center;
54+
/* gap: 20px; */
55+
}
56+
57+
.scoreboard-btn button{
58+
background: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
59+
-webkit-background-clip: text;
60+
-webkit-text-fill-color: transparent;
61+
outline: solid 1px white;
62+
}
63+
64+
65+
.checkbox-row{
66+
text-align: left;
67+
margin-left: 10px;
68+
display: flex;
69+
align-items: center;
70+
gap: 10px;
3571
}

‎src/components/Habits/ScoreBoard.jsx

+92-11
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import "./ScoreBoard.css"
33
import { useUser } from "../../hooks/useUser"
44
import { supabase } from "../../client"
55

6+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7+
import { faTrash, faStar } from '@fortawesome/free-solid-svg-icons';
8+
9+
610
function ScoreBoard(){
711
const [habits, setHabits] = useState([])
812

913
const userId = useUser()
1014

1115
const handleOnClick = () => {
1216
// console.log("clicked")
13-
const newHabit = {content: "", value: 'neu'}
17+
const newHabit = {content: "", value: 'neu', strikes: [false, false, false, false, false, false, false]}
1418
//create an empty card for user input
1519
setHabits([...habits, newHabit])
1620
}
@@ -44,7 +48,7 @@ function ScoreBoard(){
4448

4549
// If the user has a habit record, update it
4650
if (habitData.length === 1) {
47-
console.log("updating habit record");
51+
// console.log("updating habit record");
4852
const { data, error } = await supabase
4953
.from("habits")
5054
.update({ habits })
@@ -55,7 +59,7 @@ function ScoreBoard(){
5559
return;
5660
}
5761

58-
console.log("updated habit record:", data);
62+
// console.log("updated habit record:", data);
5963
}
6064
// If the user does not have a habit record, create a new one
6165
else {
@@ -68,7 +72,7 @@ function ScoreBoard(){
6872
console.error(error);
6973
return;
7074
}
71-
console.log("Created new habit record:", data);
75+
// console.log("Created new habit record:", data);
7276
}
7377
}
7478

@@ -105,25 +109,54 @@ function ScoreBoard(){
105109
return () => {
106110
submitHabits(userId, habits);
107111
};
108-
}, [userId, habits]);
112+
}, [habits]);
113+
114+
const handleDelete = (e) => {
115+
const updatedHabits = [...habits];
116+
// console.log(e.currentTarget.id); // You can access the id attribute now
117+
updatedHabits.splice(e.currentTarget.id, 1);
118+
setHabits(updatedHabits);
119+
}
109120

121+
const handleLight = (e, index) => {
122+
const updatedHabits = [...habits];
123+
// console.log(e.currentTarget.id); // You can access the id attribute now
124+
// console.log("overall index", index)
125+
updatedHabits[index].strikes[e.currentTarget.id] = !updatedHabits[index].strikes[e.currentTarget.id];
126+
// console.log('updatedHabits[index].strikes[e.currentTarget.id]: ', updatedHabits[index].strikes[e.currentTarget.id]);
127+
setHabits(updatedHabits);
128+
129+
// console.log("setup done")
130+
}
131+
110132
return (
111133
<div className="scoreboard">
112134
<div className="scoreboard__header">
113135
<span>
114-
<h2>Scoreboard</h2>
136+
<h2>Habits Scoreboard & Tracker</h2>
115137
</span>
116138
</div>
117139
<div className="scoreboard__body">
118140
{
119141
habits.map((habit, index) => {
120142
return (
121-
<div className="scoreboard-input" key={index}>
143+
<div key={index}>
144+
<div className="scoreboard-input" key={index + 'scoreboard'}>
122145
<input
123146
type="text"
124147
id={index}
125148
value={habit.content}
126149
onChange={handleObjectiveChange}
150+
style={{
151+
borderBottom:
152+
habit.value === 'neg'
153+
? '1px solid #fbbf77'
154+
: habit.value === 'pos'
155+
? '1px solid lightgreen'
156+
: '1px solid #fff',
157+
}}
158+
159+
//ff9e3d
127160
>
128161
</input>
129162
<select name="score"
@@ -136,16 +169,64 @@ function ScoreBoard(){
136169
<option value="neg">-</option>
137170
<option value="neu">=</option>
138171
</select>
172+
173+
<FontAwesomeIcon
174+
className="scoreboard-delete"
175+
id={index}
176+
onClick={(e) => handleDelete(e)}
177+
icon={faTrash}
178+
/>
179+
180+
</div>
181+
{/* probably more generic code here later? */}
182+
{habit?.value === 'neg' ? (
183+
<div className="checkbox-row">
184+
{habit.strikes?.map((strike, starIndex) => {
185+
return (
186+
<div key={starIndex + 'checkbox'}>
187+
<FontAwesomeIcon
188+
style={{
189+
color: strike === true ? 'orange' : 'white',
190+
}}
191+
icon={faStar}
192+
id = {starIndex}
193+
onClick={(e) => handleLight(e, index)}
194+
/>
195+
</div>
196+
);
197+
})}
198+
</div>
199+
) : null}
200+
201+
{habit?.value === 'pos' ? (
202+
<div className="checkbox-row">
203+
{habit.strikes?.map((strike, starIndex) => {
204+
return (
205+
<div key={starIndex + 'checkbox'}>
206+
<FontAwesomeIcon
207+
style={{
208+
color: strike === true ? 'lightgreen' : 'white',
209+
}}
210+
icon={faStar}
211+
id = {starIndex}
212+
onClick={(e) => handleLight(e, index)}
213+
/>
214+
</div>
215+
);
216+
})}
217+
</div>
218+
) : null}
139219
</div>
140220
)
141221
}
142222
)
143223
}
144224
</div>
145-
146-
<button onClick={handleOnClick}> + </button>
147-
<button onClick={handleSubmit}> Submit </button>
148-
225+
226+
<div className="scoreboard-btn">
227+
<button onClick={handleOnClick}> + </button>
228+
{/* <button onClick={handleSubmit}> Submit </button> */}
229+
</div>
149230
</div>
150231
)
151232
}

‎src/components/Navbar.css

+3
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@
4848

4949
.navbar li a:hover {
5050
background-color: #111; /* Change hover background color as desired */
51+
/* background-image: linear-gradient(-225deg, #20E2D7 0%, #F9FEA5 100%);
52+
-webkit-background-clip: text;
53+
-webkit-text-fill-color: transparent; */
5154
}
5255

5356
.navbar > div {

‎src/components/Tasks/CurrentTasks.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function CurrentTasks() {
7171
const { data, error } = await supabase.from('tasks')
7272
.delete()
7373
.match({finished: true})
74-
console.log("newday finished")
74+
// console.log("newday finished")
7575
if (error) { console.log(error)}
7676
else {
7777
fetchTasks()

‎src/components/Tasks/NewTask.css

+8-6
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,16 @@
5252
margin: 0px 5px;
5353
}
5454

55-
#submit-btn:hover {
56-
background-color: lightsteelblue;
57-
}
55+
/* #submit-btn:hover {
56+
background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
57+
color: black;
58+
} */
5859

5960

60-
.expand-btn:hover {
61-
background-color: lightseagreen;
62-
}
61+
/* .expand-btn:focus {
62+
outline: linear-gradient(-225deg, #20E2D7 0%, #F9FEA5 100%);
63+
} */
64+
6365
.newday-container{
6466
width: 250px;
6567
display: flex;

‎src/index.css

-7
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,6 @@ button {
4747
cursor: pointer;
4848
transition: border-color 0.25s;
4949
}
50-
button:hover {
51-
border-color: #646cff;
52-
}
53-
button:focus,
54-
button:focus-visible {
55-
outline: 4px auto -webkit-focus-ring-color;
56-
}
5750

5851
@media (prefers-color-scheme: light) {
5952
:root {

‎src/page/AIagent/AIAgent.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,10 @@
2828
.objective-input:focus {
2929
outline: none; /* Remove the blue outline when focused */
3030
}
31-
31+
32+
.agent-btn{
33+
background: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);
34+
-webkit-background-clip: text;
35+
-webkit-text-fill-color: transparent;
36+
outline: solid 1px white;
37+
}

‎src/page/AIagent/AIAgent.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const AIAgent = () => {
6868
className="objective-input"
6969
/>
7070
</div>
71-
<button onClick={fetchOpenAIResponse}>Get Action Points</button>
71+
<button className='agent-btn' onClick={fetchOpenAIResponse}>Get Action Points</button>
7272
{isLoading && <p>Loading...</p>}
7373
{openAIResponse.length > 0 && (
7474
<div className="bullet-points">

‎src/page/HabitPage/HabitPage.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function HabitPage(){
99
<div>
1010
<Navbar />
1111
<MainContainer>
12-
<h1>Habit Page</h1>
12+
{/* <h1>Habit Page</h1> */}
1313
<ScoreBoard />
1414
</MainContainer>
1515
</div>

‎src/page/TaskPage/TaskPage.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useParams } from 'react-router-dom'
22
import {supabase} from '../../client'
33
import {useEffect, useState, useRef} from 'react'
44
import './TaskPage.css'
5+
import Navbar from '../../components/Navbar'
6+
import MainContainer from '../../components/MainContainer'
57

68
function TaskPage() {
79
// here I update the task
@@ -104,6 +106,9 @@ function TaskPage() {
104106

105107

106108
return (
109+
<div>
110+
<Navbar />
111+
<MainContainer>
107112
<div className="task-page-container">
108113
<h2>Task Page 🚀</h2>
109114
<hr className="divider" />
@@ -158,6 +163,8 @@ function TaskPage() {
158163
Delete Task
159164
</button>
160165
</div>
166+
</MainContainer>
167+
</div>
161168
)
162169

163170

0 commit comments

Comments
 (0)
Please sign in to comment.