Refactor code structure for improved readability and maintainability

diagrams/frontend/frontend1.puml

@@ -0,0 +1,42 @@
+@startuml
+
+class Project {
+  id: number
+  name: string
+  description: string
+  status: number
+  start_date: date
+}
+
+class Measurement {
+  id: number
+  project_id: number
+  order_id: number
+  timestamp: string
+  temperature: number
+  humidity: number
+}
+
+class Video {
+  id: number
+  project_id: number
+  name: string
+  measurement_ids: string
+  resolution: string
+  duration: number
+  status: number
+}
+
+class CameraController {
+  active_project_id: number
+  start_timelapse(id, frequency, nbimages): void
+  stopCamera(id): void
+  manualUpload(imageFile, projectId, timestamp, temperature, humidity): void
+}
+
+Project "1" *-- "n" Measurement : contient
+Project "1" *-- "n" Video : contient 
+Measurement "n" o-- "n" Video : utilisées dans
+CameraController -- Video : génère
+
+@enduml

diagrams/frontend/frontend2.puml

@@ -0,0 +1,19 @@
+@startuml
+
+start
+:Créer un projet;
+:Configurer la caméra;
+:Prises d'images automatiques;
+
+fork
+  :Upload manuel d'images;
+fork again
+  :Arrêt de la caméra;
+end fork
+
+:Sélection des images;
+:Générer une vidéo;
+:Visualiser les données;
+stop
+
+@enduml

diagrams/frontend/frontend3.puml

@@ -0,0 +1,20 @@
+@startuml
+
+actor Browser
+participant Frontend
+participant API
+participant Camera
+
+Browser -> Frontend : 1. Create project
+Frontend -> API : 2. POST /projects
+Browser -> Frontend : 3. Configure camera
+Frontend -> API : 4. POST /procedure/start
+API -> Camera : 4. Start capturing
+Camera --> API : 5. Capture images
+Browser -> Frontend : 6. Create video request
+Frontend -> API : 7. POST /videos
+Browser -> Frontend : 8. Render video
+Frontend -> API : 9. POST /videos/render/{id}
+Frontend --> Browser : 10. Display video & metrics
+
+@enduml

diagrams/frontend/frontend4.puml

@@ -0,0 +1,28 @@
+@startuml
+
+left to right direction
+actor "Utilisateur" as user
+
+rectangle "Système Timelapse" {
+  usecase "Gérer les projets" as UC1
+  usecase "Configurer la caméra" as UC2
+  usecase "Créer des vidéos" as UC3
+  usecase "Visualiser les données" as UC4
+  usecase "Uploader manuellement" as UC5
+  usecase "Afficher métriques" as UC6
+
+  UC1 --> UC2
+  UC2 --> UC3
+  UC1 --> UC4
+  UC2 --> UC5
+  UC3 --> UC6
+}
+
+user --> UC1
+user --> UC2
+user --> UC3
+user --> UC4
+user --> UC5
+user --> UC6
+
+@enduml

diagrams/frontend/frontend5.puml

@@ -0,0 +1,29 @@
+@startuml
+
+node "Client Browser" {
+  [HTML/CSS/JS]
+  [JQuery]
+  [Chart.js]
+}
+
+node "Backend API" {
+  [RESTful Services]
+  [Image Processing]
+  [Video Generation]
+}
+
+database "Filesystem Storage" {
+  [Images]
+  [Videos]
+}
+
+node "Camera Controller" {
+  [Capture Configuration]
+  [Sensors (temp/humid)]
+}
+
+[HTML/CSS/JS] -- [RESTful Services] : HTTP
+[RESTful Services] -- [Filesystem Storage]
+[RESTful Services] -- [Camera Controller]
+
+@enduml