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)) {
function sajax_get_common_js() {
global $sajax_debug_mode;
global $sajax_request_type;
global $sajax_remote_uri;
$t = strtoupper($sajax_request_type);
if ($t != "GET" && $t != "POST")
......@@ -136,12 +135,10 @@ if (!isset($SAJAX_INCLUDED)) {
sajax_debug("Could not create connection object.");
return A;
}
function sajax_do_call(func_name, args) {
function sajax_do_call(uri, func_name, args) {
var i, x, n;
var uri;
var post_data;
uri = "<?php echo $sajax_remote_uri; ?>";
if (sajax_request_type == "GET") {
if (uri.indexOf("?") == -1)
uri = uri + "?rs=" + escape(func_name);
......@@ -210,13 +207,15 @@ if (!isset($SAJAX_INCLUDED)) {
}
function sajax_get_one_stub($func_name) {
global $sajax_remote_uri;
ob_start();
?>
// wrapper for <?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);
}
......
......@@ -163,8 +163,8 @@ function SHOWFREENODES()
$pccount = count($freecounts);
$newrow = 1;
$maxcols = (int) ($pccount / 2);
if ($pccount % 2)
$maxcols = (int) ($pccount / 3);
if ($pccount % 3)
$maxcols++;
$cols = 0;
foreach($freecounts as $key => $value) {
......@@ -181,7 +181,7 @@ function SHOWFREENODES()
$cols++;
$newrow = 0;
if ($cols == $maxcols || $pccount <= 4) {
if ($cols == $maxcols || $pccount <= 3) {
$cols = 0;
$newrow = 1;
}
......@@ -198,9 +198,9 @@ function SHOWFREENODES()
}
$output .= "</tr>\n";
}
# Fill in up to 2 rows.
if ($pccount < 2) {
for ($i = $pccount + 1; $i <= 2; $i++) {
# Fill in up to 3 rows.
if ($pccount < 3) {
for ($i = $pccount + 1; $i <= 3; $i++) {
$output .= "<tr><td class=usagefreenodes>&nbsp</td>
<td class=usagefreenodes>&nbsp</td></tr>\n";
}
......@@ -213,12 +213,17 @@ function SHOWFREENODES()
#
# This is for the Sajax request.
#
function FreeNodeHtml() {
function FreeNodeHtml($usagemode = null) {
global $this_user;
if ($this_user) {
if ($usagemode == null || $usagemode == "status") {
return ShowStatus();
}
else {
return SHOWFREENODES();
}
}
else {
return SHOWSTATS();
}
......
......@@ -489,5 +489,6 @@ require("tbauth.php3");
#
# Okay, this is what checks the login and spits out the menu.
#
require("Sajax.php");
require("menu.php3");
?>
......@@ -775,10 +775,10 @@ function PAGEBEGINNING( $title, $nobanner = 0, $nocontent = 0,
<!-- do not import full style sheet into NS47, since it does bad job
of handling it. NS47 does not understand '@import'. -->
<style type='text/css' media='all'>
<!-- @import url($BASEPATH/style-new.css); -->
<!-- @import url($BASEPATH/style.css); -->
<!-- @import url($BASEPATH/cssmenu-new.css); -->";
if (0 && !$MAINPAGE) {
if (1 && !$MAINPAGE) {
echo "<!-- @import url($BASEPATH/style-nonmain.css); -->";
}
echo "</style>\n";
......@@ -941,12 +941,15 @@ function FINISHSIDEBAR($nocontent = 0)
if ($currentusage && $login_user) {
$class = "navbarusageframe";
echo "<td>\n";
if (1) {
if (0) {
echo "<iframe src='$BASEPATH/currentusage.php3' class='$class'
scrolling='no' frameborder='0'></iframe>\n";
}
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";
}
......@@ -1163,6 +1166,38 @@ function PAGEFOOTER($view = NULL) {
# Plug the home site from all others.
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.
if (count($sortedtables)) {
echo "<script type='text/javascript' language='javascript'>\n";
......
......@@ -127,11 +127,6 @@ div#usage table {
/* Force the same height as the banner */
height: 100px;
}
div#usagefreenodes table {
background-color: #666666;
/* Force the same height as the banner */
height: 54px; /* must match usageframe size */
}
div#showexpusagefreenodes {
border: solid 2px black;
}
......@@ -154,24 +149,6 @@ div#showexpusagefreenodes table td a {
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 */
......@@ -200,8 +177,8 @@ td.menuoptusage, td.usagefreenodes a {
div.topcell {
/* 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. */
border-top: solid 2px black;
border-bottom: solid 2px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-image: url("fancy-header-background-short.jpg");
background-position: 0px 0px;
......@@ -217,7 +194,7 @@ div.topcell {
/* So we goto a scroll bar before the top nav menus go to hell */
min-width: 800px;
clear: both;
height: 54px;
/* height: 54px; */
}
table#topcelltable, table#topcelltable tr, table#topcelltable tr td {
background-color: #111;
......@@ -252,7 +229,7 @@ div.midtopcell table#navmenus, div.midtopcell table#navmenus td {
div.midtopcell table#navmenus {
padding-left: 4px;
padding-right: 4px;
height: 54px;
/* height: 54px; */
width: 520px;
}
div.midtopcell table#navmenus tr {
......@@ -265,10 +242,41 @@ div.midtopcell table#navmenus td {
}
div.midtopcell table#navmenus tr#spacer,
div.midtopcell table#navmenus td#spacer {
height: 14px;
height: 10px;
}
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 {
clear: left;
padding: 6px;
......
......@@ -16,3 +16,6 @@ table { border: 0px; background-color: #9A9; }
table.nogrid { border: solid 1px #696; background-color:#9A9; }
span.topbaroption { background-color:#E1EAE1; }
#contentheader { background-color: pink; }
......@@ -127,11 +127,6 @@ div#usage table {
/* Force the same height as the banner */
height: 100px;
}
div#usagefreenodes table {
background-color: #666666;
/* Force the same height as the banner */
height: 54px; /* must match usageframe size */
}
div#showexpusagefreenodes {
border: solid 2px black;
}
......@@ -154,24 +149,6 @@ div#showexpusagefreenodes table td a {
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 */
......@@ -200,8 +177,8 @@ td.menuoptusage, td.usagefreenodes a {
div.topcell {
/* 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. */
border-top: solid 2px black;
border-bottom: solid 2px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-image: url("fancy-header-background-short.jpg");
background-position: 0px 0px;
......@@ -217,7 +194,7 @@ div.topcell {
/* So we goto a scroll bar before the top nav menus go to hell */
min-width: 800px;
clear: both;
height: 54px;
/* height: 54px; */
}
table#topcelltable, table#topcelltable tr, table#topcelltable tr td {
background-color: #111;
......@@ -252,7 +229,7 @@ div.midtopcell table#navmenus, div.midtopcell table#navmenus td {
div.midtopcell table#navmenus {
padding-left: 4px;
padding-right: 4px;
height: 54px;
/* height: 54px; */
width: 520px;
}
div.midtopcell table#navmenus tr {
......@@ -265,10 +242,41 @@ div.midtopcell table#navmenus td {
}
div.midtopcell table#navmenus tr#spacer,
div.midtopcell table#navmenus td#spacer {
height: 14px;
height: 10px;
}
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 {
clear: left;
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