diff --git a/family-tracker/src/App.js b/family-tracker/src/App.js
index b24787a..36269cc 100644
--- a/family-tracker/src/App.js
+++ b/family-tracker/src/App.js
@@ -41,16 +41,30 @@ setInterval(()=>{
if (loc.safe) {
ctx.fillStyle="#6a6"
} else {
- ctx.fillStyle="#a66"
+ ctx.fillStyle="#d66"
}
ctx.arc((loc.x-mapX)/mapXScale,(loc.y-mapY)/mapYScale,10,0,2*Math.PI)
ctx.fill();
}
for (var m of members) {
ctx.beginPath();
- ctx.fillStyle="#22f"
+ switch (m.relationship) {
+ case "Father":{
+ ctx.fillStyle="#22f"
+ }break;
+ case "Mother":{
+ ctx.fillStyle="#f26"
+ }break;
+ case "Brother":{
+ ctx.fillStyle="#4df"
+ }break;
+ case "Sister":{
+ ctx.fillStyle="#f4f"
+ }break;
+ }
ctx.arc((m.x-mapX)/mapXScale,(m.y-mapY)/mapYScale,5,0,2*Math.PI);
ctx.fill();
+ ctx.stroke();
}
ctx.font = "22px Verdana";
for (var loc of locations) {
@@ -193,6 +207,7 @@ function Message(p) {
);
}
+
function Member(p) {
const [familyId,setFamilyId] = useState(0)
@@ -202,6 +217,11 @@ function Member(p) {
const [mobileDevice,setMobileDevice] = useState("")
const [disabled,setDisabled] = useState(false)
+ const options = [{display:"Father",value:"Father"},
+ {display:"Mother",value:"Mother"},
+ {display:"Son",value:"Brother"},
+ {display:"Daughter",value:"Sister"},]
+
useEffect(()=>{
p.setActive("/members")
})
@@ -227,7 +247,9 @@ function Member(p) {
-
{setFirstName(e.target.value);}} value={firstName} id="firstName" style={{width:"30%"}}/>
{setLastName(e.target.value);}} value={lastName} id="lastName" style={{width:"30%"}}/>
{setMobileDevice(e.target.value);}} value={mobileDevice} id="mobileDevice" style={{width:"30%"}}/>
{setRelationship(e.target.value);}} value={relationship} id="relationship" style={{width:"30%"}}/>