├── .idea
    ├── misc.xml
    ├── vcs.xml
    ├── .gitignore
    ├── modules.xml
    ├── Duplicati_Monitor.iml
    ├── deployment.xml
    ├── dataSources.xml
    ├── php.xml
    └── inspectionProfiles
    │   └── Project_Default.xml
├── private_duplicati
    ├── LoginConnection
    │   └── connection.php
    └── receive.php
├── public
    ├── js
    │   └── script.js
    ├── backupDetails.php
    ├── css
    │   └── style.css
    ├── backUpReports.php
    └── index.php
├── LICENSE
└── duplicati_monitoring.sql


/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="FLOW" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | # Datasource local storage ignored files
7 | /dataSources/
8 | /dataSources.local.xml
9 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/Duplicati_Monitor.iml" filepath="$PROJECT_DIR$/.idea/Duplicati_Monitor.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/Duplicati_Monitor.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager">
4 |     <content url="file://$MODULE_DIR$" />
5 |     <orderEntry type="inheritedJdk" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/.idea/deployment.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="PublishConfigData" remoteFilesAllowedToDisappearOnAutoupload="false">
 4 |     <serverData>
 5 |       <paths name="Local or mounted folder">
 6 |         <serverdata>
 7 |           <mappings>
 8 |             <mapping local="$PROJECT_DIR$" web="/" />
 9 |           </mappings>
10 |         </serverdata>
11 |       </paths>
12 |     </serverData>
13 |   </component>
14 | </project>


--------------------------------------------------------------------------------
/private_duplicati/LoginConnection/connection.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | global $connection;
 3 | // Informations de connexion à la base de données
 4 | $db_servername = "localhost";
 5 | $db_username = "root";
 6 | $db_password = "";
 7 | $db_name = "duplicati_monitoring";
 8 | 
 9 | // Établir la connexion à la base de données
10 | $connection = mysqli_connect($db_servername, $db_username, $db_password, $db_name);
11 | 
12 | // Vérification de la connexion
13 | if (!$connection) {
14 |     die("Erreur de connexion à la base de données : " . mysqli_connect_error());
15 | }
16 | 


--------------------------------------------------------------------------------
/.idea/dataSources.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
 4 |     <data-source source="LOCAL" name="@localhost" uuid="24d2ecdd-959f-49e5-9ddf-6405d3d4f51f">
 5 |       <driver-ref>mysql.8</driver-ref>
 6 |       <synchronize>true</synchronize>
 7 |       <jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
 8 |       <jdbc-url>jdbc:mysql://localhost:3306</jdbc-url>
 9 |       <working-dir>$ProjectFileDir$</working-dir>
10 |     </data-source>
11 |   </component>
12 | </project>


--------------------------------------------------------------------------------
/.idea/php.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="MessDetectorOptionsConfiguration">
 4 |     <option name="transferred" value="true" />
 5 |   </component>
 6 |   <component name="PHPCSFixerOptionsConfiguration">
 7 |     <option name="transferred" value="true" />
 8 |   </component>
 9 |   <component name="PHPCodeSnifferOptionsConfiguration">
10 |     <option name="highlightLevel" value="WARNING" />
11 |     <option name="transferred" value="true" />
12 |   </component>
13 |   <component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
14 |   <component name="PhpStanOptionsConfiguration">
15 |     <option name="transferred" value="true" />
16 |   </component>
17 |   <component name="PsalmOptionsConfiguration">
18 |     <option name="transferred" value="true" />
19 |   </component>
20 | </project>


--------------------------------------------------------------------------------
/public/js/script.js:
--------------------------------------------------------------------------------
 1 | function updateProgress(selector, endValue) {
 2 |     let circularProgress = document.querySelector('.circular-progress' + selector),
 3 |         progressValue = document.querySelector('.progress-value' + selector);
 4 | 
 5 |     let progressStartValue = 0,
 6 |         speed = 5;
 7 | 
 8 |     let progress = setInterval(() => {
 9 | 
10 | 
11 |         let displayedProgress = (progressStartValue / 10).toFixed(1);
12 |         progressValue.textContent = `${displayedProgress}%`;
13 |         circularProgress.style.background = `conic-gradient(#4354A1FF ${displayedProgress * 3.6}deg, #7c7272 0deg)`;
14 | 
15 |         if (progressStartValue === endValue) {
16 |             clearInterval(progress);
17 |         }
18 |         progressStartValue += 1;
19 |     }, speed);
20 | }
21 | 
22 | let progressEndValue24 = Math.floor(percentage24 * 10);
23 | updateProgress('-24h', progressEndValue24);
24 | 
25 | let progressEndValue7 = Math.floor(percentage7 * 10);
26 | updateProgress('-7d', progressEndValue7);
27 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Maxence Albanese
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
 1 | <component name="InspectionProjectProfileManager">
 2 |   <profile version="1.0">
 3 |     <option name="myName" value="Project Default" />
 4 |     <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
 5 |       <option name="ignoredErrors">
 6 |         <list>
 7 |           <option value="N802" />
 8 |           <option value="N806" />
 9 |           <option value="N803" />
10 |         </list>
11 |       </option>
12 |     </inspection_tool>
13 |     <inspection_tool class="PyShadowingBuiltinsInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
14 |       <option name="ignoredNames">
15 |         <list>
16 |           <option value="object" />
17 |         </list>
18 |       </option>
19 |     </inspection_tool>
20 |     <inspection_tool class="PyUnresolvedReferencesInspection" enabled="true" level="WARNING" enabled_by_default="true">
21 |       <option name="ignoredIdentifiers">
22 |         <list>
23 |           <option value="PyQt5.QtWidgets.clicked.connect" />
24 |           <option value="PyQt5.QtWidgets.currentIndexChanged.connect" />
25 |           <option value="PyQt5.QtWidgets.textChanged.connect" />
26 |         </list>
27 |       </option>
28 |     </inspection_tool>
29 |   </profile>
30 | </component>


--------------------------------------------------------------------------------
/public/backupDetails.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | //http://localhost:63342/Duplicati_Monitor/backupDetails.php?id=1
 3 | if (isset($_GET['id'])) {
 4 |     $id = $_GET['id'];
 5 | } else {
 6 |     echo "No backup ID provided";
 7 |     exit();
 8 | }
 9 | global $connection;
10 | include_once '../private_duplicati/LoginConnection/connection.php';
11 | $query = "SELECT * FROM backup_reports WHERE id = $id";
12 | $result = mysqli_query($connection, $query);
13 | $row = mysqli_fetch_assoc($result);
14 | ?>
15 | <!doctype html>
16 | <html lang="en">
17 | <head>
18 |     <meta charset="UTF-8">
19 |     <meta name="viewport"
20 |           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
21 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
22 |     <title>Duplicati Monitor - Details</title>
23 |     <link rel="stylesheet" href="css/style.css">
24 | </head>
25 | <body>
26 | <header>
27 |     <h1>Duplicati Monitor - Details</h1>
28 | </header>
29 | <main>
30 |     <aside>
31 |         <ol>
32 |             <li><a href='index.php'>Overview</a></li>
33 |             <li><a href='backUpReports.php'>Backup reports</a></li>
34 |         </ol>
35 |     </aside>
36 |     <div class="wrapper">
37 |         <table>
38 |             <?php
39 |             for ($i = 0; $i < count($row); $i++) {
40 |                 echo "<tr>";
41 |                 echo "<td>" . array_keys($row)[$i] . "</td>";
42 |                 echo "<td>" . array_values($row)[$i] . "</td>";
43 |                 echo "</tr>";
44 |             }
45 |             ?>
46 |         </table>
47 |     </div>
48 | </main>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/private_duplicati/receive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | global $connection;
 3 | include 'LoginConnection/connection.php'; // Connection to the database
 4 | $jsonData = file_get_contents('php://input'); // Retrieve the JSON data sent by Duplicati
 5 | 
 6 | $nameOfComputer = $_GET['nameOfComputer']; // Retrieve the name of the computer from the URL
 7 | if (!$nameOfComputer) {
 8 |     die('Error : No nameOfComputer specified.');
 9 | }
10 | 
11 | file_put_contents('data.json', $jsonData);
12 | $data = json_decode($jsonData, true);
13 | 
14 | // if everything is ok, return 200 and delete the data.json file
15 | // if not, return 400
16 | if ($data) {
17 |     $now = date('Y-m-d H:i:s');
18 |     $operationName = $data['Extra']['OperationName'];
19 |     $extraResult = $data['Extra']['ParsedResult'];
20 |     $duration = $data['Data']['Duration'];
21 |     $deletedFiles = $data['Data']['DeletedFiles'];
22 |     $deletedFolders = $data['Data']['DeletedFolders'];
23 |     $modifiedFiles = $data['Data']['ModifiedFiles'];
24 |     $examinedFiles = $data['Data']['ExaminedFiles'];
25 |     $openedFiles = $data['Data']['OpenedFiles'];
26 |     $addedFiles = $data['Data']['AddedFiles'];
27 |     $sizeOfModifiedFiles = $data['Data']['SizeOfModifiedFiles'];
28 | 
29 |     // Insert the data into the database
30 |     $stmt = $connection->prepare("INSERT INTO backup_reports (date, operation, extraResult, duration, nameOfComputer, deletedFiles, deletedFolders, modifiedFiles, examinedFiles, openedFiles, addedFiles, sizeOfModifiedFiles) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
31 |     $stmt->bind_param("sssssiiisiii", $now, $operationName, $extraResult, $duration, $nameOfComputer, $deletedFiles, $deletedFolders, $modifiedFiles, $examinedFiles, $openedFiles, $addedFiles, $sizeOfModifiedFiles);
32 | 
33 |     $execResult = $stmt->execute();
34 | 
35 |     if ($execResult) {
36 |         http_response_code(200);
37 |         unlink('data.json');
38 |     } else {
39 |         http_response_code(400);
40 |     }
41 | }
42 | mysqli_close($connection);
43 | 


--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
  1 | /* General Reset */
  2 | * {
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 | }
  7 | 
  8 | body {
  9 |     font-family: Arial, sans-serif;
 10 |     background-color: #f2f2f2;
 11 |     margin: 0;
 12 |     padding: 0;
 13 | }
 14 | 
 15 | header {
 16 |     background-color: #333;
 17 |     color: #fff;
 18 |     padding: 20px;
 19 |     text-align: center;
 20 | }
 21 | 
 22 | main {
 23 |     display: flex;
 24 |     flex-wrap: wrap;
 25 |     justify-content: space-between;
 26 |     padding: 20px;
 27 | }
 28 | 
 29 | aside {
 30 |     flex: 0 0 200px;
 31 |     background-color: #ddd;
 32 |     padding: 20px;
 33 |     position: sticky;
 34 |     top: 20px;
 35 |     border-radius: 5px;
 36 |     z-index: 50;
 37 | }
 38 | 
 39 | aside ol {
 40 |     list-style-type: none;
 41 | }
 42 | 
 43 | aside ol li {
 44 |     margin-bottom: 10px;
 45 | }
 46 | 
 47 | a{
 48 |     color: rgba(0, 122, 253, 0.89);
 49 |     text-decoration: none;
 50 | }
 51 | 
 52 | a:hover {
 53 |     color: #666;
 54 | }
 55 | 
 56 | .wrapper {
 57 |     flex: 0 0 calc(100% - 240px);
 58 |     padding: 20px;
 59 | }
 60 | 
 61 | .container-wheels,
 62 | .container-graph {
 63 |     flex: 0 0 100%;
 64 |     padding-top: 20px;
 65 | }
 66 | 
 67 | .container-wheels {
 68 |     display: flex;
 69 |     justify-content: space-between;
 70 |     padding: 10px 20px;
 71 | }
 72 | 
 73 | .wheel{
 74 |     flex: 0 0 30%;
 75 |     padding-top: 20px;
 76 |     background-color: #fff;
 77 |     border-radius: 5px;
 78 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 79 |     display: flex;
 80 |     flex-direction: column;
 81 |     align-items: center;
 82 |     justify-content: center;
 83 | }
 84 | 
 85 | button{
 86 |     padding: 10px 20px;
 87 |     margin: 15px 0;
 88 |     border: none;
 89 |     border-radius: 5px;
 90 |     background-color: #007AFF;
 91 |     color: #fff;
 92 |     cursor: pointer;
 93 | }
 94 | 
 95 | .graph {
 96 |     background-color: #fff;
 97 |     border: 1px solid #ccc;
 98 |     border-radius: 5px;
 99 |     padding: 20px;
100 | }
101 | 
102 | #chartContainer {
103 |     height: 370px;
104 |     width: 100%;
105 | }
106 | 
107 |  /*Styling for wheel circles */
108 | .wheel__circle {
109 |     width: 150px;
110 |     height: 150px;
111 |     border-radius: 50%;
112 |     background-color: #e0e0e0;
113 |     display: flex;
114 |     justify-content: center;
115 |     align-items: center;
116 | }
117 | 
118 | .wheel__circle__inner {
119 |     text-align: center;
120 | }
121 | 
122 | .wheel__circle__inner__text {
123 |     font-size: 24px;
124 |     font-weight: bold;
125 | }
126 | 
127 | .wheel__circle__inner__label {
128 |     font-size: 14px;
129 |     color: #666;
130 | }
131 | 
132 | dialog {
133 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
134 |     padding: 20px;
135 |     margin: 20px;
136 |     background-color: #fff;
137 |     position: fixed;
138 |     top: 50%;
139 |     left: 50%;
140 |     transform: translate(-50%, -50%);
141 |     z-index: 100;
142 | }
143 | 
144 | dialog li{
145 |     margin-bottom: 10px;
146 |     margin-left: 20px;
147 | }
148 | 
149 | table {
150 |     border-collapse: collapse;
151 |     width: 100%;
152 | }
153 | 
154 | table th, table td {
155 |     border: 1px solid #ddd;
156 |     padding: 8px;
157 |     text-align: left;
158 | }
159 | 
160 | 
161 | 
162 | .circular-progress {
163 |     width: 150px;
164 |     height: 150px;
165 |     border-radius: 50%;
166 |     display: flex;
167 |     align-items: center;
168 |     justify-content: center;
169 | }
170 | 
171 | .circular-progress::before {
172 |     content: "";
173 |     position: absolute;
174 |     height: 130px;
175 |     width: 130px;
176 |     border-radius: 50%;
177 |     background: #eaeaea;
178 | }
179 | 
180 | .progress-value {
181 |     position: absolute;
182 |     font-size: 25px;
183 |     font-weight: 600;
184 |     color: #4354A1FF;
185 | }
186 | 
187 | /*Dialog Styles*/
188 | dialog {
189 |     background: white;
190 | 	max-width: 400px;
191 |     padding: 2rem 3rem 1rem;
192 |     border-radius: 20px;
193 | 	border: 0;
194 | 	box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%);
195 | 	animation: fadeIn 1s ease both;
196 | 	&::backdrop {
197 | 		animation: fadeIn 1s ease both;
198 | 		background: rgb(255 255 255 / 40%);
199 | 		z-index: 2;
200 | 		backdrop-filter: blur(20px);
201 | 	}
202 | 	.x {
203 | 		filter: grayscale(1);
204 | 		border: none;
205 | 		background: none;
206 | 		position: absolute;
207 | 		top: 15px;
208 | 		right: 10px;
209 | 		transition: ease filter, transform 0.3s;
210 | 		cursor: pointer;
211 | 		transform-origin: center;
212 | 		&:hover {
213 | 			filter: grayscale(0);
214 | 			transform: scale(1.1);
215 | 		}
216 | 	}
217 | 	h2 {
218 | 		font-weight: 600;
219 | 		font-size: 2rem;
220 | 		padding-bottom: 1rem;
221 | 	}
222 | 	p {
223 | 		font-size: 1rem;
224 | 		line-height: 1.3rem;
225 | 		padding: 0.5rem 0;
226 | 	}
227 | }
228 | 
229 | 
230 | @keyframes fadeIn {
231 | 	from {
232 | 		opacity: 0;
233 | 	}
234 | 	to {
235 | 		opacity: 1;
236 | 	}
237 | }
238 | 
239 | @keyframes fadeOut {
240 |     from {
241 |         opacity: 1;
242 |     }
243 |     to {
244 |         opacity: 0;
245 |     }
246 | }


--------------------------------------------------------------------------------
/public/backUpReports.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | require_once '../private_duplicati/LoginConnection/connection.php';
  3 | global $connection;
  4 | $query = "SELECT * FROM backup_reports";
  5 | $result = mysqli_query($connection, $query);
  6 | $numberOfBackup = mysqli_num_rows($result);
  7 | 
  8 | ?>
  9 | <!doctype html>
 10 | <html lang="en">
 11 | <head>
 12 |     <meta charset="UTF-8">
 13 |     <meta name="viewport"
 14 |           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 15 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 16 |     <title>Duplicati Monitor - Backup Reports</title>
 17 |     <link rel="stylesheet" href="css/style.css">
 18 | </head>
 19 | <body>
 20 | <header>
 21 |     <h1>Duplicati Monitor - Backup Reports</h1>
 22 | </header>
 23 | <main>
 24 |     <aside>
 25 |         <ol>
 26 |             <li><a href='index.php'>Overview</a></li>
 27 |             <li><a href='#'>Backup reports</a></li>
 28 |         </ol>
 29 |     </aside>
 30 |     <div class="wrapper">
 31 |         <p>Number of backup reports: <?php echo $numberOfBackup; ?></p>
 32 |         <table>
 33 |             <tr>
 34 |                 <th>Backup ID
 35 |                     <!--                    add a search bar for jquery-->
 36 |                     <input type="text" id="search-id" placeholder="Search for backup ID">
 37 |                 </th>
 38 |                 <th>Backup Name
 39 |                     <input type="text" id="search-backname" placeholder="Search for backup name">
 40 |                 </th>
 41 |                 <th>Backup Date
 42 |                     <input type="text" id="search-backdate" placeholder="Search for backup date">
 43 |                 </th>
 44 |                 <th>Backup Size
 45 |                     <input type="text" id="search-backsize" placeholder="Search for backup size">
 46 |                 </th>
 47 |                 <th>Backup Duration
 48 |                     <input type="text" id="search-backdur" placeholder="Search for backup duration">
 49 |                 </th>
 50 |                 <th>Backup Result
 51 |                     <input type="text" id="search-backres" placeholder="Search for backup result">
 52 |                 </th>
 53 |                 <th> Details</th>
 54 |             </tr>
 55 |             <?php
 56 |             while ($row = mysqli_fetch_assoc($result)) {
 57 |                 echo "<tr>";
 58 |                 echo "<td>{$row['id']}</td>";
 59 |                 echo "<td>{$row['nameOfComputer']}</td>";
 60 |                 echo "<td>{$row['date']}</td>";
 61 |                 echo "<td>{$row['sizeOfExaminedFiles']}</td>";
 62 |                 echo "<td>{$row['duration']}</td>";
 63 |                 echo "<td>{$row['operation']}</td>";
 64 |                 echo "<td><a href='backupDetails.php?id={$row['id']}'>Details</a></td>";
 65 |                 echo "</tr>";
 66 |             }
 67 |             ?>
 68 |     </div>
 69 | 
 70 | </main>
 71 | 
 72 | </body>
 73 | <!--Jquery-->
 74 | <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 75 | <script type="text/javascript">
 76 |     // get all the input search fields
 77 |     let searchId = $('#search-id');
 78 |     let searchBackName = $('#search-backname');
 79 |     let searchBackDate = $('#search-backdate');
 80 |     let searchBackSize = $('#search-backsize');
 81 |     let searchBackDur = $('#search-backdur');
 82 |     let searchBackRes = $('#search-backres');
 83 | 
 84 | 
 85 |     // get all the table body rows
 86 |     let tableRows = $('tr:not(:first)');
 87 | 
 88 | 
 89 |     function filter() {
 90 |         let id = searchId.val().toLowerCase();
 91 |         let backName = searchBackName.val().toLowerCase();
 92 |         let backDate = searchBackDate.val().toLowerCase();
 93 |         let backSize = searchBackSize.val().toLowerCase();
 94 |         let backDur = searchBackDur.val().toLowerCase();
 95 |         let backRes = searchBackRes.val().toLowerCase();
 96 | 
 97 |         tableRows.each(function (index, tr) {
 98 |             let row = $(tr);
 99 |             let idText = row.find('td').eq(0).text().toLowerCase();
100 |             let backNameText = row.find('td').eq(1).text().toLowerCase();
101 |             let backDateText = row.find('td').eq(2).text().toLowerCase();
102 |             let backSizeText = row.find('td').eq(3).text().toLowerCase();
103 |             let backDurText = row.find('td').eq(4).text().toLowerCase();
104 |             let backResText = row.find('td').eq(5).text().toLowerCase();
105 | 
106 |             if (idText.includes(id) && backNameText.includes(backName) && backDateText.includes(backDate) && backSizeText.includes(backSize) && backDurText.includes(backDur) && backResText.includes(backRes)) {
107 |                 row.show();
108 |             } else {
109 |                 row.hide();
110 |             }
111 |         });
112 |     }
113 | 
114 |     searchId.on('input', filter);
115 |     searchBackName.on('input', filter);
116 |     searchBackDate.on('input', filter);
117 |     searchBackSize.on('input', filter);
118 |     searchBackDur.on('input', filter);
119 |     searchBackRes.on('input', filter);
120 | 
121 | </script>
122 | </html>


--------------------------------------------------------------------------------
/duplicati_monitoring.sql:
--------------------------------------------------------------------------------
  1 | -- phpMyAdmin SQL Dump
  2 | -- version 5.2.1
  3 | -- https://www.phpmyadmin.net/
  4 | --
  5 | -- Hôte : 127.0.0.1
  6 | -- Généré le : jeu. 21 mars 2024 à 08:43
  7 | -- Version du serveur : 10.4.28-MariaDB
  8 | -- Version de PHP : 8.2.4
  9 | 
 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 11 | START TRANSACTION;
 12 | SET time_zone = "+00:00";
 13 | 
 14 | 
 15 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
 16 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
 17 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
 18 | /*!40101 SET NAMES utf8mb4 */;
 19 | 
 20 | --
 21 | -- Base de données : `duplicati_monitoring`
 22 | --
 23 | 
 24 | -- --------------------------------------------------------
 25 | 
 26 | --
 27 | -- Structure de la table `backup_reports`
 28 | --
 29 | 
 30 | CREATE TABLE `backup_reports` (
 31 |   `id` int(11) NOT NULL,
 32 |   `date` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
 33 |   `operation` varchar(255) DEFAULT NULL,
 34 |   `extraResult` varchar(255) DEFAULT NULL,
 35 |   `duration` time DEFAULT NULL,
 36 |   `nameOfComputer` varchar(255) DEFAULT NULL,
 37 |   `deletedFiles` int(11) DEFAULT NULL,
 38 |   `deletedFolders` int(11) DEFAULT NULL,
 39 |   `modifiedFiles` int(11) DEFAULT NULL,
 40 |   `examinedFiles` int(11) DEFAULT NULL,
 41 |   `openedFiles` int(11) DEFAULT NULL,
 42 |   `addedFiles` int(11) DEFAULT NULL,
 43 |   `sizeOfModifiedFiles` bigint(20) DEFAULT NULL,
 44 |   `sizeOfAddedFiles` bigint(20) DEFAULT NULL,
 45 |   `sizeOfExaminedFiles` bigint(20) DEFAULT NULL,
 46 |   `sizeOfOpenedFiles` bigint(20) DEFAULT NULL,
 47 |   `notProcessedFiles` int(11) DEFAULT NULL,
 48 |   `addedFolders` int(11) DEFAULT NULL,
 49 |   `tooLargeFiles` int(11) DEFAULT NULL,
 50 |   `filesWithError` int(11) DEFAULT NULL,
 51 |   `modifiedFolders` int(11) DEFAULT NULL,
 52 |   `modifiedSymlinks` int(11) DEFAULT NULL,
 53 |   `addedSymlinks` int(11) DEFAULT NULL,
 54 |   `deletedSymlinks` int(11) DEFAULT NULL,
 55 |   `partialBackup` tinyint(1) DEFAULT NULL,
 56 |   `dryrun` tinyint(1) DEFAULT NULL,
 57 |   `mainOperation` varchar(255) DEFAULT NULL,
 58 |   `compactResults` varchar(255) DEFAULT NULL,
 59 |   `parsedResult` varchar(255) DEFAULT NULL,
 60 |   `version` varchar(255) DEFAULT NULL,
 61 |   `endTime` datetime DEFAULT NULL,
 62 |   `beginTime` datetime DEFAULT NULL,
 63 |   `messages` int(11) DEFAULT NULL,
 64 |   `warnings` int(11) DEFAULT NULL,
 65 |   `errors` int(11) DEFAULT NULL
 66 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
 67 | 
 68 | --
 69 | -- Déchargement des données de la table `backup_reports`
 70 | --
 71 | 
 72 | INSERT INTO `backup_reports` (`id`, `date`, `operation`, `extraResult`, `duration`, `nameOfComputer`, `deletedFiles`, `deletedFolders`, `modifiedFiles`, `examinedFiles`, `openedFiles`, `addedFiles`, `sizeOfModifiedFiles`, `sizeOfAddedFiles`, `sizeOfExaminedFiles`, `sizeOfOpenedFiles`, `notProcessedFiles`, `addedFolders`, `tooLargeFiles`, `filesWithError`, `modifiedFolders`, `modifiedSymlinks`, `addedSymlinks`, `deletedSymlinks`, `partialBackup`, `dryrun`, `mainOperation`, `compactResults`, `parsedResult`, `version`, `endTime`, `beginTime`, `messages`, `warnings`, `errors`) VALUES
 73 | (1, '2024-03-15 10:25:28', 'Backup', 'Success', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 74 | (2, '2024-03-15 10:27:08', 'Backup', 'Success', '00:00:07', '0', 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 75 | (3, '2024-03-15 10:29:21', 'Backup', 'Success', '00:00:07', '0', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 76 | (4, '2024-03-15 13:12:42', 'Backup', 'Success', '00:00:07', '0', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 77 | (5, '2024-03-15 13:14:38', 'Backup', 'Success', '00:00:06', 'Bureau-albanese', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 78 | (6, '2024-03-15 14:48:56', 'Backup', 'Success', '00:00:03', 'Bureau-albanese', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 79 | (7, '2024-03-18 07:45:14', 'Backup', 'Success', '00:00:10', 'Bureau-albanese', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 80 | (8, '2024-03-18 09:45:05', 'Backup', 'Success', '00:00:09', 'Bureau-albanese', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 81 | (9, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer977', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 82 | (10, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer670', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 83 | (11, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer417', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 84 | (12, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer76', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 85 | (13, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer128', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 86 | (14, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer413', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 87 | (15, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer679', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 88 | (16, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer156', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 89 | (17, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer742', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 90 | (18, '2024-03-18 14:13:00', NULL, NULL, NULL, 'Computer240', NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 91 | (138, '2024-03-21 07:10:34', 'Backup', 'Success', '00:00:08', 'Bureau-albanese', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL),
 92 | (139, '2024-03-21 07:15:54', 'Backup', 'Success', '00:00:06', 'Bureau-albanese', 0, 0, 0, 3388, 0, 0, 0, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL);
 93 | 
 94 | --
 95 | -- Index pour les tables déchargées
 96 | --
 97 | 
 98 | --
 99 | -- Index pour la table `backup_reports`
100 | --
101 | ALTER TABLE `backup_reports`
102 |   ADD PRIMARY KEY (`id`);
103 | 
104 | --
105 | -- AUTO_INCREMENT pour les tables déchargées
106 | --
107 | 
108 | --
109 | -- AUTO_INCREMENT pour la table `backup_reports`
110 | --
111 | ALTER TABLE `backup_reports`
112 |   MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=140;
113 | COMMIT;
114 | 
115 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
116 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
117 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
118 | 


--------------------------------------------------------------------------------
/public/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | global $connection;
  3 | include 'connection.php';
  4 | 
  5 | 
  6 | // Format de la date dans la table :
  7 | // 2024-03-21 15:00:00
  8 | // On va faire une query pour chacun des 7 derniers jours et on va compter le nombre de backup pour chaque jour
  9 | // On va ensuite créer un tableau de 7 éléments, un pour chaque jour de la semaine
 10 | 
 11 |     $query = "SELECT * FROM backup_reports WHERE DATE(date) BETWEEN DATE_SUB(CURDATE(), INTERVAL 6 DAY) AND CURDATE()";
 12 |     $result = mysqli_query($connection, $query);
 13 | 
 14 | // Part for the graph
 15 |     $numberOfBackupsPerDay = array_fill(0, 7, 0); // Initialize array with zeros for each day of the week
 16 | 
 17 |     while ($row = mysqli_fetch_assoc($result)) {
 18 |         $date = date('c', strtotime($row['date'])); // Convert date to ISO 8601 format with UTC timezone
 19 |         $dayOfWeek = date('N', strtotime($date)); // Get day of the week (1 - 7)
 20 |         $dayIndex = ($dayOfWeek + 5) % 7; // Convert to array index (0 - 6), Monday to Sunday
 21 |         $numberOfBackupsPerDay[$dayIndex]++;
 22 |     }
 23 | 
 24 |     $max = max($numberOfBackupsPerDay); // Find the maximum number of backups
 25 |     $dataPoints = array();
 26 | 
 27 |     for ($i = 6; $i >= 0; $i--) {
 28 |         $date = strtotime("-$i days");
 29 |         $formattedDate = date('d-m-Y', $date); // Format date in DD-MM-YYYY
 30 | 
 31 |         $dayIndex = (date('N', $date) + 5) % 7;
 32 |         $dataPoints[] = array(
 33 |             "label" => $formattedDate, // Use "label" for custom X-axis display
 34 |             "y" => $numberOfBackupsPerDay[$dayIndex]
 35 |         );
 36 |     }
 37 | 
 38 | 
 39 | // Part for the circles
 40 |     $queryNumberOfBackups = "SELECT * FROM backup_reports";
 41 |     $resultNumberOfBackups = mysqli_query($connection, $queryNumberOfBackups);
 42 |     $numberOfBackup = mysqli_num_rows($resultNumberOfBackups);
 43 | 
 44 |     $toDate = date('Y-m-d');
 45 |     $date24h = date('Y-m-d', strtotime('-1 day'));
 46 |     $date7j = date('Y-m-d', strtotime('-7 days'));
 47 | 
 48 |     $queryUnique = "SELECT DISTINCT nameOfComputer FROM backup_reports";
 49 |     $resultUnique = mysqli_query($connection, $queryUnique);
 50 |     $numberOfUnique = mysqli_num_rows($resultUnique);
 51 | 
 52 |     $queryUnique24h = "SELECT DISTINCT nameOfComputer FROM backup_reports WHERE DATE(date) BETWEEN '$date24h' AND '$toDate'";
 53 |     $resultUnique24h = mysqli_query($connection, $queryUnique24h);
 54 |     $numberOfUnique24h = mysqli_num_rows($resultUnique24h);
 55 | 
 56 | 
 57 |     $queryUnique7j = "SELECT DISTINCT nameOfComputer FROM backup_reports WHERE DATE(date) BETWEEN '$date7j' AND '$toDate'";
 58 |     $resultUnique7j = mysqli_query($connection, $queryUnique7j);
 59 |     $numberOfUnique7j = mysqli_num_rows($resultUnique7j);
 60 | 
 61 |     // Part for the modal
 62 |     $queryListComp = "SELECT DISTINCT nameOfComputer FROM backup_reports";
 63 |     $result = mysqli_query($connection, $queryListComp);
 64 |     $computerList = '';
 65 |     while ($row = mysqli_fetch_assoc($result)) {
 66 |         $arrayComputerList[] = $row['nameOfComputer'];
 67 |         $computerList .= "<li>{$row['nameOfComputer']}</li>";
 68 |     }
 69 | 
 70 |     $arrayComputerList24 = array();
 71 | 
 72 |     $queryList24 = "SELECT DISTINCT nameOfComputer FROM backup_reports WHERE DATE(date) BETWEEN '$date24h' AND '$toDate'";
 73 |     $result24 = mysqli_query($connection, $queryList24);
 74 |     $computerList24 = '';// This list is all computer that did theire backup in the last 24h
 75 |     // we have to do a difference between the list of all computer and the list of computer that did theire backup in the last 24h
 76 |     while ($row = mysqli_fetch_assoc($result24)) {
 77 |         $arrayComputerList24[] = $row['nameOfComputer'];
 78 |     }
 79 | 
 80 |     $arrayComputerList7 = array();
 81 | 
 82 |     $queryList7 = "SELECT DISTINCT nameOfComputer FROM backup_reports WHERE DATE(date) BETWEEN '$date7j' AND '$toDate'";
 83 |     $result7 = mysqli_query($connection, $queryList7);
 84 |     $computerList7 = '';
 85 |     while ($row = mysqli_fetch_assoc($result7)) {
 86 |         $arrayComputerList7[] = $row['nameOfComputer'];
 87 |     }
 88 | 
 89 |     // Part for the % of backup
 90 |     $percent24h = round(($numberOfUnique24h / $numberOfUnique) * 100, 1);
 91 |     $percent7j = round(($numberOfUnique7j / $numberOfUnique) * 100, 1);
 92 | 
 93 |     //Diff
 94 |     $computerList24 = array_diff($arrayComputerList, $arrayComputerList24);
 95 |     $computerList7 = array_diff($arrayComputerList, $arrayComputerList7);
 96 | 
 97 | 
 98 |     //We roll back the array to a <li> list
 99 |     $computerList24 = array_reduce($computerList24, function ($carry, $item) {
100 |         return $carry . "<li>$item</li>";
101 |     }, '');
102 |     $computerList7 = array_reduce($computerList7, function ($carry, $item) {
103 |         return $carry . "<li>$item</li>";
104 |     }, '');
105 | ?>
106 | <!DOCTYPE html>
107 | <html lang="en">
108 | <head>
109 |     <meta charset="UTF-8">
110 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
111 |     <title>Duplicati Monitor</title>
112 |     <link rel="stylesheet" href="css/style.css">
113 |     <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
114 | </head>
115 | <body>
116 | <header>
117 |     <h1>Duplicati Monitor - Overview</h1>
118 | </header>
119 | <main>
120 | 
121 |     <aside>
122 |         <ol>
123 |             <li><a href='#'>Overview</a></li>
124 |             <li><a href='backUpReports.php'>Backup reports</a></li>
125 |         </ol>
126 |     </aside>
127 |     <div class="wrapper">
128 |         <div class="text">There is a total of&nbsp;<b><?php echo $numberOfBackup ?></b>&nbsp;backups registered in the
129 |             database
130 |         </div>
131 |     </div>
132 | 
133 |     <div class="container-wheels">
134 |         <div class="wheel">
135 |             <div class="wheel__circle">
136 |                 <div class="wheel__circle__inner">
137 |                     <div class="wheel__circle__inner__text "><?php echo $numberOfUnique ?></div>
138 |                     <div class="wheel__circle__inner__label">Unique saves</div>
139 |                 </div>
140 |             </div>
141 |             <button onclick="computerList.showModal()">View</button>
142 |         </div>
143 | 
144 | 
145 | 
146 |         <div class="wheel">
147 |             <div class="wheel__circle">
148 |                 <div class="circular-progress circular-progress-24h">
149 |                     <span class="progress-value progress-value-24h"></span>
150 |                 </div>
151 |             </div>
152 |             <span class="wheel__circle__inner__label">Saves in the last 24 hours.</span>
153 |             <button onclick="twentyFour.showModal()">View</button>
154 |         </div>
155 | 
156 | 
157 | 
158 |         <div class="wheel">
159 |             <div class="wheel__circle">
160 |                 <div class="circular-progress circular-progress-7d">
161 |                     <span class="progress-value progress-value-7d"></span>
162 |                 </div>
163 |             </div>
164 |             <span class="wheel__circle__inner__label">Saves in the last 7 days.</span>
165 |             <button onclick="seven.showModal()">View</button>
166 |         </div>
167 | 
168 | 
169 | 
170 |     </div>
171 | 
172 |     <div class="container-graph">
173 |         <div class="graph">
174 |             <div id="chartContainer" style="height: 370px; width: 90%;"></div>
175 |         </div>
176 |     </div>
177 | </main>
178 | 
179 | <dialog id="computerList">
180 |     <form method="dialog">
181 |         <p>Here is the list with the names of the backups:</p>
182 |         <br>
183 |         <ul>
184 |             <?php echo $computerList; ?>
185 |         </ul>
186 |         <button class="bouton"> Close</button>
187 |     </form>
188 | </dialog>
189 | <dialog id="twentyFour">
190 |     <form method="dialog">
191 |         <p>Those computer did not made backups in the last 24 hours:</p>
192 |         <br>
193 |         <ul>
194 |             <?php echo $computerList24; ?>
195 |         </ul>
196 |         <button class="bouton"> Close</button>
197 |     </form>
198 | </dialog>
199 | <dialog id="seven">
200 |     <form method="dialog">
201 |         <p>Those computer did not made backups in the last 7 days:</p>
202 |         <br>
203 |         <ul>
204 |             <?php echo $computerList7; ?>
205 |         </ul>
206 |         <button class="bouton"> Close</button>
207 |     </form>
208 | </dialog>
209 | 
210 | 
211 | <script>
212 |     window.onload = function () {
213 |         var chart = new CanvasJS.Chart("chartContainer", {
214 |             animationEnabled: true,
215 |             theme: "light2",
216 |             title: {
217 |                 text: "Backup Reports"
218 |             },
219 |             axisX: {
220 |                 title: "Date" // Title for the X-axis
221 |             },
222 |             axisY: {
223 |                 title: "Number of Backups"
224 |             },
225 |             data: [{
226 |                 type: "column",
227 |                 dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> // Pass the data points
228 |             }]
229 |         });
230 | // write in console the dataPoints
231 |         console.log(<?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>);
232 |         // Render the chart
233 |         chart.render();
234 |     }
235 | 
236 |     var percentage24 = <?php echo $percent24h; ?>;
237 |     var percentage7 = <?php echo $percent7j; ?>;
238 | </script>
239 | <script src="js/script.js"></script>
240 | 
241 | </body>
242 | </html>


--------------------------------------------------------------------------------