templates/shared_with_me.html

{% extends 'base.html' %}

{% block title %}Доступные мне файлы{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <nav aria-label="breadcrumb" class="breadcrumb-container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">Доступные мне файлы</li>
            </ol>
        </nav>
    </div>
    <div class="col-md-4">
        <form action="{{ url_for('search') }}" method="get" class="search-form">
            <div class="search-container">
                <input type="text" name="query" class="form-control search-input" placeholder="Поиск файлов...">
                <button type="submit" class="search-button"><i class="fas fa-search"></i></button>
            </div>
        </form>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Доступные мне файлы</h5>
            </div>
            <div class="card-body">
                {% if files %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Имя</th>
                                <th>Владелец</th>
                                <th>Тип</th>
                                <th>Права доступа</th>
                                <th>Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for file in files %}
                            <tr>
                                <td>
                                    {% if file.file_type in ['image', 'video', 'audio'] %}
                                    <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#mediaModal" 
                                       data-file-type="{{ file.file_type }}" 
                                       data-file-path="{{ url_for('download_file', file_id=file.id) }}" 
                                       data-file-name="{{ file.original_filename }}">
                                        <i class="fas fa-file text-primary"></i> {{ file.original_filename }}
                                    </a>
                                    {% else %}
                                    <i class="fas fa-file text-primary"></i> {{ file.original_filename }}
                                    {% endif %}
                                </td>
                                <td>{{ file.owner }}</td>
                                <td>
                                    {% if file.file_type == 'image' %}
                                        <i class="fas fa-image text-info"></i> Изображение
                                    {% elif file.file_type == 'video' %}
                                        <i class="fas fa-video text-danger"></i> Видео
                                    {% elif file.file_type == 'audio' %}
                                        <i class="fas fa-music text-success"></i> Аудио
                                    {% elif file.file_type == 'text' %}
                                        <i class="fas fa-file-alt text-secondary"></i> Текст
                                    {% else %}
                                        <i class="fas fa-file text-secondary"></i> Файл
                                    {% endif %}
                                </td>
                                <td>{{ file.access_type }}</td>
                                <td>
                                    <div class="d-flex gap-2">
                                        <a href="{{ url_for('download_file', file_id=file.id) }}" class="btn btn-sm btn-primary rounded-circle" title="Скачать">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        {% if file.file_type in ['text', 'code', 'document'] or file.original_filename.endswith(('.txt', '.html', '.css', '.js', '.py', '.md', '.json', '.xml', '.csv')) %}
                                            {% if file.access_type == 'write' %}
                                            <button class="btn btn-sm btn-info rounded-circle" title="Редактировать" onclick="openTextEditor('{{ file.id }}', '{{ file.original_filename }}', true)">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            {% else %}
                                            <button class="btn btn-sm btn-secondary rounded-circle" title="Просмотреть" onclick="openTextEditor('{{ file.id }}', '{{ file.original_filename }}', false)">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-share-alt fa-4x text-muted mb-3"></i>
                    <h5>У вас нет доступных файлов</h5>
                    <p>Когда другие пользователи поделятся с вами файлами, они появятся здесь.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно для редактирования текстовых файлов -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Редактор: <span id="editFileName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <textarea id="editorContent" class="form-control font-monospace" rows="20"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveChanges()">Сохранить</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно для просмотра медиафайлов -->
<div class="modal fade" id="mediaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Просмотр файла: <span id="mediaFileName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <!-- Контейнер для изображения -->
                <img id="imageViewer" class="img-fluid d-none" alt="Просмотр изображения">
                
                <!-- Контейнер для видео -->
                <video id="videoPlayer" class="d-none w-100" controls>
                    Ваш браузер не поддерживает воспроизведение видео.
                </video>
                
                <!-- Контейнер для аудио -->
                <audio id="audioPlayer" class="d-none w-100" controls>
                    Ваш браузер не поддерживает воспроизведение аудио.
                </audio>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const mediaModal = document.getElementById('mediaModal');
    mediaModal.addEventListener('show.bs.modal', function(event) {
        const button = event.relatedTarget;
        const fileType = button.getAttribute('data-file-type');
        const filePath = button.getAttribute('data-file-path');
        const fileName = button.getAttribute('data-file-name');
        
        document.getElementById('mediaFileName').textContent = fileName;
        
        // Скрываем все плееры
        document.getElementById('imageViewer').classList.add('d-none');
        document.getElementById('videoPlayer').classList.add('d-none');
        document.getElementById('audioPlayer').classList.add('d-none');
        
        // Показываем соответствующий плеер
        if (fileType === 'image') {
            const imageViewer = document.getElementById('imageViewer');
            imageViewer.src = filePath;
            imageViewer.classList.remove('d-none');
        } else if (fileType === 'video') {
            const videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.src = filePath;
            videoPlayer.classList.remove('d-none');
        } else if (fileType === 'audio') {
            const audioPlayer = document.getElementById('audioPlayer');
            audioPlayer.src = filePath;
            audioPlayer.classList.remove('d-none');
        }
    });
    
    // Очистка источников при закрытии модального окна
    mediaModal.addEventListener('hidden.bs.modal', function() {
        document.getElementById('imageViewer').src = '';
        document.getElementById('videoPlayer').src = '';
        document.getElementById('audioPlayer').src = '';
    });
});

// Функции для редактирования текстовых файлов
let currentFileId = null;

function openTextEditor(fileId, fileName, canEdit) {
    currentFileId = fileId;
    document.getElementById('editFileName').textContent = fileName;
    
    // Настраиваем интерфейс в зависимости от прав доступа
    const saveButton = document.querySelector('#editModal .modal-footer .btn-primary');
    const textarea = document.getElementById('editorContent');
    
    if (!canEdit) {
        saveButton.style.display = 'none';
        textarea.readOnly = true;
    } else {
        saveButton.style.display = 'block';
        textarea.readOnly = false;
    }
    
    // Загружаем содержимое файла
    fetch(`/get_file_content/${fileId}`)
        .then(response => response.text())
        .then(content => {
            textarea.value = content;
            const editModal = new bootstrap.Modal(document.getElementById('editModal'));
            editModal.show();
        })
        .catch(error => {
            alert('Ошибка при загрузке файла: ' + error);
        });
}

function saveChanges() {
    if (!currentFileId) return;
    
    const content = document.getElementById('editorContent').value;
    
    fetch(`/save_file_content/${currentFileId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ content: content })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Файл успешно сохранен!');
            const editModal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
            editModal.hide();
        } else {
            alert('Ошибка при сохранении файла: ' + data.error);
        }
    })
    .catch(error => {
        alert('Ошибка при сохранении файла: ' + error);
    });
}
</script>
{% endblock %}