Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advanced File Finder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .file-icon { | |
| color: #6366f1; | |
| } | |
| .folder-icon { | |
| color: #f59e0b; | |
| } | |
| .sort-active { | |
| background-color: #e0e7ff; | |
| } | |
| .file-row:hover { | |
| background-color: #f8fafc; | |
| transform: translateY(-1px); | |
| } | |
| .sidebar-item:hover { | |
| background-color: #f1f5f9; | |
| } | |
| .transition-all { | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| } | |
| .modal-shadow { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 0px 0px rgba(99, 102, 241, 0.3); | |
| } | |
| to { | |
| box-shadow: 0 0 8px 2px rgba(99, 102, 241, 0.3); | |
| } | |
| } | |
| .highlight { | |
| background: linear-gradient(90deg, rgba(224,231,255,0) 0%, rgba(224,231,255,0.5) 50%, rgba(224,231,255,0) 100%); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50"> | |
| <div id="app" class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-white border-r border-slate-200 flex flex-col"> | |
| <div class="p-5 border-b border-slate-200"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-search text-indigo-500"></i> | |
| </div> | |
| <h1 class="text-xl font-semibold text-slate-800">Advanced Finder</h1> | |
| </div> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| v-model="sidebarSearch" | |
| placeholder="Search locations..." | |
| class="w-full px-4 py-2.5 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent placeholder-slate-400" | |
| > | |
| <i class="fas fa-search absolute right-3 top-3 text-slate-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <div | |
| v-for="location in filteredLocations" | |
| :key="location.id" | |
| class="sidebar-item px-3 py-2.5 rounded-lg cursor-pointer flex items-center transition-all group" | |
| :class="{'bg-indigo-50': currentLocation.id === location.id}" | |
| @click="selectLocation(location)" | |
| > | |
| <div class="w-8 h-8 rounded-md flex items-center justify-center mr-2" | |
| :class="{'bg-indigo-100': currentLocation.id === location.id, 'bg-slate-100 group-hover:bg-slate-200': currentLocation.id !== location.id}"> | |
| <i :class="location.icon" class="text-slate-600 group-hover:text-slate-800" | |
| :class="{'text-indigo-500': currentLocation.id === location.id}"></i> | |
| </div> | |
| <span class="text-sm font-medium truncate" | |
| :class="{'text-indigo-600': currentLocation.id === location.id, 'text-slate-700 group-hover:text-slate-900': currentLocation.id !== location.id}"> | |
| {{ location.name }} | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-slate-200 text-xs text-slate-500 bg-slate-50"> | |
| <div class="flex items-center mb-1"> | |
| <i class="fas fa-database mr-2"></i> | |
| <span>Indexed: {{ indexedCount }} items</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> | |
| <span>Last indexed: {{ lastIndexed }}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Toolbar --> | |
| <div class="bg-white border-b border-slate-200 p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <button | |
| class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" | |
| @click="refreshFiles" | |
| > | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| <button | |
| class="px-4 py-2 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 flex items-center transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" | |
| @click="toggleIndexing" | |
| :class="{'glow': isIndexing}" | |
| > | |
| <i class="fas fa-database mr-2" :class="{'text-indigo-600': isIndexing}"></i> | |
| <span v-if="isIndexing">Indexing...</span> | |
| <span v-else>Index Now</span> | |
| </button> | |
| <div class="relative" v-if="selectedFiles.length > 0"> | |
| <button | |
| class="px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 flex items-center transition-all focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" | |
| @click="showDeleteConfirm = true" | |
| > | |
| <i class="fas fa-trash mr-2"></i> Delete ({{ selectedFiles.length }}) | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| v-model="searchQuery" | |
| placeholder="Search files..." | |
| class="px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-64 placeholder-slate-400" | |
| > | |
| <i class="fas fa-search absolute right-3 top-3 text-slate-400"></i> | |
| </div> | |
| <button | |
| class="px-4 py-2 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 flex items-center transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" | |
| @click="showAdvancedSearch = !showAdvancedSearch" | |
| > | |
| <i class="fas fa-sliders-h mr-2"></i> Filters | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Advanced Search Panel --> | |
| <div | |
| class="bg-white border-b border-slate-200 px-5 py-4 transition-all duration-300 ease-in-out overflow-hidden" | |
| :style="showAdvancedSearch ? 'max-height: 240px' : 'max-height: 0'" | |
| > | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-5"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">File Type</label> | |
| <select | |
| v-model="filters.fileType" | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" | |
| > | |
| <option value="all">All Files</option> | |
| <option value="documents">Documents</option> | |
| <option value="images">Images</option> | |
| <option value="audio">Audio</option> | |
| <option value="video">Video</option> | |
| <option value="archives">Archives</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Author/Creator</label> | |
| <input | |
| type="text" | |
| v-model="filters.author" | |
| placeholder="Search by author..." | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent placeholder-slate-400" | |
| > | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Size Range</label> | |
| <div class="flex items-center space-x-3"> | |
| <input | |
| type="number" | |
| v-model="filters.sizeMin" | |
| placeholder="Min (KB)" | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent placeholder-slate-400" | |
| > | |
| <span class="text-sm text-slate-400">to</span> | |
| <input | |
| type="number" | |
| v-model="filters.sizeMax" | |
| placeholder="Max (KB)" | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent placeholder-slate-400" | |
| > | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Date Modified</label> | |
| <select | |
| v-model="filters.dateRange" | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" | |
| > | |
| <option value="all">Any Time</option> | |
| <option value="today">Today</option> | |
| <option value="week">This Week</option> | |
| <option value="month">This Month</option> | |
| <option value="year">This Year</option> | |
| <option value="custom">Custom Range</option> | |
| </select> | |
| </div> | |
| <div v-if="filters.dateRange === 'custom'" class="md:col-span-3"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">From</label> | |
| <input | |
| type="date" | |
| v-model="filters.dateFrom" | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" | |
| > | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">To</label> | |
| <input | |
| type="date" | |
| v-model="filters.dateTo" | |
| class="w-full px-4 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Table Header --> | |
| <div class="bg-white border-b border-slate-200 px-5 py-3"> | |
| <div class="grid grid-cols-12 gap-4 text-xs font-medium text-slate-500 uppercase tracking-wider"> | |
| <div class="col-span-5 flex items-center"> | |
| <input | |
| type="checkbox" | |
| class="mr-3 h-4 w-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500" | |
| @change="toggleSelectAll" | |
| :checked="selectedFiles.length === filteredFiles.length && filteredFiles.length > 0" | |
| > | |
| <span | |
| class="cursor-pointer flex items-center hover:text-slate-700 transition-colors" | |
| @click="sortBy('name')" | |
| > | |
| Name | |
| <i | |
| class="fas ml-1" | |
| :class="{ | |
| 'fa-sort': activeSort !== 'name', | |
| 'fa-sort-up': activeSort === 'name' && sortDirection === 'asc', | |
| 'fa-sort-down': activeSort === 'name' && sortDirection === 'desc' | |
| }" | |
| ></i> | |
| </span> | |
| </div> | |
| <div | |
| class="col-span-2 cursor-pointer flex items-center hover:text-slate-700 transition-colors" | |
| @click="sortBy('author')" | |
| > | |
| <span>Author</span> | |
| <i | |
| class="fas ml-1" | |
| :class="{ | |
| 'fa-sort': activeSort !== 'author', | |
| 'fa-sort-up': activeSort === 'author' && sortDirection === 'asc', | |
| 'fa-sort-down': activeSort === 'author' && sortDirection === 'desc' | |
| }" | |
| ></i> | |
| </div> | |
| <div | |
| class="col-span-2 cursor-pointer flex items-center hover:text-slate-700 transition-colors" | |
| @click="sortBy('type')" | |
| > | |
| <span>Type</span> | |
| <i | |
| class="fas ml-1" | |
| :class="{ | |
| 'fa-sort': activeSort !== 'type', | |
| 'fa-sort-up': activeSort === 'type' && sortDirection === 'asc', | |
| 'fa-sort-down': activeSort === 'type' && sortDirection === 'desc' | |
| }" | |
| ></i> | |
| </div> | |
| <div | |
| class="col-span-2 cursor-pointer flex items-center justify-end hover:text-slate-700 transition-colors" | |
| @click="sortBy('size')" | |
| > | |
| <span>Size</span> | |
| <i | |
| class="fas ml-1" | |
| :class="{ | |
| 'fa-sort': activeSort !== 'size', | |
| 'fa-sort-up': activeSort === 'size' && sortDirection === 'asc', | |
| 'fa-sort-down': activeSort === 'size' && sortDirection === 'desc' | |
| }" | |
| ></i> | |
| </div> | |
| <div | |
| class="col-span-1 cursor-pointer flex items-center justify-end hover:text-slate-700 transition-colors" | |
| @click="sortBy('modified')" | |
| > | |
| <span>Modified</span> | |
| <i | |
| class="fas ml-1" | |
| :class="{ | |
| 'fa-sort': activeSort !== 'modified', | |
| 'fa-sort-up': activeSort === 'modified' && sortDirection === 'asc', | |
| 'fa-sort-down': activeSort === 'modified' && sortDirection === 'desc' | |
| }" | |
| ></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File List --> | |
| <div class="flex-1 overflow-y-auto bg-white"> | |
| <div v-if="filteredFiles.length === 0" class="flex flex-col items-center justify-center h-64 text-slate-400"> | |
| <i class="fas fa-folder-open text-5xl mb-4 opacity-30"></i> | |
| <p class="text-lg font-medium text-slate-500">No files found</p> | |
| <p class="text-sm mt-1 text-slate-400">Try adjusting your search or filters</p> | |
| </div> | |
| <template v-else> | |
| <div | |
| v-for="file in filteredFiles" | |
| :key="file.id" | |
| class="file-row px-5 py-3 border-b border-slate-100 grid grid-cols-12 gap-4 text-sm items-center transition-all" | |
| :class="{'highlight': selectedFiles.includes(file)}" | |
| @dblclick="openFile(file)" | |
| > | |
| <div class="col-span-5 flex items-center truncate"> | |
| <input | |
| type="checkbox" | |
| class="mr-3 h-4 w-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500" | |
| :checked="selectedFiles.includes(file)" | |
| @change="toggleFileSelection(file, $event)" | |
| > | |
| <div class="w-8 h-8 rounded-md flex items-center justify-center mr-2" | |
| :class="{'bg-indigo-50': selectedFiles.includes(file), 'bg-slate-100': !selectedFiles.includes(file)}"> | |
| <i :class="getFileIcon(file)" class="text-slate-600"></i> | |
| </div> | |
| <div class="truncate"> | |
| <div class="font-medium text-slate-800 truncate">{{ file.name }}</div> | |
| <div class="text-xs text-slate-500 truncate">{{ file.path || currentLocation.name }}</div> | |
| </div> | |
| <i v-if="file.isFavorite" class="fas fa-star text-yellow-400 ml-2 text-xs"></i> | |
| </div> | |
| <div class="col-span-2 text-slate-600 truncate"> | |
| <span class="inline-flex items-center"> | |
| <i class="fas fa-user-circle mr-2 text-slate-400"></i> | |
| {{ file.author || 'Unknown' }} | |
| </span> | |
| </div> | |
| <div class="col-span-2 text-slate-600 truncate text-sm">{{ file.type }}</div> | |
| <div class="col-span-2 text-slate-600 text-right text-sm">{{ formatFileSize(file.size) }}</div> | |
| <div class="col-span-1 text-slate-600 text-right text-sm">{{ formatDate(file.modified) }}</div> | |
| </div> | |
| </template> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="bg-slate-50 border-t border-slate-200 px-5 py-2.5 text-xs text-slate-500 flex justify-between"> | |
| <div> | |
| <span v-if="selectedFiles.length > 0" class="font-medium">{{ selectedFiles.length }} selected</span> | |
| <span v-else>{{ filteredFiles.length }} items</span> | |
| </div> | |
| <div class="flex items-center space-x-5"> | |
| <div class="flex items-center"> | |
| <span class="mr-2">Index status:</span> | |
| <span v-if="isIndexing" class="text-indigo-600 font-medium flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-indigo-500 mr-1.5 animate-pulse"></span> | |
| Running | |
| </span> | |
| <span v-else class="text-slate-400">Idle</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-circle text-xs mr-1.5" :class="{ | |
| 'text-emerald-500': performanceRating === 'fast', | |
| 'text-amber-500': performanceRating === 'normal', | |
| 'text-rose-500': performanceRating === 'slow' | |
| }"></i> | |
| <span>{{ performanceRating }} performance</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delete Confirmation Modal --> | |
| <div v-if="showDeleteConfirm" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm"> | |
| <div class="bg-white rounded-xl modal-shadow p-6 w-96"> | |
| <div class="flex items-start mb-5"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle text-red-500"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-slate-800">Delete Files</h3> | |
| <p class="mt-1 text-sm text-slate-500"> | |
| Are you sure you want to delete {{ selectedFiles.length }} file(s)? This action cannot be undone. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button | |
| type="button" | |
| class="px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" | |
| @click="showDeleteConfirm = false" | |
| > | |
| Cancel | |
| </button> | |
| <button | |
| type="button" | |
| class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" | |
| @click="deleteSelectedFiles" | |
| > | |
| Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| class Reactive { | |
| constructor(data) { | |
| this.data = data; | |
| this.subscribers = []; | |
| } | |
| get(prop) { | |
| return this.data[prop]; | |
| } | |
| set(prop, value) { | |
| this.data[prop] = value; | |
| this.notify(); | |
| } | |
| subscribe(callback) { | |
| this.subscribers.push(callback); | |
| } | |
| notify() { | |
| this.subscribers.forEach(callback => callback(this.data)); | |
| } | |
| } | |
| function bindInput(input, state, property) { | |
| input.value = state.get(property); | |
| input.addEventListener('input', (e) => { | |
| state.set(property, e.target.value); | |
| }); | |
| state.subscribe((data) => { | |
| input.value = data[property]; | |
| }); | |
| } | |
| function renderList(container, template, data) { | |
| container.innerHTML = ''; | |
| data.forEach((item, index) => { | |
| const element = document.createElement('div'); | |
| element.innerHTML = template(item, index); | |
| container.appendChild(element.firstChild); | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const state = new Reactive({ | |
| sidebarSearch: '', | |
| currentLocation: { id: 1, name: 'Home', icon: 'fas fa-home' }, | |
| indexedCount: 2847, | |
| lastIndexed: '5 minutes ago', | |
| searchQuery: '', | |
| showAdvancedSearch: false, | |
| isIndexing: false, | |
| activeSort: 'name', | |
| sortDirection: 'asc', | |
| selectedFiles: [], | |
| showDeleteConfirm: false, | |
| filters: { | |
| fileType: 'all', | |
| author: '', | |
| sizeMin: '', | |
| sizeMax: '', | |
| dateRange: 'all', | |
| dateFrom: '', | |
| dateTo: '' | |
| }, | |
| performanceRating: 'fast', | |
| locations: [ | |
| { id: 1, name: 'Home', icon: 'fas fa-home' }, | |
| { id: 2, name: 'Documents', icon: 'fas fa-folder' }, | |
| { id: 3, name: 'Downloads', icon: 'fas fa-download' }, | |
| { id: 4, name: 'Pictures', icon: 'fas fa-image' }, | |
| { id: 5, name: 'Music', icon: 'fas fa-music' }, | |
| { id: 6, name: 'Videos', icon: 'fas fa-video' }, | |
| { id: 7, name: 'Desktop', icon: 'fas fa-desktop' } | |
| ], | |
| files: [ | |
| { id: 1, name: 'Project Proposal.pdf', path: 'Documents/Projects', author: 'John Doe', type: 'PDF Document', size: 2456, modified: '2023-06-15T14:30:00', isFavorite: false }, | |
| { id: 2, name: 'Budget 2023.xlsx', path: 'Documents/Finance', author: 'Jane Smith', type: 'Excel Spreadsheet', size: 4532, modified: '2023-05-22T09:45:00', isFavorite: true }, | |
| { id: 3, name: 'Team Photo.jpg', path: 'Pictures/Work', author: 'Mike Johnson', type: 'JPEG Image', size: 3245, modified: '2023-06-10T11:20:00', isFavorite: false }, | |
| { id: 4, name: 'Meeting Notes.docx', path: 'Documents/Meetings', author: 'Sarah Wilson', type: 'Word Document', size: 876, modified: '2023-06-14T16:10:00', isFavorite: false }, | |
| { id: 5, name: 'Presentation.pptx', path: 'Documents/Presentations', author: 'David Brown', type: 'PowerPoint', size: 6543, modified: '2023-06-12T13:30:00', isFavorite: false }, | |
| { id: 6, name: 'Project Backup.zip', path: 'Downloads', author: 'Emma Davis', type: 'ZIP Archive', size: 24567, modified: '2023-06-09T18:05:00', isFavorite: false }, | |
| { id: 7, name: 'Interview.mp3', path: 'Music/Recordings', author: 'James Miller', type: 'MP3 Audio', size: 12345, modified: '2023-05-30T10:15:00', isFavorite: false }, | |
| { id: 8, name: 'Tutorial.mp4', path: 'Videos/Learning', author: 'Olivia Wilson', type: 'MP4 Video', size: 45678, modified: '2023-05-28T14:20:00', isFavorite: false }, | |
| { id: 9, name: 'Configuration.ini', path: 'System', author: 'System', type: 'Configuration File', size: 23, modified: '2023-06-13T12:40:00', isFavorite: false }, | |
| { id: 10, name: 'Code Repository', path: 'Documents/Projects', author: 'John Doe', type: 'Folder', size: 10245, modified: '2023-06-05T08:30:00', isFavorite: true } | |
| ] | |
| }); | |
| function computedFilteredLocations() { | |
| const search = state.get('sidebarSearch').toLowerCase(); | |
| return state.get('locations').filter(loc => | |
| loc.name.toLowerCase().includes(search) | |
| ); | |
| } | |
| function computedFilteredFiles() { | |
| let files = [...state.get('files')]; | |
| const filters = state.get('filters'); | |
| const search = state.get('searchQuery').toLowerCase(); | |
| const activeSort = state.get('activeSort'); | |
| const sortDirection = state.get('sortDirection'); | |
| if (search) { | |
| files = files.filter(file => | |
| file.name.toLowerCase().includes(search) || | |
| file.type.toLowerCase().includes(search) || | |
| (file.author && file.author.toLowerCase().includes(search)) | |
| ); | |
| } | |
| if (filters.fileType !== 'all') { | |
| const typeMap = { | |
| 'documents': ['PDF Document', 'Word Document', 'Excel Spreadsheet', 'PowerPoint'], | |
| 'images': ['JPEG Image', 'PNG Image', 'GIF Image'], | |
| 'audio': ['MP3 Audio', 'WAV Audio'], | |
| 'video': ['MP4 Video', 'MOV Video'], | |
| 'archives': ['ZIP Archive', 'RAR Archive'] | |
| }; | |
| const types = typeMap[filters.fileType] || []; | |
| files = files.filter(file => | |
| types.includes(file.type) || | |
| (filters.fileType === 'documents' && file.type.includes('Document')) | |
| ); | |
| } | |
| if (filters.author) { | |
| const authorSearch = filters.author.toLowerCase(); | |
| files = files.filter(file => | |
| file.author && file.author.toLowerCase().includes(authorSearch) | |
| ); | |
| } | |
| if (filters.sizeMin || filters.sizeMax) { | |
| const min = filters.sizeMin ? parseInt(filters.sizeMin) : 0; | |
| const max = filters.sizeMax ? parseInt(filters.sizeMax) : Infinity; | |
| files = files.filter(file => file.size >= min && file.size <= max); | |
| } | |
| if (filters.dateRange && filters.dateRange !== 'all') { | |
| const now = new Date(); | |
| let fromDate = new Date(); | |
| switch (filters.dateRange) { | |
| case 'today': | |
| fromDate.setHours(0, 0, 0, 0); | |
| break; | |
| case 'week': | |
| fromDate.setDate(fromDate.getDate() - 7); | |
| break; | |
| case 'month': | |
| fromDate.setMonth(fromDate.getMonth() - 1); | |
| break; | |
| case 'year': | |
| fromDate.setFullYear(fromDate.getFullYear() - 1); | |
| break; | |
| case 'custom': | |
| if (filters.dateFrom) { | |
| fromDate = new Date(filters.dateFrom); | |
| } | |
| break; | |
| } | |
| files = files.filter(file => { | |
| const fileDate = new Date(file.modified); | |
| return fileDate >= fromDate; | |
| }); | |
| if (filters.dateRange === 'custom' && filters.dateTo) { | |
| const toDate = new Date(filters.dateTo); | |
| toDate.setHours(23, 59, 59, 999); | |
| files = files.filter(file => { | |
| const fileDate = new Date(file.modified); | |
| return fileDate <= toDate; | |
| }); | |
| } | |
| } | |
| files.sort((a, b) => { | |
| let aVal, bVal; | |
| switch (activeSort) { | |
| case 'name': | |
| aVal = a.name.toLowerCase(); | |
| bVal = b.name.toLowerCase(); | |
| break; | |
| case 'author': | |
| aVal = a.author ? a.author.toLowerCase() : ''; | |
| bVal = b.author ? b.author.toLowerCase() : ''; | |
| break; | |
| case 'type': | |
| aVal = a.type.toLowerCase(); | |
| bVal = b.type.toLowerCase(); | |
| break; | |
| case 'size': | |
| aVal = a.size; | |
| bVal = b.size; | |
| break; | |
| case 'modified': | |
| aVal = new Date(a.modified); | |
| bVal = new Date(b.modified); | |
| break; | |
| default: | |
| aVal = a.name.toLowerCase(); | |
| bVal = b.name.toLowerCase(); | |
| } | |
| if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1; | |
| if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1; | |
| return 0; | |
| }); | |
| return files; | |
| } | |
| function formatFileSize(bytes) { | |
| if (bytes === 0) return '0 Bytes'; | |
| if (typeof bytes === 'string') bytes = parseInt(bytes); | |
| const k = 1024; | |
| const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; | |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); | |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; | |
| } | |
| function formatDate(dateString) { | |
| const date = new Date(dateString); | |
| return date.toLocaleDateString('en-US', {month: 'short', day: 'numeric'}); | |
| } | |
| function getFileIcon(file) { | |
| if (file.type === 'Folder') return 'fas fa-folder folder-icon'; | |
| const extension = file.name.split('.').pop().toLowerCase(); | |
| const iconMap = { | |
| 'pdf': 'fas fa-file-pdf file-icon', | |
| 'docx': 'fas fa-file-word file-icon', | |
| 'xlsx': 'fas fa-file-excel file-icon', | |
| 'pptx': 'fas fa-file-powerpoint file-icon', | |
| 'jpg': 'fas fa-file-image file-icon', | |
| 'jpeg': 'fas fa-file-image file-icon', | |
| 'png': 'fas fa-file-image file-icon', | |
| 'gif': 'fas fa-file-image file-icon', | |
| 'mp3': 'fas fa-file-audio file-icon', | |
| 'wav': 'fas fa-file-audio file-icon', | |
| 'mp4': 'fas fa-file-video file-icon', | |
| 'mov': 'fas fa-file-video file-icon', | |
| 'zip': 'fas fa-file-archive file-icon', | |
| 'rar': 'fas fa-file-archive file-icon', | |
| 'ini': 'fas fa-file-code file-icon' | |
| }; | |
| return iconMap[extension] || 'fas fa-file file-icon'; | |
| } | |
| function toggleIndexing() { | |
| state.set('isIndexing', !state.get('isIndexing')); | |
| if (state.get('isIndexing')) { | |
| let count = state.get('indexedCount'); | |
| const interval = setInterval(() => { | |
| count += Math.floor(Math.random() * 10); | |
| state.set('indexedCount', count); | |
| state.set('lastIndexed', 'Just now'); | |
| if (!state.get('isIndexing')) { | |
| clearInterval(interval); | |
| } | |
| }, 3000); | |
| setTimeout(() => { | |
| if (Math.random() > 0.7) { | |
| state.set('isIndexing', false); | |
| } | |
| }, 15000); | |
| } | |
| } | |
| function refreshFiles() { | |
| state.set('performanceRating', ['fast', 'normal', 'slow'][Math.floor(Math.random() * 3)]); | |
| if (Math.random() > 0.7) { | |
| const newFiles = [...state.get('files')]; | |
| if (newFiles.length > 5 && Math.random() > 0.5) { | |
| newFiles.splice(Math.floor(Math.random() * newFiles.length), 1); | |
| } else { | |
| const authors = ['John Doe', 'Jane Smith', 'Mike Johnson', 'Sarah Wilson', 'Emma Davis']; | |
| const newFile = { | |
| id: Math.max(...newFiles.map(f => f.id)) + 1, | |
| name: ['New Document.docx', 'Report.pdf', 'Image.jpg', 'Archive.zip', 'Data.xlsx'][Math.floor(Math.random() * 5)], | |
| path: ['Documents', 'Downloads', 'Pictures', 'Music', 'Videos'][Math.floor(Math | |
| </html> |