var ui = {
  init: function () {
    console.log("Init UI");
    $("#api_endpoint_field").val(app_state.api_endpoint);
    $("#api_token_field").val(app_state.api_token);
  },
  address_changed_handler: function () {
    app_state.api_endpoint = $("#api_endpoint_field").val();
    app_state.save_state();
    console.log("Address changed -> " + app_state.api_endpoint);
  },
  token_changed_handler: function () {
    app_state.api_token = $("#api_token_field").val();
    app_state.save_state();
    console.log("Token Changed -> " + app_state.api_token);
  },
  poll_changed_handler: function () {
    console.log("toggle of poll changed." + Date.now());
    app.poll_toggle();
  },
  toggle_configuration_form: function () {
    if (app_state.show_config_form) {
      console.log("hide the form");
      app_state.show_config_form = false;
      $("#configuration_form").css('display", "none');
    } else {
      console.log("display the form");
      app_state.show_config_form = true;
      $("#configuration_form").css("display", "inline");
    }
    console.log("toggle configuration form" + app_state.show_config_form);
  },
};