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%"}}/>