|
{% extends "layouts/dashboard.html" %}
|
|
|
|
{% block title %}{% if current_path %}{{ current_path.split('/')[-1] }} - Retoor's Cloud Solutions{% else %}My Files - Retoor's Cloud Solutions{% endif %}{% endblock %}
|
|
|
|
{% block dashboard_head %}
|
|
<link rel="stylesheet" href="/static/css/components/file_browser.css">
|
|
{% endblock %}
|
|
|
|
{% block page_title %}{% if current_path %}{{ current_path.split('/')[-1] }}{% else %}My Files{% endif %}{% endblock %}
|
|
|
|
{% block dashboard_actions %}
|
|
<button class="btn-primary" id="new-folder-btn">+ New</button>
|
|
<button class="btn-outline" id="upload-btn">Upload</button>
|
|
<button class="btn-outline" id="download-selected-btn" disabled>⬇️</button>
|
|
<button class="btn-outline" id="share-selected-btn" disabled>🔗</button>
|
|
<button class="btn-outline" id="delete-selected-btn" disabled>Delete</button>
|
|
{% endblock %}
|
|
|
|
{% block dashboard_content %}
|
|
|
|
{% if success_message %}
|
|
<div class="alert alert-success">
|
|
{{ success_message }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if error_message %}
|
|
<div class="alert alert-error">
|
|
{{ error_message }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<input type="text" class="file-search-bar" placeholder="Search your files..." id="search-bar">
|
|
|
|
<div class="file-list-table">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th><input type="checkbox" id="select-all"></th>
|
|
<th>Name</th>
|
|
<th>Owner</th>
|
|
<th>Last Modified</th>
|
|
<th>Size</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="file-list-body">
|
|
{% if files %}
|
|
{% for item in files %}
|
|
<tr data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}">
|
|
<td><input type="checkbox" class="file-checkbox" data-path="{{ item.path }}" data-is-dir="{{ item.is_dir }}"></td>
|
|
<td>
|
|
{% if item.is_dir %}
|
|
<img src="/static/images/icon-families.svg" alt="Folder Icon" class="file-icon">
|
|
<a href="/files?path={{ item.path }}">{{ item.name }}</a>
|
|
{% else %}
|
|
<img src="/static/images/icon-professionals.svg" alt="File Icon" class="file-icon">
|
|
{% if item.is_editable %}
|
|
<a href="/editor?path={{ item.path }}">{{ item.name }}</a>
|
|
{% elif item.is_viewable %}
|
|
<a href="/viewer?path={{item.path}}">{{ item.name }}</a>
|
|
{% else %}
|
|
{{ item.name }}
|
|
{% endif %}
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ user.email }}</td>
|
|
<td>{{ item.last_modified[:10] }}</td>
|
|
<td>
|
|
{% if item.is_dir %}
|
|
--
|
|
{% else %}
|
|
{{ (item.size / 1024 / 1024)|round(2) }} MB
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
{% if not item.is_dir %}
|
|
<button class="btn-small download-file-btn" data-path="{{ item.path }}">⬇️</button>
|
|
{% endif %}
|
|
<button class="btn-small share-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">🔗</button>
|
|
<button class="btn-small btn-danger delete-file-btn" data-path="{{ item.path }}" data-name="{{ item.name }}">Delete</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" style="text-align: center; padding: 40px;">
|
|
<p>No files found in this directory.</p>
|
|
<button class="btn-primary" id="create-first-folder-btn" style="margin-top: 10px;">Create your first folder</button>
|
|
<button class="btn-outline" id="upload-first-file-btn" style="margin-top: 10px;">Upload a file</button>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="new-folder-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal('new-folder-modal')">×</span>
|
|
<h3>Create New Folder</h3>
|
|
<form action="/files/new_folder" method="post">
|
|
<input type="text" name="folder_name" placeholder="Folder name" required class="form-input">
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-primary">Create</button>
|
|
<button type="button" class="btn-outline" onclick="closeModal('new-folder-modal')">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upload-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal('upload-modal')">×</span>
|
|
<h3>Upload Files</h3>
|
|
<div class="upload-area">
|
|
<input type="file" name="file" multiple class="form-input" id="file-input-multiple" style="display: none;">
|
|
<label for="file-input-multiple" class="btn-outline upload-button">Select Files</label>
|
|
<div id="selected-files-preview" class="selected-files-preview"></div>
|
|
<div id="upload-progress-container" class="upload-progress-container"></div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-primary" id="start-upload-btn" disabled>Upload</button>
|
|
<button type="button" class="btn-outline" onclick="closeModal('upload-modal')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="share-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal('share-modal')">×</span>
|
|
<h3>Share File</h3>
|
|
<p id="share-file-name"></p>
|
|
<div id="share-link-container" style="display: none;">
|
|
<input type="text" id="share-link-input" readonly class="form-input">
|
|
<button class="btn-primary" id="copy-share-link-btn">Copy Link</button>
|
|
<div id="share-links-list" class="share-links-list"></div>
|
|
</div>
|
|
<div id="share-loading">Generating share link...</div>
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-outline" onclick="closeModal('share-modal')">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="delete-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal('delete-modal')">×</span>
|
|
<h3>Confirm Delete</h3>
|
|
<p id="delete-message"></p>
|
|
<form id="delete-form" method="post">
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-danger">Delete</button>
|
|
<button type="button" class="btn-outline" onclick="closeModal('delete-modal')">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/static/js/components/upload.js"></script>
|
|
<script type="module" src="/static/js/main.js"></script>
|
|
{% endblock %}
|