s

2024-10-03 17:29:42 +03:00
parent 0e20c69b78
commit f30e6e090b
23 changed files with 1429 additions and 33 deletions
--- a/books/test2.html
+++ b/books/test2.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Storage Interface</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        h1 {
+            text-align: center;
+        }
+        #file-list {
+            list-style-type: none;
+            padding: 0;
+        }
+        #file-list li {
+            margin-bottom: 10px;
+            padding: 10px;
+            background-color: #f0f0f0;
+            border-radius: 5px;
+        }
+        #file-list button {
+            margin-left: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>File Storage Interface</h1>
+    <input type="file" id="file-input">
+    <button onclick="uploadFile()">Upload</button>
+    <h2>File List</h2>
+    <ul id="file-list"></ul>
+
+    <script>
+        class FileStorage {
+            constructor() {
+                this.storage = localStorage;
+            }
+
+            upload(file) {
+                return new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        const fileData = event.target.result;
+                        const fileInfo = {
+                            name: file.name,
+                            size: file.size,
+                            type: file.type,
+                            data: fileData
+                        };
+                        this.storage.setItem(file.name, JSON.stringify(fileInfo));
+                        resolve(fileInfo);
+                    };
+                    reader.onerror = (error) => reject(error);
+                    reader.readAsDataURL(file);
+                });
+            }
+
+            download(fileName) {
+                const fileInfo = this.getFileInfo(fileName);
+                if (!fileInfo) {
+                    throw new Error('File not found');
+                }
+                const link = document.createElement('a');
+                link.href = fileInfo.data;
+                link.download = fileInfo.name;
+                link.click();
+            }
+
+            delete(fileName) {
+                this.storage.removeItem(fileName);
+            }
+
+            list() {
+                return Object.keys(this.storage)
+                    .map(key => this.getFileInfo(key))
+                    .filter(fileInfo => fileInfo !== null)
+                    .map(fileInfo => ({
+                        name: fileInfo.name,
+                        size: fileInfo.size
+                    }));
+            }
+
+            stat(fileName) {
+                const fileInfo = this.getFileInfo(fileName);
+                if (!fileInfo) {
+                    throw new Error('File not found');
+                }
+                return {
+                    name: fileInfo.name,
+                    size: fileInfo.size
+                };
+            }
+
+            getFileInfo(fileName) {
+                try {
+                    const fileInfo = JSON.parse(this.storage.getItem(fileName));
+                    if (fileInfo && fileInfo.name && fileInfo.size) {
+                        return fileInfo;
+                    }
+                } catch (error) {
+                    console.warn(`Invalid file info for ${fileName}:`, error);
+                }
+                return null;
+            }
+        }
+
+        const fileStorage = new FileStorage();
+
+        function uploadFile() {
+            const fileInput = document.getElementById('file-input');
+            const file = fileInput.files[0];
+            if (file) {
+                fileStorage.upload(file).then(() => {
+                    updateFileList();
+                    fileInput.value = '';
+                });
+            }
+        }
+
+        function downloadFile(fileName) {
+            fileStorage.download(fileName);
+        }
+
+        function deleteFile(fileName) {
+            fileStorage.delete(fileName);
+            updateFileList();
+        }
+
+        function updateFileList() {
+            const fileList = document.getElementById('file-list');
+            fileList.innerHTML = '';
+            const files = fileStorage.list();
+            files.forEach(file => {
+                const li = document.createElement('li');
+                li.textContent = `${file.name} (${formatSize(file.size)})`;
+                const downloadBtn = document.createElement('button');
+                downloadBtn.textContent = 'Download';
+                downloadBtn.onclick = () => downloadFile(file.name);
+                const deleteBtn = document.createElement('button');
+                deleteBtn.textContent = 'Delete';
+                deleteBtn.onclick = () => deleteFile(file.name);
+                li.appendChild(downloadBtn);
+                li.appendChild(deleteBtn);
+                fileList.appendChild(li);
+            });
+        }
+
+        function formatSize(bytes) {
+            const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+            let size = bytes;
+            let unitIndex = 0;
+            while (size >= 1024 && unitIndex < units.length - 1) {
+                size /= 1024;
+                unitIndex++;
+            }
+            return `${size.toFixed(2)} ${units[unitIndex]}`;
+        }
+
+        updateFileList();
+    </script>
+</body>
+</html>