I have an apache webserver and a browser plugin. The Plugin does check form which website something is downloaded from and checks if it is downloaded from a specific domain. If so it fetches some data to my server for example the username, id from the user, the time remainng for the download, the status (downloading) and I use regex to extract a number from the domain which will also be fetched over to the server. On the server I receive the data and check if the number is in my list of devices otherwise its added. Now I want to show the downloads that are active for each device in my html file and Im unsure on how use it in my <script> tag over at the index.html because in the php file I need to safe all downloads at the moment and in my html I want to display the downloads. Here is my html code whcih is used to show the devices, status etc. :
Please note most of these variables arent used correctly thats why im asking, sry if it isnt formatted correctly it is inside my code but for some reason if I paste it its not
<section>
<div class="container-fluid pt-5 pb-5 bg-main">
<div class="container rounded pt-3 pb-3 content-box">
<div class="container">
<div class="row fw-bold border-bottom pb-2 mb-2">
<div class="col-2">Gerät</div>
<div class="col-4">Status</div>
<div class="col-6">Info</div>
</div>
<div id="deviceGrid"></div>
<script>
const Data_file = "api/received.json";
const refreshInterval = 999;
let firstLoad = true;
async function loadData() {
try {
const response = await fetch(`${Data_file}?_=${Date.now()}`);
const devices = (await (await fetch(devicesFile + "?_=" + Date.now())).json()).JsonDevices;
devices.forEach(device => {
const row = document.createElement("div");
row.className = "row align-items-center border-bottom py-2";
// Spalte 1: Gerätenummer
const colDevice = document.createElement("div");
colDevice.className = "col-1";
colDevice.textContent = device;
//Icon zum kopieren der Seriennummer und Softwareversion
const colIcon = document.createElement("div");
colDevice.className = "col-1";
colDevice.textContent = device;
//Status frei/besetzt kommt später!!!
const colStatus = document.createElement("div");
colDevice.className = "col-2";
//colDevice.textContent = device;
//Download aktiv ja oder nein? Mit Icons arbeiten
const colDownloadActive = document.createElement("div");
colDevice.className = "col-2";
colDevice.textContent = device;
if (downloadActive = true) {
colStatus.innerHTML =
'<img src="pictures/reject.png">';
'< span class="text-danger" >Download aktiv</span > ';
} else {
colStatus.innerHTML =
'<img src="pictures/approved.png">';
'< span class="text-danger" >keine Downloads</span > ';
}
//Wer lädt herunter über Token
const colDownloadFrom = document.createElement("div");
colDevice.className = "col-3 ";
colDevice.textContent = device;
//Wie Lange geht der download noch
const colDownloadDuration = document.createElement("div");
colDevice.className = "col-2";
colDevice.textContent = device;
//Anzahl der Downloads
const colNumberofDownloads = document.createElement("div");
colDevice.className = "col-1";
colDevice.textContent = device;
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
document.getElementById("output").textContent = JSON.stringify(data, null, 2);
firstLoad = false;
} catch (error) {
console.error(error);
if (firstLoad) {
document.getElementById("output").textContent = "Error" + error;
}
}
}
setInterval(loadData, refreshInterval);
loadData();
const devices = api;
</script>
</div>
</div>
</section>
This is my php file:
<?php
// read and decode the JSON request body
$body = file_get_contents('php://input');
$data = json_decode($body, true);
// basic validation – ensure required fields are present
$userid = $data['userid'] ?? null;
$username = $data['username'] ?? null;
$gkdevice = $data['gkdevice'] ?? null;
$status = $data['status'] ?? null;
$timeRem = $data['TimeRemaining'] ?? null;
// Load existing devices if the file exists
$devicesFile = "Gkdevices.json";
$devices = file_exists($devicesFile) ? json_decode(file_get_contents($devicesFile), true) : ['JsonDevices' => []];
if (!in_array($data, $devices['JsonDevices'])) {
$devices['JsonDevices'][] = $data;
sort($devices['JsonDevices']);
$numberOfDevices = count($devices['JsonDevices']);
file_put_contents("Gkdevices.json", json_encode($devices, JSON_PRETTY_PRINT));
}
file_put_contents("activeDownloads.json", json_encode($data, JSON_PRETTY_PRINT));
function formatMilliseconds($TimeRemaining)
{
$minutes = floor($TimeRemaining / 60000);
$hours = floor($minutes / 60);
$output = [];
if ($hours > 0) $output[] = $hours . ' Std.';
if ($minutes > 0) $output[] = $minutes . ' Min.';
return implode(' ', $output);
}
$activeFile = 'activeDownloads.json';
$active = file_exists($activeFile)
? json_decode(file_get_contents($activeFile), true)
: [];
// record or update the entry for this device
$active[$userid][$gkdevice] = [
'username' => $username,
'status' => $status,
'TimeRemaining' => $timeRem,
'lastUpdate' => time(),
];
$response = [
"status" => "ok",
"empfangen" => $data
];
echo json_encode($response);