diff --git a/geneit_app/src/App.tsx b/geneit_app/src/App.tsx
index 5f76289..2fdad99 100644
--- a/geneit_app/src/App.tsx
+++ b/geneit_app/src/App.tsx
@@ -34,6 +34,8 @@ import {
FamilyEditCoupleRoute,
} from "./routes/family/FamilyCoupleRoute";
import { FamilyCouplesListRoute } from "./routes/family/FamilyCouplesListRoute";
+import { FamilyTreeRoute } from "./routes/family/FamilyTreeRoute";
+import { FamilyMemberTreeRoute } from "./routes/family/FamilyMemberTreeRoute";
interface AuthContext {
signedIn: boolean;
@@ -87,6 +89,12 @@ export function App(): React.ReactElement {
element={}
/>
+ } />
+ }
+ />
+
} />
} />
} />
diff --git a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
new file mode 100644
index 0000000..eab8ab0
--- /dev/null
+++ b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
@@ -0,0 +1,108 @@
+import { useParams } from "react-router-dom";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+import {
+ Alert,
+ FormControl,
+ FormControlLabel,
+ FormLabel,
+ IconButton,
+ Paper,
+ Radio,
+ RadioGroup,
+ Tab,
+ Tabs,
+} from "@mui/material";
+import { MemberItem } from "../../widgets/MemberItem";
+import ClearIcon from "@mui/icons-material/Clear";
+import { RouterLink } from "../../widgets/RouterLink";
+import React from "react";
+
+enum CurrTab {
+ BasicTree,
+ AdvancedTree,
+}
+
+enum TreeMode {
+ Ascending,
+ Descending,
+}
+
+export function FamilyMemberTreeRoute(): React.ReactElement {
+ const { memberId } = useParams();
+
+ const family = useFamily();
+
+ const [currTab, setCurrTab] = React.useState(CurrTab.BasicTree);
+ const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
+
+ const member = family.members.get(Number(memberId));
+
+ if (!member) {
+ return (
+
+ L'arbre ne peut pas être constuit : le membre n'existe pas !
+
+ );
+ }
+
+ return (
+
+ {/* parent bar */}
+
+
+
+
+
+
+ }
+ />
+
+
+
+ Arbre
+ setCurrMode(Number(v))}
+ >
+ }
+ label="Descendant"
+ />
+ }
+ label="Ascendant"
+ />
+
+
+
+
+
+ setCurrTab(v)}
+ aria-label="basic tabs example"
+ >
+
+
+
+
+
+ {/* the tree itself */}
+
todo
+
+ );
+}
diff --git a/geneit_app/src/routes/family/FamilyTreeRoute.tsx b/geneit_app/src/routes/family/FamilyTreeRoute.tsx
new file mode 100644
index 0000000..26c5e7f
--- /dev/null
+++ b/geneit_app/src/routes/family/FamilyTreeRoute.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import { MemberInput } from "../../widgets/forms/MemberInput";
+import { useFamily } from "../../widgets/BaseFamilyRoute";
+
+export function FamilyTreeRoute(): React.ReactElement {
+ const n = useNavigate();
+
+ const family = useFamily();
+
+ const onMemberSelected = (id: number | undefined) => {
+ if (id) n(family.family.URL(`tree/${id}`));
+ };
+
+ return (
+
+
+
+ Veuillez sélectionner la personne à partir de laquelle vous souhaitez
+ constuire l'arbre généalogique de votre famille :
+
+
+
true}
+ />
+
+
+ );
+}
diff --git a/geneit_app/src/widgets/MemberItem.tsx b/geneit_app/src/widgets/MemberItem.tsx
index 4b4fdaa..0865076 100644
--- a/geneit_app/src/widgets/MemberItem.tsx
+++ b/geneit_app/src/widgets/MemberItem.tsx
@@ -12,12 +12,13 @@ import FemaleIcon from "@mui/icons-material/Female";
import MaleIcon from "@mui/icons-material/Male";
export function MemberItem(p: {
+ dense?: boolean;
member?: Member;
onClick?: () => void;
secondary?: React.ReactElement;
}): React.ReactElement {
return (
-
+