Merge pull request #35 from SourceCodeOER/replace-figures

dewita · web-flow · commit b49cf0aff30b · 2020-05-24T11:54:35.000+02:00
Replace figures by forest
diff --git a/commonPreamble.sty b/commonPreamble.sty
@@ -135,6 +135,23 @@
 % Pour les couleurs
 \usepackage[dvipsnames]{xcolor}
 
+% Pour générer les arbres 
+\usepackage[edges]{forest}
+
+% pour les petites icones des dossiers
+\definecolor{folderbg}{RGB}{124,166,198}
+\definecolor{folderborder}{RGB}{110,144,169}
+
+\def\Size{4pt}
+\tikzset{
+      folder/.pic={
+        \filldraw[draw=folderborder,top color=folderbg!50,bottom color=folderbg]
+          (-1.05*\Size,0.2\Size+5pt) rectangle ++(.75*\Size,-0.2\Size-5pt);  
+        \filldraw[draw=folderborder,top color=folderbg!50,bottom color=folderbg]
+          (-1.15*\Size,-\Size) rectangle (1.15*\Size,\Size);
+      }
+    }
+
 % Pour les maudits accents dans listings, vaut mieux prévenir que guérir
 % Aussi gérer les lignes trop longues 
 \lstset{%
diff --git a/sections/chapters/solution/api/index.tex b/sections/chapters/solution/api/index.tex
@@ -11,20 +11,74 @@ \subsection{Structure du projet}
 
 % Généré avec tree sur Windows et https://carbon.now.sh/
 \begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.25\textheight,keepaspectratio]{images/serveur/tree_folders.png}
     \centering
+    \begin{forest}
+        for tree={
+          font=\ttfamily,
+          grow'=0,
+          child anchor=west,
+          parent anchor=south,
+          anchor=west,
+          calign=first,
+          inner xsep=7pt,
+          edge path={
+            \noexpand\path [draw, \forestoption{edge}]
+            (!u.south west) +(7.5pt,0) |- (.child anchor) pic {folder} \forestoption{edge label};
+          },
+          % style for your file node 
+          file/.style={edge path={\noexpand\path [draw, \forestoption{edge}]
+            (!u.south west) +(7.5pt,0) |- (.child anchor) \forestoption{edge label};},
+            inner xsep=2pt,font=\small\ttfamily
+                       },
+          before typesetting nodes={
+            if n=1
+              {insert before={[,phantom]}}
+              {}
+          },
+          fit=band,
+          before computing xy={l=15pt},
+        }  
+      [sourcecode\textunderscore api
+        [.github
+        ]
+        [bin
+        ]
+        [config
+        ]
+        [controllers
+        ]
+        [docs
+        ]
+        [files
+        ]
+        [middlewares
+        ]
+        [migrations
+        ]
+        [models
+        ]
+        [openapi
+        ]
+        [tests
+        ]
+        [app.js,file
+        ]
+        [app.yml,file
+        ]
+      ]
+   \end{forest}
     \caption[SourceCode : Arborescence de l'API]{Arborescence de l'\Gls{api}}
     \label{fig:arborenceAPI}
 \end{figure}
 
 Cette structure ne vous est peut-être pas inconnue, car il s'agit de la structure officielle de Sequelize\footnote{
     \url{https://github.com/sequelize/cli} - commande "sequelize init"
-}, sur laquelle nous avons ajouté quelques dossiers :
+}, sur laquelle nous avons ajouté quelques dossiers et fichiers :
 
 % A voir s'il faut minimiser l'itemize
 % nosep,noitemsep,topsep=0pt,partopsep=0pt,after=\vspace*{2pt}
-\begin{itemize}
-    \item openapi : nos fichiers \Gls{oas}, utilisés par OpenAPI-Enforcer (cf. figure \ref{fig:OASEnforcer})
+\begin{itemize}[nosep,noitemsep,topsep=0pt,partopsep=0pt,after=\vspace*{2pt}]
+    \item openapi : nos fichiers \Gls{oas}, utilisés par OpenAPI-Enforcer (cf. figure \ref{fig:OASEnforcer}) (le point d'entrée principal étant app.yml)
     \item controllers : nos fichiers chargés de répondre aux requêtes \textbf{HTTP}, utilisés par OpenAPI-Enforcer (cf. figure \ref{fig:OASEnforcer})
     \item tests : nos tests pour valider l'implémentation (cf. section \ref{section:validation})
     \item docs : la documentation de l'\Gls{api} en \textbf{HTML}\footnote{
@@ -36,6 +90,7 @@ \subsection{Structure du projet}
     \item upload / files : resp. lieu de stockage des fichiers importés / stockés 
     \item .github : nos scripts d'automatisation de type Github Actions (cf. section \ref{section:GithubActions}) 
     \item bin : du code n'entrant dans aucun autre dossier
+    \item app.js : le point d'entrée principal de l'\Gls{api}, construite sur Express (cf. section \ref{section:choixTechnologiques})
 \end{itemize}
 
 \pagebreak
diff --git a/sections/chapters/solution/client/index.tex b/sections/chapters/solution/client/index.tex
@@ -8,8 +8,20 @@ \section{Client}
 Afin de vous donner une idée plus claire de ce qui va être abordé, voici une représentation du groupe d'URL de premier niveau que contient \texttt{SourceCode}.\\
 
 \begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.15\textheight,keepaspectratio]{images/client/overview_client.jpeg}
     \centering
+    \begin{forest}
+        highlight/.style={fill=cyan,fill opacity=0.4,rounded corners},
+        forked edges,
+        for tree={folder,grow'=0,font=\ttfamily, inner sep = 1pt, outer sep = 0pt}
+        [/
+         [login,highlight]
+         [register,highlight]
+         [exercices/]
+         [gestion/]
+         [administration/]
+         [tutoriel]
+        ]
+    \end{forest}
     \caption[SourceCode : Représentation des URL de premier niveau]{URL de premier niveau}
 \end{figure}
 
@@ -62,8 +74,16 @@ \subsection{Exercices}
 La bibliothèque constitue l'élément central de \texttt{SourceCode} pour le partage de ressources. C'est dans cet espace que les \glspl{resinfo} validées par la communauté apparaitront.\\
 
 \begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.08\textheight,keepaspectratio]{images/client/exercices.jpeg}
     \centering
+    \begin{forest}
+        highlight/.style={fill=cyan,fill opacity=0.4,rounded corners},
+        forked edges,
+        for tree={folder,grow'=0,font=\ttfamily}
+        [exercices/
+         [/,highlight]
+         [\textunderscore id/,highlight]
+        ]
+    \end{forest}
     \caption[SourceCode : partie bibliothèque]{Partie bibliothèque (URL)}
 \end{figure}
 
@@ -192,8 +212,25 @@ \subsection{Gestion}
 Ce module est accessible aux utilisateurs (possédant un compte) et aux administrateurs.
 
 \begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.2\textheight,keepaspectratio]{images/client/gestion.jpeg}
     \centering
+    \begin{forest}
+        highlight/.style={fill=cyan,fill opacity=0.4,rounded corners},
+        forked edges,
+        for tree={folder,grow'=0,font=\ttfamily, inner sep = 1pt, outer sep = 0pt}
+        [gestion/
+         [mes-exercices,
+          [/,highlight]
+          [creer-exercice,highlight]
+          [\textunderscore id/,highlight]
+         ]
+         [mes-favoris/,
+          [/,highlight]
+          [creer-favori,highlight]
+          [\textunderscore id/,highlight]          
+         ]
+         [profil,highlight]
+        ]
+    \end{forest}
     \caption[SourceCode : module de gestion (URL)]{Module de gestion (URL)}
 \end{figure}
 
@@ -364,7 +401,7 @@ \subsection{Administration}
 
 Le module d'administration comprend :
 
-\begin{itemize}
+\begin{itemize}[nosep,noitemsep,topsep=0pt,partopsep=0pt,after=\vspace*{2pt}]
     \item La gestion des \glspl{resinfo} (\textit{exercices/})
     \item L'importation de \glspl{resinfo} (\textit{importer-des-exercices})
     \item La gestion des \glspl{tag} (\textit{tags/})
@@ -375,8 +412,30 @@ \subsection{Administration}
 Ce module est uniquement accessible aux (super-)administrateurs.
 
 \begin{figure}[H]
-    \includegraphics[width=\textwidth,height=0.25\textheight,keepaspectratio]{images/client/administration.jpeg}
     \centering
+    \begin{forest}
+        highlight/.style={fill=cyan,fill opacity=0.4,rounded corners},
+        for tree={grow'=0,font=\ttfamily,inner sep = 1pt, outer sep = 3pt}
+        [administration/
+         [exercices/
+          [/,highlight]
+          [creer-exercice/,highlight]
+          [\textunderscore id/,highlight]
+         ]
+         [tags/
+          [/,highlight]
+          [creer-tag,highlight]
+          [\textunderscore id/,highlight]
+         ]
+         [categories/
+          [/,highlight] 
+          [creer-categorie,highlight]
+          [\textunderscore id/,highlight]
+         ]
+         [utilisateurs,highlight]
+         [importer-des-exercices,highlight]
+        ]
+    \end{forest}
     \caption[SourceCode : partie administration (URL)]{Partie administration (URL)}
 \end{figure}
 
diff --git a/sections/remerciements.tex b/sections/remerciements.tex
@@ -1,5 +1,4 @@
 \chapter*{Remerciements}
-\addcontentsline{toc}{chapter}{Remerciements}
 
 Le présent travail est le fruit de la collaboration d'une multitude de personnes que nous souhaiterions chaleureusement remercier : \\
 
diff --git a/structure.tex b/structure.tex
@@ -7,6 +7,9 @@
 % ./ si folder courant
 %\import{folder}{fichier.tex}
 
+% Remerciements ( Un classique )
+\import{sections/}{remerciements}
+
 % Numérotation en chiffres romains ( I , II )
 \frontmatter
 
@@ -22,9 +25,6 @@
 %\glsaddall
 \printglossary
 
-% Remerciements ( Un classique )
-\import{sections/}{remerciements}
-
 % Le Préambule
 \import{sections/}{preambule}
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`\chapter*{Remerciements}`
`2`		`-\addcontentsline{toc}{chapter}{Remerciements}`
`3`	`2`
`4`	`3`	`Le présent travail est le fruit de la collaboration d'une multitude de personnes que nous souhaiterions chaleureusement remercier : \\`
`5`	`4`