mejora en la apriencia del cloud.
This commit is contained in:
Pablinux
@@ -29,11 +29,11 @@
|
||||
function modal(url) {
|
||||
var array = url.split(".");
|
||||
var tipo = array.pop();
|
||||
var contentHTML = ''; // Variable para almacenar el HTML a inyectar
|
||||
|
||||
if (modo_img(tipo)) {
|
||||
//$("#img").attr("src","files/"+url);
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="files/${url}">`;
|
||||
contentHTML = `<img class="img-fluid rounded" src="files/${url}" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">`;
|
||||
} else if (modo_video(tipo)) {
|
||||
//var alto = window.innerHeight;
|
||||
var anch = window.innerWidth;
|
||||
var porc = 10;
|
||||
if (anch > 1400) {
|
||||
@@ -47,192 +47,301 @@
|
||||
} else if (anch > 576) {
|
||||
porc = 35;
|
||||
}
|
||||
//console.log("Ancho Original: "+anch+", Alto Original: "+alto);
|
||||
//console.log("Ancho -10%: "+(anch-(anch * porc/100))+", Alto: "+alto);
|
||||
var ctrl_video = `
|
||||
<video id="rep-video" width="${anch - (anch * porc / 100)}" controls preload="auto">
|
||||
contentHTML = `
|
||||
<video id="rep-video" width="${anch - (anch * porc / 100)}" controls preload="auto" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||||
<source src="files/${url}" type="video/${tipo}">
|
||||
</video>`;
|
||||
document.getElementById("data").innerHTML = ctrl_video;
|
||||
} else if (modo_music(tipo)) {
|
||||
var ctrl_audio = `<div class="text-center "><img src="img/Music-icon.png">
|
||||
<video controls preload="auto" id="ctrl_audio">
|
||||
contentHTML = `<div class="text-center">
|
||||
<img src="img/Music-icon.png" style="width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-bottom: 20px;">
|
||||
<video controls preload="auto" id="ctrl_audio" style="width: 100%; border-radius: 15px;">
|
||||
<source src="files/${url}" type="audio/${tipo}">
|
||||
</video></div>`;
|
||||
document.getElementById("data").innerHTML = ctrl_audio;
|
||||
} else if (modo_pdf(tipo)) { // *** NUEVA LÓGICA PARA PDF ***
|
||||
// Usamos un iframe para incrustar el PDF. El navegador lo renderizará.
|
||||
// Se añade estilo para que el iframe ocupe el espacio disponible y tenga un buen aspecto.
|
||||
contentHTML = `
|
||||
<div style="width: 100%; height: 60vh;"> <iframe src="files/${url}" style="width: 100%; height: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
||||
Este navegador no soporta PDFs incrustados. Puedes descargarlo <a href="files/${url}">aquí</a>.
|
||||
</iframe>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="img/desc256.png">`;
|
||||
contentHTML = `<img class="img-fluid rounded" src="img/desc256.png" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">`;
|
||||
}
|
||||
document.getElementById("titulo").innerHTML = `Descargar: <a href="files/${url}">${url}</a>`;
|
||||
|
||||
document.getElementById("data").innerHTML = contentHTML; // Inyecta el HTML generado
|
||||
document.getElementById("titulo").innerHTML = `<i class="fas fa-download me-2"></i>Descargar: <a href="files/${url}" style="color: #667eea; text-decoration: none;">${url}</a>`;
|
||||
$("#myModal").modal({ backdrop: true });
|
||||
}
|
||||
|
||||
function modo_img(file) {
|
||||
var tipoImg = ["jpg", "jpeg", "png","gif", "bmp", "tiff", "svg", "webp", "ico", "psd", "ai", "eps", "raw", "cr2", "nef", "orf", "sr2", "rw2", "dng", "arw", "3fr", "dcr", "kdc", "erf", "mrw", "pef", "raf", "x3f", "srw", "rwl", "r3d", "rwz", "z6ii", "z5", "drf", "k25", "bay", "cap", "iiq", "fff", "mef", "mos", "crw", "erf", "kdc", "dcs", "gpr", "mef", "mos", "nef", "nrw", "orf", "raw", "rw2", "rwl", "sr2", "srf", "x3f"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
var tipoImg = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg", "webp", "ico", "psd", "ai", "eps", "raw", "cr2", "nef", "orf", "sr2", "rw2", "dng", "arw", "3fr", "dcr", "kdc", "erf", "mrw", "pef", "raf", "x3f", "srw", "rwl", "r3d", "rwz", "z6ii", "z5", "drf", "k25", "bay", "cap", "iiq", "fff", "mef", "mos", "crw", "erf", "kdc", "dcs", "gpr", "mef", "mos", "nef", "nrw", "orf", "raw", "rw2", "rwl", "sr2", "srf", "x3f"];
|
||||
return tipoImg.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
function modo_video(file) {
|
||||
var tipoImg = ["mp4", "mpg", "webm","avi", "mkv", "mov", "wmv", "flv", "3gp", "m4v"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
console.log(item);
|
||||
if (file == item) {
|
||||
//console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
var tipoVideo = ["mp4", "mpg", "webm", "avi", "mkv", "mov", "wmv", "flv", "3gp", "m4v"];
|
||||
return tipoVideo.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
function modo_music(file) {
|
||||
var tipoImg = ["mp3", "acc", "wav", "wma", "ogg", "m4a"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
var tipoMusic = ["mp3", "acc", "wav", "wma", "ogg", "m4a"];
|
||||
return tipoMusic.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
// *** NUEVA FUNCIÓN PARA IDENTIFICAR PDF ***
|
||||
function modo_pdf(file) {
|
||||
var tipoPdf = ["pdf"];
|
||||
return tipoPdf.includes(file.toLowerCase());
|
||||
}
|
||||
|
||||
// --- CÓDIGO DE BÚSQUEDA ---
|
||||
$(document).ready(function() {
|
||||
$('form.search-container').submit(function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('#searchInput').on('keyup', function() {
|
||||
var searchText = $(this).val().toLowerCase();
|
||||
$('#filesTableBody tr').each(function() {
|
||||
var fileName = $(this).find('.file-name').text().toLowerCase();
|
||||
if (fileName.includes(searchText)) {
|
||||
$(this).show();
|
||||
} else {
|
||||
$(this).hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// --- CÓDIGO PARA LA SUBIDA AJAX Y MODAL ---
|
||||
const uploadForm = document.getElementById('uploadForm');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const messageModal = document.getElementById('messageModal');
|
||||
const modalTitle = document.getElementById('modalTitleMessage');
|
||||
const modalMessage = document.getElementById('modalBodyMessage');
|
||||
const modalCloseButton = document.getElementById('modalCloseButton');
|
||||
|
||||
uploadForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
const submitButton = this.querySelector('input[type="submit"]');
|
||||
submitButton.disabled = true;
|
||||
submitButton.value = 'Subiendo...';
|
||||
|
||||
fetch(this.action, {
|
||||
method: this.method,
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(errorData => {
|
||||
throw new Error(errorData.message || 'Error en la respuesta del servidor');
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
modalTitle.textContent = '¡Subida Exitosa!';
|
||||
modalMessage.textContent = data.message;
|
||||
} else {
|
||||
modalTitle.textContent = 'Error en la Subida';
|
||||
modalMessage.textContent = data.message || 'Ocurrió un error desconocido al subir el archivo.';
|
||||
}
|
||||
$('#messageModal').modal('show');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error al subir el archivo:', error);
|
||||
modalTitle.textContent = 'Error de Conexión';
|
||||
modalMessage.textContent = 'No se pudo conectar con el servidor o hubo un error inesperado: ' + error.message;
|
||||
$('#messageModal').modal('show');
|
||||
})
|
||||
.finally(() => {
|
||||
submitButton.disabled = false;
|
||||
submitButton.value = '📤 SUBIR ARCHIVO';
|
||||
fileInput.value = '';
|
||||
});
|
||||
});
|
||||
|
||||
$('#messageModal').on('hidden.bs.modal', function (e) {
|
||||
// Puedes agregar lógica aquí, por ejemplo, recargar la página
|
||||
// para que la lista de archivos se actualice automáticamente.
|
||||
// window.location.reload();
|
||||
// O mejor: realizar otra solicitud AJAX para obtener la lista actualizada de archivos.
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const elements = document.querySelectorAll('.upload-card, .files-card');
|
||||
elements.forEach((el, index) => {
|
||||
el.style.animationDelay = `${index * 0.2}s`;
|
||||
el.classList.add('animate-fadeInUp');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ENCABEZADO O MENU --->
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand navbar-dark navbar-custom">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="navbar-brand dropdown-toggle" href="#">
|
||||
<img src="img/favicon_sigma/android-chrome-192x192.png" alt="" width="36" height="36">
|
||||
<img src="img/favicon_sigma/android-chrome-192x192.png" alt="Cloud SIGMA" width="36" height="36">
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<ul>
|
||||
<li class="user-header">
|
||||
<img src="img/usuario.jpeg" class="img-circle" alt="User Image">
|
||||
<p>
|
||||
ID# <span id="usr_id">8</span> -
|
||||
Usuario: <span id="usr_nom">PABLO FARIAS</span><br>
|
||||
<small>Miembro desde: <span id="usr_reg">2022-02-18 23:39:00</span></small>
|
||||
</p>
|
||||
<li class="user-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Seguidores</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">UID: 64b06b022c7b9</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Amigos</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</li>
|
||||
<li class="user-footer">
|
||||
<div class="pull-left">
|
||||
<a href="#" class="btn btn-default btn-flat">Perfil</a>
|
||||
<div class="user-header">
|
||||
<img src="img/usuario.jpeg" class="img-circle" alt="User Image">
|
||||
<p>
|
||||
<strong>ID# <span id="usr_id">8</span></strong><br>
|
||||
<strong>Usuario: <span id="usr_nom">PABLO FARIAS</span></strong><br>
|
||||
<small>Miembro desde: <span id="usr_reg">2022-02-18 23:39:00</span></small>
|
||||
</p>
|
||||
</div>
|
||||
<div class="user-body">
|
||||
<div class="row text-center">
|
||||
<div class="col-4">
|
||||
<a href="#"><i class="fas fa-users me-1"></i>Seguidores</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a href="../cloud" class="btn btn-default btn-flat">Cerrar Session</a>
|
||||
<div class="col-4">
|
||||
<a href="#"><i class="fas fa-id-card me-1"></i>UID: 64b06b022c7b9</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="col-4">
|
||||
<a href="#"><i class="fas fa-user-friends me-1"></i>Amigos</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-footer">
|
||||
<a href="#" class="btn"><i class="fas fa-user me-1"></i>Perfil</a>
|
||||
<a href="../cloud" class="btn"><i class="fas fa-sign-out-alt me-1"></i>Cerrar Sesión</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Buscar Archivo" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Buscar</button>
|
||||
|
||||
<form class="d-flex search-container">
|
||||
<input class="form-control me-2" type="search" placeholder="🔍 Buscar Archivo" aria-label="Search" id="searchInput">
|
||||
<button class="btn btn-search" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- formulario para subir archivos --->
|
||||
<div class="container">
|
||||
<div class="row upload">
|
||||
<div class="col-lg mt-2">
|
||||
<label for="basic-url" class="form-label info">SIGMA Cloud</label>
|
||||
<form class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<div class="input-group">
|
||||
<input type="file" name="file_toUpload" class="form-control" />
|
||||
<input type="submit" class="btn btn-outline-secondary" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- RENDER formulario para subir archivos --->
|
||||
<div class="col-lg mt-2 files">
|
||||
<div class="row">
|
||||
<table class="table table-dark">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nombre</th>
|
||||
<th>Fecha</th>
|
||||
<th>Accion</th>
|
||||
</tr>
|
||||
<% for (i in data) { %>
|
||||
<tr>
|
||||
<td><span>
|
||||
<%= data[i].indice%>
|
||||
</span></td>
|
||||
<td>
|
||||
<!--a href="<%= data[i].link %>"><%= data[i].archivo %></a-->
|
||||
<span>
|
||||
<%= data[i].archivo %>
|
||||
</span>
|
||||
</td>
|
||||
<td>fecha</td>
|
||||
<td>
|
||||
<button type="button" name="button" onclick="modal('<%= data[i].archivo %>')">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
</table>
|
||||
<div class="container main-container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="upload-card">
|
||||
<h1 class="upload-title">
|
||||
<i class="fas fa-cloud-upload-alt me-3"></i>SIGMA Cloud
|
||||
</h1>
|
||||
<form id="uploadForm" class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<div class="input-group">
|
||||
<input type="file" name="file_toUpload" class="form-control file-input" id="fileInput" />
|
||||
<input type="submit" class="btn btn-upload" value="📤 SUBIR ARCHIVO" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDITAR DATOS Y VISUALIZAR archivos --->
|
||||
<div class="modal fade" tabindex="-1" id="myModal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div id="titulo">URL</div>
|
||||
<button class="close" data-dismiss="modal" aria-label="cerar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="data">
|
||||
<!--img class="img-fluid rounded" id="img" src="" alt=""-->
|
||||
<div class="col-lg-12">
|
||||
<div class="files-card">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><i class="fas fa-hashtag me-2"></i>ID</th>
|
||||
<th><i class="fas fa-file me-2"></i>Nombre</th>
|
||||
<th><i class="fas fa-calendar me-2"></i>Fecha</th>
|
||||
<th><i class="fas fa-cogs me-2"></i>Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="filesTableBody"> <% for (i in data) { %>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge bg-primary rounded-pill">
|
||||
<%= data[i].indice %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="file-name">
|
||||
<i class="fas fa-file-alt me-2"></i>
|
||||
<%= data[i].archivo %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted">
|
||||
<i class="fas fa-clock me-1"></i>
|
||||
fecha
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn-action" onclick="modal('<%= data[i].archivo %>')" title="Ver archivo">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="delete" class="fas fa-trash fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="edit" class="fas fa-pencil fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="compartir" class="fa-solid fa-share-nodes"></i>
|
||||
</button>
|
||||
<button class="btn btn-warnigb" type="button" data-dismiss="modal"> Aceptar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="myModal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="titulo">Archivo</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Cerrar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="data" class="text-center">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" type="button" title="Eliminar">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="Editar">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="Compartir">
|
||||
<i class="fas fa-share-nodes"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" data-dismiss="modal">
|
||||
<i class="fas fa-check me-2"></i>Aceptar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" tabindex="-1" id="messageModal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalTitleMessage"></h5>
|
||||
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Cerrar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="modalBodyMessage"></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="modalCloseButton">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user