ticlab.js/src/listing.js

import { Widget } from '@lumino/widgets';
import { openDB } from 'indexed-pdb'
import * as tic from './ticparse.js'
import * as filesize from 'filesize';
import {select, selectAll} from "d3-selection";
import * as CodeMirror from 'codemirror';

import * as ticdb from './ticdb.js';
import * as dayjs from 'dayjs';
import * as relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

console.log("dayjs", dayjs);
window.dayjs = dayjs;
export class ListingWidget extends Widget {

  static createNode() {
    let node = document.createElement('div');
    let editor = document.createElement('div');

    // let input = document.createElement('input');
    // input.placeholder = 'Placeholder...';
    // content.appendChild(input);
    node.appendChild(editor);
    return node;
  }

  constructor(name) {
    super({ node: ListingWidget.createNode() });
    // let editor_div = this.node.getElementsByTagName('div')[0];
    // this.cm = CodeMirror(this.editorDiv, CM_OPTS);

    this.setFlag(Widget.Flag.DisallowLayout);
    // this.addClass('content');
    this.addClass(name.toLowerCase());
    this.title.label = name;
    this.title.closable = false;
    this.title.caption = `Editor: ${name}`;

    this.listing = select(this.node),
    this.table = this.listing.append("table"),
    this.thead = this.table.append("thead").append("tr"),
    this.tbody = this.table.append("tbody");
    this.thead.selectAll("th").data(["Name", "Last Modified", " "]).enter().append("th").html(d => d);
    this.sync();
  }

  // get inputNode() {
  //   return this.node.getElementsByTagName('input')[0];
  // }


  onActivateRequest(Message) {
    // if (this.isAttached) {
    //   this.inputNode.focus();
    // }
  }

  async sync () {
    console.log("listing.sync");
    try {
      const db = await openDB(ticdb.DB_NAME);
      var objectStore = db.transaction([ticdb.DB_STORE], "readonly").objectStore(ticdb.DB_STORE);
      var files = [];
      await objectStore.openCursor().then(function push_item(cursor) {
        if (!cursor) { return }
        var filename = ticdb.filename_from_key(cursor.key);
        if (filename && !filename.startsWith(".")) {
          // console.log(cursor.value.contents);
          var blob = new Blob([cursor.value.contents]);
          // console.log("blob", blob, {type: "application/octet-stream"});
          var objecturl = URL.createObjectURL(blob);
          files.push({
            key: cursor.key,
            filename: filename,
            size: cursor.value.contents.length,
            timestamp: cursor.value.timestamp,
            objecturl: objecturl
          });

        }
        return cursor.continue().then(push_item)
      })

      // console.log("files", files);
      let join = this.tbody.selectAll("tr").data(files, d=>d.key);
      join.exit().remove();
      let tr = join.enter().append("tr");
      tr.append("td").attr("class", "link").append("a").attr("href", "#").html(d => d.filename).on("click", async (e, d) => {
        e.preventDefault();
        var filename = ticdb.filename_from_key(d.key);
        if (filename) {
          window._tic.filename = filename;
          window._tic.item = await ticdb.load_key(ticdb.DB_NAME+"/"+window._tic.filename);
          // console.log("loaded item", window._tic.item);
          window._tic.cart = tic.parsetic(window._tic.item.contents.buffer);
          // console.log("current_cart", current_cart);
          window._tic.editor.setValue(window._tic.cart.code.text);                
        }
      });
      //tr.append("td").attr("class", "size");
      tr.append("td").attr("class", "timestamp");
      tr.append("td").attr("class", "download")
        .append("a")
        .attr("href", d=>d.objecturl)
        .attr("download", d=>d.filename)
        .append("i").attr("class", "fa fa-download");

      // update Merged enter + join
      let update = tr.merge(join);
      // update.select(".size").html(d => filesize(d.size));
      // update.select(".timestamp").html(d => d.timestamp.toLocaleString());
      update.select(".timestamp").html(d => dayjs(d.timestamp).fromNow());

    } catch (error) {
      console.log(error, 'any error during the process');
    }
  }
}



/*
listing.append("button").html("save as...").on("click", (e, d) => {
    if (current_filename) {
        var save_filename = prompt("key", current_filename);
        if (save_filename) {
            current_filename = save_filename;
            save();                
        }
    }
});
*/

/*
listing.append("input").attr("type", "file").on("change", function (e, d) {
    console.log("filechange", this.files);
    if (this.files.length == 1) {
        this.files[0].arrayBuffer().then(result => {
            console.log("file", result);
            var file_cart = tic.parsetic(result);
            console.log("file_cart", file_cart);
        })
        // reader.readAsArrayBuffer(this.files[0]);
    }
});
*/