PlantCtrl/Software/MainBoard/rust/src_webpack/src/fileview.ts

import {Controller} from "./main";
import {SaveInfo} from "./api";

export class FileView {
  readonly fileListView: HTMLElement;
  readonly controller: Controller;

  constructor(controller: Controller) {
    (document.getElementById("fileview") as HTMLElement).innerHTML = require('./fileview.html') as string;
    this.fileListView = document.getElementById("fileList") as HTMLElement;
    this.controller = controller;
  }

  setSaveList(saves: SaveInfo[], public_url: string) {
    // Sort newest first (highest index = most recently written slot)
    const sorted = saves.slice().sort((a, b) => b.idx - a.idx);

    this.fileListView.textContent = "";
    for (let i = 0; i < sorted.length; i++) {
      new SaveEntry(this.controller, i, sorted[i], this.fileListView, public_url);
    }
  }
}

class SaveEntry {
  view: HTMLElement;
  constructor(controller: Controller, fileid: number, saveinfo: SaveInfo, parent: HTMLElement, public_url: string) {
    this.view = document.createElement("div") as HTMLElement;
    parent.appendChild(this.view);
    this.view.classList.add("fileentryouter");

    const template = require('./fileviewentry.html') as string;
    this.view.innerHTML = template.replaceAll("${fileid}", String(fileid));

    let name = document.getElementById("file_" + fileid + "_name") as HTMLElement;
    let created = document.getElementById("file_" + fileid + "_created") as HTMLElement;
    let size = document.getElementById("file_" + fileid + "_size") as HTMLElement;
    let deleteBtn = document.getElementById("file_" + fileid + "_delete") as HTMLButtonElement;
    deleteBtn.onclick = () => {
      controller.deleteSlot(saveinfo.idx);
    };

    let downloadBtn = document.getElementById("file_" + fileid + "_download") as HTMLAnchorElement;
    downloadBtn.href = public_url + "/get_config?saveidx=" + saveinfo.idx;
    downloadBtn.download = "config_slot_" + saveinfo.idx + ".json";

    name.innerText = "Slot " + saveinfo.idx;
    size.innerText = saveinfo.len + " bytes";

    // Format timestamp in browser's local timezone
    if (saveinfo.created_at) {
      try {
        const date = new Date(saveinfo.created_at);
        created.innerText = date.toLocaleString();
      } catch (e) {
        created.innerText = "Invalid date";
      }
    } else {
      created.innerText = "Unknown";
    }
  }
}