added description to table and fixed sanitizeName function

src/css/index.css

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

src/database.json

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

src/index.js

@@ -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>`;
+              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">${sanitizeName(tab_table["name"])}</a>`)
+              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>`);

src/js/script.js

@@ -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">