Histo dep save (test)

api/src/routers/files.py

@@ -180,3 +180,9 @@ def read_deployment_files(deployment_id: int, db: Session = Depends(get_db)):
         new_f["url"] = url
         res.append(new_f)
     return res
+
+@router.get("/{deployment_id}/length")
+def get_length_deployment_files(deployment_id: int, db: Session = Depends(get_db)):
+    List_files = files.get_deployment_files(db=db, id=deployment_id)
+    return len(List_files)
+

frontend/public/env-config.js

@@ -0,0 +1,6 @@
+window._env_ = {
+  REACT_APP_API_PATH: "http://localhost:8889/api/v1",
+  REACT_APP_KEYCLOAK_CLIENT_URL: "http://localhost:8889/auth",
+  REACT_APP_KEYCLOAK_CLIENT_REALM: "geonature-annotation",
+  REACT_APP_KEYCLOAK_CLIENT_CLIENT_ID: "frontend",
+}

frontend/src/client/index.ts

@@ -13,6 +13,7 @@ export type { Body_upload_files_files_upload_files__deployment_id__post } from '
 export type { Body_upload_zip_files_upload_zip__deployment_id__post } from './models/Body_upload_zip_files_upload_zip__deployment_id__post';
 export type { DataProject } from './models/DataProject';
 export type { DeploymentForProjectSheet } from './models/DeploymentForProjectSheet';
+export type { DeploymentForDeviceSheet } from './models/DeploymentForDeviceSheet';
 export type { Deployments } from './models/Deployments';
 export type { DeploymentWithFile } from './models/DeploymentWithFile';
 export type { DeploymentWithTemplateSequence } from './models/DeploymentWithTemplateSequence';

frontend/src/client/models/DeploymentForDeviceSheet.ts

@@ -0,0 +1,16 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type DeploymentForDeviceSheet = {
+    name: string;
+    start_date: string;
+    end_date?: string;
+    site_id: number;
+    device_id: number;
+    id: number;
+    site_name?: string;
+    project_name?: string;
+    nb_images?: number;
+};
+

frontend/src/client/models/DeploymentForProjectSheet.ts

@@ -2,6 +2,8 @@
 /* tslint:disable */
 /* eslint-disable */
 
+import internal from "stream";
+
 export type DeploymentForProjectSheet = {
     name: string;
     start_date: string;

frontend/src/client/services/FilesService.ts

@@ -220,4 +220,19 @@ export class FilesService {
         });
     }
 
+    public static readLengthDeploymentsFilesById(
+        deploymentId: number,
+    ): CancelablePromise<any> {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/files/{deployment_id}/length',
+            path: {
+                'deployment_id': deploymentId,
+            },
+            errors: {
+                404: `Not found`,
+                422: `Validation Error`
+            }
+        })
+    }
 }

frontend/src/components/deploymentDetails.tsx

@@ -14,6 +14,22 @@ const DeploymentDetails = (props) => {
     const handleTabValueChange = (event: React.SyntheticEvent, newValue: number) => {
         setTabValue(newValue);
     };
+    console.log(deploymentData)
+    const [openNewDeployment, setOpenNewDeployment] = useState(false);
+    const handleOpenNewDeployment = () => {
+        setOpenNewDeployment(true);
+    };
+    const handleCloseNewDeployment = () => {
+        setOpenNewDeployment(false);
+    };
+
+    const [openImport, setOpenImport] = useState(false);
+    const openImportModale = () => {
+        setOpenImport(true);
+    };
+    const closeImportModale = () => {
+        setOpenImport(false);
+    };
 
     return(
         <Box sx={{ width: "100%" }}>

frontend/src/components/deviceSheet/deviceSheetMain.tsx

@@ -1,72 +1,158 @@
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
-import { Alert, Stack, Typography, capitalize} from "@mui/material";
-import { useEffect } from "react";
+import IconButton from '@mui/material/IconButton';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
+import { Alert, Stack, Typography, capitalize } from "@mui/material";
+import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import {Grid} from "@mui/material";
+import { Grid } from "@mui/material";
 import { useMainContext } from '../../contexts/mainContext';
 import DeviceForm from './deviceForm';
 import DeviceModal from '../deviceMenu/deviceModal';
 import DeviceData from './deviceData';
 import { useTranslation } from "react-i18next";
+import {
+    Table, TableBody, TableCell,
+    TableContainer, TableHead, TableRow
+} from '@mui/material';
+import { DeploymentForDeviceSheet, DeploymentsService } from '../../client';
+import { FilesService } from '../../client';
 
 const DeviceSheet = () => {
-    const {device, setCurrentDevice} = useMainContext();
+    const { device, setCurrentDevice, projects, sites,  } = useMainContext();
     const { t } = useTranslation();
+    const [historyDeployment, setHistoryDeployment] = useState<DeploymentForDeviceSheet[]>([]);
 
     let params = useParams();
     useEffect(() => {
         (async () => {
+
             setCurrentDevice(Number(params.deviceId));
+            if (params.deviceId !== undefined) {
+
+                DeploymentsService
+                    .readDeviceDeploymentsDeploymentsDeviceDeviceIdGet(parseInt(params.deviceId))
+                    .then(response => { // liste des déploiement pour un certains dispositif
+
+                        let finalRes:DeploymentForDeviceSheet[] = []
+
+                        projects.forEach(project => {
+
+                            project.deployments.forEach(deployment =>{
+
+                                response.forEach(async res => {
+
+
+                                    if(res.project_id === deployment.project_id) // on cherche le deploiement du dispositif dans la liste de tous les deploiements
+                                    {
+                                        const nb_medias = await FilesService.readLengthDeploymentsFilesById(res.id)
+                                        let proj_name = project.name
+                                        let siteName = sites.find(site => site.id === res.site_id).name
+
+
+                                            if(!finalRes.some(elem => elem.id === res.id))
+                                            {
+                                                const tempRes:DeploymentForDeviceSheet = {
+                                                    name: res.name,
+                                                    start_date: res.start_date,
+                                                    end_date: res.end_date,
+                                                    site_id: res.site_id,
+                                                    device_id: res.device_id,
+                                                    id: res.id,
+                                                    site_name: siteName,
+                                                    project_name: proj_name,
+                                                    nb_images: nb_medias
+                                                }  
+
+
+                                                finalRes.push(tempRes)
+
+                                                setHistoryDeployment([...historyDeployment].concat(finalRes))
+
+                                            }                                                 
+                                    }
+
+                                })
+                            })
+                        })
+                    });
+            }
         })();
-    }, []);
+    }, [projects]);
 
     return (
         device() !== undefined ? (
-        <Stack 
-            direction="column"
-            spacing={3}
-        >
-            <Box sx={{ flexGrow: 1 }}>
-                <AppBar position="static" color='transparent'>
-                    <Toolbar variant="dense">
-                    <Grid
-                        container
-                    >
-                        <Typography variant="h6" component="div" sx={{ mr: 1 }}>
-                            {device().name}
-                        </Typography>
-
-                    </Grid>
-                        <DeviceModal/>
-                    </Toolbar>
-                </AppBar>
-            </Box>
-
-            <Stack 
-                spacing={2}
-                justifyContent="center"
+            <Stack
+                direction="column"
+                spacing={3}
             >
-                <DeviceData/>
-                <Typography variant="h4" color="#000000" component="div">
-                {capitalize(t("devices.sheet"))}
-                </Typography>
-            </Stack>
+                <Box sx={{ flexGrow: 1 }}>
+                    <AppBar position="static" color='transparent'>
+                        <Toolbar variant="dense">
+                            <Grid
+                                container
+                            >
+                                <Typography variant="h6" component="div" sx={{ mr: 1 }}>
+                                    {device().name}
+                                </Typography>
 
-            < DeviceForm/>
-            <Stack 
-                spacing={2}
-                justifyContent="center"
-            >
-                <Typography variant="h4" color="#000000" component="div">
-                    { capitalize(t("devices.history")) }
-                </Typography>
-                <Alert severity="info">{capitalize(t("main.unavailable"))}</Alert>
-            </Stack>
-            <div></div>
-
-        </Stack> ) : <div>{capitalize(t("devices.warning"))}</div>
+                            </Grid>
+                            <DeviceModal />
+                            <IconButton color="inherit" aria-label="menu" sx={{ mr: 2, display: { color: "#2FA37C" } }}>
+                                <CloudDownloadIcon />
+                            </IconButton>
+                        </Toolbar>
+                    </AppBar>
+                </Box>
+
+                <Stack
+                    spacing={2}
+                    justifyContent="center"
+                >
+                    <DeviceData />
+                    <Typography variant="h4" color="#000000" component="div">
+                        {capitalize(t("devices.sheet"))}
+                    </Typography>
+                </Stack>
+
+                < DeviceForm />
+                <Stack
+                    spacing={2}
+                    justifyContent="center"
+                >
+                    <Typography variant="h4" color="#000000" component="div">
+                        {capitalize(t("devices.history"))}
+                    </Typography>
+                    <TableContainer>
+                        <Table>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell><b>Projet</b></TableCell>
+                                    <TableCell><b>Site</b></TableCell>
+                                    <TableCell><b>Déploiement</b></TableCell>
+                                    <TableCell><b>Nb de médias</b></TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {historyDeployment.map(item => {
+                                    // console.log(item); // Déplacez cette ligne en dehors du contexte du rendu JSX si nécessaire
+                                    return (
+                                        <TableRow key={item.id}>
+                                            <TableCell>{item.project_name}</TableCell>
+                                            <TableCell>{item.site_name}</TableCell>
+                                            <TableCell>{item.name}</TableCell>
+                                            <TableCell>{item.nb_images}</TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </Stack>
+                <div></div>
+
+            </Stack>) : <div>{capitalize(t("devices.warning"))}</div>
     );
 };
 export default DeviceSheet;

frontend/src/components/imageList.tsx

@@ -14,10 +14,10 @@ import ButtonsYesNo from "./common/buttonsYesNo";
 const ImageList: FC<{}> = () => {
   const { t } = useTranslation()
   const [files, setFiles] = useState<any[]>([]);
-  const { projects, updateListFile, setCurrentDeployment, currentDeployment, deploymentData } =
+  const { projects, updateListFile, setCurrentDeployment, deploymentData, } =
     useMainContext();
   let params = useParams();
-
+  
   useEffect(() => {
     (async () => {
       setCurrentDeployment(Number(params.deploymentId));
@@ -30,6 +30,7 @@ const ImageList: FC<{}> = () => {
       .uploadFileFilesUploadDeploymentIdPost(Number(params.deploymentId), { file })
       .then((res) => {
         updateListFile();
+
       });
     }
     clear();

frontend/src/contexts/mainContext.tsx

@@ -64,6 +64,7 @@ const MainContextProvider: FC<MainContextProps> = ({ children }) => {
   const updateProjects = () => {
     ProjectsService.readProjectsWithDeploymentsProjectsDeploymentsGet()
       .then((projects) => {
+
         setProjects(projects);
       })
       .catch((err) => {
@@ -96,6 +97,7 @@ const MainContextProvider: FC<MainContextProps> = ({ children }) => {
     currentDeployment &&
       FilesService.readDeploymentFilesFilesDeploymentIdGet(currentDeployment)
         .then((files) => {
+
           setFiles(files);
         })
         .catch((err) => {
@@ -190,6 +192,7 @@ const MainContextProvider: FC<MainContextProps> = ({ children }) => {
       updateSites();
       updateAutoTemplates();
       updateTriggerTemplates();
+
     })();
   }, []);
 
@@ -209,6 +212,7 @@ const MainContextProvider: FC<MainContextProps> = ({ children }) => {
     (async () => {
       updateListFile();
       updateDeploymentData();
+
     })();
   }, [currentDeployment]);
 
@@ -223,6 +227,7 @@ const MainContextProvider: FC<MainContextProps> = ({ children }) => {
       value={{
         projects,
         project,
+        currentDeployment,
         setCurrentProject,
         setCurrentDeployment,
         currentImage,