JavaScript-Ini, configuration file for JavaScript

A script to load and save a JSON configuration file that automatically creates a user interface to configure the application.

The point of this scenario is that the developer only needs to set a list of application settings in the JSON table. The script is responsible for creating the appropriate user interface in HTML and updating the configuration file to save the user selection.

1. The parameters are set in the JSON file. It contains initial values that the user can change.
2. The JSON file is loaded into the web page, and this script creates the form according to its contents.
3. You can change settings from this interactive form.
4. The changes are saved in the same JSON file.

The script uses Ajax to save a configuration file that can be on the local computer or on the server for an online application.

You actually have a choice between

1. Send data to another page or script using the Submit button.
   In this case, you can remove the inclusion of the Ajax framework
2. Use Ajax to store data directly in a file.
   In this case, you can remove the generation strings from the form tag.

By default, the demo uses Ajax.

Configuration file and loading

To load it very simply, you just need to include the INI file as a JavaScript script:

<script type="text/javascript" src="myapp.ini"></script>

This file contains a table named config, which is then included in the interface page and can be used by the page's JavaScript code.

Example configuration file:

var config={
  "Language": {
    "name": "lang",
       "initial": "es",
       "select": [ "en", "fr", "es"]
  },
  "Url": {
    "name": "url",
    "input": "http://www.scriptol.com/",
  },
  "Saving options": {
    "list": [
       {
         "name": "save",
         "label": "Autosave",
         "checkbox": true
       },
       {
         "name": "prompt",
         "label": "Prompt",
         "checkbox": false
       }
     ]
  }
}

This file contains three sample sections: "Language," "Url," "Saving options." The name of the sections is absolutely free.
They can contain one or more form objects, as in the third section. You can add as many sections and form objects to the configuration table as you want.

A number of reserved words are used by the generator:

• list box: to include a list of form objects
.
• name - name and identifier of the form object
;
• label-The text to be displayed against the object.
• initial - initial value. It can also be assigned directly to the object, this is the case for input, verification.
• input: to create text input field
.
• select-Creates a list of parameters. A list of variants is then assigned as above.
• checkbox: for check box. The preset check box is set to true if not
.

Order is important within a section. Before you can create a form object, there must be a name value and an initial value.

Create a form

We create fieldset and form beacons, and then look at the list of sections:

form +="<fieldset><legend>Configuration</legend>\n";
form +="<form method='POST' action='myapp.php'>\n";
for(group in config)
{
  form += "<p class='group'>" + group + "</p>";
  parseGroup(config[group]);
}
form += "<p><input type='button' onclick='saveIni(\"myapp.ini\")'
         value='Update Configuration'></p>";
form += "</form>";
form += "</fieldset>";

We created a button object to save the configuration to Ajax. If you want to POST the form data, the button type will be changed to submit.

For each section, the function of creating a parseGroup form object is called:

function parseGroup(innarr)
{
  var initial = '';
  var name = '';
  for(option in innarr)
  {
    switch(option)
    {
      case 'list':
            var garr = innarr[option];
            for(var i = 0; i < garr.length; i++)
            {
              parseGroup(garr[i]);
              form +="<br>";
            }
            break;
      case 'label':
           addLabel(innarr[option]);
           break;
      case 'name':
          name = innarr[option];
          break;
      case 'initial':
           initial = innarr[option];
           break;
      case 'select':
           addSelect(name, initial, innarr[option]);
           break;
      case 'input':
           addInput(name, innarr[option]);
           break;
      case 'checkbox':
           addCheck(name, innarr['checkbox']);
           break;
      default:
           break;
   }
  }
}

The function is then called for each type of tag. For a complete script, see the demo archive.

This script creates the following interface:

After selecting the application options, click Refresh to save the configuration.

Backup configuration

The same algorithm is used to update the configuration table before backing it up to an INI file.

Again, each section:

function update(config)
{
  for(group in config)
  {
    updateEntry(config[group]);
  }
}

And for each of them, access to each form object is carried out in accordance with its identifier. This is what was assigned to the name attribute in the JSON file.

function updateEntry(innarr)
{
  var initial = '';
  var name = '';
  var element = null;
  for(option in innarr)
  {
    switch(option)
    {
      case 'list':
            var garr = innarr[option];
            for(var i = 0; i < garr.length; i++)
            {
              updateEntry(garr[i]);
            }
            break;
      case 'name':
            name = innarr[option];
            element = document.getElementById(name);
            break;
      case 'initial':
            initial = innarr[option];
            break;
      case 'select':
            var value = element.options[element.selectedIndex].value;
            innarr['initial'] = value;
            break;
      case 'input':
            innarr['input'] = element.value;
            break;
      case 'checkbox':
            innarr['checkbox'] = element.checked;
            break;
      default:
            break;
    }
  }
}

Therefore, user-defined values are assigned to table attributes, depending on the type of form object. It remains to save the configuration table in the myapp.ini file. The saveInit function is associated with an update button.

function done(content) { alert(content); }
function saveIni(filename)
{
  update(config);
  var data = 'url=' + filename + '&data=var config=' + JSON.stringify(config, null, 4);
  AAWrite('saveconfig.php', data, done);
}

The AAWrite function in the Ajax Anaa lightweight framework is called to execute the saveconfig.php script to which the JSON content is sent. The saveconfig.php script saves this content in an ini file. Here is this scenario:

<?php
  $data = $_POST['data'];
  $url  = $_POST['url'];
  $f = fopen($url, 'w');
  fputs($f, $data);
  fclose($f);
  echo "Saved.";
?>

If you use JavaScript-Ini for a local Node.js application, instead of the Anaa framework, you will need to use WebSocket instead and include it in the interface page socket.io.

Download the full Ajax demo

List of files:

• JavaScript-ini.html: setup page.
• javaScript-ini.js - a script for generating an interface and saving parameters.
• anaa.js: Ajax framework.
• myapp.ini is the configuration file containing the table.
• saveconfig.php - script for backing up the configuration file.