fish-shell/web_config/index.html
2012-03-20 11:33:44 -07:00

575 lines
11 KiB
HTML

<html>
<head>
<style type="text/css">
body {
background-color: #292929;
font-family: Courier, "Courier New", monospace;
color: white;
}
#ancestor {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
#parent {
width: 100%;
background-color: black;
min-height: 480px;
margin-top: 30px;
}
#tab_parent {
width: 100%;
}
.tab {
border-style: groove;
border-color: #292929;
border-width: 2px;
margin-left: -2px;
margin-right: -2px;
font-size: 17pt;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
width: 25%;
float: left;
background-color: #292929;
cursor: pointer;
}
.selected_tab {
background-color: inherit;
border-style: none;
margin-left: 0px;
margin-right: -1px;
}
.footer {
clear: both;
height: 30px;
}
#master {
float: left;
text-align: right;
min-width: 200px;
font-size: 16pt;
padding-top: 24px;
padding-right: 32px;
padding-left: 12px;
}
.master_element {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-size: 12pt;
}
.master_element_text {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 1px solid white;
}
#colorpicker_term256 {
padding-top: 30px;
}
#data_table {
table-layout:fixed;
color: white;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
.data_table_row {
}
.data_table_cell {
padding-top: 5px;
padding-bottom: 5px;
overflow:hidden;
border-bottom: #444 dotted 1px;
}
.no_overflow {
text-overflow: ellipsis;
white-space: nowrap;
}
.colorpicker_term256_row {
}
.colorpicker_term256_cell {
width: 24;
height: 24;
}
.colorpicker_cell_selected {
border: solid white 3px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function request_failed() {
alert('Request failed');
}
/* Runs a GET request, parses the JSON, and invokes the handler for each element in it. The JSON result is assumed to be an array. */
function run_get_request(url, handler) {
$.ajax({
type: "GET",
url: url,
success: function(data){
$.each($.parseJSON(data), function(idx, contents) {
handler(contents)
})
},
fail: request_failed
})
}
function switch_tab(new_tab) {
/* Switch selected tab */
$(".selected_tab").removeClass("selected_tab")
$('#' + new_tab).addClass("selected_tab")
/* Empty master element */
$('#master').empty()
/* Hide some things */
$('#colorpicker_term256').hide()
$('#data_table').hide()
$('#data_table').empty()
/* Load something new */
if (new_tab == 'tab_colors') {
run_get_request('/colors/', function(contents){
var key = contents[0]
var value = contents[1]
create_master_element(key)
})
$('#colorpicker_term256').show()
} else if (new_tab == 'tab_functions') {
run_get_request('/functions/', function(contents){
create_master_element(contents)
})
$('#data_table').show()
} else if (new_tab == 'tab_variables') {
run_get_request('/variables/', function(contents){
var name = contents[0]
var value = contents[1]
var flags = contents[2]
create_data_table_element([name, value])
})
$('#data_table').show()
} else if (new_tab == 'tab_history') {
run_get_request('/history/', function(contents){
create_data_table_element([contents])
})
$('#data_table').show()
} else {
alert("Unknown tab");
}
return false
}
/* The first index here corresponds to value 16 */
term256_colors = [
"ffd7d7", "d7afaf", "af8787", "875f5f", "ffafaf", "d78787", "af5f5f", "ff8787", //8
"d75f5f", "ff5f5f", "5f0000", "870000", "af0000", "d70000", "ff0000", "ff875f", //16
"ffaf87", "d7875f", "ff5f00", "d75f00", "ffd7af", "d7af87", "af875f", "ffaf5f", //24
"ff8700", "af5f00", "d78700", "ffd787", "d7af5f", "ffaf00", "875f00", "ffd75f", //32
"af8700", "d7af00", "ffd700", "ffffd7", "d7d7af", "afaf87", "87875f", "ffffaf", //40
"d7d787", "afaf5f", "ffff87", "d7d75f", "ffff5f", "5f5f00", "878700", "afaf00", //48
"d7d700", "ffff00", "d7ff00", "afd700", "87af00", "d7ff5f", "5f8700", "afff00", //56
"d7ff87", "afd75f", "87d700", "5faf00", "87ff00", "d7ffaf", "afd787", "87af5f", //64
"afff5f", "5fd700", "5fff00", "afff87", "87d75f", "87ff5f", "d7ffd7", "afd7af", //72
"87af87", "5f875f", "afffaf", "87d787", "5faf5f", "87ff87", "5fd75f", "5fff5f", //80
"005f00", "008700", "00af00", "00d700", "00ff00", "5fff87", "87ffaf", "5fd787", //88
"00ff5f", "00d75f", "afffd7", "87d7af", "5faf87", "5fffaf", "00ff87", "00af5f", //96
"00d787", "87ffd7", "5fd7af", "00ffaf", "00875f", "5fffd7", "00af87", "00d7af", //104
"00ffd7", "d7ffff", "afd7d7", "87afaf", "5f8787", "afffff", "87d7d7", "5fafaf", //112
"87ffff", "5fd7d7", "5fffff", "005f5f", "008787", "00afaf", "00d7d7", "00ffff", //120
"00d7ff", "00afd7", "0087af", "5fd7ff", "005f87", "00afff", "87d7ff", "5fafd7", //128
"0087d7", "005faf", "0087ff", "afd7ff", "87afd7", "5f87af", "5fafff", "005fd7", //136
"005fff", "87afff", "5f87d7", "5f87ff", "d7d7ff", "afafd7", "8787af", "5f5f87", //144
"afafff", "8787d7", "5f5faf", "8787ff", "5f5fd7", "5f5fff", "00005f", "000087", //152
"0000af", "0000d7", "0000ff", "875fff", "af87ff", "875fd7", "5f00ff", "5f00d7", //160
"d7afff", "af87d7", "875faf", "af5fff", "8700ff", "5f00af", "8700d7", "d787ff", //168
"af5fd7", "af00ff", "5f0087", "d75fff", "8700af", "af00d7", "d700ff", "ffd7ff", //176
"d7afd7", "af87af", "875f87", "ffafff", "d787d7", "af5faf", "ff87ff", "d75fd7", //184
"ff5fff", "5f005f", "870087", "af00af", "d700d7", "ff00ff", "ff00d7", "d700af", //192
"af0087", "ff5fd7", "87005f", "ff00af", "ff87d7", "d75faf", "d70087", "af005f", //200
"ff0087", "ffafd7", "d787af", "af5f87", "ff5faf", "d7005f", "ff005f", "ff87af", //208
"d75f87", "ff5f87", "000000", "080808", "121212", "1c1c1c", "262626", "303030", //216
"3a3a3a", "444444", "4e4e4e", "585858", "5f5f5f", "626262", "6c6c6c", "767676", //224
"808080", "878787", "8a8a8a", "949494", "9e9e9e", "a8a8a8", "afafaf", "b2b2b2", //232
"bcbcbc", "c6c6c6", "d0d0d0", "d7d7d7", "dadada", "e4e4e4", "eeeeee", "ffffff" //240
]
term256_colors = [ //222
"ffd7d7",
"d7afaf",
"af8787",
"875f5f",
"5f0000",
"870000",
"af0000",
"d70000",
"ff0000",
"ff5f5f",
"d75f5f",
"d78787",
"ff8787",
"ffafaf",
"ffaf87",
"ffaf5f",
"ffaf00",
"ff875f",
"ff8700",
"ff5f00",
"d75f00",
"af5f5f",
"af5f00",
"d78700",
"d7875f",
"af875f",
"af8700",
"875f00",
"d7af87",
"ffd7af",
"ffd787",
"ffd75f",
"d7af00",
"d7af5f",
"ffd700",
"ffff5f",
"ffff00",
"ffff87",
"ffffaf",
"ffffd7",
"d7ff00",
"afd75f",
"d7d700",
"d7d787",
"d7d7af",
"afaf87",
"87875f",
"5f5f00",
"878700",
"afaf00",
"afaf5f",
"d7d75f",
"d7ff5f",
"d7ff87",
"87ff00",
"afff00",
"afff5f",
"afd700",
"87d700",
"87af00",
"5f8700",
"87af5f",
"5faf00",
"afd787",
"d7ffd7",
"d7ffaf",
"afffaf",
"afff87",
"5fff00",
"5fd700",
"87d75f",
"5fd75f",
"87ff5f",
"5fff5f",
"87ff87",
"afd7af",
"87d787",
"87d7af",
"87af87",
"5f875f",
"5faf5f",
"005f00",
"008700",
"00af00",
"00d700",
"00ff00",
"00ff5f",
"5fff87",
"00ff87",
"87ffaf",
"afffd7",
"5fd787",
"00d75f",
"5faf87",
"00af5f",
"5fffaf",
"00ffaf",
"5fd7af",
"00d787",
"00875f",
"00af87",
"00d7af",
"5fffd7",
"87ffd7",
"00ffd7",
"d7ffff",
"afd7d7",
"87afaf",
"5f8787",
"5fafaf",
"87d7d7",
"5fd7d7",
"5fffff",
"00ffff",
"87ffff",
"afffff",
"00d7d7",
"00d7ff",
"5fd7ff",
"5fafd7",
"00afd7",
"00afff",
"0087af",
"00afaf",
"008787",
"005f5f",
"005f87",
"0087d7",
"0087ff",
"5fafff",
"87afff",
"5f87d7",
"5f87ff",
"005fd7",
"005fff",
"005faf",
"5f87af",
"87afd7",
"afd7ff",
"87d7ff",
"d7d7ff",
"afafd7",
"8787af",
"afafff",
"8787d7",
"8787ff",
"5f5fff",
"5f5fd7",
"5f5faf",
"5f5f87",
"00005f",
"000087",
"0000af",
"0000d7",
"0000ff",
"5f00ff",
"5f00d7",
"5f00af",
"5f0087",
"8700af",
"8700d7",
"8700ff",
"af00ff",
"af00d7",
"d700ff",
"d75fff",
"d787ff",
"ffafd7",
"ffafff",
"ffd7ff",
"d7afff",
"d7afd7",
"af87af",
"af87d7",
"af87ff",
"875fd7",
"875faf",
"875fff",
"af5fff",
"af5fd7",
"af5faf",
"d75fd7",
"d787d7",
"ff87ff",
"ff5fff",
"ff5fd7",
"ff00ff",
"ff00af",
"ff00d7",
"d700af",
"d700d7",
"af00af",
"870087",
"5f005f",
"87005f",
"af005f",
"af0087",
"d70087",
"d7005f",
"ff0087",
"ff005f",
"ff5f87",
"d75f87",
"d75faf",
"ff5faf",
"ff87af",
"ff87d7",
"d787af",
"af5f87",
"875f87",
"000000",
"080808",
"121212",
"1c1c1c",
"262626",
"303030",
"3a3a3a",
"444444",
"4e4e4e",
"585858",
"5f5f5f",
"626262",
"6c6c6c",
"767676",
"808080",
"878787",
"8a8a8a",
"949494",
"9e9e9e",
"a8a8a8",
"afafaf",
"b2b2b2",
"bcbcbc",
"c6c6c6",
"d0d0d0",
"d7d7d7",
"dadada",
"e4e4e4",
"eeeeee",
"ffffff",
]
var items_per_row = 15
var show_labels = 0
/* Adds a new element to master */
function create_master_element(contents) {
$('<div/>', {
class: 'master_element',
click: function(){
$(this).toggleClass('master_element');
}
}).append(
$("<span/>", {
class: 'master_element_text',
text: contents
})
).appendTo('#master')
}
/* Toggle the no_overflow class */
function toggle_overflow(who) {
$(who).toggleClass('no_overflow')
}
/* Creates a new row in the data table */
function create_data_table_element(contents_list) {
var row = $('<tr>', {
class: 'data_table_row'
})
for (idx = 0; idx < contents_list.length; idx++) {
/* If we have more than one, then align the first one right, subsequent ones left */
if (idx == 0 && contents_list.length > 1) {
cell = $('<td>', {
class: 'data_table_cell no_overflow',
style: 'text-align: right; padding-right: 30px;'
});
} else {
cell = $('<td>', {
class: 'data_table_cell no_overflow',
style: 'text-align: left',
onClick: "toggle_overflow(this)"
});
}
text_list = contents_list[idx].split("\n")
for (j=0; j < text_list.length; j++) {
cell.append($('<p>', {
text: text_list[j]
}))
}
row.append(cell)
}
$('#data_table').append(row)
}
/* Put stuff in colorpicker_term256 */
function populate_colorpicker_term256() {
var idx
for (idx = 0; idx < term256_colors.length; idx += items_per_row) {
var row = $('<tr>', {
class: 'colorpicker_term256_row'
})
var subidx
for (subidx = 0; subidx < items_per_row && idx + subidx < term256_colors.length; subidx++) {
cell_style = 'background-color: #' + term256_colors[idx + subidx]
row.append($('<td>', {
class: 'colorpicker_term256_cell',
style: cell_style,
text: show_labels ? String(subidx + idx + 223) : ''
}))
}
$('#colorpicker_term256').append(row)
}
}
$(document).ready(function() {
populate_colorpicker_term256()
switch_tab('tab_colors')
})
</script>
</head>
<body>
<div id="ancestor">
<span style="font-size: 68pt">fish</span>
<div id="parent">
<div id="tab_parent">
<div class="tab selected_tab" id="tab_colors" onClick="switch_tab('tab_colors')">colors</div>
<div class="tab" id="tab_functions" onClick="switch_tab('tab_functions')">functions</div>
<div class="tab" id="tab_variables" onClick="switch_tab('tab_variables')">variables</div>
<div class="tab" id="tab_history" onClick="switch_tab('tab_history')">history</div>
</div>
<div id="master">
<!--- <div class="master_element"><span class="master_element_text">command</span></div> -->
</div>
<table id="colorpicker_term256">
</table>
<table id="data_table">
<table>
<div class="footer">
</div>
</div>
</div>
<a id="thelink">Click me</a>
</body></html>