738 lines
30 KiB
PHP
738 lines
30 KiB
PHP
|
<?php
|
||
|
|
include_once 'includes/Parsedown.php';
|
||
|
|
$Parsedown = new Parsedown();
|
||
|
|
|
||
|
|
|
||
|
|
// Datenbankverbindungsdaten
|
||
|
|
$servername = "localhost"; // oder der Hostname deines DB-Servers
|
||
|
|
$username = "nc-site_request"; // Dein neuer MariaDB Benutzername
|
||
|
|
$password = "***"; // Dein Passwort für den neuen Benutzer
|
||
|
|
$dbname = "nextcloud"; // Der Name deiner Nextcloud-Datenbank
|
||
|
|
|
||
|
|
// Verbindung zur MySQL-Datenbank aufbauen
|
||
|
|
$conn = new mysqli($servername, $username, $password, $dbname);
|
||
|
|
|
||
|
|
// Verbindung prüfen
|
||
|
|
if ($conn->connect_error) {
|
||
|
|
die("Verbindung fehlgeschlagen: " . $conn->connect_error);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 1. Abfrage: Alle Dateien, deren Pfad '%files/archive/%' enthält
|
||
|
|
$sql1 = "SELECT fc.fileid, fc.name AS file_name, fc.path AS file_path, fc.size, fc.mimetype
|
||
|
|
FROM oc_filecache AS fc
|
||
|
|
WHERE fc.path LIKE '%files/archive/%'
|
||
|
|
ORDER BY fc.name DESC";
|
||
|
|
|
||
|
|
$result1 = $conn->query($sql1);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 2. Abfrage: Alle Mimetypes und ihre IDs
|
||
|
|
$sql2 = "SELECT id, mimetype FROM oc_mimetypes";
|
||
|
|
$result2 = $conn->query($sql2);
|
||
|
|
|
||
|
|
// 3. Abfrage: Alle Tags im System
|
||
|
|
$sql3 = "SELECT id, name FROM oc_systemtag";
|
||
|
|
$result3 = $conn->query($sql3);
|
||
|
|
|
||
|
|
// 4. Abfrage: Verknüpfung zwischen Files und Tags (mit 'files' statt 'file')
|
||
|
|
$sql4 = "SELECT objectid, systemtagid
|
||
|
|
FROM oc_systemtag_object_mapping
|
||
|
|
WHERE objecttype = 'files'";
|
||
|
|
|
||
|
|
$result4 = $conn->query($sql4);
|
||
|
|
|
||
|
|
// Alle Mimetypes in einem Array speichern
|
||
|
|
$mimetypes = [];
|
||
|
|
while ($row = $result2->fetch_assoc()) {
|
||
|
|
$mimetypes[$row['id']] = $row['mimetype'];
|
||
|
|
}
|
||
|
|
|
||
|
|
// Alle Tags in einem Array speichern
|
||
|
|
$tags = [];
|
||
|
|
while ($row = $result3->fetch_assoc()) {
|
||
|
|
$tags[$row['id']] = $row['name'];
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tags mit Dateiinformationen verbinden
|
||
|
|
$fileTags = [];
|
||
|
|
while ($row = $result4->fetch_assoc()) {
|
||
|
|
$fileTags[$row['objectid']][] = $tags[$row['systemtagid']];
|
||
|
|
}
|
||
|
|
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<link rel="stylesheet" type="text/css" href="newmap.css" />
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 1. GRID CONTAINER ==>> ACCUEIL -->
|
||
|
|
|
||
|
|
|
||
|
|
<div class="grid-container" id="accueil">
|
||
|
|
<div class="item1 livestream">
|
||
|
|
|
||
|
|
<?php
|
||
|
|
$file_path_root = '/var/www/nextcloud/data/appdata_oc8jlvv0zvuc/collectives/2/website/Gestion_page_accueil/livestreamAnnounce.md';
|
||
|
|
$file_content = file_get_contents($file_path_root);
|
||
|
|
echo "<img src='https://pl4tform.org/ncdataaccueil/livestreamButton.png' id='livestreamButton' class='loadMapBtn' audioPlay('https://pl4tform.org/stream','livestream') onmouseover='mouseHover(\"Livestream\")' onmouseout='mouseHoverOut(\"\")' alt=''>";
|
||
|
|
echo "<div id='livestreamAnnounce'>" . $Parsedown->text($file_content) . "</div>";
|
||
|
|
?>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="item2" onmouseover='showImg()' onmouseout='hideImg()'>
|
||
|
|
<?php
|
||
|
|
$file_path_root = '/var/www/nextcloud/data/appdata_oc8jlvv0zvuc/collectives/2/website/Gestion_page_accueil/nextlive.md';
|
||
|
|
$file_content = file_get_contents($file_path_root);
|
||
|
|
|
||
|
|
$input = "(.attachments.106434/sacha_redux.jpg)";
|
||
|
|
preg_match('~.attachments.(.*?)\)~', $input, $imgSource);
|
||
|
|
$imgLink = "https://pl4tform.org/ncdataaccueil/.attachments." . $imgSource[1];
|
||
|
|
|
||
|
|
$file_content_html = $Parsedown->text($file_content);
|
||
|
|
$file_content_html = str_replace('src=".attachments.', 'class="" id="nextliveImg" onclick="focusItem(\''.$imgLink.'\')" src="ncdataaccueil/.attachments.', $file_content_html);
|
||
|
|
|
||
|
|
echo "<div id='nextlive'>$file_content_html</div>";
|
||
|
|
?><script>
|
||
|
|
function showImg() {
|
||
|
|
document.getElementById('nextliveImg').style.opacity = 1;
|
||
|
|
console.log('opacity img = 1')
|
||
|
|
}
|
||
|
|
function hideImg() {
|
||
|
|
document.getElementById('nextliveImg').style.opacity = 0;
|
||
|
|
console.log('opacity img = 0')
|
||
|
|
|
||
|
|
}
|
||
|
|
</script><?php
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="item3"> <?php echo "<img id='logo' src='https://pl4tform.org/ncdataaccueil/logo.png' alt=''>";?> </div>
|
||
|
|
|
||
|
|
<!-- <div class="item4">
|
||
|
|
<div class="" id="searchBar" >
|
||
|
|
<button onclick="closeSearchBar();closeZone()">Close Search</button>
|
||
|
|
<input id="searchBarInput" onclick="openMap('')" onkeyup="search()" type="text" name="search" placeholder="Search ...">
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<div class="item5"> <?php echo "<span class='helper'></span><img src='https://pl4tform.org/ncdataaccueil/about.png' class='loadMapBtn' onmouseover='mouseHover(\"About\")' onmouseout='mouseHoverOut(\"\")' onclick=\"focusItem('72888');\" alt=''>";?> </div>
|
||
|
|
|
||
|
|
<div class="item6"> <?php echo "<span class='helper'></span><img src='https://pl4tform.org/ncdataaccueil/contact.png' class='loadMapBtn' onmouseover='mouseHover(\"Contact\")' onmouseout='mouseHoverOut(\"\")' onclick=\"focusItem('60601');\" alt=''>";?></div>
|
||
|
|
|
||
|
|
<div class="item7"> <?php echo "<a href='https://pl4tform.org/lists/?p=subscribe&id=1' target='_blanck'><span class='helper'></span><img src='https://pl4tform.org/ncdataaccueil/newsletter.png' class='loadMapBtn' onmouseover='mouseHover(\"Newsletter\")' onmouseout='mouseHoverOut(\"\")' alt=''></a>";?></div>
|
||
|
|
|
||
|
|
<div class="item8"> <?php echo "<span class='helper'></span><img src='https://pl4tform.org/ncdataaccueil/alliees.png' class='loadMapBtn' onmouseover='mouseHover(\"Allies\")' onmouseout='mouseHoverOut(\"\")' onclick=\"focusItem('105987');\" alt=''>";?></div>
|
||
|
|
|
||
|
|
<div class="item9"> <?php
|
||
|
|
// include "/var/www/nextcloud/data/appdata_oc8jlvv0zvuc/collectives/2/website/Gestion_page_accueil/prog.md";
|
||
|
|
$file_path_root = '/var/www/nextcloud/data/appdata_oc8jlvv0zvuc/collectives/2/website/Gestion_page_accueil/prog.md';
|
||
|
|
$file_content = file_get_contents($file_path_root);
|
||
|
|
echo $Parsedown->text($file_content);
|
||
|
|
?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="item10"><?php include "chat.php"; ?></div>
|
||
|
|
|
||
|
|
<div class="item11"><?php echo "<span class='helper'></span><img src='https://pl4tform.org/ncdataaccueil/index.gif' class='loadMapBtn' onmouseover='mouseHover(\"Index\")' onmouseout='mouseHoverOut(\"\")' onclick=\"openIndex();\" alt=''>";?></div>
|
||
|
|
|
||
|
|
<div class="item12"><?php echo "<span class='helper'></span><img src='https://pl4tform.org/ncdataaccueil/carte.gif' class='loadMapBtn' onmouseover='mouseHover(\"Explore\")' onmouseout='mouseHoverOut(\"\")' onclick=\"openMap('carto5');audioPlay('https://pl4tform.org/ncdata/241123_1400_jingle_slugg.wav','Bienvenue')\" alt=''>";?></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- <div class="item13">
|
||
|
|
<p>Check the crousty events on <a href="https://rdv404.eu.org/">RDV404.EU.ORG</a> ❤️ </p>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 2. GRID CONTAINER ==>> INDEX -->
|
||
|
|
|
||
|
|
|
||
|
|
<div class="grid-container visible" id="index" style="" >
|
||
|
|
|
||
|
|
<div class="header">
|
||
|
|
<div id="closeIndex" onclick="closeIndex()">close index [x]</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="searchIndex">
|
||
|
|
<input id="myInputTextField" type="search" name="search" placeholder="Search ...">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="tagDiscription"></div>
|
||
|
|
|
||
|
|
<div class="archiveList">
|
||
|
|
<!-- ANFANG VON ARCHIVE LISTE DIV -->
|
||
|
|
|
||
|
|
|
||
|
|
<?php
|
||
|
|
|
||
|
|
|
||
|
|
// HTML-Tabelle erstellen
|
||
|
|
echo "<!DOCTYPE html>
|
||
|
|
<html lang='en'>
|
||
|
|
<head>
|
||
|
|
<meta charset='UTF-8'>
|
||
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||
|
|
<title>File Information</title>
|
||
|
|
<!-- DataTables CSS -->
|
||
|
|
<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css'>
|
||
|
|
<!-- jQuery (für DataTables benötigt) -->
|
||
|
|
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
|
||
|
|
<!-- DataTables JS -->
|
||
|
|
<script src='https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js'></script>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
echo "<table id='fileTable' class='display'>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th> File Name</th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
<th></th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>";
|
||
|
|
|
||
|
|
|
||
|
|
// Array zum Speichern der fileids
|
||
|
|
$fileids = array();
|
||
|
|
|
||
|
|
if ($result1->num_rows > 0) {
|
||
|
|
while ($row = $result1->fetch_assoc()) {
|
||
|
|
$file_id = $row['fileid'];
|
||
|
|
$file_name = $row['file_name'];
|
||
|
|
$file_size = $row['size'];
|
||
|
|
$file_size_in_mb = number_format($file_size / (1024 * 1024), 2);
|
||
|
|
$mimetype_id = $row['mimetype'];
|
||
|
|
$mimetype_name = isset($mimetypes[$mimetype_id]) ? $mimetypes[$mimetype_id] : 'Unknown';
|
||
|
|
|
||
|
|
|
||
|
|
// Hole die Tags für diese Datei
|
||
|
|
$file_tags = isset($fileTags[$file_id]) ? implode(', ', $fileTags[$file_id]) : 'No Tags';
|
||
|
|
|
||
|
|
// Prüfen, ob der Dateiname mit einem Datum im gewünschten Format beginnt (DDMMYY-HHMM oder DDMMYY_HHMM)
|
||
|
|
if (!preg_match('/^\d{6}[-_]\d{4}/', $file_name)) {
|
||
|
|
continue; // Diese Datei überspringen, wenn der Dateiname nicht mit dem gewünschten Format beginnt
|
||
|
|
}
|
||
|
|
|
||
|
|
$fileids[] = $row['fileid'];
|
||
|
|
|
||
|
|
// TO NOT SHOW THE DESCRIPTION FILES !!
|
||
|
|
// if (str_contains($file_tags, 'Tags')) {
|
||
|
|
// continue;
|
||
|
|
// }
|
||
|
|
|
||
|
|
include 'includes/item-title-split.php';
|
||
|
|
|
||
|
|
// Generiere die URL für die Datei
|
||
|
|
$file_url = "https://pl4tform.org/ncdata/{$file_name}";
|
||
|
|
$file_url = str_replace(" ","%20",$file_url);
|
||
|
|
|
||
|
|
$file_date = "$file_day.$file_month.$file_year";
|
||
|
|
$file_time = "$file_hour:$file_minute";
|
||
|
|
|
||
|
|
$mimetype_name = explode('/', $mimetype_name)[0];
|
||
|
|
|
||
|
|
// Zeile in die Tabelle einfügen und Dateinamen als Link formatieren
|
||
|
|
// echo "<tr onclick='focusItemIndexDetails(\"$file_id\",\"$file_title\",\"$file_date\",\"$file_time\",\"$mimetype_name\",\"$file_size_in_mb\");focusItemIndex(\"$file_id\");' class='$file_tags' fileid='$file_id' filetitle='$file_title' filedate='$file_date' filetime='$file_time' tags='$file_tags' filesize='$file_size_in_mb' mimetype='$mimetype_name'>
|
||
|
|
echo "<tr onclick='focusItemIndex(\"$file_id\");' class='$file_tags' fileid='$file_id' filetitle='$file_title' filedate='$file_date' filetime='$file_time' tag='$file_tags' year='20$file_year' filesize='$file_size_in_mb' mimetype='$mimetype_name'>
|
||
|
|
<td class='noshowcolumn fileid'>$file_id</td>
|
||
|
|
<td id='fileNameRow' >$file_name</td>
|
||
|
|
<td id='fileTableRow' >$file_title</td>
|
||
|
|
<td class='noshowcolumn filetag'>$file_tags</td>
|
||
|
|
<td class='noshowcolumn filedate'>$file_date</td>
|
||
|
|
<td class='noshowcolumn filetime'>$file_time</td>
|
||
|
|
<td class='noshowcolumn mimetype'>$mimetype_name</td>
|
||
|
|
<td class='noshowcolumn filesize'>$file_size_in_mb</td>
|
||
|
|
<td class='noshowcolumn fileyear'>20$file_year</td>
|
||
|
|
<td class='noshowcolumn filemonth'>$file_month</td>
|
||
|
|
<td class='noshowcolumn filecontent'>";
|
||
|
|
echo "mimetype: $mimetype_name, link: $file_url";
|
||
|
|
// ACTIVER POUR QUE LES RECHERCHE PRENNENT AUSSI COMPTE DES CONTENUES DES FICHIER !!! ===>> problem avec les fichier de discription son parce qu'il ont le display = none
|
||
|
|
if (str_contains($mimetype_name, 'text') AND !str_contains($file_tags, 'No Tags')) {
|
||
|
|
$file_content = file_get_contents($file_url);
|
||
|
|
echo $file_content;
|
||
|
|
}
|
||
|
|
echo "</td>
|
||
|
|
|
||
|
|
</tr>";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
echo "<tr><td colspan='5'>No data found</td></tr>";
|
||
|
|
}
|
||
|
|
|
||
|
|
echo " </tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
";
|
||
|
|
|
||
|
|
$conn->close();
|
||
|
|
?>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ENDE VON ARCHIVE LISTE DIV: -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<?php
|
||
|
|
// Zufällig eine fileid auswählen, falls es mindestens eine gibt
|
||
|
|
// if (count($fileids) > 0) {
|
||
|
|
// $random_fileid = $fileids[array_rand($fileids)];
|
||
|
|
// } else {}
|
||
|
|
|
||
|
|
$fileids_js_array = json_encode($fileids);
|
||
|
|
?>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var fileids = <?php echo $fileids_js_array; ?>;
|
||
|
|
|
||
|
|
// Funktion, um beim Klick eine zufällige FileID zu setzen
|
||
|
|
function randomizeFileID() {
|
||
|
|
// Zufällig eine FileID aus dem Array wählen
|
||
|
|
var randomFileID = fileids[Math.floor(Math.random() * fileids.length)];
|
||
|
|
// Den onclick-Handler des Buttons dynamisch setzen
|
||
|
|
focusItemIndex(randomFileID);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="tags">
|
||
|
|
<button id="resetFilterButton" >Reset Filter</button>
|
||
|
|
<div id="tagButtonsContainer"></div> <!-- Hier werden die Buttons angezeigt -->
|
||
|
|
<br>
|
||
|
|
<div id="yearButtonsContainer"></div> <!-- Hier werden die Buttons angezeigt -->
|
||
|
|
<br>
|
||
|
|
<div id="mimetypeButtonsContainer"></div> <!-- Hier werden die Buttons angezeigt -->
|
||
|
|
<br>
|
||
|
|
<button onclick="randomizeFileID();focusItemIndexDetails('','','','','','','',)">Random</button> </div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 3. GRID CONTAINER ==>> FOCUS -->
|
||
|
|
|
||
|
|
|
||
|
|
<div class="grid-container visible" id="focusGrid" >
|
||
|
|
<div id="focusItemIndexDetailsTitle"></div>
|
||
|
|
<div id="focusItemIndexDetails">
|
||
|
|
<span id="focusItemIndexDetailsDate"></span> <br>
|
||
|
|
<span id="focusItemIndexDetailsTime"></span> <br>
|
||
|
|
<span id="focusItemIndexDetailsFormat"></span><br>
|
||
|
|
<span id="focusItemIndexDetailsSize"></span> <br>
|
||
|
|
<span id="focusItemIndexDetailsId"></span>
|
||
|
|
</div>
|
||
|
|
<div id="focusItemIndexContent">
|
||
|
|
<div id="startAnnounce"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function openIndex() {
|
||
|
|
$("#index").addClass("visible");
|
||
|
|
$("#focusGrid").addClass("visible");
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeIndex() {
|
||
|
|
$("#index").removeClass("visible");
|
||
|
|
$("#focusGrid").removeClass("visible");
|
||
|
|
}
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
// Initialisiere die DataTable
|
||
|
|
var table = $('#fileTable').DataTable({
|
||
|
|
'order': [[1, 'desc']], // Absteigende Sortierung nach 'File Name'
|
||
|
|
'pageLength': 1000, // Standard: 1000 Einträge pro Seite
|
||
|
|
'lengthMenu': [ // Auswahlmöglichkeiten für die Anzahl der angezeigten Einträge
|
||
|
|
[10, 50, 100, 500, 1000],
|
||
|
|
[10, 50, 100, 500, 1000] // Text für die Auswahl
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Funktion zum Erstellen der Filter-Buttons (für Tag, Jahr, Dateiformat)
|
||
|
|
function createFilterButtons(attribute, containerId, buttonClass, columnIndex) {
|
||
|
|
var values = new Set(); // Set, um doppelte Werte zu vermeiden
|
||
|
|
|
||
|
|
// Durchlaufe alle Zeilen der Tabelle und extrahiere die Werte
|
||
|
|
$('#fileTable tbody tr').each(function() {
|
||
|
|
var attrValue = $(this).attr(attribute);
|
||
|
|
if (attrValue) {
|
||
|
|
var valueList = attrValue.split(','); // Werte durch Kommas getrennt
|
||
|
|
valueList.forEach(function(value) {
|
||
|
|
values.add(value.trim()); // Füge den Wert zum Set hinzu (automatisch Duplikate entfernt)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Erstelle Buttons für jeden Wert
|
||
|
|
var buttonsHtml = '';
|
||
|
|
values.forEach(function(value) {
|
||
|
|
buttonsHtml += `<button class="filterButton ${buttonClass}" onclick="loadTagDiscription(\'${value}\')" data-filtercategory="${attribute}" data-filter="${value}">${value}</button> `;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Füge die Buttons in den Container ein
|
||
|
|
$(containerId).html(buttonsHtml);
|
||
|
|
|
||
|
|
// Event-Listener für das Filtern der Tabelle bei Klick auf die Buttons
|
||
|
|
$(`.${buttonClass}`).on('click', function() {
|
||
|
|
var filterValue = $(this).data('filter');
|
||
|
|
console.log(filterValue);
|
||
|
|
|
||
|
|
resetFilter();
|
||
|
|
|
||
|
|
// Entferne die Klasse 'selected' von allen Buttons
|
||
|
|
$(`.filterButton`).removeClass('selected');
|
||
|
|
// Füge die Klasse 'selected' zum geklickten Button hinzu
|
||
|
|
$(this).addClass('selected');
|
||
|
|
|
||
|
|
|
||
|
|
// Tabelle filtern
|
||
|
|
table.column(columnIndex).search(filterValue).draw();
|
||
|
|
console.log('filtering for: '+filterValue + " in colum: "+columnIndex);
|
||
|
|
updateFilterButtonOpacity();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Reset der Suchleiste
|
||
|
|
document.getElementById('myInputTextField').value = '';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Erstelle Filter-Buttons für Tags, Jahre und Dateiformate
|
||
|
|
createFilterButtons('tag', '#tagButtonsContainer', 'tagButton', 3); // Filter für Tag
|
||
|
|
createFilterButtons('year', '#yearButtonsContainer', 'yearButton', 8); // Filter für Jahr
|
||
|
|
createFilterButtons('mimetype', '#mimetypeButtonsContainer', 'mimetypeButton', 6); // Filter für Dateiformat (Spalte 6 -> Index 5)
|
||
|
|
|
||
|
|
|
||
|
|
// Event-Listener für das Filtern der Tabelle bei Eingabe
|
||
|
|
$('#myInputTextField').on('keyup', function() {
|
||
|
|
// Tabelle filtern
|
||
|
|
table.search(this.value).draw();
|
||
|
|
updateFilterButtonOpacity();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#myInputTextField').on('click', function() {
|
||
|
|
// Reset der Tag- und year-Filter
|
||
|
|
// table.column().search('').draw();
|
||
|
|
resetFilter();
|
||
|
|
updateFilterButtonOpacity();
|
||
|
|
document.getElementById('tagDiscription').innerHTML = "";
|
||
|
|
// Entferne die Klasse 'selected' von allen Buttons
|
||
|
|
$(`.filterButton`).removeClass('selected');
|
||
|
|
console.log('removed class');
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Funktion, um die Opazität der FILTER-Buttons anzupassen
|
||
|
|
function updateFilterButtonOpacity() {
|
||
|
|
console.log("updateFilterButtonOpacity")
|
||
|
|
// Durchlaufe alle filter-Buttons
|
||
|
|
$('.filterButton').each(function() {
|
||
|
|
var button = $(this);
|
||
|
|
var filtercategory = button.data('filtercategory');
|
||
|
|
var filter = button.data('filter');
|
||
|
|
// console.log(filter+'-button from category ' +filtercategory);
|
||
|
|
var isfilterVisible = false;
|
||
|
|
|
||
|
|
// Überprüfe, ob der filter in sichtbaren Zeilen der Tabelle vorhanden ist
|
||
|
|
$('#fileTable tbody tr').each(function() {
|
||
|
|
var filterInRow = $(this).attr(filtercategory);
|
||
|
|
// console.log("filter in row: "+filterInRow);
|
||
|
|
if (filterInRow && filterInRow.includes(filter)) {
|
||
|
|
if ($(this).css('display') !== 'none') { // Nur sichtbare Zeilen zählen
|
||
|
|
isfilterVisible = true;
|
||
|
|
// console.log('isfiltervisible = true!');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Ändere die Opazität basierend darauf, ob der Tag sichtbar ist oder nicht
|
||
|
|
if (isfilterVisible) {
|
||
|
|
// button.css('opacity', '1'); // Voll sichtbar
|
||
|
|
button.addClass('intable');
|
||
|
|
} else {
|
||
|
|
// button.css('opacity', '0.3'); // Ausgegraut
|
||
|
|
button.removeClass('intable');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Funktion, um die Zeilen auszuwählen
|
||
|
|
function selectRow(row) {
|
||
|
|
// Entferne die Auswahl von allen Zeilen
|
||
|
|
$('#fileTable tbody tr').removeClass('selected').css('background-color', '');
|
||
|
|
console.log('removed class selected');
|
||
|
|
|
||
|
|
|
||
|
|
// Wähle die geklickte Zeile aus
|
||
|
|
$(row).addClass('selected').css('background-color', 'white');
|
||
|
|
|
||
|
|
// Holen Sie sich alle Kategorien (Tags, Jahre, Mimetypes) der Zeile
|
||
|
|
var categories = ['tag', 'year', 'mimetype']; // Füge hier weitere Kategorien hinzu, wenn nötig
|
||
|
|
categories.forEach(function(category) {
|
||
|
|
var categoryValue = $(row).attr(category);
|
||
|
|
// console.log("category: "+category + ' und categoryValue: ' + categoryValue);
|
||
|
|
|
||
|
|
// Überprüfen, ob es einen Wert für diese Kategorie gibt
|
||
|
|
if (categoryValue) {
|
||
|
|
// console.log('yesss 3?');
|
||
|
|
|
||
|
|
// Alle Buttons dieser Kategorie durchlaufen
|
||
|
|
$('.' + category + 'Button').each(function() {
|
||
|
|
|
||
|
|
var button = $(this);
|
||
|
|
var buttonCategoryValue = button.data("filter"); // Beispiel: data('tag'), data('year') etc.
|
||
|
|
// console.log('category: '+category+", categoryValue: "+categoryValue + ", buttonCategoryValue: "+buttonCategoryValue);
|
||
|
|
|
||
|
|
|
||
|
|
// Wenn der Wert der Zeile mit dem Button-Wert übereinstimmt, markiere den Button
|
||
|
|
if (categoryValue.includes(buttonCategoryValue)) {
|
||
|
|
button.css('opacity', '1'); // Setze volle Opazität für Kategorien, die vorhanden sind
|
||
|
|
button.addClass('selected'); // Markiere den Button als ausgewählt
|
||
|
|
// console.log(categoryValue + " contains " + buttonCategory)
|
||
|
|
} else {
|
||
|
|
button.removeClass('selected'); // Entferne die Auswahl von nicht passenden Buttons
|
||
|
|
console.log('removed class');
|
||
|
|
button.css('opacity', '0.3'); // Setze volle Opazität für Kategorien, die vorhanden sind
|
||
|
|
// console.log(categoryValue + " doesnt contain " + buttonCategory)
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// NEUUUUUUUUUUUUUUUUUUUENDEEEEEEEE
|
||
|
|
|
||
|
|
|
||
|
|
// Zeile auswählen, wenn sie geklickt wird
|
||
|
|
$('#fileTable tbody').on('click', 'tr', function() {
|
||
|
|
var row = this;
|
||
|
|
selectRow(row);
|
||
|
|
var file_id = $(row).find('.fileid').text();
|
||
|
|
var file_title = $(row).find('#fileTableRow').text();
|
||
|
|
var file_date = $(row).find('.filedate').text();
|
||
|
|
var file_time = $(row).find('.filetime').text();
|
||
|
|
var mimetype = $(row).find('.mimetype').text();
|
||
|
|
var size = $(row).find('.filesize').text();
|
||
|
|
focusItemIndexDetails(file_id, file_title, file_date, file_time, mimetype, size);
|
||
|
|
console.log('onclick row sends: ' + file_id + file_title + file_date + file_time + mimetype + size)
|
||
|
|
});
|
||
|
|
|
||
|
|
// Pfeiltasten-Navigation hinzufügen
|
||
|
|
$(document).keydown(function(e) {
|
||
|
|
var selectedRow = $('#fileTable tbody tr.selected');
|
||
|
|
if (selectedRow.length > 0) {
|
||
|
|
var nextRow;
|
||
|
|
|
||
|
|
if (e.key === 'ArrowDown') {
|
||
|
|
nextRow = selectedRow.next('tr');
|
||
|
|
} else if (e.key === 'ArrowUp') {
|
||
|
|
nextRow = selectedRow.prev('tr');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Überprüfen, ob die Zeile übersprungen werden muss
|
||
|
|
while (nextRow.length > 0 && (nextRow.hasClass('No Tags') || nextRow.css('display') === 'none')) {
|
||
|
|
// Falls die Zeile 'No Tags' oder 'display: none' hat, überspringen wir sie
|
||
|
|
if (e.key === 'ArrowDown') {
|
||
|
|
nextRow = nextRow.next('tr');
|
||
|
|
} else if (e.key === 'ArrowUp') {
|
||
|
|
nextRow = nextRow.prev('tr');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (nextRow.length > 0) {
|
||
|
|
selectRow(nextRow[0]); // Markiere die nächste oder vorherige Zeile
|
||
|
|
var file_id = nextRow.find('.fileid').text();
|
||
|
|
var file_title = nextRow.find('#fileTableRow').text();
|
||
|
|
var file_date = nextRow.find('.filedate').text();
|
||
|
|
var file_time = nextRow.find('.filetime').text();
|
||
|
|
var mimetype = nextRow.find('.mimetype').text();
|
||
|
|
var size = nextRow.find('.filesize').text();
|
||
|
|
focusItemIndexDetails(file_id, file_title, file_date, file_time, mimetype, size);
|
||
|
|
// console.log("pfeiltasten event send: " + file_id + file_title + file_date + file_time + mimetype + size);
|
||
|
|
focusItemIndex(file_id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// Initiale Opazität nach dem ersten Laden der Seite
|
||
|
|
updateFilterButtonOpacity();
|
||
|
|
|
||
|
|
document.getElementById('myInputTextField').value = '';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function resetFilter() {
|
||
|
|
// Reset der gesamten Filter
|
||
|
|
table.search('').draw(); // Setzt den globalen Filter zurück
|
||
|
|
table.column(1).search('').draw();
|
||
|
|
table.column(2).search('').draw();
|
||
|
|
table.column(3).search('').draw();
|
||
|
|
table.column(4).search('').draw();
|
||
|
|
table.column(5).search('').draw();
|
||
|
|
table.column(6).search('').draw();
|
||
|
|
table.column(7).search('').draw();
|
||
|
|
table.column(8).search('').draw();
|
||
|
|
table.column(9).search('').draw();
|
||
|
|
table.column(10).search('').draw();
|
||
|
|
updateFilterButtonOpacity();
|
||
|
|
// Entferne die Klasse 'selected' von allen Buttons
|
||
|
|
$(`.filterButton`).removeClass('selected');
|
||
|
|
console.log('removed class selected');
|
||
|
|
$('#myInputTextField').val(''); // Leert das Suchfeld
|
||
|
|
document.getElementById('tagDiscription').innerHTML = "";
|
||
|
|
console.log('reset all filers');
|
||
|
|
};
|
||
|
|
|
||
|
|
$('#resetFilterButton').on('click', function() {
|
||
|
|
resetFilter();
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function loadTagDiscription(tag) {
|
||
|
|
$("#tagDiscription").load("includes/tagDiscription.php", {tag: tag});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function focusItemIndex(file_id) {
|
||
|
|
if (file_id === 'vide') {
|
||
|
|
console.log('focusItem == vide');
|
||
|
|
} else {
|
||
|
|
document.getElementById('focusItemIndexContent').innerHTML = "loading...";
|
||
|
|
}
|
||
|
|
$("#focusItemIndexContent").load("includes/loadItemIndex.php", {file_id: file_id});
|
||
|
|
}
|
||
|
|
|
||
|
|
focusItemIndex('vide');
|
||
|
|
|
||
|
|
|
||
|
|
// ALTERNATIVE TO LOAD PARCEQUE AJAX CAN BE ANNULATED WHEN TOO MANY REQUEST ===== >>> error in der ajax request !?
|
||
|
|
|
||
|
|
// let lastRequest = null;
|
||
|
|
|
||
|
|
// function focusItemIndex(file_id) {
|
||
|
|
// console.log("focusItem "+file_id)
|
||
|
|
// if (file_id === 'vide') {
|
||
|
|
// console.log('focusItem == vide');
|
||
|
|
// } else {
|
||
|
|
// document.getElementById('focusItemIndexContent').innerHTML = "loading...";
|
||
|
|
// }
|
||
|
|
|
||
|
|
// // Falls eine Anfrage noch läuft, breche sie ab
|
||
|
|
// if (lastRequest !== null) {
|
||
|
|
// lastRequest.abort();
|
||
|
|
// }
|
||
|
|
|
||
|
|
// // Starte eine neue AJAX-Anfrage
|
||
|
|
// lastRequest = $.ajax({
|
||
|
|
// url: "includes/loadItemIndex.php",
|
||
|
|
// method: "GET",
|
||
|
|
// data: { file_id: file_id },
|
||
|
|
// success: function(response) {
|
||
|
|
// // Erfolgreiches Laden der Daten
|
||
|
|
// document.getElementById('focusItemIndexContent').innerHTML = response;
|
||
|
|
// alert("loading");
|
||
|
|
// },
|
||
|
|
// error: function(xhr, status, error) {
|
||
|
|
// // Fehlerbehandlung
|
||
|
|
// console.log("Error: " + error);
|
||
|
|
// document.getElementById('focusItemIndexContent').innerHTML = "Error loading data.";
|
||
|
|
// // alert("error");
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function focusItemIndexDetails(file_id, file_title, file_date, file_time, file_format, file_size_in_mb) {
|
||
|
|
console.log('focusItemIndexDetails function receives: '+file_id + file_title + file_date + file_time + file_format + file_size_in_mb)
|
||
|
|
// document.getElementById('focusItemIndexDetailsId').innerHTML = "File-id: " + file_id;
|
||
|
|
// document.getElementById('focusItemIndexDetailsTitle').innerHTML = "Title: " + file_title;
|
||
|
|
// document.getElementById('focusItemIndexDetailsDate').innerHTML = "Date: " + file_date;
|
||
|
|
// document.getElementById('focusItemIndexDetailsTime').innerHTML = "Time: " + file_time + " H";
|
||
|
|
// document.getElementById('focusItemIndexDetailsFormat').innerHTML = "File-format: " + file_format;
|
||
|
|
// document.getElementById('focusItemIndexDetailsSize').innerHTML = "File-size: " + file_size_in_mb + " Mb";
|
||
|
|
document.getElementById('focusItemIndexDetailsId').innerHTML = "<a href='https://cloud.pl4tform.org/f/" + file_id + "' target='_blanck'>"+ file_id +"</a>";
|
||
|
|
document.getElementById('focusItemIndexDetailsTitle').innerHTML = file_title;
|
||
|
|
document.getElementById('focusItemIndexDetailsDate').innerHTML = file_date;
|
||
|
|
document.getElementById('focusItemIndexDetailsTime').innerHTML = file_time + " H";
|
||
|
|
document.getElementById('focusItemIndexDetailsFormat').innerHTML = file_format;
|
||
|
|
document.getElementById('focusItemIndexDetailsSize').innerHTML = file_size_in_mb + " Mb";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// TO PREVENT SCOLLING WITH ARROWS
|
||
|
|
window.addEventListener("keydown", function(e) {
|
||
|
|
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}, false);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
|