Skip to content
This repository was archived by the owner on Dec 13, 2024. It is now read-only.

Commit 20ae2eb

Browse files
yasuaki-kumazakiyasuaki-kumazaki
authored
modified settings and pet modal (#152)
2 parents 4e41ff0 + 8a1525f commit 20ae2eb

File tree

2 files changed

+114
-62
lines changed

2 files changed

+114
-62
lines changed

‎frontend/src/Components/CreatePetModal.tsx

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@ const CreatePetModal = () => {
2222

2323
const handleInputPetType = (e: { target: { value: SetStateAction<string>; }; }) => {
2424
setPetType(e.target.value);
25-
};
25+
};
2626

2727
const handleSubmit = (e: { preventDefault: () => void; }) => {
2828
e.preventDefault(); // Prevent form from reloading the page
29-
if (petName.trim() === "" || petType === "") {
29+
if (petName.trim() === "" || petName.trim() === "DEAD" || petType === "") {
3030
return;
3131
}
3232
// TODO: Save the device ID or perform any action with the input value
33-
console.log("Pet Name:", petName," Pet Type:", petType);
33+
console.log("Pet Name:", petName, " Pet Type:", petType);
3434
setOpen(false); // Close the popup after submission
3535
};
3636

37-
return (
37+
return (
3838
<>
3939
<div className='container-fluid d-flex justify-content-center align-items-center' style={{ height: '100vh' }}>
4040
<button className="btn btn-success" onClick={() => setOpen(true)}>Create Teamagochi</button>
@@ -44,20 +44,22 @@ const CreatePetModal = () => {
4444
onClose={handleClose}
4545
overlayStyle={{ background: 'rgba(0, 0, 0, 0.5)' }}
4646
contentStyle={{ borderRadius: '10px', border: '2px solid grey', width: '50%' }}
47-
>
48-
<div style={{padding: '20px', position: 'relative' }}>
49-
<button
47+
>
48+
<div style={{ padding: '20px', position: 'relative' }}>
49+
<button
5050
type="button"
5151
className="btn-close"
5252
aria-label="Close"
5353
style={{ position: 'absolute', top: '10px', right: '10px' }}
5454
onClick={handleClose}
55-
></button>
55+
></button>
5656

5757
<form className="row g-0 needs-validation justify-content-center" onSubmit={handleSubmit}>
5858
<figure className='text-center'>
5959
<p className='lead'>
60-
<strong>Enter your Pet Name below and choose it's Type:</strong>
60+
<strong>Enter your Pet Name below and choose it's Type:
61+
<p>Pet name cannot be "DEAD"</p>
62+
</strong>
6163
</p>
6264
</figure>
6365

@@ -82,21 +84,21 @@ const CreatePetModal = () => {
8284
<div className="input-group mb-1">
8385
<span className="input-group-text">@</span>
8486
<label htmlFor="inputLink" className="visually-hidden">Pet Name</label>
85-
<input type="text" className="form-control" id="inputPetName"
86-
placeholder="Pet Name" required value={petName} onChange={handleInputPetName}/>
87+
<input type="text" className="form-control" id="inputPetName"
88+
placeholder="Pet Name" required value={petName} onChange={handleInputPetName} />
8789
<div className='invalid-feedback'>ok</div>
8890
</div>
8991

90-
<div className= "btn-group btn-group-toggle pt-2" data-toggle="buttons">
91-
<input type="radio" className="btn-check" name="options" id="option1" value="Land" autoComplete="off"
92+
<div className="btn-group btn-group-toggle pt-2" data-toggle="buttons">
93+
<input type="radio" className="btn-check" name="options" id="option1" value="Land" autoComplete="off"
9294
checked={petType === "Land"} onChange={handleInputPetType}></input>
9395
<label className="btn btn-secondary" htmlFor="option1">Land</label>
9496

95-
<input type="radio" className="btn-check" name="options" id="option2" value="Air" autoComplete="off"
97+
<input type="radio" className="btn-check" name="options" id="option2" value="Air" autoComplete="off"
9698
checked={petType === "Air"} onChange={handleInputPetType}></input>
9799
<label className="btn btn-secondary" htmlFor="option2">Air</label>
98100

99-
<input type="radio" className="btn-check" name="options" id="option3" value="Water" autoComplete="off"
101+
<input type="radio" className="btn-check" name="options" id="option3" value="Water" autoComplete="off"
100102
checked={petType === "Water"} onChange={handleInputPetType}></input>
101103
<label className="btn btn-secondary" htmlFor='option3'>Water</label>
102104
</div>
@@ -108,7 +110,7 @@ const CreatePetModal = () => {
108110
</div>
109111
</Popup>
110112
</>
111-
);
113+
);
112114
};
113115

114116
export default CreatePetModal;

‎frontend/src/Components/Settings.tsx

Lines changed: 96 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,110 @@
1-
import { useState } from 'react';
1+
import React, { useState } from 'react';
22
import profile_pic1 from '../Misc/8-bit-dog-nobg.png';
33
import 'bootstrap/dist/css/bootstrap.min.css';
44
import LinkDevice from "../Components/LinkDevice";
55

66
interface SettingsProps {
7-
username: string;
7+
username: string;
88
}
99

1010
function Settings(
11-
{ username }: SettingsProps
11+
{ username }: SettingsProps
1212
) {
13-
const [items, setItems] = useState(['Device 1', 'Device 2', 'Device 3']);
14-
const [showLinkDevice, setShowLinkDevice] = useState<boolean>(true);
15-
16-
const removeItem = (index: number) => {
17-
setItems(items.filter((_, i) => i !== index));
18-
};
19-
20-
// const resetItem = (index: number) => {
21-
// setItems(items.map((item, i) => (i === index ? `Item ${index + 1}` : item)));
22-
// };
23-
24-
return (
25-
<div className='d-flex justify-content-center pt-4 pb-2'>
26-
<div className="card align-items-center text-bg-light" style={{ width: "500px" }}>
27-
<img src={profile_pic1} className="card-img-top py-3" alt="profile picture" style={{ width: "100%", height: "auto" }} />
28-
<h2 className="card-title text-center"><kbd className='bg-success text-white'>PROFILE</kbd></h2>
29-
<div className="card-body" style={{ width: "100%" }}>
30-
<div className="input-group mb-4" style={{ height: "60px" }}>
31-
<div className="input-group-prepend">
32-
<div className="input-group-text" style={{ fontSize: "1.5rem", height: "60px", display: 'flex', alignItems: 'center' }}>@</div>
13+
const [items, setItems] = useState(['Device 1', 'Device 2', 'Device 3']);
14+
const [showLinkDevice, setShowLinkDevice] = useState<boolean>(true);
15+
const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
16+
const [showModal, setShowModal] = useState<boolean>(false);
17+
const [itemToRemove, setItemToRemove] = useState<number | null>(null);
18+
19+
const handleRemoveItem = (index: number) => {
20+
setShowModal(true);
21+
setItemToRemove(index);
22+
};
23+
24+
const confirmRemoveItem = () => {
25+
if (itemToRemove !== null) {
26+
setItems(items.filter((_, i) => i !== itemToRemove));
27+
if (selectedIndex === itemToRemove) {
28+
setSelectedIndex(null);
29+
}
30+
setItemToRemove(null);
31+
}
32+
setShowModal(false);
33+
};
34+
35+
const cancelRemoveItem = () => {
36+
setShowModal(false);
37+
setItemToRemove(null);
38+
};
39+
40+
const resetItem = (index: number) => {
41+
setItems(items.map((item, i) => (i === index ? `Item ${index + 1}` : item)));
42+
};
43+
44+
const selectItem = (index: number) => {
45+
setSelectedIndex(index);
46+
};
47+
48+
return (
49+
<div className='d-flex justify-content-center pt-4 pb-2'>
50+
<div className="card align-items-center text-bg-light" style={{ width: "500px" }}>
51+
<img src={profile_pic1} className="card-img-top py-3" alt="profile picture" style={{ width: "100%", height: "auto" }} />
52+
<h2 className="card-title text-center"><kbd className='bg-success text-white'>PROFILE</kbd></h2>
53+
<div className="card-body" style={{ width: "100%" }}>
54+
<div className="input-group mb-4" style={{ height: "60px" }}>
55+
<div className="input-group-prepend">
56+
<div className="input-group-text" style={{ fontSize: "1.5rem", height: "60px", display: 'flex', alignItems: 'center' }}>@</div>
57+
</div>
58+
<input type="text" className="form-control text-black" placeholder={username} disabled style={{ fontSize: "1.5rem", height: "60px" }}></input>
59+
</div>
60+
<div className='d-flex justify-content-center pt-2'>
61+
<button type="button" className="btn btn-success btn-block w-100" style={{ fontSize: "1.5rem", height: "60px" }} onClick={() => setShowLinkDevice(false)} >Link Device</button>
62+
</div>
63+
<div className='pt-4' style={{ width: "100%" }}>
64+
<ul className="list-group" style={{ fontSize: "1.2rem" }}>
65+
{items.map((item, index) => (
66+
<li key={index} className="list-group-item d-flex justify-content-between align-items-center py-3">
67+
{item}
68+
<div>
69+
<button
70+
className="btn btn-primary btn-lg mx-1"
71+
onClick={() => selectItem(index)}
72+
disabled={selectedIndex === index}
73+
>
74+
{selectedIndex === index ? 'Selected' : 'Select'}
75+
</button>
76+
<button className="btn btn-danger btn-lg mx-1" onClick={() => handleRemoveItem(index)}>Remove</button>
77+
</div>
78+
</li>
79+
))}
80+
</ul>
81+
</div>
82+
</div>
3383
</div>
34-
<input type="text" className="form-control text-black" placeholder={username} disabled style={{ fontSize: "1.5rem", height: "60px" }}></input>
35-
</div>
36-
<div className='d-flex justify-content-center pt-2'>
37-
<button type="button" className="btn btn-success btn-block w-100" style={{ fontSize: "1.5rem", height: "60px" }} onClick={() => setShowLinkDevice(false)} >Link Device</button>
38-
</div>
39-
<div className='pt-4' style={{ width: "100%" }}>
40-
<ul className="list-group" style={{ fontSize: "1.2rem" }}>
41-
{items.map((item, index) => (
42-
<li key={index} className="list-group-item d-flex justify-content-between align-items-center py-3">
43-
{item}
44-
<div>
45-
<button className="btn btn-danger btn-lg mx-1" onClick={() => removeItem(index)}>Remove</button>
46-
</div>
47-
</li>
48-
))}
49-
</ul>
50-
</div>
84+
{showLinkDevice === false && (
85+
<LinkDevice onClose={() => setShowLinkDevice(true)} />
86+
)}
87+
88+
{showModal && (
89+
<div className="modal show d-block" tabIndex={-1} role="dialog">
90+
<div className="modal-dialog" role="document">
91+
<div className="modal-content">
92+
<div className="modal-header">
93+
<h5 className="modal-title">Confirm Removal</h5>
94+
</div>
95+
<div className="modal-body">
96+
<p>Are you sure you want to remove this pet?</p>
97+
</div>
98+
<div className="modal-footer">
99+
<button type="button" className="btn btn-secondary" onClick={cancelRemoveItem}>No</button>
100+
<button type="button" className="btn btn-danger" onClick={confirmRemoveItem}>Yes</button>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
)}
51106
</div>
52-
</div>
53-
{showLinkDevice==false && (
54-
<LinkDevice onClose={() => setShowLinkDevice(true)} />
55-
)}
56-
</div>
57-
);
107+
);
58108
}
59109

60110
export default Settings;

0 commit comments

Comments
 (0)