Added form tag UI element and other changes.

diff --git a/views/adminServerStats.html b/views/adminServerStats.html
index 89a7cf2..e0d04e5 100755 (executable)
--- a/views/adminServerStats.html
+++ b/views/adminServerStats.html
@@ -26,13 +26,13 @@
         background-color: #0568B3 !important;
         color: white;
     }
-    .section {
+    .usage-section {
         font-weight: bold;
         text-align: center;
         font-size: 1.4rem;
         clear: both;
         padding: 1rem;
-        border-top: 1px solid black;
+
         margin-top: 2rem;
     }
     .sortBy {
@@ -72,329 +72,346 @@
     {else}
         <p>Please contact your system administrator for assistance.</p>
     {/if}
+
 {else}
 
     <h1>
         Gaslight Media Server Usage
     </h1>
 
-  {if !$haveStats}
-    <h3 class="glm-error">This application has not been configured. Please ask Gaslight Media this for your Website.</h3>
-    <p><b>Error:</b> {$connectError}</p>
-  {else}
+    {if !$haveStats}
+        <h3 class="glm-error">This application has not been configured. Please ask Gaslight Media this for your Website.</h3>
+        <p><b>Error:</b> {$connectError}</p>
+    {else}
 
-  {if apply_filters('glm-serverstats-is-provider', false)}
-    <div class="section">Service Provider Section</div>
+        {if apply_filters('glm-serverstats-is-provider', false)}
+            <div class="usage-section">Service Provider Section</div>
 
-        {* Grid Start *}
+            {* Form Start *}
             {$ui = [
-                'sectionColor'      => '#ffE',
-                'nowrap'            => true
-            ]}
-            {include file="ui/f6/grid-start.html"}
-
-                <form action="{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}" method="post" enctype="multipart/form-data">
-                    <input type="hidden" name="option" value="update_site">
-                    <input type="hidden" name="site_sort" value="$site_sort">
-                    <input type="hidden" name="selected_site" value="{$selectedSite}">
+                    'action'    => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
+                    'method'    => 'POST',
+                    'validate'  => true,
+                    'validateFocusMsg' => true
+                ]}
+                {include file="ui/f6/form-start.html"}
+
+                <input type="hidden" name="option" value="update_site">
+                <input type="hidden" name="site_sort" value="$site_sort">
+                <input type="hidden" name="selected_site" value="{$selectedSite}">
+
+                {* Grid Start *}
+                {$ui = [
+                    'sectionColor'      => '#ffE',
+                    'nowrap'            => true
+                ]}
+                {include file="ui/f6/grid-start.html"}
 
                     {* Section Start *}
-                        {$ui = [
-                            'title'     => 'Site Selection'
-                        ]}
-                        {include file="ui/f6/section-start.html"}
-
-                        <span class="sortByTitle">Sort By: </span>
-                        <input type="radio" name="site_sort" value="site_name" {if $site_sort == 'site_name'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=site_name&selected_site={$selectedSite}';">Site Name
-                        <span class="sortBy">Traffic:</span>
-                        <input type="radio" name="site_sort" value="data_total" {if $site_sort == 'data_total'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=data_total&selected_site={$selectedSite}';">Total for Month&nbsp;&nbsp;
-                        <input type="radio" name="site_sort" value="target_percent" {if $site_sort == 'target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
-                        <span class="sortBy">Storage:</span>
-                        <input type="radio" name="site_sort" value="storage" {if $site_sort == 'storage'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=storage&selected_site={$selectedSite}';">Maximum for Month&nbsp;&nbsp;
-                        <input type="radio" name="site_sort" value="disk_target_percent" {if $site_sort == 'disk_target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=disk_target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
-                        </p>
-                        <div class="pickContainer">
-                            <pre class="">                                                   ----------------- Traffic -------------   --------------- Storage --------------</pre>
-                            <pre class="pseudoPickTitles">Website                                            Last Month       Target     % of Target   Last Month      Target     % of Target</pre>
-                            <div class="pseudoPick">
-                                {foreach $websites as $site}
-                                    <pre class="pseudoPickOption"></span>{if $site.name == $selectedSite}<a name="selectedSite"></a>{/if}<a href="{$thisUrl}?page={$thisPage}&selected_site={$site.name}&site_id={$site.id}&site_sort={$site_sort}" class="pseudoPickOption" {if $site.name == $selectedSite}onClick="return false;"{/if}><span{if $site.name == $selectedSite} style="background-color: LightGray;"{/if}>{$site.name|string_format:"%-50s"} {$site.data_total|string_format:"%6.1f"} GB   {$site.target|string_format:"%8.1f"} GB     <span {if $site.target_percent > $threshold}style="color: red;"{/if}>{$site.target_percent|string_format:"%6.0f"}%</span>      {$site.storage|string_format:"%6.1f"} GB   {$site.disk_target|string_format:"%8.1f"} GB      <span {if $site.disk_target_percent > $threshold}style="color: red;"{/if}>{$site.disk_target_percent|string_format:"%6.0f"}%</span></span></a></pre>
-                                {/foreach}
+                    {$ui = [
+                        'title'     => 'Site Selection'
+                    ]}
+                    {include file="ui/f6/section-start.html"}
+
+                        {* Misc Container Start *}
+                        {include file="ui/f6/miscContainer-start.html"}
+
+                            <span class="sortByTitle">Sort By: </span>
+                            <input type="radio" name="site_sort" value="site_name" {if $site_sort == 'site_name'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=site_name&selected_site={$selectedSite}';">Site Name
+                            <span class="sortBy">Traffic:</span>
+                            <input type="radio" name="site_sort" value="data_total" {if $site_sort == 'data_total'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=data_total&selected_site={$selectedSite}';">Total for Month&nbsp;&nbsp;
+                            <input type="radio" name="site_sort" value="target_percent" {if $site_sort == 'target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
+                            <span class="sortBy">Storage:</span>
+                            <input type="radio" name="site_sort" value="storage" {if $site_sort == 'storage'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=storage&selected_site={$selectedSite}';">Maximum for Month&nbsp;&nbsp;
+                            <input type="radio" name="site_sort" value="disk_target_percent" {if $site_sort == 'disk_target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=disk_target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
+                            <div class="pickContainer">
+                                <pre class="">                                                   ----------------- Traffic -------------   --------------- Storage --------------</pre>
+                                <pre class="pseudoPickTitles">Website                                            Last Month       Target     % of Target   Last Month      Target     % of Target</pre>
+                                <div class="pseudoPick">
+                                    {foreach $websites as $site}
+                                        <pre class="pseudoPickOption"></span>{if $site.name == $selectedSite}<a name="selectedSite"></a>{/if}<a href="{$thisUrl}?page={$thisPage}&selected_site={$site.name}&site_id={$site.id}&site_sort={$site_sort}" class="pseudoPickOption" {if $site.name == $selectedSite}onClick="return false;"{/if}><span{if $site.name == $selectedSite} style="background-color: LightGray;"{/if}>{$site.name|string_format:"%-50s"} {$site.data_total|string_format:"%6.1f"} GB   {$site.target|string_format:"%8.1f"} GB     <span {if $site.target_percent > $threshold}style="color: red;"{/if}>{$site.target_percent|string_format:"%6.0f"}%</span>      {$site.storage|string_format:"%6.1f"} GB   {$site.disk_target|string_format:"%8.1f"} GB      <span {if $site.disk_target_percent > $threshold}style="color: red;"{/if}>{$site.disk_target_percent|string_format:"%6.0f"}%</span></span></a></pre>
+                                    {/foreach}
+                                </div>
+                                <p>Click on a site above to display settings and charts.</p>
+                                <hr>
                             </div>
-                            <p>Click on a site above to display settings and charts.</p>
-                            <hr>
-                        </div>
 
-                        {if $selectedSite}
+                            {if $selectedSite}
 
-                            <div>
-                                <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary">Send usage E-mail for site selected above</a>
-                                &nbsp;&nbsp;<a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary">Display usage E-mail for site selected above</a>
-                            </div>>
+                                <div>
+                                    <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary">Send usage E-mail for site selected above</a>
+                                    &nbsp;&nbsp;<a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary">Display usage E-mail for site selected above</a>
+                                </div>
 
-                        {/if}
+                            {/if}
+
+                        {include file="ui/f6/miscContainer-end.html"}
 
                     {include file="ui/f6/section-end.html"}
 
                     {* Section Start *}
+                    {$ui = [
+                        'title'     => 'Settings for Selected Site'
+                    ]}
+                    {include file="ui/f6/section-start.html"}
+
+                        {* target *}
                         {$ui = [
-                            'title'     => 'Settings for Selected Site'
+                            'field'         => 'target',
+                            'value'         => {$settings.target|string_format:"%.1f"},
+                            'label'         => 'Monthly Traffic Target',
+                            'required'      => true,
+                            'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
                         ]}
-                        {include file="ui/f6/section-start.html"}
+                        {include file="ui/f6/text.html"}
 
                         {* disk_target *}
-                            {$ui = [
-                                'field'         => 'disk_target',
-                                'value'         => {$settings.target|string_format:"%.1f"},
-                                'label'         => 'Monthly Traffic Target',
-                                'required'      => true
-                            ]}
-                            {include file="ui/f6/text.html"}
-
-
-                        {* disk_target *}
-                            {$ui = [
-                                'field'         => 'disk_target',
-                                'value'         => {$settings.disk_target|string_format:"%.1f"},
-                                'label'         => 'Disk Space Used Target',
-                                'required'      => true,
-                                'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
-                            ]}
-                            {include file="ui/f6/text.html"}
+                        {$ui = [
+                            'field'         => 'disk_target',
+                            'value'         => {$settings.disk_target|string_format:"%.1f"},
+                            'label'         => 'Disk Space Used Target',
+                            'required'      => true,
+                            'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                        ]}
+                        {include file="ui/f6/text.html"}
 
-                        {* disk_target *}
-                            {$ui = [
-                                'field'         => 'cust_contact',
-                                'value'         => {$settings.cust_contact},
-                                'label'         => 'Customer Contact E-Mail',
-                                'required'      => true
-                            ]}
-                            {include file="ui/f6/text.html"}
+                        {* cust_contact *}
+                        {$ui = [
+                            'field'         => 'cust_contact',
+                            'value'         => {$settings.cust_contact},
+                            'label'         => 'Customer Contact E-Mail',
+                            'required'      => true
+                        ]}
+                        {include file="ui/f6/text.html"}
 
                     {include file="ui/f6/section-end.html"}
 
                     {* Section Start *}
-                        {$ui = [
-                            'title'     => 'Global Settings'
-                        ]}
-                        {include file="ui/f6/section-start.html"}
+                    {$ui = [
+                        'title'     => 'Global Settings'
+                    ]}
+                    {include file="ui/f6/section-start.html"}
 
                         {* Reporting Threshold *}
-                            {$ui = [
-                                'field'         => 'threshold',
-                                'value'         => {$threshold|string_format:"%.0f"},
-                                'label'         => 'Reporting Threshold %',
-                                'required'      => true,
-                                'min'           => 0,
-                                'max'           => 200,
-                                'width'         => 5,
-                                'helpText'      => 'Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.'
-                            ]}
-                            {include file="ui/f6/number.html"}
+                        {$ui = [
+                            'field'         => 'threshold',
+                            'value'         => {$threshold|string_format:"%.0f"},
+                            'label'         => 'Reporting Threshold %',
+                            'required'      => true,
+                            'min'           => 0,
+                            'max'           => 200,
+                            'width'         => 5,
+                            'helpText'      => 'Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.'
+                        ]}
+                        {include file="ui/f6/number.html"}
 
                     {include file="ui/f6/section-end.html"}
 
-                {/if}
-
-            </form>
-
-
-            <input type="submit" value="Update Site Settings" class="button-primary">
-
-        {include file="ui/f6/grid-end.html"}
-
-  {/if}
-
-
-    <div class="section">Customer Section</div>
-
-    <!-- Server Data Usage Stats -->
-    <div style="width: 95%;">
-        <center>
-            <span class="button button-secondary" id="guideButton">Explanation of Usage and Graphs</span>
-            &nbsp;&nbsp;<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>
-                        <td>Traffic</td>
-                        <td style="padding-bottom: 1em;">
-                            The data sent and received by this Web site.
-                            Traffic is displayed below in <b>Megabytes</b> or <b>Gigabytes</b>.
-                            A byte is roughly equivalent to one character, a Megabyte is roughly one Million characters,
-                            and a Gigabyte is roughtly one Trillion characters.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="color: red;">Incoming</td>
-                        <td style="padding-bottom: 1em;">
-                            Requests from a user for Web pages or other data sent to the Website including any
-                            uploaded images or files.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="color: green;">Outgoing</td>
-                        <td style="padding-bottom: 1em;">
-                            Data sent to users of your site including all Web pages, images, and files requested
-                            by the user. Note that this line may be covered by the Total (blue) line where they are the same.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="color: blue;">Total</td>
-                        <td style="padding-bottom: 1em;">
-                            Total of all incoming and outgoing data. This is the value that is compared to the
-                            the <b>Target</b> data traffic for billing purposes.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="color: purple; white-space: nowrap;">Traffic Target</td>
-                        <td style="padding-bottom: 1em;">
-                            The maximum total monthly traffic expected for your Website.
-                            You are billed based on this target. If your "Total" traffic regularly exceeds this, you will be contacted
-                            to discuss increasing this target. This value is represented by the dotted line on the
-                            "Monthly Traffic" graph.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="color: gray; white-space: nowrap;">Disk Space Used&nbsp;&nbsp;</td>
-                        <td style="padding-bottom: 1em;">
-                            The greatest amount of server disk space consumed by this Web site and all associated data during the measurement period.
-                            Disk Space Used is displayed in <b>Gigabytes</b>.
-                        </td>
-                    </tr>
-                    <tr>
-                        <td style="color: purple; white-space: nowrap;">Disk Space Target</td>
-                        <td style="padding-bottom: 1em;">
-                            The maximum disk storage space your Website is expected to use.
-                            You are billed for data storage based on this target. If the "Disk Space Used" regularly exceeds this, you will be contacted
-                            to discuss increasing this target. This value is represented by the dotted line on the
-                            "Monthly Disk Space Used" graph.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <div id="StatsPrintArea" class="PrintArea" style="padding: 10px;">
-                <style>
-                    @media print {
-                        body * {
-                            font-size: 8pt;
-                        }
-                    }
-                    .glmbw-table{
-                        font-size: 1em;
-                    }
-                    .glmbw-table .glmbw-th-light {
-                        font-weight: bold;
-                        text-align: left;
-                        vertical-align: top;
-                        white-space: nowrap;
-                    }
-                    .glmbw-table th {
-                        font-weight: bold;
-                        text-align: left;
-                        vertical-align: top;
-                        white-space: nowrap;
-                        padding-right: 20px;
-                    }
-                    .glmbw-table td {
-                        font-weight: normal;
-                        font-size: .9em;
-                        text-align: left;
-                        vertical-align: top;
-                        padding-right: 20px;
-                    }
-                    .glmbw-image {
-                        max-width: 90%;
-                        height: auto;
-                        width: auto\9; /* IE8 */
-                    }
-                    .print-title {
-                        font-weight: bold;
-                        font-size: 1em;
-                        text-align: center;
-                    }
-                </style>
-                <div class="print-title" style="text-align: center;">
-                    Usage statistics for site:&nbsp;&nbsp;{$selectedSite|upper}&nbsp;&nbsp;&nbsp;&nbsp;Date:
-                    <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">
-                </div>
-                <center>
-                    <table class="glmbw-table">
+                    {* Submit Button *}
+                    {$ui = [
+                        'class'     => 'primary',
+                        'label'     => 'Update Site Settings',
+                        'submit'    => true
+                    ]}
+                    {include file="ui/f6/submit.html"}
+
+                {include file="ui/f6/grid-end.html"}
+
+            {include file="ui/f6/form-end.html"}
+
+        {/if} {* /is provider *}
+
+        <div class="usage-section">Customer Section</div>
+
+        <!-- Server Data Usage Stats -->
+        <div style="width: 95%;">
+            <center>
+                <span class="button button-secondary" id="guideButton">Explanation of Usage and Graphs</span>
+                &nbsp;&nbsp;<span class="button button-secondary graph-print" data-areaToPrint="StatsPrintArea">Print Page</span>
+
+                <table id="usageGuide" class="glmbw-table unstriped" style="margin-top: 3em;">
+                    <tbody>
                         <tr>
-                            <th>&nbsp;</th><th>Traffic</th><th>Target</th><th>% of Target</th><th>Storage</th><th>target</th><th>% of Target</th></tr>
+                            <td>Traffic</td>
+                            <td style="padding-bottom: 1em;">
+                                The data sent and received by this Web site.
+                                Traffic is displayed below in <b>Megabytes</b> or <b>Gigabytes</b>.
+                                A byte is roughly equivalent to one character, a Megabyte is roughly one Million characters,
+                                and a Gigabyte is roughtly one Trillion characters.
+                            </td>
+                        </tr>
                         <tr>
-                            <th>Yesterday: </th>
-                            <td>
-                                {$serverStats.yesterday.data_total|string_format:"%.3f"} Megabytes<br>
+                            <td style="color: red;">Incoming</td>
+                            <td style="padding-bottom: 1em;">
+                                Requests from a user for Web pages or other data sent to the Website including any
+                                uploaded images or files.
                             </td>
-                            <td>&nbsp;</td>
-                            <td>&nbsp;</td>
-                            <td>
-                                {$serverStats.yesterday.storage|string_format:"%.3f"} Gigabytes
+                        </tr>
+                        <tr>
+                            <td style="color: green;">Outgoing</td>
+                            <td style="padding-bottom: 1em;">
+                                Data sent to users of your site including all Web pages, images, and files requested
+                                by the user. Note that this line may be covered by the Total (blue) line where they are the same.
                             </td>
-                            <td>&nbsp;</td>
                         </tr>
                         <tr>
-                            <th>This Month: </th>
-                            <td>
-                                {$serverStats.thisMonth.data_total|string_format:"%.3f"} Gigabytes<br>
+                            <td style="color: blue;">Total</td>
+                            <td style="padding-bottom: 1em;">
+                                Total of all incoming and outgoing data. This is the value that is compared to the
+                                the <b>Target</b> data traffic for billing purposes.
                             </td>
-                            <td>&nbsp;</td>
-                            <td>&nbsp;</td>
-                            <td>
-                                {$serverStats.thisMonth.storage|string_format:"%.3f"} Gigabytes
+                        </tr>
+                        <tr>
+                            <td style="color: purple; white-space: nowrap;">Traffic Target</td>
+                            <td style="padding-bottom: 1em;">
+                                The maximum total monthly traffic expected for your Website.
+                                You are billed based on this target. If your "Total" traffic regularly exceeds this, you will be contacted
+                                to discuss increasing this target. This value is represented by the dotted line on the
+                                "Monthly Traffic" graph.
                             </td>
-                            <td>&nbsp;</td>
-                            <td>&nbsp;</td>
                         </tr>
                         <tr>
-                            <th>Last Month: </th>
-                            <td{if $serverStats.trafficDiff.exceeded} style="color: red;"{/if}>
-                                {$serverStats.lastMonth.data_total|string_format:"%.3f"} Gigabytes
+                            <td style="color: gray; white-space: nowrap;">Disk Space Used&nbsp;&nbsp;</td>
+                            <td style="padding-bottom: 1em;">
+                                The greatest amount of server disk space consumed by this Web site and all associated data during the measurement period.
+                                Disk Space Used is displayed in <b>Gigabytes</b>.
                             </td>
-                            <td>{$target|string_format:"%.1f"} Gigabytes</td>
-                            <td{if $serverStats.trafficDiff.exceeded} style="color: red;"{/if}>{$serverStats.trafficDiff.percent|string_format:"%.0f"}%</td>
-                            <td>
-                                {$serverStats.lastMonth.storage*1000|string_format:"%.1f"} Gigabytes
+                        </tr>
+                        <tr>
+                            <td style="color: purple; white-space: nowrap;">Disk Space Target</td>
+                            <td style="padding-bottom: 1em;">
+                                The maximum disk storage space your Website is expected to use.
+                                You are billed for data storage based on this target. If the "Disk Space Used" regularly exceeds this, you will be contacted
+                                to discuss increasing this target. This value is represented by the dotted line on the
+                                "Monthly Disk Space Used" graph.
                             </td>
-                            <td>{$diskTarget|string_format:"%.3f"} Gigabytes</td>
-                            <td{if $serverStats.trafficDiff.diskExceeded} style="color: red;"{/if}>{$serverStats.trafficDiff.diskPercent|string_format:"%.0f"}%</td>
                         </tr>
-                    </table>
-                    <span class="datePrintInclude" style="margin-bottom: 0em;">
-                        <p>
-                            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>
-                        </p>
-                    </span>
-
-                    <div class="graphContainer">
-                        <div class="graphTitle">
-                            Monthly traffic totals for the past year. The dotted line is our current/planned billing level.
-                        </div>
-                        <div class="graph" style="padding-top: 10px;"><img id="twoYearImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
+                    </tbody>
+                </table>
+                <div id="StatsPrintArea" class="PrintArea" style="padding: 10px;">
+                    <style>
+                        @media print {
+                            body * {
+                                font-size: 8pt;
+                            }
+                        }
+                        .glmbw-table{
+                            font-size: 1em;
+                        }
+                        .glmbw-table .glmbw-th-light {
+                            font-weight: bold;
+                            text-align: left;
+                            vertical-align: top;
+                            white-space: nowrap;
+                        }
+                        .glmbw-table th {
+                            font-weight: bold;
+                            text-align: left;
+                            vertical-align: top;
+                            white-space: nowrap;
+                            padding-right: 20px;
+                        }
+                        .glmbw-table td {
+                            font-weight: normal;
+                            font-size: .9em;
+                            text-align: left;
+                            vertical-align: top;
+                            padding-right: 20px;
+                        }
+                        .glmbw-image {
+                            max-width: 90%;
+                            height: auto;
+                            width: auto\9; /* IE8 */
+                        }
+                        .print-title {
+                            font-weight: bold;
+                            font-size: 1em;
+                            text-align: center;
+                        }
+                    </style>
+                    <div class="print-title" style="text-align: center;">
+                        Usage statistics for site:&nbsp;&nbsp;{$selectedSite|upper}&nbsp;&nbsp;&nbsp;&nbsp;Date:
+                        <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">
                     </div>
-                    <div class="graphContainer">
-                        <div class="graphTitle">
-                            Montlhy maximum disk space used for past year. The dotted line is our current/planned billing level.
+                    <center>
+                        <table class="glmbw-table unstriped">
+                            <tr>
+                                <th>&nbsp;</th><th>Traffic</th><th>Target</th><th>% of Target</th><th>Storage</th><th>target</th><th>% of Target</th></tr>
+                            <tr>
+                                <th>Yesterday: </th>
+                                <td>
+                                    {$serverStats.yesterday.data_total|string_format:"%.3f"} Megabytes<br>
+                                </td>
+                                <td>&nbsp;</td>
+                                <td>&nbsp;</td>
+                                <td>
+                                    {$serverStats.yesterday.storage|string_format:"%.3f"} Gigabytes
+                                </td>
+                                <td>&nbsp;</td>
+                            </tr>
+                            <tr>
+                                <th>This Month: </th>
+                                <td>
+                                    {$serverStats.thisMonth.data_total|string_format:"%.3f"} Gigabytes<br>
+                                </td>
+                                <td>&nbsp;</td>
+                                <td>&nbsp;</td>
+                                <td>
+                                    {$serverStats.thisMonth.storage|string_format:"%.3f"} Gigabytes
+                                </td>
+                                <td>&nbsp;</td>
+                                <td>&nbsp;</td>
+                            </tr>
+                            <tr>
+                                <th>Last Month: </th>
+                                <td{if $serverStats.trafficDiff.exceeded} style="color: red;"{/if}>
+                                    {$serverStats.lastMonth.data_total|string_format:"%.3f"} Gigabytes
+                                </td>
+                                <td>{$target|string_format:"%.1f"} Gigabytes</td>
+                                <td{if $serverStats.trafficDiff.exceeded} style="color: red;"{/if}>{$serverStats.trafficDiff.percent|string_format:"%.0f"}%</td>
+                                <td>
+                                    {$serverStats.lastMonth.storage*1000|string_format:"%.1f"} Gigabytes
+                                </td>
+                                <td>{$diskTarget|string_format:"%.3f"} Gigabytes</td>
+                                <td{if $serverStats.trafficDiff.diskExceeded} style="color: red;"{/if}>{$serverStats.trafficDiff.diskPercent|string_format:"%.0f"}%</td>
+                            </tr>
+                        </table>
+                        <span class="datePrintInclude" style="margin-bottom: 0em;">
+                            <p>
+                                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>
+                            </p>
+                        </span>
+
+                        <div class="graphContainer">
+                            <div class="graphTitle">
+                                Monthly traffic totals for the past year. The dotted line is our current/planned billing level.
+                            </div>
+                            <div class="graph" style="padding-top: 10px;"><img id="twoYearImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
-                        <div class="graph" style="padding-top: 10px;"><img id="twoYearStorageImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
-                    </div>
-                    <div class="graphContainer">
-                        <div class="graphTitle">
-                            Detail traffic for past 24 hours.
+                        <div class="graphContainer">
+                            <div class="graphTitle">
+                                Montlhy maximum disk space used for past year. The dotted line is our current/planned billing level.
+                            </div>
+                            <div class="graph" style="padding-top: 10px;"><img id="twoYearStorageImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
-                        <div class="graph" style="padding-top: 10px;"><img id="twoDayImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
-                    </div>
-                    <div class="graphContainer">
-                        <div class="graphTitle">
-                            Daily traffic for past two months.
+                        <div class="graphContainer">
+                            <div class="graphTitle">
+                                Detail traffic for past 24 hours.
+                            </div>
+                            <div class="graph" style="padding-top: 10px;"><img id="twoDayImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
-                        <div class="graph" style="padding-top: 10px;"><img id="twoMonthImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
-                    </div>
-                </center>
-            </div>
-        </center>
-    </div>
+                        <div class="graphContainer">
+                            <div class="graphTitle">
+                                Daily traffic for past two months.
+                            </div>
+                            <div class="graph" style="padding-top: 10px;"><img id="twoMonthImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
+                        </div>
+                    </center>
+                </div>
+            </center>
+        </div>
+
+    {/if} {* /!$haveStats *}
 
     <script src="{$jsUrl}/PrintArea/jquery.PrintArea.js" type="text/JavaScript" language="javascript"></script>
 
@@ -461,8 +478,8 @@
 
         });
     </script>
-  {/if}
-{/if}
+
+{/if} {* /!$connected *}
 
 
 {include file='footer.html'}

diff --git a/views/ui/f6/form-end.html b/views/ui/f6/form-end.html
new file mode 100644 (file)
index 0000000..608a1a2
--- /dev/null
+++ b/views/ui/f6/form-end.html
@@ -0,0 +1,5 @@
+{*
+    Foundation 6 UI - Form End
+
+*}
+</form>

diff --git a/views/ui/f6/form-start.html b/views/ui/f6/form-start.html
new file mode 100644 (file)
index 0000000..b1ec936
--- /dev/null
+++ b/views/ui/f6/form-start.html
@@ -0,0 +1,38 @@
+{*
+    Foundation 6 UI - Form Start
+
+    {$ui = [
+        'action'            => string   Required    URL
+        'method'            => string   Required    Method "POST" or "GET"
+        'id'                => string               Form id
+        'File'              => boolean              If including file upload set to true
+        'validate'          => boolean              If true, include Abide Form Validation
+        'validateFocusMsg'  => boolean              If true focuses on validateMessage on error
+        'validateID'        => string               Unique text that will be added to the validate message container to ensure that it is unique
+        'validateMessage'   => string               Message to show when validattion error, If not provided will use "There are some errors in your form."
+    ]}
+*}
+{$validateMessage = "There are some errors in your form."}
+{if !empty($ui.validate)}{$validateMessage = $ui.validateMessage}{/if}
+
+<form
+    action="{$ui.action}"
+    method="{$ui.method}"
+    {if !empty($ui.id)}id="{$ui.id}"{/if}
+    {if $ui.file}enctype="multipart/form-data"{/if}
+    data-abide novalidate data-validate-on-blur="true"
+>
+    {if !empty($ui.validate)}
+        <div id="validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}" data-abide-error class="alert callout" style="display: none;">
+            <p><i class="fi-alert"></i> There are some errors in your form.</p>
+        </div>
+        {if !empty(validateFocusMsg)}
+            <script>
+                $(document).on("forminvalid.zf.abide", function(ev,frm) {
+{* For some reason this is not working. Need to figure this out *}
+                    document.getElementById("validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}").focus();
+                });
+            </script>
+        {/if}
+    {/if}
+

diff --git a/views/ui/f6/miscContainer-end.html b/views/ui/f6/miscContainer-end.html
new file mode 100644 (file)
index 0000000..df34286
--- /dev/null
+++ b/views/ui/f6/miscContainer-end.html
@@ -0,0 +1,7 @@
+{*
+    Foundation 6 - Misc Container End
+
+    Used to end teh contain for other content in an form using UI F6.
+*}
+
+</div>

diff --git a/views/ui/f6/miscContainer-start.html b/views/ui/f6/miscContainer-start.html
new file mode 100644 (file)
index 0000000..4677ec3
--- /dev/null
+++ b/views/ui/f6/miscContainer-start.html
@@ -0,0 +1,7 @@
+{*
+    Foundation 6 - Misc Container Start
+
+    Used to contain other content in an form using UI F6.
+*}
+
+<div class="cell small-12 glm-f6-ui-field">

diff --git a/views/ui/f6/submit.html b/views/ui/f6/submit.html
new file mode 100644 (file)
index 0000000..1dbfd56
--- /dev/null
+++ b/views/ui/f6/submit.html
@@ -0,0 +1,21 @@
+{*
+    Foundation 6 - Submit Button
+
+    {$ui = [
+        'class'     => string   Required    One of "primary", "secondary", "alert", "success", and "warning" and any addtional desired classes
+        'label'     => string   Required    Label text for this field,
+        'submit'    => boolean              True if this is a submit button
+        'id'        => string               Optional ID for this button
+        'small'     => boolean              True to select a small button
+    ]}
+*}
+
+<div class="cell small-12 glm-f6-ui-field">
+    <button
+        {if !empty($ui.id)}id={$ui.id}{/if}
+        {if !empty($ui.submit)}type="submit"{/if}
+        class="button{if !empty($ui.small)} button-small{/if} {$ui.class}"
+    >
+        {$ui.label}
+    </button>
+</div>