fake_spreadsheet.js

fake_spreadsheet.js

(()=>{
'use strict'
// need: <section id="screen-1"></section>
// CSV
const csvData = `,CUE,HH,MM,SS,FF,NEXT,Event Description,PF,ADDR,CGHZ,PDS,ANGLE,QTY,CAL,TYPE,DUR,Effect Description,REF,MFG,MAGAZINE,PRICE1,PRICE2,PRICE3,CUSTOM1,CUSTOM2
,0,00,00,00,00,00 05 00,<Start>,00,000,00,,,0,0,,00 00,,,,,,,,,
,2,00,00,05,00,00 15 00,,00,200,00,,,15,75,ザラ,00 00,キラキラ,1s,,,,,,,
,3,00,00,20,00,00 10 00,,00,320,00,,,4,120,ザラ,00 00,キラキラ,0s,,,,,,,
,4,00,00,30,00,00 05 00,,00,100,00,,,1,91,ザラ,00 00,単発,,,,,,,,
,5,00,00,35,00,00 05 00,,00,101,00,,,1,91,ザラ,00 00,単発,,,,0 00,0 00,0 00,,
,6,00,00,40,00,00 05 00,,00,102,00,,,1,91,ザラ,00 00,単発,,,,0 00,0 00,0 00,,
,7,00,00,45,00,00 05 00,,00,103,00,,,1,91,ザラ,00 00,単発,,,,0 00,0 00,0 00,,
,8,00,00,50,00,00 05 00,,00,104,00,,,1,91,ザラ,00 00,単発,,,,0 00,0 00,0 00,,`

const screen1E = document.querySelector('#screen-1');

// CSVデータをHTMLのテーブルに変換する関数
const csvToHtmlTable = (csvData) => {
    const rows = csvData.split('\n');
    let table = '<table>\n';

    for (let i = 0; i < rows.length; i++) {
        table += '<tr>\n';
        const cells = rows[i].split(',');

        for (let j = 0; j < cells.length; j++) {
            let cellContent = cells[j];
            let cellId = '';

            // 大なり記号と小なり記号をHTMLエンティティに変換
            cellContent = cellContent.replace(/>/g, '&gt;').replace(/</g, '&lt;');

            if (i === 0) { // 一番目の行なら
                table += `<th>${cellContent}</th>\n`; // th要素を使用
            } else {
                if (j >= 2 && j <= 5) {
                    // 2行目以降の2番から5番のセルにIDを付与
                    switch(j) {
                        case 2:
                            cellId = 'HH';
                            break;
                        case 3:
                            cellId = 'MM';
                            break;
                        case 4:
                            cellId = 'SS';
                            break;
                        case 5:
                            cellId = 'FF';
                            break;
                        default:
                            cellId = '';
                    }
                }

                // TD要素を生成し、必要に応じてIDとdata-identifier属性を付与
                if (cellId !== '') {
                    table += `<td id="row${i - 1}-col${5 - j}" data-identifier="${cellId}" class="csv-cell">${cellContent}</td>\n`;
                } else {
                    table += `<td>${cellContent}</td>\n`;
                }
            }
        }
        table += '</tr>\n';
    }

    table += '</table>';
    return table;
};

// CSVデータをHTMLのテーブルに変換して表示
screen1E.innerHTML = csvToHtmlTable(csvData);

// グローバル変数として、セルの内容を保存するための配列を定義します
let cellData = [];
let currentCellIndex = 0;

// セルの内容を保存する関数
function saveCellData() {
    const cells = document.querySelectorAll('.csv-cell');
    for (let cell of cells) {
        let [row, col] = cell.id.match(/\d+/g).map(Number);
        cellData.push({ id: cell.id, text: cell.textContent, row, col });
        cell.textContent = ''; // セル内のテキストを空にする
    }

    // セルの内容を行と列のインデックスでソート
    cellData.sort((a, b) => {
        if (a.row === b.row) {
            return a.col - b.col;
        }
        return a.row - b.row;
    });

    currentCellIndex = 0; // セルデータのインデックスをリセット
}

// セルの内容を保存
saveCellData();

document.addEventListener('keydown', function(event) {
//console.log(event.keyCode)

  if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 32) { // 数字キーかスペースバー
    event.preventDefault(); // デフォルトのキーの動作を無効化
    if (currentCellIndex < cellData.length) {
      const targetCellData = cellData[currentCellIndex];
      const targetCell = document.getElementById(targetCellData.id);
      targetCell.textContent = (targetCell.textContent.length > 0) ? targetCellData.text : targetCellData.text.substring(0, 1);
      if (targetCell.textContent.length === targetCellData.text.length) {
        currentCellIndex++; // インデックスを次に進める
      }
    }
  } else if (event.keyCode === 46 || event.keyCode === 8) { // Deleteキー
    event.preventDefault(); // デフォルトのDeleteキーの動作を無効化
    if (currentCellIndex >= 0) { // インデックスが0以上の場合のみ実行
      const targetCellData = cellData[currentCellIndex];
      const targetCell = document.getElementById(targetCellData.id);
  
      // 現在のセルのテキストを取得
      let text = targetCell.textContent;
  
      // もしセルの文字列が空でない場合は、最後の文字を削除する
      if (text.length > 0) {
        text = text.substring(0, text.length - 1); // 最後の文字を削除
        targetCell.textContent = text;
      } else {
        // もしセルの文字列が空の場合は、一つ前のセルに移動して再帰的に削除処理を実行する
        currentCellIndex--; // インデックスを前に戻す
        // 再帰的に削除処理を実行
        if (currentCellIndex >= 0) {
          document.dispatchEvent(new KeyboardEvent('keydown', { 'keyCode': event.keyCode }));
        }
      }
    }
  }
});
})()