Commit b3210aa7 authored by Leigh Stoller's avatar Leigh Stoller

Convert the usage box at the top from an iframe to an inline table so that

it can be actively clicked and toggled between the short status view and
the long freenode view. There was no way to do this when it was an iframe,
and the upside of not using an iframe is that iframes often mess up rendering
and cause many cross-browser problems.

Since its not an iframe, I have to hook into the Sajax stuff even on
pages that already use Sajax, and I want to go to a different URL then
the current page (want to use currentusage.php3). So I tweaked the Sajax
stuff a bit, and roll out some inline sajax code in PAGEFOOTER().

Also, at Rob's request I added a cookie to remember the state of the
user's choice so that subsequent page loads get the same view. This
is done with an inline cookie in the javascript (document.cookies).
parent 6d184a83
...@@ -93,7 +93,6 @@ if (!isset($SAJAX_INCLUDED)) { ...@@ -93,7 +93,6 @@ if (!isset($SAJAX_INCLUDED)) {
function sajax_get_common_js() { function sajax_get_common_js() {
global $sajax_debug_mode; global $sajax_debug_mode;
global $sajax_request_type; global $sajax_request_type;
global $sajax_remote_uri;
$t = strtoupper($sajax_request_type); $t = strtoupper($sajax_request_type);
if ($t != "GET" && $t != "POST") if ($t != "GET" && $t != "POST")
...@@ -136,12 +135,10 @@ if (!isset($SAJAX_INCLUDED)) { ...@@ -136,12 +135,10 @@ if (!isset($SAJAX_INCLUDED)) {
sajax_debug("Could not create connection object."); sajax_debug("Could not create connection object.");
return A; return A;
} }
function sajax_do_call(func_name, args) { function sajax_do_call(uri, func_name, args) {
var i, x, n; var i, x, n;
var uri;
var post_data; var post_data;
uri = "<?php echo $sajax_remote_uri; ?>";
if (sajax_request_type == "GET") { if (sajax_request_type == "GET") {
if (uri.indexOf("?") == -1) if (uri.indexOf("?") == -1)
uri = uri + "?rs=" + escape(func_name); uri = uri + "?rs=" + escape(func_name);
...@@ -210,13 +207,15 @@ if (!isset($SAJAX_INCLUDED)) { ...@@ -210,13 +207,15 @@ if (!isset($SAJAX_INCLUDED)) {
} }
function sajax_get_one_stub($func_name) { function sajax_get_one_stub($func_name) {
global $sajax_remote_uri;
ob_start(); ob_start();
?> ?>
// wrapper for <?php echo $func_name; ?> // wrapper for <?php echo $func_name; ?>
function x_<?php echo $func_name; ?>() { function x_<?php echo $func_name; ?>() {
sajax_do_call("<?php echo $func_name; ?>", sajax_do_call("<?php echo $sajax_remote_uri; ?>",
"<?php echo $func_name; ?>",
x_<?php echo $func_name; ?>.arguments); x_<?php echo $func_name; ?>.arguments);
} }
......
...@@ -163,8 +163,8 @@ function SHOWFREENODES() ...@@ -163,8 +163,8 @@ function SHOWFREENODES()
$pccount = count($freecounts); $pccount = count($freecounts);
$newrow = 1; $newrow = 1;
$maxcols = (int) ($pccount / 2); $maxcols = (int) ($pccount / 3);
if ($pccount % 2) if ($pccount % 3)
$maxcols++; $maxcols++;
$cols = 0; $cols = 0;
foreach($freecounts as $key => $value) { foreach($freecounts as $key => $value) {
...@@ -181,7 +181,7 @@ function SHOWFREENODES() ...@@ -181,7 +181,7 @@ function SHOWFREENODES()
$cols++; $cols++;
$newrow = 0; $newrow = 0;
if ($cols == $maxcols || $pccount <= 4) { if ($cols == $maxcols || $pccount <= 3) {
$cols = 0; $cols = 0;
$newrow = 1; $newrow = 1;
} }
...@@ -198,9 +198,9 @@ function SHOWFREENODES() ...@@ -198,9 +198,9 @@ function SHOWFREENODES()
} }
$output .= "</tr>\n"; $output .= "</tr>\n";
} }
# Fill in up to 2 rows. # Fill in up to 3 rows.
if ($pccount < 2) { if ($pccount < 3) {
for ($i = $pccount + 1; $i <= 2; $i++) { for ($i = $pccount + 1; $i <= 3; $i++) {
$output .= "<tr><td class=usagefreenodes>&nbsp</td> $output .= "<tr><td class=usagefreenodes>&nbsp</td>
<td class=usagefreenodes>&nbsp</td></tr>\n"; <td class=usagefreenodes>&nbsp</td></tr>\n";
} }
...@@ -213,12 +213,17 @@ function SHOWFREENODES() ...@@ -213,12 +213,17 @@ function SHOWFREENODES()
# #
# This is for the Sajax request. # This is for the Sajax request.
# #
function FreeNodeHtml() { function FreeNodeHtml($usagemode = null) {
global $this_user; global $this_user;
if ($this_user) { if ($this_user) {
if ($usagemode == null || $usagemode == "status") {
return ShowStatus(); return ShowStatus();
} }
else {
return SHOWFREENODES();
}
}
else { else {
return SHOWSTATS(); return SHOWSTATS();
} }
......
...@@ -489,5 +489,6 @@ require("tbauth.php3"); ...@@ -489,5 +489,6 @@ require("tbauth.php3");
# #
# Okay, this is what checks the login and spits out the menu. # Okay, this is what checks the login and spits out the menu.
# #
require("Sajax.php");
require("menu.php3"); require("menu.php3");
?> ?>
...@@ -775,10 +775,10 @@ function PAGEBEGINNING( $title, $nobanner = 0, $nocontent = 0, ...@@ -775,10 +775,10 @@ function PAGEBEGINNING( $title, $nobanner = 0, $nocontent = 0,
<!-- do not import full style sheet into NS47, since it does bad job <!-- do not import full style sheet into NS47, since it does bad job
of handling it. NS47 does not understand '@import'. --> of handling it. NS47 does not understand '@import'. -->
<style type='text/css' media='all'> <style type='text/css' media='all'>
<!-- @import url($BASEPATH/style-new.css); --> <!-- @import url($BASEPATH/style.css); -->
<!-- @import url($BASEPATH/cssmenu-new.css); -->"; <!-- @import url($BASEPATH/cssmenu-new.css); -->";
if (0 && !$MAINPAGE) { if (1 && !$MAINPAGE) {
echo "<!-- @import url($BASEPATH/style-nonmain.css); -->"; echo "<!-- @import url($BASEPATH/style-nonmain.css); -->";
} }
echo "</style>\n"; echo "</style>\n";
...@@ -941,12 +941,15 @@ function FINISHSIDEBAR($nocontent = 0) ...@@ -941,12 +941,15 @@ function FINISHSIDEBAR($nocontent = 0)
if ($currentusage && $login_user) { if ($currentusage && $login_user) {
$class = "navbarusageframe"; $class = "navbarusageframe";
echo "<td>\n"; echo "<td>\n";
if (1) { if (0) {
echo "<iframe src='$BASEPATH/currentusage.php3' class='$class' echo "<iframe src='$BASEPATH/currentusage.php3' class='$class'
scrolling='no' frameborder='0'></iframe>\n"; scrolling='no' frameborder='0'></iframe>\n";
} }
else { else {
echo "No Stats"; echo "<div onclick=\"ToggleUsageTable();\" ".
"onmouseover='return escape(\"Click to toggle mode\")' ".
"id=usagefreenodes>\n";
echo "</div>\n";
} }
echo "</td></tr></table>\n"; echo "</td></tr></table>\n";
} }
...@@ -1163,6 +1166,38 @@ function PAGEFOOTER($view = NULL) { ...@@ -1163,6 +1166,38 @@ function PAGEFOOTER($view = NULL) {
# Plug the home site from all others. # Plug the home site from all others.
echo "\n<a href=\"www.emulab.net/netemu.php3\"></a>\n"; echo "\n<a href=\"www.emulab.net/netemu.php3\"></a>\n";
if ($login_user) {
echo "<script>\n";
sajax_show_javascript();
?>
var cookieresults =
document.cookie.match('usagetablemode=(.*?)(;|$)');
var usagetablemode =
(cookieresults ? cookieresults[1] : "status");
function x_FreeNodeHtml() {
sajax_do_call("<?php echo $TBBASE; ?>/currentusage.php3",
"FreeNodeHtml",
x_FreeNodeHtml.arguments);
}
function FreeNodeHtml_CB(stuff) {
getObjbyName('usagefreenodes').innerHTML = stuff;
setTimeout('GetFreeNodeHtml()', 60000);
}
function GetFreeNodeHtml() {
x_FreeNodeHtml(usagetablemode, FreeNodeHtml_CB);
}
function ToggleUsageTable() {
usagetablemode =
(usagetablemode == "status" ? "freenodes" : "status");
document.cookie = "usagetablemode=" + usagetablemode;
GetFreeNodeHtml();
}
GetFreeNodeHtml();
<?php
echo "</script>\n";
}
# Prime all the sortable tables. # Prime all the sortable tables.
if (count($sortedtables)) { if (count($sortedtables)) {
echo "<script type='text/javascript' language='javascript'>\n"; echo "<script type='text/javascript' language='javascript'>\n";
......
...@@ -127,11 +127,6 @@ div#usage table { ...@@ -127,11 +127,6 @@ div#usage table {
/* Force the same height as the banner */ /* Force the same height as the banner */
height: 100px; height: 100px;
} }
div#usagefreenodes table {
background-color: #666666;
/* Force the same height as the banner */
height: 54px; /* must match usageframe size */
}
div#showexpusagefreenodes { div#showexpusagefreenodes {
border: solid 2px black; border: solid 2px black;
} }
...@@ -154,24 +149,6 @@ div#showexpusagefreenodes table td a { ...@@ -154,24 +149,6 @@ div#showexpusagefreenodes table td a {
font-size: 10pt; font-size: 10pt;
} }
td.menuoptusage, td.usagefreenodes {
font:bold 8pt arial,Helvetica,sans-serif;
border: solid 0px #666;
background-color: #000;
color: #ffffff;
padding-left: 1px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
border: 0px;
line-height: 12px;
}
td.menuoptusage, td.usagefreenodes a {
/* Change link color to be more visible on a dark background */
color: #ccccff;
}
/* END Banner */ /* END Banner */
...@@ -200,8 +177,8 @@ td.menuoptusage, td.usagefreenodes a { ...@@ -200,8 +177,8 @@ td.menuoptusage, td.usagefreenodes a {
div.topcell { div.topcell {
/* Border for the entire group of menus. Put the border only on the top and /* Border for the entire group of menus. Put the border only on the top and
bottom so that setting the width to 100% doesn't force a scrollbar. */ bottom so that setting the width to 100% doesn't force a scrollbar. */
border-top: solid 2px black; border-top: solid 1px black;
border-bottom: solid 2px black; border-bottom: solid 1px black;
background-image: url("fancy-header-background-short.jpg"); background-image: url("fancy-header-background-short.jpg");
background-position: 0px 0px; background-position: 0px 0px;
...@@ -217,7 +194,7 @@ div.topcell { ...@@ -217,7 +194,7 @@ div.topcell {
/* So we goto a scroll bar before the top nav menus go to hell */ /* So we goto a scroll bar before the top nav menus go to hell */
min-width: 800px; min-width: 800px;
clear: both; clear: both;
height: 54px; /* height: 54px; */
} }
table#topcelltable, table#topcelltable tr, table#topcelltable tr td { table#topcelltable, table#topcelltable tr, table#topcelltable tr td {
background-color: #111; background-color: #111;
...@@ -252,7 +229,7 @@ div.midtopcell table#navmenus, div.midtopcell table#navmenus td { ...@@ -252,7 +229,7 @@ div.midtopcell table#navmenus, div.midtopcell table#navmenus td {
div.midtopcell table#navmenus { div.midtopcell table#navmenus {
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
height: 54px; /* height: 54px; */
width: 520px; width: 520px;
} }
div.midtopcell table#navmenus tr { div.midtopcell table#navmenus tr {
...@@ -265,10 +242,41 @@ div.midtopcell table#navmenus td { ...@@ -265,10 +242,41 @@ div.midtopcell table#navmenus td {
} }
div.midtopcell table#navmenus tr#spacer, div.midtopcell table#navmenus tr#spacer,
div.midtopcell table#navmenus td#spacer { div.midtopcell table#navmenus td#spacer {
height: 14px; height: 10px;
} }
a.midtopcell:link, a.midtopcell:visited { color: #FFF; text-decoration: none;} a.midtopcell:link, a.midtopcell:visited { color: #FFF; text-decoration: none;}
/* This lives in the topcell table. */
div#usagefreenodes table {
border: 0px;
margin: 0px;
padding: 0px;
background-color: #666666;
}
td.menuoptusage,
div#showexpusagefreenodes table tr td.usagefreenodes,
div#usagefreenodes table tr td.usagefreenodes {
font:bold 8pt arial,Helvetica,sans-serif;
border: solid 0px #666;
padding-left: 1px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
border: 0px;
line-height: 12px;
}
td.menuoptusage,
div#usagefreenodes table tr td.usagefreenodes {
background-color: #000;
color: #ffffff;
}
td.menuoptusage,
div#usagefreenodes table tr td.usagefreenodes a {
/* Change link color to be more visible on a dark background */
color: #ccccff;
}
div#cbody { div#cbody {
clear: left; clear: left;
padding: 6px; padding: 6px;
......
...@@ -16,3 +16,6 @@ table { border: 0px; background-color: #9A9; } ...@@ -16,3 +16,6 @@ table { border: 0px; background-color: #9A9; }
table.nogrid { border: solid 1px #696; background-color:#9A9; } table.nogrid { border: solid 1px #696; background-color:#9A9; }
span.topbaroption { background-color:#E1EAE1; } span.topbaroption { background-color:#E1EAE1; }
#contentheader { background-color: pink; }
...@@ -127,11 +127,6 @@ div#usage table { ...@@ -127,11 +127,6 @@ div#usage table {
/* Force the same height as the banner */ /* Force the same height as the banner */
height: 100px; height: 100px;
} }
div#usagefreenodes table {
background-color: #666666;
/* Force the same height as the banner */
height: 54px; /* must match usageframe size */
}
div#showexpusagefreenodes { div#showexpusagefreenodes {
border: solid 2px black; border: solid 2px black;
} }
...@@ -154,24 +149,6 @@ div#showexpusagefreenodes table td a { ...@@ -154,24 +149,6 @@ div#showexpusagefreenodes table td a {
font-size: 10pt; font-size: 10pt;
} }
td.menuoptusage, td.usagefreenodes {
font:bold 8pt arial,Helvetica,sans-serif;
border: solid 0px #666;
background-color: #000;
color: #ffffff;
padding-left: 1px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
border: 0px;
line-height: 12px;
}
td.menuoptusage, td.usagefreenodes a {
/* Change link color to be more visible on a dark background */
color: #ccccff;
}
/* END Banner */ /* END Banner */
...@@ -200,8 +177,8 @@ td.menuoptusage, td.usagefreenodes a { ...@@ -200,8 +177,8 @@ td.menuoptusage, td.usagefreenodes a {
div.topcell { div.topcell {
/* Border for the entire group of menus. Put the border only on the top and /* Border for the entire group of menus. Put the border only on the top and
bottom so that setting the width to 100% doesn't force a scrollbar. */ bottom so that setting the width to 100% doesn't force a scrollbar. */
border-top: solid 2px black; border-top: solid 1px black;
border-bottom: solid 2px black; border-bottom: solid 1px black;
background-image: url("fancy-header-background-short.jpg"); background-image: url("fancy-header-background-short.jpg");
background-position: 0px 0px; background-position: 0px 0px;
...@@ -217,7 +194,7 @@ div.topcell { ...@@ -217,7 +194,7 @@ div.topcell {
/* So we goto a scroll bar before the top nav menus go to hell */ /* So we goto a scroll bar before the top nav menus go to hell */
min-width: 800px; min-width: 800px;
clear: both; clear: both;
height: 54px; /* height: 54px; */
} }
table#topcelltable, table#topcelltable tr, table#topcelltable tr td { table#topcelltable, table#topcelltable tr, table#topcelltable tr td {
background-color: #111; background-color: #111;
...@@ -252,7 +229,7 @@ div.midtopcell table#navmenus, div.midtopcell table#navmenus td { ...@@ -252,7 +229,7 @@ div.midtopcell table#navmenus, div.midtopcell table#navmenus td {
div.midtopcell table#navmenus { div.midtopcell table#navmenus {
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
height: 54px; /* height: 54px; */
width: 520px; width: 520px;
} }
div.midtopcell table#navmenus tr { div.midtopcell table#navmenus tr {
...@@ -265,10 +242,41 @@ div.midtopcell table#navmenus td { ...@@ -265,10 +242,41 @@ div.midtopcell table#navmenus td {
} }
div.midtopcell table#navmenus tr#spacer, div.midtopcell table#navmenus tr#spacer,
div.midtopcell table#navmenus td#spacer { div.midtopcell table#navmenus td#spacer {
height: 14px; height: 10px;
} }
a.midtopcell:link, a.midtopcell:visited { color: #FFF; text-decoration: none;} a.midtopcell:link, a.midtopcell:visited { color: #FFF; text-decoration: none;}
/* This lives in the topcell table. */
div#usagefreenodes table {
border: 0px;
margin: 0px;
padding: 0px;
background-color: #666666;
}
td.menuoptusage,
div#showexpusagefreenodes table tr td.usagefreenodes,
div#usagefreenodes table tr td.usagefreenodes {
font:bold 8pt arial,Helvetica,sans-serif;
border: solid 0px #666;
padding-left: 1px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
border: 0px;
line-height: 12px;
}
td.menuoptusage,
div#usagefreenodes table tr td.usagefreenodes {
background-color: #000;
color: #ffffff;
}
td.menuoptusage,
div#usagefreenodes table tr td.usagefreenodes a {
/* Change link color to be more visible on a dark background */
color: #ccccff;
}
div#cbody { div#cbody {
clear: left; clear: left;
padding: 6px; padding: 6px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment