Sindbad~EG File Manager

{% extends 'layout.html' %}
{% block title %}Index{% endblock %}
{% block content %}
<style>
        #drop-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
        }
         #drop-area.highlight {
            border-color: #007bff; /* Change to your preferred highlight color */
            background-color: #f0f8ff; /* Change to your preferred highlight background color */
        }
        .progress-container {
            display: none;
            margin-top: 10px;
        }

        .progress {
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-bar {
            width: 0;
            height: 100%;
            background-color: #007bff; /* Change to your preferred progress bar color */
            transition: width 0.3s;
        }

        .file-info {
            margin-top: 5px;
        }
    </style>

<div class="container bg-white mt-5">
  <div class="row mb-3"> 
    <div class="col-md-6">
     <h2>{{ folder_path or 'Main'}}
      <button  id="open-dropbox-button"  type="button" class="btn btn-link">Open Dropbox</button>
     </h2>
    </div>
    <div class="col-md-6 text-end">
      <form id="SearchForm" action="#">
      <div class="input-group float-right">
        <input type="text" class="form-control" name="search_text" placeholder="Search here.." aria-label="Search here.." aria-describedby="basic-addon2" required>
        
        <div>
          <button class="btn btn-outline-secondary" type="submit">Search</button>
          <a class="btn btn-outline-danger" href="#" >Clear</a>
           <input type="hidden" id="folder-path-input" value="{{ folder_path }}">
          
        </div>
      </div>
      </form>
      
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col">
      <h4>Upload Files to Dropbox</h4>
        <div id="drop-area">
          Drop files here
        </div>
        <div class="progress-container">
            <!-- <div class="progress">
                <div class="progress-bar" role="progressbar"></div>
            </div>
            <div class="file-info">Uploading: <span class="file-name"></span></div> -->
        </div>

 <!--    <form action="{{ url_for('dropbox.upload_files',folder_path=folder_path) }}" method="POST" enctype="multipart/form-data">
        <input type="file" name="files[]"  multiple required>
        <button class="btn btn-warning" type="submit">Upload</button>
    </form> -->
    </div>

  </div>
  <hr>
{% if subfolders %}

  <h3 class="mb-3">Folders :</h3>
      <div class="row">
        {% for folder in subfolders %}
        <div class="col-md-3">
          <div class="card mb-2">
            <div class="card-body">
              <div class="d-inline">
              <i class="fas fa-folder fa-lg" style="color: #3878e5;"></i>
              <a href="{{ url_for('dropbox.index', path=folder.path_display) }}">{{ folder.name }}</a> 
            </div>
              <div class="d-inline float-end">
                <!-- <i class="fa-sharp fa-regular fa-circle-right  fa-lg" style="color: #3878e5;"></i> -->
                <i class="fa-duotone fa-circle-ellipsis-vertical fa-lg" style="color: #3878e5;"></i>

              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
  
    <hr>
  
  {% endif %}  
    <h3 class="mb-0">Files : <span class="h5">({{ files|length  }}) </span></h3>
    
    <table class="table">
      <thead>
        <tr>
        <!--   <th width="10%">
            thumbnail
          </th> -->
          <th width="70%">
            Name
          </th>
          <th width="20%">
            Modified
          </th>
          <th>
          </th>
        </tr>
        <tbody>
          {% for file in files %}
        <tr>
          <!-- <td class="text-center">
            <img src="" class="thumbnail" data-path="{{file.path_display}}"  alt="Thumbnail">
          </td> -->
          <td valign="middle">
             
             {{ file.name }}
          </td>
          <td>
              {{ file.server_modified.strftime('%d-%m-%Y') if file.server_modified else '' }}
              {{ file.server_modified.strftime('%I:%M %p') if file.server_modified else '' }}
          </td>
          <td>
            <button type="button" class="btn btn-outline-primary" onclick="previewModal('{{file.path_display}}')">
              <i class="fa-regular fa-eye"></i></button>
            <a href=""></a>  
             <i class="fa-regular fa-download"></i>
          </td>
        </tr>
        {% endfor %}
        </tbody>
        
      </thead>
      
    </table>
     <!--  <div class="row">
        {% for file in files %}
        <div class="col-md-3">
          <div class="card mb-2">
            <div class="card-body text-center">
               <img src="{{ url_for('dropbox.thumbnail', file_path=file.path_display) }}" alt="Thumbnail">
               {% set file_extension = file.name|file_extension %}
               <i class="icon icon-{{ file_extension }}"></i>
              {% if file.is_downloadable %}
                  
              {% endif %}
              {{ file.name }}
            </div>
          </div>
        </div>
        {% endfor %}
      </div> -->
  </div>
</div>


    <!-- Modal -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">File Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <iframe id="previewFrame" frameborder="0" width="100%" height="500"></iframe>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block script %}
<script>

  var folder_path =  '{{ folder_path}}'

  $(function() {
       $('#open-dropbox-button').click(function() {
                var folderPath = $('#folder-path-input').val();
                if (folderPath) {
                    $.ajax({
                        url: '/open_dropbox_folder/' + encodeURIComponent(folderPath),
                        type: 'GET',
                        success: function(data) {
                            window.open(data, '_blank');
                        }
                    });
                }
        });
        
  });






function previewModal(file_path) {
      event.preventDefault();
      
      if (file_path) {
        $.ajax({
            url: '/view_file/' + encodeURIComponent(file_path),
            type: 'GET',
            success: function(data) {
              if(data)
              {
                $('#previewFrame').attr('src', data);  
                $("#previewModal").modal('show');  
              }
              
            }
        });
      }

  }  


function getThumbnails() {
  $( ".thumbnail" ).each(function( index ) {
        var file_path = $(this).attr('data-path')
        var thumbnail_container = $(this);
        $.ajax({
        type: 'GET', 
        url: '/thumbnail/'+file_path, 
        data:{}, 
        dataType: 'text',
        success: function(data){
          if(data){
            thumbnail_container.attr('src','data:image/jpeg;base64,' + data)
          }
        },
        // error: function(XMLHttpRequest, textStatus, errorThrown) {
        error: function(xhr, status, error) {
          console.log(xhr.responseText)
        } 
                                            
      }); 
  });

  
}


  
</script>


<script type="text/javascript">
    $(document).ready(function() {
            var dropArea = document.getElementById('drop-area');
             var progressContainer = document.querySelector('.progress-container');
            var progressBar = document.querySelector('.progress-bar');
            var fileInfo = document.querySelector('.file-info');
            var fileNameSpan = document.querySelector('.file-name');


            // Prevent default drag behaviors
            dropArea.addEventListener('dragenter', preventDefaults, false);
            dropArea.addEventListener('dragleave', preventDefaults, false);
            dropArea.addEventListener('dragover', preventDefaults, false);
            dropArea.addEventListener('drop', preventDefaults, false);

            // Highlight the drop area when a file is dragged over
            dropArea.addEventListener('dragenter', highlight, false);
            dropArea.addEventListener('dragover', highlight, false);

            // Unhighlight the drop area when a file is dragged out
            dropArea.addEventListener('dragleave', unhighlight, false);
            dropArea.addEventListener('drop', unhighlight, false);

            // Handle the dropped files
            dropArea.addEventListener('drop', handleDrop, false);

            function preventDefaults(event) {
                event.preventDefault();
                event.stopPropagation();
            }

            function highlight(event) {
                dropArea.classList.add('highlight');
            }

            function unhighlight(event) {
                dropArea.classList.remove('highlight');
            }

            function handleDrop(event) {
                var files = event.dataTransfer.files;
                handleFiles(files);
            }


            function createProgressContainer(file) {
                var progressContainer = document.createElement('div');
                progressContainer.className = 'progress-container';
                progressContainer.innerHTML = `
                    <div class="progress">
                        <div class="progress-bar" role="progressbar"></div>
                    </div>
                    <div class="file-info">Uploading: <span class="file-name">${file.name}</span></div>
                `;
                progressContainers.appendChild(progressContainer);
            }

            function handleFiles(files) {
                var formData = new FormData();
                for (var i = 0; i < files.length; i++) {
                    formData.append('files[]', files[i]);
                }

                progressContainer.style.display = 'block'; // Show the progress container

                $.ajax({
                    url: '/upload_files/'+encodeURIComponent(folder_path),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(event) {
                            if (event.lengthComputable) {
                                var percent = (event.loaded / event.total) * 100;
                                progressBar.style.width = percent + '%';
                                fileNameSpan.textContent = files[0].name; // Display filename
                            }
                        }, false);
                        return xhr;
                    },
                   success: function() {
                        // progressContainer.style.display = 'none'; // Hide the progress container
                        // progressBar.style.width = '0'; // Reset progress bar width
                        // fileNameSpan.textContent = ''; // Clear filename
                        alert('Files uploaded successfully to Dropbox!');
                    },
                    error: function() {
                        progressContainer.style.display = 'none'; // Hide the progress container
                        progressBar.style.width = '0'; // Reset progress bar width
                        fileNameSpan.textContent = ''; // Clear filename
                        alert('An error occurred during upload.');
                    }
                });
            }
        });
</script>

{% endblock %}