feat: PDF in neue Tab öffnen und die PDFs werden in indexedDB gespeichert und dann von dort aufgerufen und gelesen mit Hilfe von idb Bibliothek

"npm install idb"

components/Footer.jsx

@@ -1,10 +1,76 @@
-"use client";
-import React from "react";
+"use client"; // Wichtig, um sicherzustellen, dass der Code nur auf dem Client ausgeführt wird
+import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react";
 
+// indexDB-Funktionen nur im Browser importieren
+let storePDF, getPDF;
+if (typeof window !== "undefined") {
+  const indexedDBModule = require("../utils/indexedDB");
+  storePDF = indexedDBModule.storePDF;
+  getPDF = indexedDBModule.getPDF;
+}
+
 function Footer() {
+  const [pdfName, setPdfName] = useState("");
+  const [showSlider, setShowSlider] = useState(false);
+
+  const pdfFiles = [
+    "ACCESS.PDF",
+    "CPL.PDF",
+    "CPL220.PDF",
+    "CPL3.PDF",
+    "Daten_APL.pdf",
+    "Daten_CDO.pdf",
+    "Daten_DPL.pdf",
+    "KUE605.PDF",
+    "KUE605uC.PDF",
+    "KUE605uF.PDF",
+    "KUE705FO.PDF",
+    "Modem.pdf",
+    "PST212.PDF",
+    "Temper.pdf",
+    "Wasser.pdf",
+    "XIOPM.PDF",
+  ];
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && getPDF && storePDF) {
+      async function loadAndStorePDFs() {
+        try {
+          for (const fileName of pdfFiles) {
+            const storedPdf = await getPDF(fileName);
+            if (!storedPdf) {
+              const response = await fetch(`/doku/${fileName}`);
+              const pdfBlob = await response.blob();
+              await storePDF(fileName, pdfBlob);
+              console.log(`${fileName} in IndexedDB gespeichert.`);
+            }
+          }
+        } catch (error) {
+          console.error("Fehler beim Laden oder Speichern der PDFs:", error);
+        }
+      }
+
+      loadAndStorePDFs();
+    }
+  }, [getPDF, storePDF]);
+
+  const loadPDF = async (fileName) => {
+    if (typeof window !== "undefined" && getPDF) {
+      const storedPdf = await getPDF(fileName);
+      if (storedPdf) {
+        const pdfUrl = URL.createObjectURL(storedPdf);
+        window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab
+        setPdfName(fileName);
+        setShowSlider(false);
+      } else {
+        console.error("PDF nicht in IndexedDB gefunden");
+      }
+    }
+  };
+
   return (
-    <footer className="bg-gray-300 p-4 overflow-hidden ">
+    <footer className="relative bg-gray-300 p-4 overflow-hidden">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2">
           <Icon
@@ -21,11 +87,44 @@ function Footer() {
           <Icon icon="mdi:email-outline" className="text-xl text-blue-400" />
           <p className="text-sm">kontakt@littwin-systemtechnik.de</p>
         </div>
-        <div className="flex flex-row space-x-2">
+        <div
+          className="flex flex-row space-x-2 cursor-pointer"
+          onClick={() => setShowSlider(true)}
+        >
           <Icon icon="bi:book" className="text-xl text-blue-400" />
           <p className="text-sm">Handbücher</p>
         </div>
       </div>
+
+      <div
+        className={`fixed top-0 right-0 w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ${
+          showSlider ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        <div className="p-4 flex justify-between items-center border-b">
+          <h3 className="text-lg font-semibold">PDF Handbücher</h3>
+          <button
+            className="text-gray-500 hover:text-gray-800"
+            onClick={() => setShowSlider(false)}
+          >
+            <Icon icon="carbon:close" className="text-2xl" />
+          </button>
+        </div>
+
+        <div className="p-4">
+          <ul>
+            {pdfFiles.map((fileName) => (
+              <li
+                key={fileName}
+                className="cursor-pointer text-blue-500 hover:underline mb-2"
+                onClick={() => loadPDF(fileName)}
+              >
+                {fileName}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
     </footer>
   );
 }

package-lock.json

@@ -15,6 +15,7 @@
         "autoprefixer": "^10.4.20",
         "bootstrap-icons": "^1.11.3",
         "chart.js": "^4.4.5",
+        "idb": "^8.0.0",
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18",
@@ -853,6 +854,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/idb": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz",
+      "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "autoprefixer": "^10.4.20",
     "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.5",
+    "idb": "^8.0.0",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",

utils/indexedDB.js

@@ -0,0 +1,19 @@
+import { openDB } from "idb";
+
+const dbPromise = openDB("my-pdf-store", 1, {
+  upgrade(db) {
+    if (!db.objectStoreNames.contains("pdfs")) {
+      db.createObjectStore("pdfs");
+    }
+  },
+});
+
+export async function storePDF(name, file) {
+  const db = await dbPromise;
+  await db.put("pdfs", file, name);
+}
+
+export async function getPDF(name) {
+  const db = await dbPromise;
+  return await db.get("pdfs", name);
+}