BrowserLogic/js/localstorage.js

class StorageFolder {
  constructor(restoreSettings) {
    this.Name = "Folder";
    this.CreationDate = Date.now();
    this.LastModifiedDate = Date.now();
    this.Folder = undefined;
    this.Designs = new Array();
    this.Folders = new Array();

    if (restoreSettings) {
      if (restoreSettings.Name) this.Name = restoreSettings.Name;
      if (restoreSettings.CreationDate) this.CreationDate = restoreSettings.CreationDate;
      if (restoreSettings.LastModifiedDate) this.LastModifiedDate = restoreSettings.LastModifiedDate;
      if (restoreSettings.Folders) {
        for (let a = 0; a < restoreSettings.Folders.length;a ++) {
          let sf = new StorageFolder(restoreSettings.Folders[a]);
          sf.Folder = this;
          this.Folders.push(sf);
        }
      }
      if (restoreSettings.Designs) {
        for (let a = 0; a < restoreSettings.Designs.length;a ++) {
          let sd = new StorageDesign(restoreSettings.Designs[a]);
          sd.Folder = this;
          this.Designs.push(sd);
        }
      }
    }
  }

  toJSON(key) {
    let sfjson = {};
    sfjson.Name = this.Name;
    sfjson.CreationDate = this.CreationDate;
    sfjson.LastModifiedDate = this.LastModifiedDate;
    sfjson.Designs = this.Designs;
    sfjson.Folders = this.Folders;
    return sfjson;
  }

  PathString(ChildrenString = "") {
    if (this.Folder) {
      let pathString = `<span>${this.Name}</span> ${(ChildrenString != "") ? "/" : ""} ${ChildrenString}`;
      pathString = this.Folder.PathString(pathString);
      return pathString;
    } else {
      if (ChildrenString == "") {
        return `<span>/</span> `;
      } else {
        return `<span>/</span> ${ChildrenString}`;
      }
    }
  }

  HasFolder(folder = undefined) {
    if (!folder) return false;
    for (let a = 0; a < this.Folders.length; a++) {
      if (folder === this.Folders[a] || folder === this.Folders[a].Name) return this.Folders[a];
    }
    return false;
  }

  AddFolder(folder) {
    if (!folder) return false;
    let nameCounter = 1;
    let ogName = folder.Name;
    folder.Folder = this;

    while (this.HasFolder(folder.Name)) {
      // There is a name conflict!
      folder.Name = ogName + " (" + nameCounter + ")";
      nameCounter++;
    }

    this.Folders.push(folder);
    this.LastModifiedDate = Date.now();
    return folder;
  }

  RemoveFolder(folder,overide=false) {
    if (!folder) return false;
    for (let a = 0; a < this.Folders; a++) {
      if (folder === this.Folders[a] || folder == this.Folders[a].Name) {
        if (this.Folders[a].Designs > 0 && !overide) return -1;
        this.Folders.splice(a,1);
        this.LastModifiedDate = Date.now();
        return true;
      }
    }
    return false;
  }

  HasDesign(design) {
    if (!design) return false;
    for (let a = 0; a < this.Designs; a++) {
      if (design === this.Designs[a] || design == this.Designs[a].Name) this.Designs[a];
    }
    return false;
  }

  AddDesign(design) {
    if (!design) return false;
    let nameCounter = 1;
    let ogName = design.Name;
    design.Folder = this;

    while (this.HasDesign(design.Name)) {
      // There is a name conflict!
      design.Name = ogName + " (" + nameCounter + ")";
      nameCounter++;
    }

    this.Designs.push(design);
    this.LastModifiedDate = Date.now();
    return design;
  }

  RemoveDesign(design) {
    if (!design) return false;
    for (let a = 0; a < this.Designs; a++) {
      if (design === this.Designs[a] || design == this.Designs[a].Name) {
        this.Designs.splice(a,1);
        this.LastModifiedDate = Date.now();
        return true;
      }
    }
    return false;
  }
}

class StorageDesign {
  constructor(restoreSettings) {
    this.Name = "My Design";
    this.Creator = "Anonymous";
    this.CreationDate = Date.now();
    this.LastModifiedDate = Date.now();
    this.Description = "";
    this.FileIndex = 0;
    this.Folder = undefined;

    if (restoreSettings) {
      if (restoreSettings.Name) this.Name = restoreSettings.Name;
      if (restoreSettings.Creator) this.Creator = restoreSettings.Creator;
      if (restoreSettings.CreationDate) this.CreationDate = restoreSettings.CreationDate;
      if (restoreSettings.LastModifiedDate) this.LastModifiedDate = restoreSettings.LastModifiedDate;
      if (restoreSettings.Description) this.Description = restoreSettings.Description;
      if (restoreSettings.FileIndex) this.FileIndex = restoreSettings.FileIndex;
    }
  }

  toJSON(key) {
    let sdjson = {};
    sdjson.Name = this.Name;
    sdjson.Creator = this.Creator;
    sdjson.CreationDate = this.CreationDate;
    sdjson.LastModifiedDate = this.LastModifiedDate;
    sdjson.Description = this.Description;
    sdjson.FileIndex = this.FileIndex;
    return sdjson;
  }

  GetFile() {
    let file = JSON.parse(LZString.decompressFromUTF16(localStorage.getItem("LogicPartsfile" + this.FileIndex)));
    return file;
  }

  SaveFile(container) {
    let saveState = createSaveState(container,true);
    console.log(saveState);
  }
}

class LocalStorage {
  constructor() {
    this._FileIndex = 0;
    this.RootFolder = new StorageFolder({Name: "ROOT"});
    if (localStorage.getItem('LogicEngineFileTable')) {
      let LSFT = json.parse(localStorage.getItem('LogicEngineFileTable'));
      if (LSFT?.Index >= 0) {
        this._FileIndex = LSFT.Index;
        if (LSFT.RootFolder) {
          this.RootFolder = new StorageFolder(LSFT.RootFolder);
        }
      }
    } else {
      // No file table yet!

    }
  }
}

class LocalBrowser {
  constructor(folder = undefined) {
    this.DOMElement = document.getElementById("LocalStorageBrowser");
    this.DOMPath = document.getElementById("lsbPath");
    this.DOMFolders = document.getElementById("lsbfoldersContainer");
    this.DOMFiles = document.getElementById("lsbFilesContainer");
    this.DOMFolders.innerHTML = "";
    this.DOMFiles.innerHTML = "Empty Folder";
    this.Folder = (folder instanceof StorageFolder) ? folder : new StorageFolder({Name: "ROOT"});
    this.DOMPath.innerHTML = this.Folder.PathString();

    this.redrawFolders();
    this.redrawFiles();
    //this.DOMFolders.addEventListener("contextmenu",function(evt){});
  }
  redrawFolders() {
    this.DOMFolders.innerHTML="";
    for (let a = 0; a < this.Folder.Folders.length; a++) {
      this.DOMFolders.innerHTML += `<div class="lsbFolderEntry">${this.Folder.Folders[a].Name}</div>`;
    }
    if (this.Folder.Folder) this.DOMFolders.innerHTML += `<div class="lsbFolderEntry">..</div>`;

    let folders = this.DOMFolders.getElementsByClassName('lsbFolderEntry');
    for (let a = 0; a < folders.length; a ++) {
      let lbo = this;
      folders[a].addEventListener("click",function(evt){
        lbo.FolderClick(folders[a].innerText);
      }.bind(lbo));
    }

    let pathfolders = this.DOMPath.getElementsByTagName('span');
    for (let a = 0; a < pathfolders.length; a ++) {
      let lbo = this;
      pathfolders[a].addEventListener("click",function(evt){
        lbo.FolderClick(pathfolders[a].innerText);
      }.bind(lbo));
    }

  }

  redrawFiles() {
    this.DOMFiles.innerHTML="";
    for (let a = 0; a < this.Folder.Designs.length; a++) {
      this.DOMFiles.innerHTML += `<div class = "lsbFileEntry"><div class="FileName">${this.Folder.Designs[a].Name}</div><div class="FileModified">${new Date(this.Folder.Designs[a].LastModifiedDate)}</div><div class="FileSize">?.??KB</div></div>`;
    }

    let files = this.DOMFiles.getElementsByClassName('lsbFileEntry');
    for (let a = 0; a < files.length; a ++) {
      let lbo = this;
      files[a].addEventListener("click",function(evt){
        lbo.FileClick(files[a].getElementsByClassName("FileName")[0].innerText);
      }.bind(lbo));
    }
  }

  FileClick(file) {
    console.log(`The file ${file} was clicked from within the folder ${this.Folder.Name}`);
  }
  FolderClick(folder) {
    console.log(`Folder ${folder} was clicked.`);
    let folderobj = this.Folder.HasFolder(folder);
    if (folder === ".." || folder === "/") {
      if (this.Folder.Folder instanceof StorageFolder) this.Folder = this.Folder.Folder;
    } else {
      if (folderobj) this.Folder = folderobj;
    }

    this.DOMPath.innerHTML = this.Folder.PathString();
    this.redrawFolders();
    this.redrawFiles();
  }
  ShowBrowser(x,y,w,h) {
    let lsb = this.DOMElement;
    lsb.style.left = x + "px";
    lsb.style.top = y + "px";
    lsb.style.width = w + "px";
    lsb.style.height = h + "px";
    lsb.style.display = "flex";
  }
}