Fix image on build

src/views/Equipments/Equipments.jsx

@@ -5,6 +5,24 @@ import { useNavigate } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import fetchEquipments from 'src/controllers/EquipmentController'
 import fetchNotifications from 'src/controllers/NotificationController'
+import climIconBlue from 'src/assets/images/icons/clim-icon-blue.svg'
+import climIcon from 'src/assets/images/icons/clim-icon.svg'
+import planBatiment from 'src/assets/images/maps/plan-batiment.svg'
+import ventilationIconBlue from 'src/assets/images/icons/ventilation-icon-blue.svg'
+import ventilationIcon from 'src/assets/images/icons/ventilation-icon.svg'
+import A104 from 'src/assets/images/maps/A104.svg'
+import A105 from 'src/assets/images/maps/A105.svg'
+import A106 from 'src/assets/images/maps/A106.svg'
+import A107 from 'src/assets/images/maps/A107.svg'
+import A108 from 'src/assets/images/maps/A108.svg'
+import A109 from 'src/assets/images/maps/A109.svg'
+import A110 from 'src/assets/images/maps/A110.svg'
+import A111 from 'src/assets/images/maps/A111.svg'
+import A112 from 'src/assets/images/maps/A112.svg'
+import A113 from 'src/assets/images/maps/A113.svg'
+import alertIcon from 'src/assets/images/icons/alert-icon.svg'
+import CAFET from 'src/assets/images/maps/CAFET.svg'
+import TRAVAIL from 'src/assets/images/maps/TRAVAIL.svg'
 
 function Equipments() {
   const [equipmentsData, setEquipmentsData] = useState([])
@@ -61,20 +79,20 @@ function Equipments() {
 
         {
           item.ac_state > 0
-            ? <img src="./public/images/icons/clim-icon-blue.svg" />
-            : <img src="./public/images/icons/clim-icon.svg" />
+            ? <img src={climIconBlue} />
+            : <img src={climIcon} />
         }
 
         {
           item.vent_state > 0
-            ? <img src="./public/images/icons/ventilation-icon-blue.svg" />
-            : <img src="./public/images/icons/ventilation-icon.svg" />
+            ? <img src={ventilationIconBlue} />
+            : <img src={ventilationIcon} />
         }
       </div>
       {
         filteredNotificationData.length > 0 ? (
           <div className="table-cell-equipements-alert">
-            <img src="./public/images/icons/alert-icon.svg" />
+            <img src={alertIcon} />
           </div>
         )
           : null
@@ -96,19 +114,19 @@ function Equipments() {
       <div className="container-page-content-row equipement-content">
         <div className="container-box equipement-content-map">
           <div className="equipement-content-map-image">
-            <img id="mapAll" src="./public/images/maps/plan-batiment.svg" alt="Plan du bâtiment" />
-            <img id="mapA104" src="./public/images/maps/A104.svg" alt="Plan du bâtiment" />
-            <img id="mapA105" src="./public/images/maps/A105.svg" alt="Plan du bâtiment" />
-            <img id="mapA106" src="./public/images/maps/A106.svg" alt="Plan du bâtiment" />
-            <img id="mapA107" src="./public/images/maps/A107.svg" alt="Plan du bâtiment" />
-            <img id="mapA108" src="./public/images/maps/A108.svg" alt="Plan du bâtiment" />
-            <img id="mapA109" src="./public/images/maps/A109.svg" alt="Plan du bâtiment" />
-            <img id="mapA110" src="./public/images/maps/A110.svg" alt="Plan du bâtiment" />
-            <img id="mapA111" src="./public/images/maps/A111.svg" alt="Plan du bâtiment" />
-            <img id="mapA112" src="./public/images/maps/A112.svg" alt="Plan du bâtiment" />
-            <img id="mapA113" src="./public/images/maps/A113.svg" alt="Plan du bâtiment" />
-            <img id="mapCAFET" src="./public/images/maps/CAFET.svg" alt="Plan du bâtiment" />
-            <img id="mapTRAVAIL" src="./public/images/maps/TRAVAIL.svg" alt="Plan du bâtiment" />
+            <img id="mapAll" src={planBatiment} />
+            <img id="mapA104" src={A104} />
+            <img id="mapA105" src={A105} />
+            <img id="mapA106" src={A106} />
+            <img id="mapA107" src={A107} />
+            <img id="mapA108" src={A108} />
+            <img id="mapA109" src={A109} />
+            <img id="mapA110" src={A110} />
+            <img id="mapA111" src={A111} />
+            <img id="mapA112" src={A112} />
+            <img id="mapA113" src={A113} />
+            <img id="mapCAFET" src={CAFET} />
+            <img id="mapTRAVAIL" src={TRAVAIL} />
           </div>
         </div>
         <div className="container-box equipement-content-salles">

src/views/Home/Home.jsx

@@ -6,6 +6,10 @@ import { FireIcon, LightBulbIcon } from '@heroicons/react/outline'
 import { getUserData, rooms } from 'src/utils'
 import { fetchEquipments, fetchErrors, shutDownPlace } from 'src/controllers'
 import { Alert, TableGlobal, Toggle } from 'src/components/index'
+import climIconBlue from 'src/assets/images/icons/clim-icon-blue.svg'
+import climIcon from 'src/assets/images/icons/clim-icon.svg'
+import ventilationIconBlue from 'src/assets/images/icons/ventilation-icon-blue.svg'
+import ventilationIcon from 'src/assets/images/icons/ventilation-icon.svg'
 
 function Home() {
   const [roomData, setRoomData] = useState(rooms[0].hours)
@@ -30,11 +34,8 @@ function Home() {
       <div className="table-cell-equipements-icons">
         <Icon icon={LightBulbIcon} color={item.light_state ? 'yellow' : 'default'} />
         <Icon icon={FireIcon} color={item.heater_state ? 'orange' : 'default'} />
-        <img src={`./public/images/icons/clim-${item.ac_state > 0 ? 'icon-blue' : 'icon'}.svg`} />
-        <img src={`./public/images/icons/ventilation-${
-          item.vent_state > 0 ? 'icon-blue' : 'icon'
-        }.svg`}
-        />
+        <img src={item.ac_state > 0 ? climIconBlue : climIcon} />
+        <img src={item.vent_state > 0 ? ventilationIconBlue : ventilationIcon} />
       </div>
     </div>
   )

src/views/Room/Room.jsx

@@ -14,11 +14,41 @@ import { useEffect, useState } from 'react'
 import jwtDecode from 'jwt-decode'
 import fetchEquipments from 'src/controllers/EquipmentController'
 import fetchEquipmentsState from 'src/controllers/VariatorEquipment'
+import ventilationIconBlue from 'src/assets/images/icons/ventilation-icon-blue.svg'
+import ventilationIcon from 'src/assets/images/icons/ventilation-icon.svg'
+import climIconBlue from 'src/assets/images/icons/clim-icon-blue.svg'
+import climIcon from 'src/assets/images/icons/clim-icon.svg'
+import A104 from 'src/assets/images/maps/A104.svg'
+import A105 from 'src/assets/images/maps/A105.svg'
+import A106 from 'src/assets/images/maps/A106.svg'
+import A107 from 'src/assets/images/maps/A107.svg'
+import A108 from 'src/assets/images/maps/A108.svg'
+import A109 from 'src/assets/images/maps/A109.svg'
+import A110 from 'src/assets/images/maps/A110.svg'
+import A111 from 'src/assets/images/maps/A111.svg'
+import A112 from 'src/assets/images/maps/A112.svg'
+import A113 from 'src/assets/images/maps/A113.svg'
+import CAFET from 'src/assets/images/maps/CAFET.svg'
+import TRAVAIL from 'src/assets/images/maps/TRAVAIL.svg'
 
 function Room() {
   const [equipmentsData, setEquipmentsData] = useState([])
   const [notificationData] = useState([])
   const headers = ['Température', 'Taux CO2', 'Luminosité', 'Consommation', 'Nombre de personnes']
+  const imagesData = {
+    A104,
+    A105,
+    A106,
+    A107,
+    A108,
+    A109,
+    A110,
+    A111,
+    A112,
+    A113,
+    CAFET,
+    TRAVAIL,
+  }
 
   useEffect(() => {
     const fetchData = () => {
@@ -234,8 +264,8 @@ function Room() {
           <div className="room-controller-toggle-text">
             {
               roomData.ac_state > 0
-                ? <img className="icon-ac" src="../../public/images/icons/clim-icon-blue.svg" />
-                : <img className="icon-ac" src="../../public/images/icons/clim-icon.svg" />
+                ? <img className="icon-ac" src={climIconBlue} />
+                : <img className="icon-ac" src={climIcon} />
             }
             <p
               className="room-controller-bar-text-title size-18 font-bold"
@@ -281,8 +311,8 @@ function Room() {
           <div className="room-controller-toggle-text">
             {
               roomData.vent_state > 0
-                ? <img className="icon-ac" src="public/images/icons/ventilation-icon-blue.svg" />
-                : <img className="icon-ac" src="public/images/icons/ventilation-icon.svg" />
+                ? <img className="icon-ac" src={ventilationIconBlue} />
+                : <img className="icon-ac" src={ventilationIcon} />
             }
             <p
               className="room-controller-bar-text-title size-18 font-bold"
@@ -361,7 +391,7 @@ function Room() {
         </Table>
       </div>
       <div className="container-box room-map">
-        <img src={`../../public/images/maps/${roomData.place_name}.svg`} alt="Plan de la salle" />
+        <img src={imagesData[roomData.place_name]} alt="Plan de la salle" />
       </div>
     </>
   )