JSON Editor Widget for Exosite Portals

JSON Widget.js

// select one or more data sources from the list above to view this demo.
function( container, portal )
{
  console.log("Script Started")

  var settings_datasource = "sws"
      
  var messageBox = document.createElement("div");
  messageBox.style.display = "none";
  messageBox.style.position = "absolute";
  messageBox.style.bottom = 0;
  messageBox.style.left = 0;
  messageBox.style.right = 0;
  messageBox.style.width = "auto";
  messageBox.style.padding = "5px";
  messageBox.style.background = "#CC0000";
  messageBox.style.color = "#FFFFFF";
  var messageTimerId = null;

  var mainPage = getDeviceTable()

  displayMainPage()

  // ---- Functions ----
  function clearWidget(){
    while (container.hasChildNodes()) {
      container.removeChild(container.lastChild);
    }
  }
  
  function showMessage(message, duration, color){
    duration = duration || 5; //duration has a default of 5 seconds
    color = color || "#CC0000"; //color has a default of red
    if(messageTimerId != null){
      clearTimeout(messageTimerId);
    }

    messageBox.textContent = message;
    messageBox.style.display = "block";
    messageBox.style.background = color;

    messageTimerId = setTimeout(function(){messageBox.style.display = "none";}, 1000*duration);
  }
  
  function displayMainPage(){
    clearWidget()
    container.appendChild(messageBox)
    container.appendChild(mainPage)
  }

  function displaySettingsPage(resource){
    clearWidget()
    container.appendChild(messageBox)
    container.appendChild(getSettingsBox(resource))
  }

  function submitSettings(settingsString, resource){
    console.log("Resource: " + resource + " Content: " + compress(settingsString))
    if(settingsString != "Loading..."){
      //Verify JSON
      try{
        JSON.parse(settingsString);
      }catch(e){
        showMessage("Error in JSON");
        console.log("Error in JSON: " + e);
        return;
      }
      write(resource, compress(settingsString))
        .done(onWriteDone)
        .fail(onWriteFail)  
    }else{
      console.log("Something tried to submit the loading text. I prevented it, you're welcome.")
    }
  }
  
  function getLatestDataPoint(resource){
    read(resource, JSON.parse('{"limit":1}'))
      .done(onReadDone)
      .fail(onReadFail)
    ;
  }

  function onReadDone(data){
    var textarea = document.getElementById("settings_text")
    try{
      textarea.value = JSON.stringify(JSON.parse(data[1]), undefined, 2);
    }catch(e){
      textarea.value = data[1];
    }
    disableSubmit(false);
  }
      
  function onReadFail(data){
    var textarea = document.getElementById("settings_text")
    textarea.value = "Error: " + data;
    disableSubmit(true);
  }

  function disableSubmit(disabled){
    var subButton = document.getElementById("sub_button")
    subButton.disabled = disabled;
  }

  function getSettingsBox(resource){
    var form = document.createElement('form')
    var title = document.createElement('h3')
    var titleText = document.createTextNode('Settings for "' + resource[0] + '":')
    var textarea = document.createElement('textarea')
    var lineBreak1 = document.createElement('br')
    var lineBreak2 = document.createElement('br')
    var subButton = document.createElement('button')
    var canButton = document.createElement('button')
    var subText = document.createTextNode("Submit Config")
    var canText = document.createTextNode("Cancel")
    form.onsubmit = (function(resource){return function(){submitSettings(textarea.value, resource); return false};})(resource);
    form.style.height = '100%'
    //textarea.cols = 65
    //textarea.rows = 18
    textarea.style.width = '98%';
    textarea.style.height = '70%';
    textarea.id = "settings_text"
    textarea.value = "Loading..."
    subButton.appendChild(subText)
    subButton.id = "sub_button"
    subButton.disabled = true;
    canButton.onclick = function(){displayMainPage(); return false}
    canButton.appendChild(canText)
    title.appendChild(titleText)
    title.style.padding = 0;
    title.style.margin = 0;
    form.appendChild(title)
    form.appendChild(lineBreak1)
    form.appendChild(textarea)
    form.appendChild(lineBreak2)
    form.appendChild(subButton)
    form.appendChild(canButton)

    getLatestDataPoint(resource);

    return form
  }

  function getDeviceTable(){
    var table = document.createElement('table')
    table.style.padding = "3px";
    table.style.background = '#efefef'
    table.style.width = '100%'
    table.frame = 'hsides';
    table.style.border = '2px #e6e6e6 solid';


    var header = document.createElement('tr')
    table.appendChild(header)

    for(var i in portal.clients){
      var row = document.createElement('tr');
      var cell2 = document.createElement('td');
      var button = document.createElement('button')
      var title = document.createTextNode("Edit Config")
      button.appendChild(title)
      button.onclick = (function(i){return function(){displaySettingsPage([portal.clients[i].alias, settings_datasource]); console.log("Showing client: " + i)}; })(i);
      button.style.width = "100%"
      cell2.appendChild(button)
      row.appendChild(button)
        
      var cell1 = document.createElement('td');
      var client = document.createTextNode(portal.clients[i].info.description.name)
      cell1.appendChild(client)
      row.appendChild(cell1)
      table.appendChild(row);
    }

    return table
  }
  
  function onWriteDone(data){
    showMessage("Write Sucessful", 3, "#00CC00");
    displayMainPage()
  }
      
  function onWriteFail(data){
    showMessage("Write Error: " + data, 10);
  }
  
  function compress(stringToCompress) {
  return stringToCompress.replace(/\s/g,"");
  }
}