diff --git a/Documents/Wireframe.drawio b/Documents/Wireframe.drawio new file mode 100644 index 00000000..3d6e6477 --- /dev/null +++ b/Documents/Wireframe.drawio @@ -0,0 +1 @@ +7Vtbd9o4EP41PIZjW77gxwVC+5Bue0q3e/ZR2ALrRLZYIxbIr1/JyAZ7RCENBnLxS9Do6m++GY3GSgcN0vWnHM+TLzwmrONY8bqDhh3HsV3Lkn+UZLOVBL67FcxyGutGO8GYPhEt1P1mSxqTRa2h4JwJOq8LI55lJBI1Gc5zvqo3m3JWn3WOZwQIxhFmUPo3jUWipXb5XqriM6GzRE/d83TFBEePs5wvMz1fx0HT4tlWp7gcS7dfJDjmqz0Ruu+gQc652P5K1wPCFLYlbNt+owO11bpzkolTOvhBMAkmvdANPduzQ+9Oj/AfZktSvkKxULEpwVklVJDxHEeqvJIE6KB+IlImS7b8Wbw9UeNbslS9oCowPCGsX0E04IznsirjGVFNRc4fSSmUyFnFU9WUmlCTTCljje5TnokRTilTnPtJ8hhnWIs1wWxHl01zYEZnmZRFEjkiK/sRT2mkp4OwljiRXJD1nkjD/InwlIh8I5vo2lLjm3pxtUcvy9fCZJ9apU1gzelZNfROr/KHVu2JakZAzWOC8ygByobQ1zQa40VS6RpAuMcK2WuuhkzXM+UyuimPHpfz7pTn6aK7KObu87WJBWHxyJoU0+wHWRe41No5pSp7kTQ0oGK/eBpUCPbWy8hUqBElpWk2eyhKQwSo/Gv2npku0ofW+OJDvvQcA11c1C197VkJ07u2XziP9bdt5ahh5QiqzbEMavPCNqw8PK40Rg9gfA7N/Z6e3Nvx0pUVHnXTrXjpctAPq3uW1dkGZ2lbrsnsWtEajKH+JCugOFFsZfu6mnOaiWIlXr/jDeEOpRChMkr9Q4sFn+/2rR+qMLxzD1gTUNPLYe8FDdwDD+BuQt1pBXUY0vw1ZxzHbxD40D8OvMlJtQK8EwDgR/K8Je387QHfCMoq/7HvaIKLAQ9jsvFyMn2r2DecjTxzXxN7GFq9F9KjcoSrAI9gSPSOSI+8C5L+G3vs/fvzaTO6wwPrYfgPDdiTIT904/ADrA0aORn+8IL+3gi/86rczouwb7gd15Qxuyj2MMB8N9hfMs4xYu8C7CHqOcXZTJX6R8/EAgvKFc6hVZ1AXwRY6NaDEy8AgPW6jgcRKw+LZ0fMu3XEnEZUcXXE/JYQa4diruN2YTBwYchOyArfEmSed33IDHmK0deH4f13gNxiRVOGqzzbWNcobKKEsvgBb/hSLXchcPRYlvoJz+mTbI+rTy8C5+Wmgaxai7HqqcfMyUK2+VaCazdEX/C61vABL0S5Gs4Yni/opFif6pjifEazPheCp7rREeU3N7YzaN9pZElMyXjPmJ9CrUXPcB8bUYmaY9mHooj697DDifUjAUVK47gwwvpXLncn+a4BUCIuu09ZkSlOZEeSgRimLyEaWNKcZDTjDGTZ3pWLAGfOczHgmVw+poW+iCTMiijSbC0dTyo6t8GNXxgfZEy5CZ1IkKA1fsBdW/PD4Fg/+HFpflT3P65HEBikaIKgD4LcAEGCEwnit5YggBmC+5gKQI7dd0H7+fjhPNLFMwVqnovqW3WvB3C0y8iptlWHbeEIw7QhYUSQG0fS93snIGlgZGsxjwNjnlfByPrZAbnwfHphRsLY4HUwsplEdf1rMxJuoq8EyXrOxLXcayMJv/2+Ctv2T8DxkraNTshv1i9TnnoF83AY17iQub027Wz/qmEVOFZX3Zss7nW7xVw0J5HO0WQyPpNg9TMuokRP38IpHtmNXDRCQFnIwPnSX59fV5Dzn7/+NORv4GeA54bix7VoMqX6la82EithQyWGz2Km6ye/4YZkcXcZvqjb+48DdP8/ \ No newline at end of file diff --git a/Icons/csv.png b/Icons/csv.png new file mode 100644 index 00000000..ff2372c1 Binary files /dev/null and b/Icons/csv.png differ diff --git a/Icons/doc.png b/Icons/doc.png new file mode 100644 index 00000000..58959917 Binary files /dev/null and b/Icons/doc.png differ diff --git a/Icons/exe.png b/Icons/exe.png new file mode 100644 index 00000000..55ed5bcc Binary files /dev/null and b/Icons/exe.png differ diff --git a/Icons/jpg.png b/Icons/jpg.png new file mode 100644 index 00000000..7fe27521 Binary files /dev/null and b/Icons/jpg.png differ diff --git a/Icons/mp3.png b/Icons/mp3.png new file mode 100644 index 00000000..7f1249f1 Binary files /dev/null and b/Icons/mp3.png differ diff --git a/Icons/mp4.png b/Icons/mp4.png new file mode 100644 index 00000000..418fcfbb Binary files /dev/null and b/Icons/mp4.png differ diff --git a/Icons/odt.png b/Icons/odt.png new file mode 100644 index 00000000..b6dbc07a Binary files /dev/null and b/Icons/odt.png differ diff --git a/Icons/pdf.png b/Icons/pdf.png new file mode 100644 index 00000000..f81dd76f Binary files /dev/null and b/Icons/pdf.png differ diff --git a/Icons/png.png b/Icons/png.png new file mode 100644 index 00000000..9e6837d8 Binary files /dev/null and b/Icons/png.png differ diff --git a/Icons/rar.png b/Icons/rar.png new file mode 100644 index 00000000..a7be13b7 Binary files /dev/null and b/Icons/rar.png differ diff --git a/Icons/txt.png b/Icons/txt.png new file mode 100644 index 00000000..d7aba283 Binary files /dev/null and b/Icons/txt.png differ diff --git a/Icons/zip.png b/Icons/zip.png new file mode 100644 index 00000000..604109f4 Binary files /dev/null and b/Icons/zip.png differ diff --git a/README.md b/README.md index 46e02398..e75e2507 100644 --- a/README.md +++ b/README.md @@ -21,18 +21,17 @@ ## Requirements -- You cannot use file third-party libraries -- You will not be able to use global variables in PHP. +- You will not be able to use the $GLOBALS variable. - You must use GIT - You must use the PHP > v8 -- Create a clear and orderly directory structure +- Create a clear and ordered directory structure - Both the code and the comments must be written in English - Use the camelCase code style to define variables and functions -- In the case of using HTML, never use inline styles -- In the case of using different programming languages ​​always define the implementation in separate terms -- Remember that it is important to divide the tasks into several sub-tasks so that in this way you can associate each particular step of the construction with a specific commit +- When using HTML, never use inline styles +- Remember that it is important to divide the tasks into several sub-tasks so that you can associate each particular step of the construction with a specific commit - You should try as much as possible that the commits and the planned tasks are the same -Delete files that are not used or are not necessary to evaluate the project +- Delete files and comments that are not used or are not necessary + ## Repository diff --git a/back.php b/back.php new file mode 100644 index 00000000..ec22ab14 --- /dev/null +++ b/back.php @@ -0,0 +1,16 @@ + $extension, + "fileName" => $_FILES['file']['name'], + ]); +} + diff --git a/create.php b/create.php new file mode 100644 index 00000000..28cae9ba --- /dev/null +++ b/create.php @@ -0,0 +1,42 @@ + alert("Failed to create file"); window.location.href="index.php";'; + header('Location: index.php'); + }else { + echo''; + header('Location: index.php'); + } + + } + else{ + //Check if it should be a folder or file + if(strpos($fileName, '.') > 1) { + if(touch($dir)) { + echo "
  • " . $fileName . "button deletePath='$folder/$file'class='delete-button'>Delete
    • "; + header('Location: index.php'); + + } + } + else { + if(mkdir($dir)) { + echo "
  • " . $fileName; + header('Location: index.php'); + + } + + } + } + +fopen($dir, 'r'); + + + +?> + diff --git a/delete.php b/delete.php new file mode 100644 index 00000000..13ed1869 --- /dev/null +++ b/delete.php @@ -0,0 +1,9 @@ + $deleteFile]); + + +?> diff --git a/download.php b/download.php new file mode 100644 index 00000000..f787dfe9 --- /dev/null +++ b/download.php @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/edit.php b/edit.php new file mode 100644 index 00000000..1c7296e3 --- /dev/null +++ b/edit.php @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/index.php b/index.php new file mode 100644 index 00000000..d2816301 --- /dev/null +++ b/index.php @@ -0,0 +1,217 @@ + + + + + + + + + + + Document + + + + + +
    + + + +
    + +
    + + + + + + +
    +
    + +
    + + +
    +
    + + + +
    +
    +
    +
    +
    Edit
    +
    +
    +
    + + + + + +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    +
    Delete
    +
    +
    + + + + +
    +
    +
    +
    +
    + + + + +"; + + // Loop through the files and folders + foreach ($files as $file) { + // Check if the file is a folder + if (is_dir("$folder/$file")) { + // If it is a folder, create a list item with the folder name + echo "
  • " . $file; + // Call the function recursively to generate the submenu for the folder + generateMenu("$folder/$file"); + + echo "
    • "; + } else { + + $extensionIcon = ""; + + $dirEx = explode(".", $file); + + $extension = end($dirEx); + + switch($extension){ + + case "csv": + $extensionIcon = "icons/csv.png"; + break; + case "doc": + $extensionIcon = "icons/doc.png"; + break; + case "exe": + $extensionIcon = "icons/exe.png"; + break; + case "jpg": + $extensionIcon = "icons/jpg.png"; + break; + case "jpeg": + $extensionIcon = "icons/jpg.png"; + break; + case "mp3": + $extensionIcon = "icons/mp3.png"; + break; + case "mp4": + $extensionIcon = "icons/mp4.png"; + break; + case "odt": + $extensionIcon = "icons/odt.png"; + break; + case "pdf": + $extensionIcon = "icons/pdf.png"; + break; + case "png": + $extensionIcon = "icons/png.png"; + break; + case "rar": + $extensionIcon = "icons/rar.png"; + break; + case "txt": + $extensionIcon = "icons/txt.png"; + break; + case "zip": + $extensionIcon = "icons/zip.png"; + break; + case "mov": + $extensionIcon = "icons/mp4.png"; + break; +} + + // If it is a file, create a list item with a link to the file + echo "
  • + $file + + +
    • "; + $file_path = "$folder/$file"; + // Get the file size in MB + $file_size = filesize($file_path); + $file_size_mb = round($file_size / 1024 / 1024, 2); + + // Get the last modified time of the file + $file_last_modified = filemtime($file_path); + $file_last_modified_formatted = date('Y-m-d H:i:s', $file_last_modified); + + // Print the file size and last modified time + echo "
    File size: " . $file_size_mb . " MB"; + echo "
    Modificated: " . $file_last_modified_formatted; + } + } + echo ""; +} + +?> \ No newline at end of file diff --git a/logic.js b/logic.js new file mode 100644 index 00000000..e4c73ae7 --- /dev/null +++ b/logic.js @@ -0,0 +1,190 @@ +const button = document.getElementById("menu-button"); +const searchBtn = document.getElementById('searchBtn') +const menu = document.getElementById("menu"); +const submitDeleteBtn = document.getElementById('submitDelete'); +const searchInput = document.getElementById('search-input'); +const fileToUpload = document.getElementById('fileToUpload'); +const submitUploadBtn = document.getElementById('submitUploadBtn') + +let currentFolder = 'root' + +button.addEventListener("click", function() { + menu.style.display = menu.style.display === "block" ? "none" : "block"; +}); + + +const folders = document.querySelectorAll(".folder"); +folders.forEach(folder => { + folder.addEventListener("click", function(e) { + const submenu = this.querySelector("ul"); + submenu.style.display = submenu.style.display === "block" ? "none" : "block"; + + currentFolder = e.target.getAttribute('path'); + }); +}); + + + + + +// New Modal +// Get the modal +const newmodal = document.getElementById("newModal"); + +// Get the button that opens the modal +const newBtn = document.getElementById("newBtn"); + + +// When the user clicks the button, open the modal +newBtn.onclick = function() { + newmodal.style.display = "block"; +} + + + +//Edit Modal + +// Get the modal +const editModal = document.querySelector(".editModal"); + +// Get the button that opens the modal +const editBtn = document.querySelectorAll(".editBtn"); + +const cancelBtn = document.querySelectorAll(".cancel"); +cancelBtn.forEach(item => { + item.addEventListener("click", cancel); + +}) + +function cancel(e) { + editModal.style.display = "none"; + + +} + +// When the user clicks the button, open the modal +editBtn.forEach(item => { + item.addEventListener("click", changeName); + +}) + +// Edit + +function changeName (event) { + editModal.style.display = "block"; + const actualPathFile = document.getElementById("actualPathFile"); + const inputHref = event.currentTarget.getAttribute("actualPath"); + // console.log(inputHref); + actualPathFile.value=inputHref; + +} + +//Delete + +// Get the modal +const deleteModal = document.querySelector(".deleteModal"); + +// Get the button that opens the modal +const deleteBtn = document.querySelectorAll(".delete-button"); + +cancelBtn.forEach(item => { + item.addEventListener("click", cancel); + +}) + +function cancel(e) { + editModal.style.display = "none"; + deleteModal.style.display = "none"; + + +} + +deleteBtn.forEach(item => { + item.addEventListener("click", deleteFile); + +}) + +submitDeleteBtn.addEventListener('click', submitDeleteFile) + + +let inputHrefD='' + +function deleteFile(e){ + deleteModal.style.display = "block"; + inputHrefD = e.target.getAttribute("deletePath"); +} + +function submitDeleteFile(){ + fetch(`delete.php?file=${inputHrefD}`) + .then(res => res.json()) + .then(data => { + let parentElement = document.getElementById('menu') + let elementToDelete = document.getElementById(data.file); + parentElement.removeChild(elementToDelete); + deleteModal.style.display = "none"; + }) +} + +searchBtn.addEventListener('click', search) + +function search(){ + let searchValue = searchInput.value + fetch(`search.php?search_term=${searchValue}`) + .then(res => res.json()) + .then(data => { + console.log(data) + menu.innerHTML = '' + data.folders.forEach((folder)=>{ + let li = document.createElement('li') + li.classList.add('list-group-item') + li.classList.add('folder') + folderNameArr = folder.split('/') + folderName = folderNameArr[folderNameArr.length - 1] + li.innerText = folderName + menu.appendChild(li) + }) + + data.files.forEach((file)=>{ + let li = document.createElement('li') + li.setAttribute('id', file) + li.classList.add('list-group-item') + li.classList.add('file') + + fileNameArr = file.split('/') + fileName = fileNameArr[fileNameArr.length - 1] + + li.innerHTML= ` + ${fileName} + + + ` + menu.appendChild(li) + }) + }) + +} + +fileToUpload.addEventListener("change", Upload) +submitUploadBtn.addEventListener('click', submitUpload) + +let file = '' + +function Upload(e){ + file = e.target.files[0] +} + +function submitUpload(){ + const form_data = new FormData(); + form_data.append("file", file); + form_data.append("currentFolder", currentFolder) + + fetch(`back.php`, { + method: "POST", + body: form_data, + }) + .then(res => res.json()) + .then(data => { + console.log(data) + window.location.href = 'index.php' + }) +} \ No newline at end of file diff --git a/root/folder1/video.mp4 b/root/folder1/video.mp4 new file mode 100644 index 00000000..5e57a263 Binary files /dev/null and b/root/folder1/video.mp4 differ diff --git a/root/folder2/City Run.mp3 b/root/folder2/City Run.mp3 new file mode 100644 index 00000000..17fa99cf Binary files /dev/null and b/root/folder2/City Run.mp3 differ diff --git a/root/folder3/descarga.jpeg b/root/folder3/descarga.jpeg new file mode 100644 index 00000000..2861cdd3 Binary files /dev/null and b/root/folder3/descarga.jpeg differ diff --git a/root/folder4/Lorem.txt b/root/folder4/Lorem.txt new file mode 100644 index 00000000..e5d35344 --- /dev/null +++ b/root/folder4/Lorem.txt @@ -0,0 +1 @@ +Lorem ipsum \ No newline at end of file diff --git a/root/hi.txt b/root/hi.txt new file mode 100644 index 00000000..e69de29b diff --git a/search.php b/search.php new file mode 100644 index 00000000..0a2b77f4 --- /dev/null +++ b/search.php @@ -0,0 +1,41 @@ + true, + 'folders' => $foldersArray, + 'files' => $filesArray, + 'search' => $searchInputValue, +]); + +?> \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..d6cc489b --- /dev/null +++ b/styles.css @@ -0,0 +1,95 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.search-bar { + width: 20vw; +} + + +main{ + + width: 100%; +} + +.aside{ + display: flex; + flex-direction: column; + border: 1px solid black; + height: 50rem; + margin-top: 5%; + flex-wrap: nowrap; + align-items: center; + +} + +.asideContent{ + margin-left: 5%; +} + +.mainFolder{ + position: fixed; + top: 15%; + right: 40%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; +} + +.folder ul { + display: none; + list-style-type: none; + font-size: 18px; +} + +.folder{ + list-style-type: none; +} + + +.folder:hover{ + cursor: pointer; +} + +#menu{ + list-style-type: none; +} + + +li a {text-decoration : none; color : #2d2f31;} + + +span { + padding : 30px; + background : #2d2f31; + color : white; + font-size : 1.2em; + font-variant : small-caps; + cursor : pointer; + display: block; +} + +span::after { + float: right; + right: 10%; + content: "+"; +} + +.slide { + clear:both; + width:100%; + height:0px; + overflow: hidden; + text-align: center; + transition: height .4s ease; +} + +.slide li {padding : 30px;} + +#touch {position: absolute; opacity: 0; height: 0px;} + +#touch:checked + .slide {height: 300px;}