keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed to circle rendering for student status

Browse source
This commit is contained in:
Keannu Bernasol 2023-09-08 21:41:46 +08:00
parent 058b120ce9
commit 85e2a13071
1 changed files with 115 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

183
src/routes/Home/Home.tsx
View file

@ -176,6 +176,7 @@ export default function Home() {
}, },
}); });
// Can probably just get the max distance from the array and use it as radius
const [student_statuses, setStudentStatuses] = useState<any>([]); const [student_statuses, setStudentStatuses] = useState<any>([]);
// Student Status List // Student Status List
const StudentStatusList = useQuery({ const StudentStatusList = useQuery({
@ -190,6 +191,7 @@ export default function Home() {
}, },
onSuccess: (data: StudentStatusListReturnType) => { onSuccess: (data: StudentStatusListReturnType) => {
if (data[1]) { if (data[1]) {
// Circle generation for students in a study group
// We first flatten the data to remove nested entries // We first flatten the data to remove nested entries
let flattened_data = data[1].map((item) => ({ let flattened_data = data[1].map((item) => ({
active: item.active, active: item.active,
@ -200,30 +202,77 @@ export default function Home() {
study_group: "", study_group: "",
subject: item.subject, subject: item.subject,
user: item.user, user: item.user,
weight: 1,
})); }));
// Dummy data
flattened_data.push({ flattened_data.push({
active: true, active: true,
distance: 50, distance: 50,
landmark: "", landmark: "",
latitude: 9.498298904115586, latitude: 8.498837,
longitude: 125.59552381187677, longitude: 124.595422,
study_group: "", study_group: "",
subject: "Introduction to Computing", subject: "Introduction to Computing",
user: "Keannu", user: "Dummy",
weight: 1,
}); });
// We get each unique subject // We get each unique subject
let unique_subjects = [ let unique_subjects = [
...new Set(flattened_data.map((item) => item.subject)), ...new Set(flattened_data.map((item) => item.subject)),
]; ];
console.log("Unique Subjects:", unique_subjects);
let result: any[] = []; let result: any[] = [];
// Then append all entries belonging to that subject to its own array // Then append all entries belonging to that subject to its own array
unique_subjects.forEach((subject) => { unique_subjects.forEach((subject, index: number) => {
index++;
let filteredData = flattened_data.filter( let filteredData = flattened_data.filter(
(item) => item.subject === subject && item.study_group === "" (item) => item.subject === subject && item.study_group === ""
); );
// We then concatenate this into the final array /*console.log(
result = result.concat([filteredData]); "Subject #",
index,
"-",
filteredData[0].subject,
filteredData
);*/
// We get the circle radius based on the furthest point
let circle_radius = Math.max(
...filteredData.map((item) => item.distance)
);
console.log(
"Radius of circle:",
Math.max(...filteredData.map((item) => item.distance))
);
// We get the circle's center by averaging all the points
// Calculate the average latitude and longitude
const totalLat = filteredData.reduce(
(sum, point) => sum + point.latitude,
0
);
const totalLng = filteredData.reduce(
(sum, point) => sum + point.longitude,
0
);
const avgLat = totalLat / filteredData.length;
const avgLng = totalLng / filteredData.length;
console.log("Center Latitude:", avgLat);
console.log("Center Longitude:", avgLng);
// We now build the object
const subjectUserMap: any = {};
filteredData.forEach((item) => {
if (!subjectUserMap["users"]) {
subjectUserMap["users"] = [];
}
subjectUserMap["subject"] = item.subject;
subjectUserMap["latitude"] = avgLat;
subjectUserMap["longitude"] = avgLng;
subjectUserMap["radius"] = circle_radius;
subjectUserMap["users"].push(item.user);
});
console.log(subjectUserMap);
result = result.concat([subjectUserMap]);
}); });
console.log("Final Result:", result); console.log("Final Result:", result);
@ -258,7 +307,6 @@ export default function Home() {
], ],
}, },
]} ]}
mapType="none"
scrollEnabled={true} scrollEnabled={true}
zoomEnabled={true} zoomEnabled={true}
toolbarEnabled={false} toolbarEnabled={false}
@ -275,73 +323,72 @@ export default function Home() {
loadingBackgroundColor={colors.secondary_2} loadingBackgroundColor={colors.secondary_2}
> >
{student_statuses.map((student_status: any, index: number) => { {student_statuses.map((student_status: any, index: number) => {
console.log("TEST INDEX", index, student_status); const randomColorWithOpacity = `rgba(${Math.floor(
Math.random() * 256
)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(
Math.random() * 256
)}, 0.7)`;
return ( return (
<Polygon <>
key={index} <Marker
coordinates={student_status} coordinate={student_status}
fillColor="red" pinColor={randomColorWithOpacity}
strokeColor="50" zIndex={1000}
zIndex={100} onPress={() => {
tappable toast.hideAll();
onPress={() => { toast.show(
const users = student_statuses.map((item: any) => ({ <View
user: item.user, style={{
})); alignContent: "center",
toast.hideAll(); alignSelf: "center",
toast.show( justifyContent: "center",
<View
style={{
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
}}
>
<Text style={styles.text_white_tiny_bold}>
Subject: {student_status[0].subject}
</Text>
<Text style={styles.text_white_tiny_bold}>
Students Studying: {student_status.length}
</Text>
<Button
onPress={() => {
toast.show("Toledo para ma konsehal", {
type: "warning",
placement: "top",
duration: 2000,
animationType: "slide-in",
});
}} }}
> >
<Text style={styles.text_white_tiny_bold}> <Text style={styles.text_white_tiny_bold}>
Create Group & Invite Subject: {student_status.subject}
</Text> </Text>
</Button> <Text style={styles.text_white_tiny_bold}>
</View>, Students Studying: {student_status.users.length}
{ </Text>
type: "normal", <Button
placement: "top", onPress={() => {
duration: 2000, toast.show("Joined successfully", {
animationType: "slide-in", type: "success",
style: { placement: "top",
backgroundColor: colors.secondary_2, duration: 2000,
borderWidth: 1, animationType: "slide-in",
borderColor: colors.primary_1, });
}, }}
} >
); <Text style={styles.text_white_tiny_bold}>
}} Create Group & Invite
/> </Text>
</Button>
</View>,
{
type: "normal",
placement: "top",
duration: 2000,
animationType: "slide-in",
style: {
backgroundColor: colors.secondary_2,
borderWidth: 1,
borderColor: colors.primary_1,
},
}
);
}}
/>
<Circle
key={index}
center={student_status}
radius={student_status.radius}
fillColor={randomColorWithOpacity}
/>
</>
); );
})} })}
<UrlTile
urlTemplate={urlProvider}
shouldReplaceMapContent={true}
maximumZ={19}
flipY={false}
zIndex={1}
/>
<Marker <Marker
coordinate={{ coordinate={{
latitude: location.coords.latitude, latitude: location.coords.latitude,