matt/enckes-web-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added description to table and fixed sanitizeName function

Browse Source
This commit is contained in:
Matthew Welch 2020-11-21 14:58:05 -08:00
parent f1146696b7
commit 5c6438764b
4 changed files with 75 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/css/index.css
View File

@ -31,3 +31,9 @@ td > textarea {
width: 100%;
height: 100%;
}
.table-description {
width: 30em;
height: 5em;
margin: 5px;
}

1
src/database.json
View File

@ -4,6 +4,7 @@
"filter": false,
"hidden": false,
"tab-name": "",
"description": "",
"col-def": [
{
"field": "column1",

34
src/index.js
View File

@ -67,7 +67,32 @@ let menu_template = [
]
function sanitizeName(table_name) {
return table_name.toLowerCase().replace(/ /g, "")
let pattern = " !@#$%^&*()_+=/?.,<>;':\"[]{}\\`~|-"
let new_name = table_name.toLowerCase();
for (let char of table_name) {
if (pattern.includes(char)) {
new_name = new_name.replace(char, "");
}
}
return new_name;
}
function cleanData(data) {
for (let table of data) {
let fields = [];
for (let col of table["col-def"]) {
fields.push(col["field"]);
}
for (let row of table["rows"]) {
for (let key of Object.keys(row)) {
if (!fields.includes(key) && key != "uid") {
delete row[key];
}
}
}
}
return data;
}
ipcMain.on("save", (event, data, new_file) => {
@ -97,6 +122,7 @@ ipcMain.on("save", (event, data, new_file) => {
}
if (save_data.file_path) {
fs.writeFileSync(app.getPath("userData")+"\\data.json", JSON.stringify(save_data))
data = cleanData(data);
fs.writeFileSync(save_data.file_path, JSON.stringify(data, null, 4));
let name = save_data.file_path.match(/.+\\([^\\]+)/)[1];
let nav_content = save_data.file_path.replace(".json", "-nav-content.html");
@ -123,7 +149,7 @@ ipcMain.on("save", (event, data, new_file) => {
if (!table["hidden"]) {
if (!added_tables.includes(table["name"])) {
if (table["tab-name"] == "") {
tabs += `<div class="tab-pane fade" id="${sanitizeName(table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(table["name"])}-tab"><h3 id="${sanitizeName(table["name"])}-header">${table["name"]} (<span id="${sanitizeName(table["name"])}-completed"></span>/<span id="${sanitizeName(table["name"])}-total"></span>)</h3><table id="${sanitizeName(table["name"])}-table" class="table table-hover"></table></div>`;
tabs += `<div class="tab-pane fade" id="${sanitizeName(table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(table["name"])}-tab"><h3 id="${sanitizeName(table["name"])}-header">${table["name"]} (<span id="${sanitizeName(table["name"])}-completed"></span>/<span id="${sanitizeName(table["name"])}-total"></span>)</h3><p>${table["description"]}</p><table id="${sanitizeName(table["name"])}-table" class="table table-hover"></table></div>`;
nav += `<li class="nav-item"><a class="nav-link" id="${sanitizeName(table["name"])}-tab" data-toggle="tab" href="#${sanitizeName(table["name"])}" role="tab" aria-controls="${sanitizeName(table["name"])}" aria-selected="false">${table["name"]}</a></li>`
added_tables.push(table["name"]);
} else {
@ -131,8 +157,8 @@ ipcMain.on("save", (event, data, new_file) => {
let a = `<a id="${sanitizeName(tab_name)}-tab" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">${tab_name}</a>`
let div = $(`<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0; left: 0; transform: translate3d(0px, 39px, 0px);"></div>`)
for (let tab_table of table_tabs[tab_name]) {
tabs += `<div class="tab-pane fade" id="${sanitizeName(tab_table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(tab_table["name"])}-tab"><h3 id="${sanitizeName(tab_table["name"])}-header">${tab_table["name"]} (<span id="${sanitizeName(tab_table["name"])}-completed"></span>/<span id="${sanitizeName(tab_table["name"])}-total"></span>)</h3><table id="${sanitizeName(tab_table["name"])}-table" class="table table-hover"></table></div>`;
div.append(`<a class="dropdown-item" data-toggle="tab" href="#${sanitizeName(tab_table["name"])}" aria-expanded="true">${sanitizeName(tab_table["name"])}</a>`)
tabs += `<div class="tab-pane fade" id="${sanitizeName(tab_table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(tab_table["name"])}-tab"><h3 id="${sanitizeName(tab_table["name"])}-header">${tab_table["name"]} (<span id="${sanitizeName(tab_table["name"])}-completed"></span>/<span id="${sanitizeName(tab_table["name"])}-total"></span>)</h3><p>${tab_table["description"]}</p><table id="${sanitizeName(tab_table["name"])}-table" class="table table-hover"></table></div>`;
div.append(`<a class="dropdown-item" data-toggle="tab" href="#${sanitizeName(tab_table["name"])}" aria-expanded="true">${tab_table["name"]}</a>`)
added_tables.push(tab_table["name"]);
}
let li = $(`<li class="nav-item dropdown"></li>`);

40
src/js/script.js
View File

@ -17,7 +17,14 @@ $.ajax({
});
function sanitizeName(table_name) {
return table_name.toLowerCase().replace(/ /g, "")
let pattern = " !@#$%^&*()_+=/?.,<>;':\"[]{}\\`~|-"
let new_name = table_name.toLowerCase();
for (let char of table_name) {
if (pattern.includes(char)) {
new_name = new_name.replace(char, "");
}
}
return new_name;
}
function replaceLast(str, str1, str2) {
@ -33,6 +40,10 @@ function makeTables() {
// create nav element
$("nav").append(`<button id="${name}-nav" class="w3-bar-item w3-button tablink" style="white-space: nowrap" onclick="showTable('${name}')" oncontextmenu="navContext(event, '${table["name"]}')" draggable="true" ondrop='tableDrop(event, ${table_index})' ondragstart='tableDrag(event, ${table_index})' ondragover='allowDrop(event)'>${table["name"]}</button>`);
let textarea = $(`<textarea id="${name}-description" class="table-description">${table["description"]}</textarea>`);
textarea.focusout(function (event){save()});
let table_elm = $("<table class='editor-table'></table>");
table_elm.attr("id", name+"-table");
@ -92,6 +103,7 @@ function makeTables() {
table_elm.append(tr);
// table_elm.attr("class", "table table-hover");
$("#tables").append(textarea);
$("#tables").append(table_elm);
}
$("nav").append("<button class='w3-button w3-green' onclick='addTable()'>+</button>");
@ -213,6 +225,7 @@ function addTable(dup_table=null, tab_name=null) {
name: name,
filter: false,
hidden: false,
description: "",
"col-def": col_def,
rows: rows
}
@ -280,7 +293,7 @@ function save() {
let table_name = $("#table-name").val();
let table_hidden = $("#table-hidden").prop("checked");
let title = $("#col-name").val();
let field = $("#col-name").val().toLowerCase().replace(" ", "");
let field = sanitizeName($("#col-name").val());
let sortable = $("#col-sortable").prop("checked");
let selectable = $("#col-selectable").prop("checked");
let cell_text = $("#cell-text").val();
@ -306,6 +319,7 @@ function save() {
return;
}
}
table["description"] = $(`#${sanitizeName(table["name"])}-description`).val();
table["tab-name"] = tab_name;
table["hidden"] = table_hidden;
for (let col of table["col-def"]) {
@ -455,6 +469,9 @@ function showTable(table_name) {
let tables = $(".editor-table");
tables.css("display", "none");
$(`#${table_name}-table`).css("display", "block");
let table_description = $(".table-description");
table_description.css("display", "none");
$(`#${table_name}-description`).css("display", "block");
let tabs = $(".tablink");
tabs.removeClass("w3-grey");
$(`#${table_name}-nav`).addClass("w3-grey");
@ -533,6 +550,25 @@ function finishEditHeader(event, cell_id) {
}
}
function finishEditDescription(event, table_name) {
let cell = $(`#${table_name}-description`);
if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
// let text_area_val = $(`#${cell_id}-edit`).val();
// $("#col-name").val(text_area_val);
save();
} else if (event.key == "Escape") {
cell.off("focusout");
// let cell_val = $("#col-name").val();
// $(`#${cell_id}-edit`).val(cell_val);
save();
} else if (event.type == "focusout") {
// let text_area_val = $(`#${cell_id}-edit`).val();
// $("#col-name").val(text_area_val);
save();
}
}
function navContext(event, table_name) {
let context_menu = $(`<div style="position: absolute; top: ${event.y-10}px;left: ${event.x-10}px" onmouseleave="$(this).remove()"></div>`);
let buttons = $(`<div class="w3-dropdown-content w3-bar-block w3-border" style="display: block">