var LOGS_REFRESH_FREQUENCE = 2000; //in milliseconds var expert_mode = false; jQuery(document).ready(function(){ var current_command = data; var help = null; /** These functions are event watchers on the img_display_help **/ $(document).on("mouseenter", "#img_display_help", function() { $('#img_display_help').attr('width','40px'); $('#img_display_help').attr('height','40px'); }); $(document).on("mouseleave", "#img_display_help", function() { $('#img_display_help').attr('width','30px'); $('#img_display_help').attr('height','30px'); }); $(document).on('click','#img_display_help', function() { alert(help); }); /** This function detete the childs of command_form after the child n° start_position **/ function delete_childs_after(start_position) { var form = $("#command_form"); var length = form.children().length; for (var i = start_position; i < length; i++) { form.children().last().remove(); } } /** This function create the select item with the commands in grammar.json **/ function init_first_param(corresponding_data) { var sel = $('<select>', {name: "first_param", id:"id_first_param"}).appendTo('#command_form'); sel.append($("<option>").attr('value', "Choose Value").text("Choose Value: ")); for (var tmp in corresponding_data) { sel.append($("<option>").attr('value', corresponding_data[tmp]["name"]).text(corresponding_data[tmp]["name"])); } sel.css("font-size", "20px"); } /** This event watcher is tiggered when the first_param (second submit element) is changed, it creates the inputs fields, desc, help and the submit button with the corresponding values in grammar.json with current_command previously defined **/ $(document).on('change','#id_first_param', function() { delete_childs_after(4); var form = $("#command_form"); var selected_command = $("#id_first_param").find(":selected").val(); var input = null; var label = null; for (var tmp in current_command) { if (current_command[tmp]["name"] === selected_command) { input = current_command[tmp]["input_label"][0]; help = current_command[tmp]["help"]; label = current_command[tmp]["label"]; } } var number = 0; for (var input_field in input) { var maxlength = input[input_field][0]; var type_input = input[input_field][1]; var desc = input[input_field][2]; var id = "input_number_" + number; var name = "input_number_" + number; var title = desc + ". value type: " + type_input; number++; input_element = $("<label>" + input_field + " </label><input title=\"" + title + "\" type=\"text\" id=\"" + id + "\" name=\"" + id + "\" maxlength=\"" + maxlength + "\" size=\"10\" text=\"" + input_field + "\"/>"); form.append(input_element); } var img_display_help = document.createElement('img'); img_display_help.src = "/public/static/media/question-mark.png"; img_display_help.width = 30; img_display_help.height = 30; img_display_help.title = "Click to display help for this command"; img_display_help.id ="img_display_help"; img_display_help.alt="html5"; form.append(img_display_help); $("#img_display_help").css("margin-left", "10px"); form.append("<br><br><p id=\"command_label\">Command description: " + label + "</p>"); //$("#command_label").css("text-align", "center"); $("#command_label").css({ 'font-size' : '15px', 'text-align' : 'center', 'font-weight' : 'bold' }); form.append("<br>") $('<input>', {id:"submit_button", type:"submit", value:"SEND"}).appendTo(form); }); /** This event watcher is triggered when the first select element is changed, it set the json current_command to SET, GET or DO, it calls init_first_param **/ $("#id_first_command").change(function() { delete_childs_after(3); var selected_command = $("#id_first_command").find(":selected").val(); if (selected_command !== "Command") { current_command = data["Telescope"][selected_command.toLowerCase()]; init_first_param(data["Telescope"][selected_command.toLowerCase()]); } }); /** This event watcher is triggered when the expert mode is activated, it generates the corresponding input field and submit_button **/ $("#expert_mode").click(function(){ if (!expert_mode) { expert_mode = true; $("#command_form_expert").append("<input id='input_command_expert' type='text' name='commande_expert'>"); $('<input>', {id:"submit_button_expert", type:"submit", value:"SEND"}).appendTo('#command_form_expert'); } else { $("#input_command_expert").remove(); $("#submit_button_expert").remove(); expert_mode = false; } //$("#command_form").remove(); }); /** This event watcher is triggered when the expert form is submitted, it's and AJAX POST request, the response is displayed in the console **/ $("#command_form_expert").submit(function(event){ event.preventDefault(); $.post('/dashboard/observation_status/send_command_to_telescope/submit_expert', $(this).serialize(), function(data){ var obj = JSON.parse(data); console.log(obj.message); console.log(obj.response); if (obj.response === "KO: Unknown command") alert("Unknown command"); else if (obj.response.startsWith("KO")) alert(obj.response); }) .fail(function() { alert( "An error occured" ); }) }); /** This AJAX refreshed request is an HTTP GET retrieving the Logs of the telescope **/ interval_telescope = setInterval(function() {ajax_request("telescope", "telescope_list");}, LOGS_REFRESH_FREQUENCE); function ajax_request(){ var telescope_url ="/devices/update_telescope_logs"; $.ajax({ url: telescope_url, type: 'get', dataType: 'text', success: function(data) { var obj = JSON.parse(data); if (obj) { var listDiv = document.getElementById('telescope_logs'); listDiv.innerHTML = ''; for (var tmp in obj) { var li = document.createElement('li'); li.innerHTML = obj[tmp]['fields']['created'] + ": " + obj[tmp]['fields']['message']; // Use innerHTML to set the text listDiv.appendChild(li); } } }, error: function() { console.log('Ajax error: GET request failed\n'); } }); } });