mirrored_repositories/flutter-filesharing-app
import 'dart:convert';

class document{
  getDocuments(files){
    String htmlData = '''<!DOCTYPE html>
<html>
<head>
          <meta charset="utf-8">
          <link rel="icon" type="image/icon" href="logo">
          <title>Bytes File Sharing & PDF Scanner</title>
          </head>
          <style type="text/css">
          *{
          font-family: sans-serif;
          }
          body{
          background-color: #222;
          }
              .headerTab{
          width: 400px;
          margin: auto;
          display: flex;
          border-radius: 30px;
          padding:5px 5px;
          justify-content: space-around;
          flex-direction: row;
          height: 60px;
          background: #333;
          }
              .headerTab div{
          padding: 20px 10px;
          color: #ddd;
          border-radius: 20px;
          background: #333;
          }
              .headerTab div:hover{
          cursor: pointer;
          background-color: #fff;
          color: #222;
          }
          #bdocument{
          background-color: #fff;
          color: #222;
          }
              .bodyTab{
          width: 100%;
          height: 100%;

          }
          .audio-box{
          display: flex;
          padding: 10px;
          width: 500px;
          height: 150px;
          flex-direction: row;

          }
          #main-body{
          display: flex;
          padding: 10px 10px;
          margin: 20px;
          justify-content: space-around;
          flex-direction: row;
          flex-wrap: wrap;
          }
          .audio-logo{
          background-color: #ddd;
          width: 150px;
          }
              .audio-voice{
          width: 300px;
          padding: 10px;
          background-color: #ddd;
          }
         .image{
          width: 150px;
          height: 150px;
          object-fit: cover;
          }
          .linkButton{

          padding: 10px 15px;
          background-color: #333;
          color: red;
          text-decoration: none;
          }
              .linkButton:hover{
          background-color: #222;
          }
            #loadMore{
    padding: 10px 20px;
    background-color: #333;
    color: #ddd;
    margin: auto;
    outline: none;
    border: none;
  }
  #loadMore:hover{
    background-color: #fff;
    color: #333;
  }
          </style>
          <body>
          <div class="headerTab">
          <div id="gallery">Gallery</div>
          <div id="baudio">Audio</div>
          <div id="bvideo">Movie</div>
          <div id="bdocument">Document</div>

          </div>
          <div class="bodyTab">
          <div id="main-body">
          
          </div>
          </div>
          <div>
  <button id="loadMore">Load More</button>
</div>
          </body>
          <script type="text/javascript">

          //imagebody


          var b1 = document.getElementById('main-body');

     
           
           var num = 10;
           var startNum = 0;
           var documentList = [];
           documentList = ${files};
           loadData(10);
           
          function loadData(sizeOfLength){
           num = sizeOfLength;
          for(var i=0;i<sizeOfLength;i++){
          
            var name = documentList[i];
            //var name = "storage/document.pdf";
            var audioBox = document.createElement('div');

            audioBox.className = "audio-box";


            var d1 = document.createElement('div');

            d1.className = "audio-logo";

            var d2 = document.createElement('div');
            d2.className = "audio-voice";

            //var d3 = document.createElement('div');

            var img = document.createElement('img');
            img.src = '/pdfLogo';
            img.className = "image";
        

            var para = document.createElement('p');
            para.innerHTML = name.split("/").at(-1);
            var link = document.createElement('a');


            link.href = documentList[i];
            link.setAttribute('download','');
            link.innerHTML = "Download";
            link.className = "linkButton";


            d1.appendChild(img);
            d2.appendChild(para);
            d2.appendChild(link);

            audioBox.appendChild(d1);
            audioBox.appendChild(d2);

            b1.appendChild(audioBox);

          }
          }

          //tabbody





          //buttons
          var bn1 = document.getElementById('gallery');
          var bn2 = document.getElementById('baudio');
          var bn3 = document.getElementById('bvideo');
          var bn4 = document.getElementById('bdocument');

           bn1.addEventListener('click',event=>{
          window.location.href = "/";
          });
          bn2.addEventListener('click',event=>{
          window.location.href = "/audio";
          });
          bn3.addEventListener('click',event=>{
          window.location.href = "/video";
          });
          bn4.addEventListener('click',event=>{
          window.location.href = "/document";
          });

var loadMore = document.getElementById('loadMore');

  loadMore.addEventListener('click',event=>{
    if (num+10 <=documentList.length) {
      startNum = startNum +10;
      loadData(num +10);
      console.log(num);
    }else{
    startNum = documentList.length - startNum;
      loadMore(documentList.length);
      loadMore.style.display = "none";
    }
  });
        </script>
        </html>''';

    return htmlData;
  }
}