/**
- * Version 2.4.0 Copyright (C) 2013
+ * Version 2.4.1 Copyright (C) 2013
* Tested in IE 11, FF 28.0 and Chrome 33.0.1750.154
* No official support for other browsers, but will TRY to accommodate challenges in other browsers.
* Example:
PrintArea.write( PrintAreaWindow.doc, $printSource );
- setTimeout( function () { PrintArea.print( PrintAreaWindow ); }, 1000 );
+ setTimeout( function () { PrintArea.print( PrintAreaWindow ); }, 5000 );
};
var PrintArea = {
var copiedInput = copiedInputs.eq( i );
if ( typeInput == "radio" || typeInput == "checkbox" ) copiedInput.attr( "checked", $(this).is(":checked") );
- else if ( typeInput == "text" ) copiedInput.attr( "value", $(this).val() );
+ else if ( typeInput == "text" || typeInput == "" ) copiedInput.attr( "value", $(this).val() );
else if ( typeInput == "select" )
$(this).find( "option" ).each( function( i ) {
if ( $(this).is(":selected") ) $("option", copiedInput).eq( i ).attr( "selected", true );
<input type="submit" value="Update Site Settings" class="button-primary">
<hr>
{/if}
- <center><h1>Customer Section</h1></center>
+ <center><h1>Customer Section</h1></center>
+ </form>
{/if}
<!-- Server Data Usage Stats -->
<div style="width: 95%;">
<center>
<p> </p>
- Date Selected:
- <input type="hidden" autofocus="true">
- <input data-id="graphDate" type="text" name="graph_date" value="{$thisDate}" class="glm-form-text-input-small glm-date-input recurrence-input" placeholder="Click to Select Date/Time" tabindex="2">
- <div class="button button-secondary graph-print" data-areaToPrint="StatsPrintArea">Print</div>
- <span class="button button-secondary" id="guideButton">Explanation of Usage and Graphs</span>
+ <span class="button button-secondary" id="guideButton">Explanation of Usage and Graphs</span>
+ <span class="button button-secondary graph-print" data-areaToPrint="StatsPrintArea">Print Page</span>
+
<table id="usageGuide" class="glmbw-table" style="margin-top: 3em;">
<tbody>
<tr>
</tr>
</tbody>
</table>
-
<div id="StatsPrintArea" class="PrintArea" style="padding: 10px;">
<style>
.glmbw-table{
+ font-size: 1em;
}
.glmbw-table th {
font-weight: bold;
width: auto\9; /* IE8 */
}
</style>
+ <h2 style="text-align: center;">Usage statistics for site: {$selectedSite|upper} Date: {$thisDate}</h2>
<center>
<table class="glmbw-table">
- <h2>Server Usage for {$website} - {$reportDate}</h2>
<tr>
<th> </th><th>Traffic</th><th>Storage</th></tr>
<tr>
</td>
</tr>
- {if $serverStats.trafficDiff.exceeded}
- <tr>
- <td colspan="2" style="padding-top: 1em; color: red;">Total Traffic Target exceeded by {$serverStats.trafficDiff.traffic|string_format:"%.3f"} Gigabytes ({$serverStats.trafficDiff.percent|string_format:"%.0f"}%).</td>
- </tr>
- {/if}
</table>
- <h4>
- Color Key: <span style="color: maroon;">Target</span>, <span style="color: gray;">Storage</span>, <span style="color: red;">Incoming</span>, <span style="color: green;">Outgoing</span>, <span style="color: blue;">Total</span><br>
- </h4>
+ {if $serverStats.trafficDiff.exceeded}
+ <span colspan="2" style="padding-top: 1em; color: red;">Total traffic last month: {$serverStats.trafficDiff.traffic|string_format:"%.3f"} Gigabytes - {$serverStats.trafficDiff.percent|string_format:"%.0f"}% of Target ({$target} GB)<br></span>
+ {/if}
+ <br>
+ <span class="datePrintExclude">
+ Select Date for Graphs:
+ <input data-id="graphDate" type="text" name="graph_date" value="{$thisDate}" class="glm-form-text-input-small glm-date-input" placeholder="Click to Select Date/Time" tabindex="2">
+ </span>
+ <span class="datePrintInclude" style="margin-bottom: 0em;">
+ Color Key: <span style="color: maroon;">Target</span>, <span style="color: gray;">Storage</span>, <span style="color: red;">Incoming</span>, <span style="color: green;">Outgoing</span>, <span style="color: blue;">Total</span><br>
+ </span>
<p><img id="twoDayImg" src="{$assetsUrl}/graph.png" class="glmbw-image"><br></p>
<p><img id="twoMonthImg" src="{$assetsUrl}/graph.png" class="glmbw-image"><br></p>
<p><img id="twoYearImg" src="{$assetsUrl}/graph.png" class="glmbw-image"><br></p>
<script type="text/javascript">
jQuery(document).ready(function($) {
-
+
// Toggle guide contents
$('#guideButton').on('click', function() {
$('#usageGuide').toggle();
})
$('#usageGuide').hide();
-
+
// Date Only Pickers
$('.glm-date-input').datetimepicker({
format: 'm/d/Y',
closeOnWithoutClick: true,
timepicker: false,
onChangeDateTime:function(dp,$input){
- updateGraphs($input.val());
+ updateGraphs($input.val())
+ $('#displayThisDate').html($input.val());
}
});
}
$(".graph-print").click(function(){
+ $('.datePrintExclude').hide();
+ $('.datePrintInclude').show();
+
var areaToPrint = $(this).attr('data-areaToPrint');
var position = $(this).offset();
$('#' + areaToPrint).printArea({
mode: 'popup', //printable window is either iframe or browser popup
- popHt: 1200, // popup window height
+ popHt: 1400, // popup window height
popWd: 1100, // popup window width
popX: 200, // popup window screen X position
popY: 200, //popup window screen Y position
extraHead: '', // Comma separated list of extra elements to be appended to head tag
strict: false // strict or loose Transitional html 4.01 document standard or undefined to not include at all only for popup option
});
+ $('.datePrintExclude').show();
+ $('.datePrintInclude').hide();
});
// Do an initial load of usage graphs
updateGraphs('{$thisDate}');
-
+ $('.datePrintInclude').hide();
+
location.href='#selectedSite';
- window.setTimeout( function() {
- location.href='#glmPageTop';
- }, 500);
});
</script>
{/if}
-
{/if}