Add VLSM course and sandbox with loading indicators and error handling

api/src/routes/ipv4.py

@@ -102,4 +102,4 @@ async def get_mask(ipv4: str) -> dict:
 async def get_vlsm(baseip: str, subnet: str) -> dict:
     """Implement the VLSM (Variable Length Subnet Mask) technique."""
     res = vlsm(baseip, subnet)
-    return {"ipv4": res}
+    return {"subnet": res}

front-js/src/app/modules/vlsm/Cours.tsx

@@ -0,0 +1,124 @@
+import Title from "@/components/Title";
+import Text from "@/components/Text";
+import React from "react";
+import Space from "@/components/Space";
+import { Emoji, EmojiProvider } from "react-apple-emojis";
+import emojiData from "react-apple-emojis/src/data.json";
+import { Alert, CircularProgress } from "@mui/material";
+import axios from "@/axiosConfig";
+import Cookies from "js-cookie";
+import { Code, solarizedLight } from "react-code-blocks";
+import Box from "@/components/Box";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import { AxiosError } from "axios";
+
+const Cours: React.FC = () => {
+  const [addrRestante, setAddrRestante] = React.useState("");
+  const [res, setRes] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleAddrRestante = async (e: { preventDefault: () => void }) => {
+    setIsLoading(true);
+    setRes("");
+    e.preventDefault();
+    try {
+      const response = await axios.get("/ipv4/vlsm/192.168.1.0/15,30,50", {
+        headers: {
+          Authorization: `Bearer ${Cookies.get("access_token")}`,
+        },
+      });
+      const data = response.data;
+      if (response.status === 200) {
+        let lastRange = data.subnet[data.subnet.length - 1].range;
+        lastRange = lastRange.split(" - ")[1];
+        const listLastRange = lastRange.split(".");
+        const newLastDigit =
+          parseInt(listLastRange[listLastRange.length - 1]) + 1;
+        listLastRange.pop();
+        listLastRange.push(newLastDigit.toString());
+        const ok = listLastRange.join(".") + " - 192.168.1.254";
+        if (addrRestante == ok) {
+          setRes("Bravo !");
+        } else {
+          setRes("Mauvaise réponse !");
+        }
+      }
+    } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 400) {
+        setRes("Erreur interne");
+      } else {
+        setRes("Erreur interne");
+      }
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <EmojiProvider data={emojiData}>
+        <Space space="1rem">
+          <Title level={2}>Introduction</Title>
+          <Text>
+            VLSM (Variable Length Subnet Masking) est une technique de
+            sous-réseautage qui permet de créer des sous-réseaux de différentes
+            tailles. Cette technique est utilisée pour optimiser
+            l&rsquo;utilisation des adresses IP.
+          </Text>
+          <Title level={2} margin={{ top: "2rem" }}>
+            Fonctionnement VLSM
+          </Title>
+          <Text>
+            VLSM permet de diviser un réseau en sous-réseaux de différentes
+            tailles. Chaque sous-réseau peut accueillir un nombre minimisé de
+            machine. Cela permet d&rsquo;optimiser l&rsquo;utilisation des
+            adresses IP.
+          </Text>
+          <Text>
+            Attention il ne faut pas oublier de réserver une adresse pour le
+            réseau et une pour le broadcast.
+          </Text>
+          <Title level={2} margin={{ top: "2rem" }}>
+            Essayez ! <Emoji name="test-tube" width={32} />
+          </Title>
+          <Text>
+            Notre réseau{" "}
+            <Code text="192.168.1.0" language="text" theme={solarizedLight} />{" "}
+            contient des sous-réseaux avec 15 machines, 30 machines et 50
+            machines. Qu&rsquo;elle est la plage d&rsquo;adresses IP restante ?
+          </Text>
+          <form onSubmit={handleAddrRestante}>
+            <Input
+              onChange={(e) => setAddrRestante(e.target.value)}
+              value={addrRestante}
+              type="text"
+              placeholder="192.168.1.xxx - 192.168.1.xxx"
+              margin={{ bottom: "20px" }}
+              required
+              label="Plage restante"
+            />
+            <Button text="Répondre" primary form="submit" type="input" />
+          </form>
+          <Box margin={{ top: "20px", bottom: "20px" }}>
+            {res ? (
+              <Alert
+                severity={res === "Bravo !" ? "success" : "error"}
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                {res}
+              </Alert>
+            ) : isLoading ? (
+              <Box align="center">
+                <CircularProgress />
+              </Box>
+            ) : null}
+          </Box>
+        </Space>
+      </EmojiProvider>
+    </>
+  );
+};
+
+export default Cours;

front-js/src/app/modules/vlsm/VlsmSandbox.tsx

@@ -0,0 +1,176 @@
+import Title from "@/components/Title";
+import Button from "@/components/Button";
+import Input from "@/components/Input";
+import Space from "@/components/Space";
+import React from "react";
+import { useState } from "react";
+import axios from "@/axiosConfig";
+import Cookies from "js-cookie";
+import {
+  Alert,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import Box from "@/components/Box";
+import { AxiosError } from "axios";
+
+interface Subnet {
+  network: string;
+  mask: string;
+  broadcast: string;
+  range: string;
+}
+
+const VlsmSandbox: React.FC = () => {
+  const [baseIp, setBaseIp] = useState("");
+  const [nombreAddr, setNombreAddr] = useState("");
+  const [subnets, setSubnets] = useState<
+    Array<{ network: string; mask: string; broadcast: string; range: string }>
+  >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubnets = async (e: { preventDefault: () => void }) => {
+    setIsLoading(true);
+    setError("");
+    setSubnets([]);
+    e.preventDefault();
+    try {
+      const response = await axios.get(
+        "/ipv4/vlsm/" + baseIp + "/" + nombreAddr,
+        {
+          headers: {
+            Authorization: `Bearer ${Cookies.get("access_token")}`,
+          },
+        }
+      );
+      const data = response.data;
+      if (response.status === 200) {
+        const formattedSubnets = data.subnet.map((subnet: Subnet) => ({
+          network: subnet.network,
+          mask: subnet.mask,
+          broadcast: subnet.broadcast,
+          range: subnet.range,
+        }));
+        setSubnets(formattedSubnets);
+      }
+    } catch (error: unknown) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 400) {
+        setError("Erreur interne");
+      } else {
+        setError("Erreur interne inconnue");
+      }
+    }
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Space space="50px" direction="vertical" margin={{ bottom: "100px" }}>
+        <form onSubmit={handleSubnets}>
+          <Title level={2}>Création d&rsquo;un sous réseau</Title>
+
+          <Input
+            type="text"
+            placeholder="192.168.1.0"
+            value={baseIp}
+            margin={{ bottom: "20px" }}
+            onChange={(e) => setBaseIp(e.target.value)}
+            required
+            label="Adresse IP de base"
+          />
+          <Input
+            type="text"
+            placeholder="2,50,100"
+            value={nombreAddr}
+            margin={{ bottom: "20px" }}
+            onChange={(e) => setNombreAddr(e.target.value)}
+            required
+            label="Nombre d&rsquo;adresses à attribuer (séparées par des virgules)"
+          />
+          <Button
+            text="Trouver les sous-réseaux"
+            primary
+            form="submit"
+            type="input"
+            margin={{ top: "20px" }}
+            disabled={!baseIp || !nombreAddr}
+            onClick={(e) => {
+              handleSubnets(e);
+            }}
+          />
+          {subnets.length > 0 ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="success"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                Sous-réseaux créés avec succès !
+              </Alert>
+              <TableContainer
+                component={Paper}
+                sx={{ marginTop: "20px", backgroundColor: "#f6f6f666" }}
+              >
+                <Table style={{ borderCollapse: "collapse", width: "100%" }}>
+                  <TableHead>
+                    <TableRow style={{ borderBottom: "1px solid black" }}>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Network
+                      </TableCell>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Mask
+                      </TableCell>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Broadcast
+                      </TableCell>
+                      <TableCell style={{ paddingRight: "1.5em" }}>
+                        Range
+                      </TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {subnets.map((subnet, index) => (
+                      <TableRow
+                        key={index}
+                        style={{ borderBottom: "1px solid black" }}
+                      >
+                        <TableCell>{subnet.network}</TableCell>
+                        <TableCell>{subnet.mask}</TableCell>
+                        <TableCell>{subnet.broadcast}</TableCell>
+                        <TableCell>{subnet.range}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </Box>
+          ) : isLoading ? (
+            <Box align="center" margin={{ top: "20px", bottom: "20px" }}>
+              <CircularProgress />
+            </Box>
+          ) : error ? (
+            <Box margin={{ top: "20px", bottom: "20px" }}>
+              <Alert
+                severity="error"
+                variant="outlined"
+                style={{ borderRadius: "10px" }}
+              >
+                {error}
+              </Alert>
+            </Box>
+          ) : null}
+        </form>
+      </Space>
+    </>
+  );
+};
+
+export default VlsmSandbox;