我试图通过单击“执行”按钮在其下面的表中的页面上显示已选择并生成的变量，以便用户可以跟踪其进度并下载由此提供的结果图像。我对JavaScript的了解非常有限。
我到目前为止的代码是
$(document).ready(function() {
//init data
var arrayList = [{
"Id": 0,
"Name": "Select a target...",
},
{
"Id": 1,
"Name": "M15",
},
{
"Id": 2,
"Name": "M27"
},
{
"Id": 3,
"Name": "NGC891"
}
];
for (var i = 0; i <= arrayList.length; i++) {
$('#choices').append('<option value="' + arrayList[i].Id + '">' + arrayList[i].Name + '</option>');
}
});
$("#choices").change(function() {
// $.getJSON("jsondata/data.json", function(data) {
//use this if using external json sets
var $selection = $("#choices option:selected");
var key = $selection.val();
var vals = [];
$(".imghere").attr("src", "");
switch (key) {
case '1':
text: ["Please Select a Filter","Red (Rp)", "Green (V)", "Blue (B)"],
vals = ["Please Select a Filter...","Red", "Green", "Blue"];
$('#right').val('21:29:58.33');
$('#desc').val('+12:10:01.2');
break;
case '2':
vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"];
$('#right').val('19:59:36.34');
$('#desc').val('+22:43:16.09');
break;
case '3':
vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"];
$('#right').val('02:22:33.4');
$('#desc').val('+42:20:57.0');
break;
case '0':
vals = ['Please Select a Filter...'];
}
var $secondChoice = $("#filter");
$secondChoice.empty();
$.each(vals, function(index, value) {
$secondChoice.append("<option>" + value + "</option>");
});
});
$("#filter").change(function() {
var $filter = $("#filter option:selected").val();
var baseurl = "https://github.com/brychanjames/RTI-Simulator/blob/master/";
var $showimg = baseurl + $filter + ".jpg";
//$(".imghere").attr("src",$showimg); use this, the next line is demo purposes
$(".imghere").attr("src", $showimg); /*use variable in place of the placeholder image*/
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group"><div class="row"><div class="col"><label for="target-list">Target Name:</label></div></div>
<select id="choices" type="select" name="name" placeholder="Target Name" class="button form-control" aria-required="true" aria-invalid="false"></select>
<div class="alert alert-danger" style="display: none;"></div></div>
<div class="form-group">
<label>Right Ascension:</label> <input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" class="form-control" aria-required="true" aria-invalid="false"> <div class="alert alert-danger" style="display: none;"></div></div> <div class="form-group"><label>Declination:</label> <input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" class="form-control" aria-required="true" aria-invalid="false"> <div class="alert alert-danger" style="display: none;"></div></div>
<div><label class="wrapper" for="states">Filter</label>
<select id="filter" type="select" name="name" placeholder="Target Name" class="button form-control" aria-required="true" aria-invalid="false">
</select>
<button type="button" class="btn btn-success btn-block">
Go!
</button></div> <div role="alert" class="alert alert-danger mt-3 invisible">
<table id="session-table"><thead><tr><th>Target Name</th> <th>Right Ascension</th> <th>Declination</th> <th>Exposure Time (sec)</th> <th>Filter</th> <th>Timestamp (UTC)</th> <th>Image type</th> <th></th> <th></th></tr></thead>
<tbody> <tr>
<td><input id="choices" type="text" placeholder="Target Name" aria-required="true" aria-invalid="false"></td>
<td><input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" aria-required="true" aria-invalid="false"></td>
<td><input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" aria-required="true" aria-invalid="false"></td>
<td><input id="Exp" type="text" placeholder="N/A" name="Exp" aria-required="true" aria-invalid="false"></td>
<td><input type="text" id="filter" type="select" name="name" placeholder="Filter" aria-required="true" aria-invalid="false"></td>
<td><input type="text" placeholder="YYY-MM-DD HH:MM:SS" id="datetime"></td>
<td><input type="text" placeholder="JPEG" id="imageType"></td>
</tr>
<tr>
<td><input id="choices" type="text" placeholder="Target Name" aria-required="true" aria-invalid="false"></td>
<td><input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" aria-required="true" aria-invalid="false"></td>
<td><input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" aria-required="true" aria-invalid="false"></td>
<td><input id="Exp" type="text" placeholder="N/A" name="Exp" aria-required="true" aria-invalid="false"></td>
<td><input type="text" id="filter" type="select" name="name" placeholder="Filter" aria-required="true" aria-invalid="false"></td>
<td><input type="text" placeholder="YYY-MM-DD HH:MM:SS" id="datetime"></td>
<td><input type="text" placeholder="JPEG" id="imageType"></td>
</tr>
<tr>
<td><input id="choices" type="text" placeholder="Target Name" aria-required="true" aria-invalid="false"></td>
<td><input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" aria-required="true" aria-invalid="false"></td>
<td><input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" aria-required="true" aria-invalid="false"></td>
<td><input id="Exp" type="text" placeholder="N/A" name="Exp" aria-required="true" aria-invalid="false"></td>
<td><input type="text" id="filter" type="select" name="name" placeholder="Filter" aria-required="true" aria-invalid="false"></td>
<td><input type="text" placeholder="YYY-MM-DD HH:MM:SS" id="datetime"></td>
<td><input type="text" placeholder="JPEG" id="imageType"></td>
</tr>
</tbody></table></div>
我想显示已选择的目标名称和过滤器，目标的RA和Dec，以及每次选择“执行”按钮时的日期/时间，我该怎么做？
答案 0 :(得分：1)
如果将有关球体的所有相关信息放入arrayList，则呈现，添加事件和更改视觉效果的模式基本保持不变：
您使用数组中的正确球体对象创建了一些HTML。 然后将其附加在正确的位置。如果您将点击和更改事件放在一个方便的位置，则不必稍后更改或重新添加它们。
考虑到事件，结构也基本相同：您获得了数组内相应项目的ID，因此可以使用该项目进行下一步。这使得我们必须从HTML中获取的信息最少，这反过来意味着，如果我们添加更多的球体，则无需更改HTML。如果我们使用原来的大小写语法，则每次添加另一个球体时都必须更改大小写。
我将保留样式，完整的表结构并向您添加更多错误处理程序。可以提高很多效率，您可以保存所有选择器，因此不必每次都从DOM查询它们。或使用状态对象来保存信息，例如当前选择的过滤器。但是我想在这里展示基础知识。
const celestial_spheres = [
{
"id": 134578521,
"name": "M15",
"ascention": "21:29:58.33",
"declination": "+12:10:01.2",
"filters": [
{ "name": "red", "values": [ 1, 2, 3 ] },
{ "name": "green", "values": [ 4, 5, 6 ] },
{ "name": "blue", "values": [ 7, 8, 9 ] }
]
},
{
"id": 21412155,
"name": "M27",
"ascention": "19:59:36.34",
"declination": "+22:43:16.09",
"filters": [
{ "name": "red", "values": [ 10, 11, 12 ] },
{ "name": "green", "values": [ 13, 14, 15 ] },
{ "name": "blue", "values": [ 16, 17, 18 ] }
]
},
{
"id": 452456321347564364,
"name": "NGC891",
"ascention": "02:22:33.4",
"declination": "+42:20:57.0",
"filters": [
{ "name": "red", "values": [ 19, 20, 21 ] },
{ "name": "green", "values": [ 22, 23, 24 ] },
{ "name": "blue", "values": [ 25, 26, 27 ] }
]
}
];
const sphere_options = spheres => spheres.map( sphere => `<option value="${ sphere.id }">${ sphere.name }</option>` ).join( '' );
const filter_options = filters => filters.map( filter => `<option value="${ filter.name }">${ filter.name }</option>` ).join( '' );
const sphere_filter_row = ( id, filter ) => {
const cells = filter.values.map( value => `<td>${ value }</td>` ).join( '' );
return `<tr id="sphere_${ id }" data-type="${ filter.name }">${ cells}</tr>`;
};
const select_sphere = event => {
const sphere_id = parseInt( event.target.value, 10 );
const sphere = celestial_spheres.find( sphere => sphere.id === sphere_id );
if ( !sphere ) throw new Error( `application.select_sphere - cannot find the sphere with id ${ sphere_id }` );
else {
const filter_selection = document.querySelector( '#sphere_filters' );
const filters = filter_options( sphere.filters );
filter_selection.innerHTML = `<option value="default">Please select a filter...</option>${ filters }`;
const header = document.querySelector( '#sphere_name' );
header.innerHTML = sphere.name;
const ascention = document.querySelector( '#right_ascention' );
ascention.innerText = sphere.ascention;
const declination = document.querySelector( '#declination' );
declination.innerText = sphere.declination;
const sphere_rows = document.querySelector( '#sphere_rows' );
sphere_rows.innerHTML = '';
}
};
const select_filter = event => {
const sphere_id = parseInt( document.querySelector( '#celestial_spheres' ).value, 10 );
const sphere = celestial_spheres.find( sphere => sphere.id === sphere_id );
const filter_name = event.target.value;
const filter = sphere.filters.find( filter => filter.name === filter_name );
const row = sphere_filter_row( sphere_id, filter );
const sphere_rows = document.querySelector( '#sphere_rows' );
sphere_rows.innerHTML = row;
};
const show_detail = event => {
const row = event.target.closest( 'tr' );
const sphere_id = parseInt( row.getAttribute( 'id' ).slice( 7 ), 10 );
const sphere = celestial_spheres.find( sphere => sphere.id === sphere_id );
alert( `You clicked the value "${ event.target.innerText }" of sphere "${ sphere_id }".` );
// Do stuff with the clicked cell
};
window.addEventListener( 'DOMContentLoaded', () => {
const sphere_selection = document.querySelector( '#celestial_spheres' );
sphere_selection.innerHTML += sphere_options( celestial_spheres );
sphere_selection.addEventListener( 'change', select_sphere );
const filter_selection = document.querySelector( '#sphere_filters' );
filter_selection.addEventListener( 'change', select_filter );
const sphere_rows = document.querySelector( '#sphere_rows' );
sphere_rows.addEventListener( 'click', show_detail );
});td {
border: 1px solid black;
}<select id="celestial_spheres">
<option value="default">Select a target...</option>
</select>
<label >Right Ascention:</label>
<span id="right_ascention"></span>
<label >Declinaton:</label>
<span id="declination"></span>
<select id="sphere_filters"></select>
<table id="filter_details">
<thead>
<tr>
<th id="sphere_name"></th>
</tr>
</thead>
<tbody id="sphere_rows"></tbody>
</table>
答案 1 :(得分：1)
由于代码段正文中的字符数限制为3万个，因此我必须做出一个新的答案才能包含代码。 我必须删除所有看不见的样式和模式，才能发布有效的示例。
而不是filter_selection上的onchange事件，我们希望单击“ go”按钮上的click事件。
因此，我创建了另一个函数show_sphere()。
目前，我们只将所选的所有内容记录到控制台。我猜测您还想更改sphere_filter_row()函数以匹配表的新格式，但是我不确定，所以我还没有包括它。 >
var span = document.getElementById('current');
function time() {
var d = new Date();
var y = d.getFullYear();
var t = d.getMonth() + 1;
var x = d.getDate();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
t = checkTime(t);
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
x = checkTime(x);
span.textContent = y + "-" + t + "-" + x + " " + h + ":" + m + ":" + s;
}
setInterval(time, 1000);
function checkTime(i) {
if (i < 10) {
i = "0" + i
}; // add zero in front of numbers < 10
return i;
}
const celestial_spheres = [{
"id": 134578521,
"name": "M15",
"right_ascension": "21:29:58.33",
"declination": "+12:10:01.2",
"filters": [{
"name": "Red (R)",
"values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Red.jpeg" target="_blank">M15 Red (R)</a>']
},
{
"name": "Green (V)",
"values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Green.jpeg" target="_blank">M15 Green (V)</a>']
},
{
"name": "Blue (B)",
"values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Blue.jpeg" target="_blank">M15 Blue (B)</a>']
}
]
},
{
"id": 21412155,
"name": "M27",
"right_ascension": "19:59:36.34",
"declination": "+22:43:16.09",
"filters": [{
"name": "Red (R)",
"values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Red.jpeg" target="_blank">M27 Red (R)</a>']
},
{
"name": "Green (V)",
"values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Green.jpeg" target="_blank">M27 Green (V)</a>']
},
{
"name": "Blue (B)",
"values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Blue.jpeg" target="_blank">M27 Blue (B)</a>']
}
]
},
{
"id": 452456321347564364,
"name": "NGC891",
"right_ascension": "02:22:33.4",
"ra": "02:22:33.4",
"declination": "+42:20:57.0",
"dec": "+42:20:57.0",
"filters": [{
"name": "Red (R)",
"values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Red.jpeg" target="_blank">NGC891 Red (R)</a>']
},
{
"name": "Green (V)",
"values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Green.jpeg" target="_blank">NGC891 Green (V) (R)</a>']
},
{
"name": "Blue (B)",
"values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Blue.jpeg" target="_blank">NGC891 Blue (B)</a>']
}
]
}
];
const sphere_options = spheres => spheres.map(sphere => `<option value="${ sphere.id }">${ sphere.name }</option>`).join('');
const filter_options = filters => filters.map(filter => `<option value="${ filter.name }">${ filter.name }</option>`).join('');
/* REMOVE THIS
const sphere_filter_row = (id, filter) => {
const cells = filter.values.map(value => `<td>${ value }</td>`).join('');
return `<tr id="sphere_${ id }" data-type="${ filter.name }">${ cells}</tr>`;
};
*/
const sphere_filter_row = sphere => {
return [
`<tr id="sphere_${ sphere.id }">`,
`<td>${ sphere.name }</td>`,
`<td>${ sphere.ascension }</td>`,
`<td>${ sphere.declination }</td>`,
`<td>${ sphere.exposure }</td>`,
`<td>${ sphere.filter }</td>`,
`<td>${ new Date().toJSON() }</td>`,
`<td>${ sphere.image }</td>`,
'<td></td>',
'<td></td>',
'</tr>'
].join( '' );
};
const select_filter = event => {
const sphere_id = parseInt(document.querySelector('#celestial_spheres').value, 10);
const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
const filter_name = event.target.value;
const filter = sphere.filters.find(filter => filter.name === filter_name);
const row = sphere_filter_row(sphere_id, filter);
const sphere_rows = document.querySelector('#sphere_rows');
sphere_rows.innerHTML += row;
};
const show_sphere = () => {
const sphere_id = parseInt( document.querySelector('#celestial_spheres').value, 10 );
const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
if (!sphere) throw new Error(`application.select_sphere - cannot find the sphere with id ${ sphere_id }`);
else {
const filter_name = document.querySelector('#sphere_filters').value;
const filter = sphere.filters.find(filter => filter.name === filter_name);
const exposure = document.querySelector('#exposure-time-input').value;
/* ADD THIS */
const row = sphere_filter_row({
id: sphere.id,
name: sphere.name,
ascension: sphere.right_ascension,
declination: sphere.declination,
exposure,
filter: filter.name,
image: filter.values[ 6 ]
});
document.querySelector( '#session-table tbody' ).innerHTML += row;
}
};
const select_sphere = event => {
const sphere_id = parseInt(event.target.value, 10);
const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
if (!sphere) throw new Error(`application.select_sphere - cannot find the sphere with id ${ sphere_id }`);
else {
const filter_selection = document.querySelector('#sphere_filters');
const filters = filter_options(sphere.filters);
filter_selection.innerHTML = `<option value="default">Please select a filter...</option>${ filters }`;
// const header = document.querySelector( '#sphere_name' );
// header.innerHTML = sphere.name;
const ascension = document.getElementById('right_ascension_input');
ascension.value = sphere.right_ascension;
const declination = document.getElementById('declination_input');
declination.value = sphere.declination;
/* REMOVE THIS
const sphere_rows = document.querySelector('#sphere_rows');
sphere_rows.innerHTML = '';
*/
}
};
const show_detail = event => {
const row = event.target.closest('tr');
const sphere_id = parseInt(row.getAttribute('id').slice(7), 10);
const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
alert(`You clicked the value "${ event.target.innerText }" of sphere "${ sphere_id }".`);
// Do stuff with the clicked cell
};
const sphere_selection = document.querySelector('#celestial_spheres');
sphere_selection.innerHTML += sphere_options(celestial_spheres);
sphere_selection.addEventListener('change', select_sphere);
const button_go = document.querySelector('#button_go');
button_go.addEventListener('click', show_sphere );
/* REMOVE OR FIX THIS
const sphere_rows = document.querySelector('#sphere_rows');
sphere_rows.addEventListener('click', show_detail);
*/<div id="app"><a href="https://rti.lco.global/generate_token" class=""></a> <a href="https://rti.lco.global/" class="router-link-active"></a> <a href="https://rti.lco.global/rti" class="router-link-exact-active router-link-active"></a>
<div>
<div>
<div class="container-fluid">
<div class="row pt-2 pb-2 pl-5 pr-5">
<div class="col-auto mr-auto">
<div class="navbar-header"><a href="https://lco.global/" title="LCO.global" rel="home" class="navbar-brand"><img id="lco-logo" src="http://www.faulkes-telescope.com/wp-content/uploads/LCO-logo-web.jpg" alt="Las Cumbres Observatory" float:left></a> <a id="lco-name" class="navbar-brand">Real-Time Interface <font color=red><strong> Simulator</strong></font color>
</a></div>
</div>
<div class="col-auto"><span>
<table>
<tr>
<td><strong>Current Time: </strong></td>
<td><span id="current"><span class="fixed-width-time"></span></span></td>
<td>
UTC
</td>
</tr>
<tr>
<td><strong>Session start: </strong></td>
<td><span id="datetime"><span class="fixed-width-time"></span>
<script>
var dt = new Date();
document.getElementById("datetime").innerHTML =
(dt.getFullYear()) + "-" +
(("0" + (dt.getMonth() + 1)).slice(-2)) + "-" +
(("0" + dt.getDate()).slice(-2)) + " " +
(("0" + dt.getHours()).slice(-2)) + ":" +
(("0" + dt.getMinutes()).slice(-2)) + ":" + (("0" + dt.getSeconds()).slice(-2));
</script>
</span></td>
<td>
UTC
</td>
</tr>
<tr>
<td><strong>Session end: </strong></td>
<td><span class="fixed-width-time">2019-00-00 00:00:00</span></td>
<td>
UTC
</td>
</tr>
</table>
</span></div>
</div>
</div>
<div class="container-fluid intro downPage blue">
<div class="row pt-2 pb-2 pl-5 pr-5">
<div class="col"><span class="welcome-text welcome-text-big">WELCOME TO THE RTI SIMULATOR</span></div>
<div class="col right-aligned"><span><a data-toggle="modal" data-target="#status-info-modal" href="https://rti.lco.global/rti" class="link-text pl-4">Status info</a></span><span><a data-toggle="modal" data-target="#help-modal" href="https://rti.lco.global/rti" class="link-text pl-4">Help</a></span><span><a href="https://rti.lco.global/" class="link-text pl-4 router-link-active">Exit session</a></span></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<!---->
<!---->
</div>
</div>
<div class="row">
<div class="col">
<div id="status-container" class="row light-border p-2">
<div class="col-5 ml-3">
<div id="image-display">
<div class="row">
<div class="col"><img src="http://www.faulkes-telescope.com/wp-content/uploads/lastsnap.jpg" class="img-thumbnail" style="width: 500px;"></div>
</div>
<div class="row pt-1">
<div class="col">Current sky</div>
<div class="col-auto"><a href="https://rti.lco.global/rti#" onclick="return false;" tabindex="0" data-toggle="popover" data-trigger="focus" title="" data-content="Image of the sky at the current site. Contains a timestamp of when it was taken in the top left
corner. The image is usually updated about every 4 minutes. However, sometimes images are not regularly updated
due to network issues." data-original-title="Info">Info</a></div>
</div>
</div>
</div>
<div class="col"></div>
<div class="col-6 ml-auto mr-3">
<div class="row pb-1">
<div class="col"><strong>You are logged in to observe on the Australia 2-meter telescope</strong></div>
</div>
<li class="list-group-item list-group-item-success"><strong class="session-status" title="Your text here">Session:</strong> <span class="session-status"> In progress </span>
<!---->
</li>
<li class="list-group-item list-group-item-success"><strong class="session-status" title="Your text here">Observatory:</strong> <span class="session-status" title="Your text here"> Available </span>
<!---->
</li>
<li class="list-group-item list-group-item-success"><strong class="session-status" title="Your text here">Telescope:</strong> <span class="session-status" title="Your text here"> Operating </span>
<!---->
</li>
<li class="list-group-item list-group-item-success"><strong class="session-status" title="Your text here">Camera:</strong> <span class="session-status" title="Your text here"> Idle </span>
<!---->
</li>
<li class="list-group-item list-group-item-success"><strong class="session-status" title="Your text here">Progress:</strong> <span class="session-status" title="Your text here"> Ready </span>
<!---->
</li>
</ul>
</div>
</div>
<div class="pt-3">
<div class="row">
<div class="col-6 mt-auto mb-auto">
<div>
<form>
<div class="form-group">
<div class="radio radio-inline"><label><strong>Target Input Mode:</strong></label><label><input type="radio" name="inlineRadioOptions" id="optionsRadios2" value="Manual" data-toggle="tooltip" title="Unavailable in Simulator mode" onclick="this.checked=false;
alert('Unavailable in Simulator mode')">Manual</label><label><input type="radio" name="inlineRadioOptions" id="optionsRadios2" value="list" data-toggle="tooltip" title="Select the celestial object you wish to see" onmouseover="('Select select from a list of celestial objects')" checked>List</label></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="row">
<div class="col"><label for="target-list" title="Select the celestial opject you wish to see">Target Name:</label></div>
</div>
<select id="celestial_spheres" type="select" name="name" class="button form-control" aria-required="true" aria-invalid="false">
<option value="default">Select a Target...</option>
</select>
<div class="alert alert-danger" style="display: none;"></div>
</div>
<div class="form-group"><label title="The distance of a point east of the First Point of Aries, measured along the celestial equator and expressed in hours, minutes, and seconds.">Right Ascension:</label>
<span id="right_ascension"></span>
<input id="right_ascension_input" type="text" placeholder="HH:MM:SS.S" name="ascension" class="form-control" aria-required="true" aria-invalid="false">
<div class="form-group"><label title="The angular distance of a point north or south of the celestial equator">Declination:</label>
<span id="declination"></span>
<input id="declination_input" type="text" placeholder="DD:MM:SS.S" name="#declination" id="#declination" class="form-control" aria-required="true" aria-invalid="false"></div>
</div>
<div><label class="wrapper" for="states" title="Select whether you'd like to use the Red, Blue or Green filter for your image">Filter</label>
<select id="sphere_filters" type="select" name="name" placeholder="Target Name..." class="button form-control" aria-required="true" aria-invalid="false">
<option value="default">Select a Filter...</option>
</select>
</div>
<div class="form-group"> </div>
<div class="form-group"><label title="How long would you like the camera to image the object, disabled in simulation mode">Exposure Time:</label> <input name="exposureSeconds" type="number" id="exposure-time-input" placeholder="N/A" class="form-control" aria-required="true" aria-invalid="false">
<div class="alert alert-danger" style="display: none;"></div>
</div>
</form>
<div class="total-time-text"> </div>
<div data-toggle="tooltip" title="" data-placement="right" class="tooltip-wrapper ">
<button id="button_go" type="button" class="btn btn-success btn-block">Go!</button></div>
<div role="alert" class="alert alert-danger mt-3 invisible">
(<a href="https://rti.lco.global/rti#" onclick="return false;" tabindex="0" data-toggle="popover" data-trigger="focus" title="" data-content="A target may not be visible because it is too close to the moon, if it is below the
horizon, or if it is too low on the horizon for the telescope to point at." data-original-title="Info">Info</a>)
</div>
</div>
</div>
<div class="col-auto ml-auto">
<div id="imagehere" class="pb-3">
<div class="row">
<div class="col"><img src="http://www.faulkes-telescope.com/wp-content/uploads/loading.jpg" class="img-thumbnail" style="width: 500px;"></div>
</div>
<div class="row pt-1">
<div class="col">Live webcam</div>
<div class="col-auto">
<!---->
</div>
</div>
</div>
<div id="imagehere">
<div class="row">
<div class="col"><img src="http://www.faulkes-telescope.com/wp-content/uploads/noImageAvailableYet.jpg" class="imghere" style="width: 500px;"></div>
</div>
<div class="row pt-1">
<div class="col">Most recent image</div>
<div class="col-auto"><a href="https://rti.lco.global/rti#" onclick="return false;" tabindex="0" data-toggle="popover" data-trigger="focus" title="" data-content="This is a thumbnail of the most recent image taken. Note that the image shown here at first
may be left over from a previous session." data-original-title="Info">Info</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="help-modal" tabindex="-1" role="dialog" aria-labelledby="help-modal-title" aria-hidden="true" class="modal fade">
<div role="dialog" class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 id="help-modal-title" class="modal-title">Help</h5> <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">x</span></button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div id="status-info-modal" tabindex="-1" role="dialog" aria-labelledby="status-info-modal-title" aria-hidden="true" class="modal fade">
<div role="dialog" class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 id="status-info-modal-title" class="modal-title">Status info</h5> <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">x</span></button>
</div>
<div class="modal-body">
<div>
<p class="h4">Session status</p>
<ul class="list-unstyled">
<li><strong>Not yet started</strong>
The session has not yet started.
</li>
<li><strong>Ended</strong>
The session has ended.
</li>
<li><strong>In progress</strong>
The session is currently under way.
</li>
</ul>
</p>
<p class="h4">Observatory status</p>
<ul class="list-unstyled">
<li><strong>Sun-up</strong>
Sun-up The telescope cannot be used because there is a risk of sunlight hitting the optics.
</li>
<li><strong>Closed for bad weather</strong>
The telescope cannot be used because weather conditions preclude observing. These might be conditions
which could damage the telescope (e.g. rain or high winds) or conditions that could inhibit observations
such as thick cloud layers.
</li>
<li><strong>Closed for maintenance</strong>
The telescope has been disabled or switched to manual for essential engineering activity.
</li>
<li><strong>Closed for technical failure</strong>
A technical failure is preventing observing. The failure modes currently captured are:
<ul>
<li>
an essential service required for observing is not available, e.g. the camera or focus
</li>
<li>a power fault has been detected, e.g. running on batteries due to power outage</li>
<li>
the telescope is currently performing a house-keeping task, e.g. opening and focusing after a period
of bad weather
</li>
<li>
the hardware system suffered a failure
</li>
<li>
the software system suffered a failure
</li>
</ul>
</li>
</ul>
</p>
<p class="h4">Camera status</p>
<p><strong>Failed</strong>
The camera or filter wheel suffered a hardware failure. They may recover automatically in a few minutes.
</p>
<p class="h4">Progress</p>
<p><strong>Error on last observation</strong>
The most recent observation ended in failure either due to a technical fault or because it was cancelled.
See the <span style="font-style: italic;">Observatory status</span> status for additional information on
faults.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12"><br> <br>
<div>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<!---->
</div>
</div>
<div class="row">
<div class="col">
<div class="table-caption mb-1">Session Images</div>
</div>
<div class="col-auto"><a href="https://archive.lco.global/?PROPID=FTPEPO2017AB-002&SITEID=coj&TELID=0m4a&start=2019-01-09%2010:15&end=2019-01-09%2010:45" target="_blank">LCO Science Archive (this session's images)</a></div>
</div>
<div style="height: 300px; overflow: auto;">
<table id="session-table">
<thead>
<tr>
<th>Target Name</th>
<th>Right Ascension</th>
<th>Declination</th>
<th>Exposure Time (sec)</th>
<th>Filter</th>
<th>Timestamp (UTC)</th>
<th>Image type</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<!-- REMOVE THIS
<tr>
<tbody id="sphere_rows"></tbody>
</tr>
-->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="footer col-md-12">
Copyright © 2018 Las Cumbres Observatory. All rights reserved.
<br></div>
</div>
</div>
</div>