");
- for (let i=0; i < table_data["col-def"].length; i++) {
- const col_id = table_data["col-def"][i]["field"];
+ $.each(table_data["col-def"], (i, col) => {
+ const col_id = col["field"];
table.find("thead > tr")
.append($("| ")
.attr("id", table_id+"-"+col_id)
- .text(table_data["col-def"][i]["title"]));
- }
+ .text(col["title"])
+ .on("click", () => {
+ selectCell(table_id+"-"+col_id);
+ }));
+ })
- for (let i=0; i < table_data["rows"].length; i++) {
- const row = table_data["rows"][i];
+ $.each(table_data["rows"], (i, row) => {
const row_id = row["uid"];
let tr = $(" | |
")
.attr("id", table_id+"-"+row_id);
- for (let j=0; j < table_data["col-def"].length; j++) {
- const col = table_data["col-def"][j];
+ $.each(table_data["col-def"], (j, col) => {
const col_id = col["field"];
+ let cell_id = table_id+"-"+col_id+"-"+row_id;
let td = $(" | ")
- .attr("id", table_id+"-"+col_id+"-"+row_id)
- .text(row[col_id]);
+ .attr("id", cell_id)
+ .text(row[col_id])
+ .on("click", () => {
+ selectCell(cell_id);
+ });
tr.append(td);
- }
+ })
table.find("tbody").append(tr);
- }
+ })
table_div.append(table)
$("#tables").append(table_div);
}
+ nav.append($("")
+ .attr("id", "add-table")
+ .addClass("nav-link btn-success")
+ .html("")
+ .on("click", () => {
+ addTable();
+ }))
}
-function showTab(tab_name) {
+function updateDetailsPanel() {
+ let data = getSelectedCellData();
+ detail_table_name.val(data["table_name"]);
+ detail_column_name.val(data["col_name"]);
+ if (data["row_id"]) {
+ detail_cell_text.attr("disabled", false);
+ detail_cell_text.val(data["cell_text"]);
+ } else {
+ detail_cell_text.attr("disabled", true);
+ detail_cell_text.val("");
+ }
+}
+
+function showTab(table_name) {
+ current_table = table_name;
+ let tab_name = table_name+"-tab";
$("#tables").children().removeClass("show active");
- $("nav").children().removeClass("active");
+ nav.children().removeClass("active");
$("#"+tab_name).addClass("show active");
$("#"+tab_name.replace("-tab", "-nav")).addClass("active");
+ selectCell($("table:visible > tbody > tr:first > td:first").attr("id"));
+}
+
+function selectCell(cell_id) {
+ $("td, th").removeClass("selected");
+ $("#"+cell_id).addClass("selected");
+ selected_cells = [cell_id];
+ updateDetailsPanel();
+}
+
+function getSelectedCellData() {
+ if (selected_cell_data && selected_cells[0] === selected_cell_data["selected_id"]) {
+ return selected_cell_data;
+ }
+ let table_pattern = /(table\d+)/;
+ let column_pattern = /(column\d+)/;
+ let row_pattern = /(row\d+)/;
+ let table_match = table_pattern.exec(selected_cells[0]);
+ let column_match = column_pattern.exec(selected_cells[0]);
+ let row_match = row_pattern.exec(selected_cells[0]);
+ let cell_data = {
+ "selected_id": selected_cells[0],
+ "table_id": table_match[0],
+ "table_nav_id": table_match[0]+"-nav",
+ "col_id": table_match[0]+"-"+column_match[0],
+ }
+ $.each(tables_data, (i, table_data) => {
+ if (table_data["id"] === table_match[0]) {
+ cell_data["table_index"] = i;
+ cell_data["table_name"] = table_data["name"];
+ $.each(table_data["col-def"], (j, col) => {
+ if (col["field"] === column_match[0]) {
+ cell_data["col_index"] = j;
+ cell_data["col_name"] = col["title"];
+ return false;
+ }
+ })
+ if (row_match !== null) {
+ cell_data["row_id"] = table_match[0]+"-"+row_match[0];
+ cell_data["cell_id"] = table_match[0]+"-"+column_match[0]+"-"+row_match[0];
+ $.each(table_data["rows"], (j, row) => {
+ if (row["uid"] === row_match[0]) {
+ cell_data["row_index"] = j;
+ cell_data["cell_text"] = row[column_match[0]];
+ cell_data["row_key"] = column_match[0];
+ return false;
+ }
+ })
+ }
+ return false;
+ }
+ })
+ selected_cell_data = cell_data;
+ return selected_cell_data;
+}
+
+function addTable() {
+ let table_ids = getTableIDs();
+ let table_num = 0;
+ for (let id of table_ids) {
+ if (table_ids.includes(`table${table_num}`)) {
+ table_num++;
+ } else {break;}
+ }
+ let table_id = `table${table_num}`;
+ let table_data = {
+ "id": table_id,
+ "name": "New Table",
+ "filter": false,
+ "hidden": false,
+ "tab-name": "",
+ "description": "",
+ "col-def": [
+ {
+ "field": "column0",
+ "title": "Column 1",
+ "sortable": true,
+ "selectable": false
+ }
+ ],
+ "rows": [
+ {
+ "uid": "row0",
+ "column0": "",
+ }
+ ]
+ }
+ tables_data.push(table_data);
+ refreshPage();
}
function insertColumn(table_id, index) {
if (index < 0){return;}
- for (let i=0; i < tables_data.length; i++) {
- if (tables_data[i]["id"] === table_id) {
- let col_ids = getColumnIDs(tables_data[i]["col-def"]);
+ $.each(tables_data, (i, table_data) => {
+ if (table_data["id"] === table_id) {
+ let col_ids = getColumnIDs(table_data["col-def"]);
let col_num = 0;
for (let id of col_ids) {
if (col_ids.includes(`column${col_num}`)) {
@@ -98,7 +222,7 @@ function insertColumn(table_id, index) {
} else {break;}
}
let col_id = `column${col_num}`
- tables_data[i]["col-def"].splice(index, 0,{
+ table_data["col-def"].splice(index, 0,{
"field": col_id,
"title": "New Column",
"sortable": false,
@@ -125,19 +249,19 @@ function insertColumn(table_id, index) {
tr = $(tr);
tr.children(`td:nth-child(${index + 1})`)
.insert($("")
- .attr("id", table_id+"-"+col_id+"-"+tables_data[i]["rows"][j]["uid"])
+ .attr("id", table_id+"-"+col_id+"-"+table_data["rows"][j]["uid"])
.text(""))
});
- break;
+ return false;
}
- }
+ })
}
function insertRow(table_id, index) {
if (index < 0){return;}
- for (let i=0; i < tables_data.length; i++) {
- if (tables_data[i]["id"] === table_id) {
- let row_ids = getRowIDs(tables_data[i]["rows"]);
+ $.each(tables_data, (i, table_data) => {
+ if (table_data["id"] === table_id) {
+ let row_ids = getRowIDs(table_data["rows"]);
let row_num = 0;
for (let id of row_ids) {
if (row_ids.includes(`row${row_num}`)) {
@@ -145,12 +269,12 @@ function insertRow(table_id, index) {
} else {break;}
}
let row_id = `row${row_num}`
- let col_ids = getColumnIDs(tables_data[i]["col-def"]);
+ let col_ids = getColumnIDs(table_data["col-def"]);
let row_data = {"uid": row_id};
for (let id of col_ids) {
row_data[id] = "";
}
- tables_data[i]["rows"].splice(index, 0, row_data);
+ table_data["rows"].splice(index, 0, row_data);
let num_rows = $(`#${table_id} > tbody > tr`).length;
if (index >= num_rows) {
@@ -172,9 +296,9 @@ function insertRow(table_id, index) {
}
$(`#${table_id} > tbody > tr:nth-child(${index+1})`)
.insert(tr);
- break;
+ return false;
}
- }
+ })
}
function getColumnIDs(columns) {
@@ -193,6 +317,58 @@ function getRowIDs(rows) {
return ids;
}
+function getTableIDs() {
+ let ids = [];
+ for (let table of tables_data) {
+ ids.push(table["id"]);
+ }
+ return ids;
+}
+
+nav.on("wheel", (event) => {
+ event.preventDefault();
+ if (event.originalEvent.deltaY > 0) {
+ nav_scroll += 100;
+ nav_scroll = Math.min(nav_scroll, nav.prop("scrollWidth") - nav.width());
+ let speed = nav_scroll - nav.scrollLeft();
+ nav.stop();
+ nav.animate({scrollLeft: nav_scroll}, {speed: speed, easing: "linear"});
+ } else {
+ nav_scroll -= 100;
+ nav_scroll = Math.max(nav_scroll, 0);
+ let speed = nav.scrollLeft() - nav_scroll;
+ nav.stop();
+ nav.animate({scrollLeft: nav_scroll}, {speed: speed, easing: "linear"});
+ }
+})
+
+detail_table_name.on("input", (event) => {
+ let input = $(event.target);
+ let new_table_name = input.val();
+ let data = getSelectedCellData();
+ $(`#${data["table_nav_id"]}`).text(new_table_name);
+ tables_data[data["table_index"]]["name"] = new_table_name;
+ selected_cell_data["table_name"] = new_table_name;
+})
+
+detail_column_name.on("input", (event) => {
+ let input = $(event.target);
+ let new_col_name = input.val();
+ let data = getSelectedCellData();
+ $(`#${data["col_id"]}`).text(new_col_name);
+ tables_data[data["table_index"]]["col-def"][data["col_index"]]["title"] = new_col_name;
+ selected_cell_data["col_name"] = new_col_name;
+})
+
+detail_cell_text.on("input", (event) => {
+ let input = $(event.target);
+ let new_cell_text = input.val();
+ let data = getSelectedCellData();
+ $(`#${data["cell_id"]}`).text(new_cell_text);
+ tables_data[data["table_index"]]["rows"][data["row_index"]][data["row_key"]] = new_cell_text;
+ selected_cell_data["cell_text"] = new_cell_text;
+})
+
ipcRenderer.on("open-default", (event) => {
openFile("default.json");
})
|