#StackBounty: #javascript #electron Single user Electron application allowing basic CRUD operation on a table (stored in JSON)

Bounty: 50

I am completely new to JavaScript and I will be grateful for your comments on my Electron app (electron is a JS framework allowing to create of desktop apps).

I needed to create an application that stores a small database and allows me to do simple operations on the data. I just include a small fraction of that app here that embraces just basic CRUD functionality on one table. The table is serialized into a teams.json file with the following structure:

[
    {
        "name": "Blue",
        "gold": 0,
        "food": 0,
        "fame": 0
    },
    {
        "name": "Red",
        "gold": 0,
        "food": 0,
        "fame": 0
    },
    {
        "name": "Green",
        "gold": 0,
        "food": 0,
        "fame": 0
    }
]

App has just two screens. The first screen is just a whole table. The second screen allows modifications (see the picture).

enter image description here

The edit screen has two main parts:

  1. Read from JSON and construction of the HTML
  2. Serialization into JSON

1. Read and construction

function create_team(team) {
  var div_team = document.createElement("div");
  div_team.setAttribute("id", "team");
  var div_html_string = "<textarea class='divedit_str'>" + team.name + "</textarea>"
  div_html_string += "<textarea class='divedit'>" + team.gold + "</textarea>";
  div_html_string += "<textarea class='divedit'>" + team.food + "</textarea>";
  div_html_string += "<textarea class='divedit'>" + team.fame + "</textarea>";
  div_team.innerHTML = div_html_string;

  var remove_button = document.createElement("button");
  remove_button.setAttribute("class", "remove")
  remove_button.innerHTML = "Remove";
  remove_button.addEventListener("click", (e) => {
    e.target.parentElement.remove();
  })
  div_team.appendChild(remove_button)

  return div_team;
}

function loading_panels() {
  teams = JSON.parse(fs.readFileSync('./app/teams.json').toString());

  //// loading view teams panel
  teams.forEach((team) => {
    div_teams.appendChild(create_team(team));
  });
}

2. Serialization

button_teams.addEventListener('click', () => {
  var teams_div = document.querySelectorAll("div#team");
  var json_teams = [];
  teams_div.forEach((team) => {
    json_teams.push({ "name": team.children[0].value, "gold": Number(team.children[1].value), "food": Number(team.children[2].value), "fame": Number(team.children[3].value) });
  });
  fs.writeFileSync('./app/teams.json', JSON.stringify(json_teams), function (err) {
    if (err) throw err;
  });
  window.location.replace("./index.html");
});

The working code can be found in this GitHub repository.

Since this is a common MVC problem I’m curious whether there is a solution where I can separate the view and main logic. Please ignore the CSS of the app. I’m not a frontend developer, therefore, I believe the styles are completely wrong.

Thank you for any comments!


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.