* @access public
*/
public $website = false;
+ /**
+ * Reporting Threshold
+ *
+ * @var $threshold
+ * @access public
+ */
+ public $threshold = -1;
/**
* Default Website ID
*
$this->connected = false;
+ $this->threshold = get_option(GLM_SERVERSTATS_PLUGIN_THRESHOLD_OPTION);
+
// Initialize MySQLi
$this->bwdb = mysqli_init();
if ($this->bwdb !== null) {
trigger_error('GLM Usage: bandwidthDataConnect() - '.$this->connectError, E_USER_NOTICE);
} else {
- // Get global send percentage - Notify if above this
- $this->threshold = $config['send_percent'] - 0;
-
if (!$website) {
$website = $config['website'];
}
$mesg = '';
- // If targets had exceeded target
- if ($sendAll || $site['target_percent'] > $this->threshold || $site['disk_target_percent'] > $this->threshold) {
+ // If theshold is not -1 and at least one of usage or disk % of target equals or exceeds reporting threshold
+ if ($this->threshold != -1 && ($sendAll || $site['target_percent'] >= $this->threshold || $site['disk_target_percent'] >= $this->threshold)) {
+echo "Threshold = ".$this->threshold."<P>";
$numbReporting++;
--- /dev/null
+
+$responsive-card-table-bottom-gap: 1.5rem;
+$responsive-card-table-border: 1px solid $black;
+$responsive-card-table-stack-point: 640px;
+$responsive-card-table-label-bg: $light-gray;
+
+.responsive-card-table {
+ border-collapse: collapse;
+
+ &.unstriped tbody {
+ background-color: transparent;
+ }
+
+ th {
+ background-color: $responsive-card-table-label-bg;
+ }
+
+ tr,
+ th,
+ td {
+ border: $responsive-card-table-border;
+ }
+
+ @media screen and (max-width: $responsive-card-table-stack-point) {
+ thead tr {
+ position: absolute;
+ top: -9999em;
+ left: -9999em;
+ }
+
+ tr {
+ border: $responsive-card-table-border;
+ display: block;
+ }
+
+ tr + tr {
+ margin-top: $responsive-card-table-bottom-gap;
+ }
+ /* Get table cells to act like rows */
+
+ td {
+ border: none;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ border-bottom: $responsive-card-table-border;
+ padding-left: 50%;
+ position: relative;
+
+ &:before {
+ content: attr(data-label);
+ display: inline-block;
+ font-weight: bold;
+ line-height: 1.5;
+ margin-left: -100%;
+ width: 100%;
+ position: relative;
+ z-index: 1;
+ }
+
+ &:after {
+ content: '';
+ position: absolute;
+ background: $responsive-card-table-label-bg;
+ width: 45%;
+ height: 95%;
+ left: 1px;
+ top: 1px;
+ z-index: 0;
+ }
+ }
+ }
+}
+
+
+.responsive-card-table {
+ border-collapse: collapse;
+}
+
+.responsive-card-table.unstriped tbody {
+ background-color: transparent;
+}
+
+.responsive-card-table th {
+ background-color: #e6e6e6;
+}
+
+.responsive-card-table tr,
+.responsive-card-table th,
+.responsive-card-table td {
+ border: 1px solid #0a0a0a;
+}
+
+@media screen and (max-width: 640px) {
+ .responsive-card-table {
+
+ }
+ .responsive-card-table thead tr {
+ position: absolute;
+ top: -9999em;
+ left: -9999em;
+ }
+ .responsive-card-table tr {
+ border: 1px solid #0a0a0a;
+ display: block;
+ }
+ .responsive-card-table tr + tr {
+ margin-top: 1.5rem;
+ }
+ .responsive-card-table td {
+ border: none;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-bottom: 1px solid #0a0a0a;
+ padding-left: 50%;
+ position: relative;
+ }
+ .responsive-card-table td:before {
+ content: attr(data-label);
+ display: inline-block;
+ font-weight: bold;
+ line-height: 1.5;
+ margin-left: -100%;
+ width: 100%;
+ position: relative;
+ z-index: 1;
+ }
+ .responsive-card-table td:after {
+ content: '';
+ position: absolute;
+ background: #e6e6e6;
+ width: 45%;
+ height: 95%;
+ left: 1px;
+ top: 1px;
+ z-index: 0;
+ }
+}
+
+
GLM_MEMBERS_PLUGIN_VERSION
);
wp_enqueue_style('glm-members-admin-datetimepicker-css');
+ wp_register_style(
+ 'glm-members-admin-responsive-card-table-css',
+ GLM_SERVERSTATS_PLUGIN_URL . 'css/responsive-card-table.css',
+ false,
+ GLM_SERVERSTATS_PLUGIN_VERSION
+ );
+ wp_enqueue_style('glm-members-admin-responsive-card-table-css');
}
class adminServerStats extends glmServerStatsBandwidthSupport
{
- /**
- * Reporting Threshold
- *
- * @var $threshold
- * @access public
- */
- public $threshold = false;
-
/*
* Constructor
public function __construct()
{
$this->config = $this->getConfig();
- $this->threshold = get_option(GLM_SERVERSTATS_PLUGIN_THRESHOLD_OPTION);
$websiteSelected = false;
// If a threshold value is submitted
if (isset($_REQUEST['threshold'])) {
$this->threshold = $_REQUEST['threshold'] - 0;
- add_option(GLM_SERVERSTATS_PLUGIN_THRESHOLD_OPTION, $this->threshold);
+ update_option(GLM_SERVERSTATS_PLUGIN_THRESHOLD_OPTION, $this->threshold);
}
// Check for a selected site or use website in config
$result = $this->checkEmailNotifications(true, true);
}
- /*
- * Perform a target check on one site only
- *
- * This modelAction takes an AJAX request to produce a bandwidth graph and
- * output it.
- *
- * This model action does not return, it simply does it's work then calls die();
- *
- * @param $actionDataalert('{$thisUrl}?page={$thisPage}&website=' + site);
- */
-/*
- public function model()
- {
-
- trigger_error('ajaxServerUsageTargetCheck: model() called', E_USER_NOTICE);
- return 'Good Response';
-
- $request = filter_input_array(
- INPUT_GET,
- array(
- 'glmContact' => FILTER_VALIDATE_BOOLEAN,
- 'custContact' => FILTER_VALIDATE_BOOLEAN,
- 'forceDisplay' => FILTER_VALIDATE_BOOLEAN,
- 'forceSend' => FILTER_VALIDATE_BOOLEAN
- )
- );
-
- $this->checkForEmailNotifications($request['glmContact'], $request['custContact'], $request['forceDisplay'], $request['forceSend']);
-
- trigger_error('ajaxServerUsageTargetCheck: model() done!', E_USER_NOTICE);
- }
-*/
}
font-size: 1.4rem;
clear: both;
padding: 1rem;
-
margin-top: 2rem;
}
.sortBy {
display: inline-block;
font-weight: bold;
white-space: nowrap;
- padding-left: 20px;
+ margin-left: 1rem;
}
.sortByTitle {
display: inline-block;
}
.graph {
}
- .button {
- white-space: pre-wrap !important; /* css-3 */
+ .button-wrappable {
+ white-space: pre-wrap !important; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
- white-space: -pre-wrapv; /* Opera 4-6 */
- white-space: -o-pre-wrap !important; /* Opera 7 */
+ white-space: -pre-wrapv; /* Opera 4-6 */
+ white-space: -o-pre-wrap !important; /* Opera 7 */
word-wrap: break-word !important; /* Internet Explorer 5.5+ */
}
-
+ .usage-item {
+ margin-top: 1rem;
+ }
+ .color-key-traffic {
+ color: black !important;
+ font-weight: bold;
+ }
+ .color-key-target {
+ color: maroon !important;
+ font-weight: bold;
+ }
+ .color-key-storage {
+ color: gray !important;
+ font-weight: bold;
+ }
+ .color-key-incoming {
+ color: red !important;
+ font-weight: bold;
+ }
+ .color-key-outgoing {
+ color: green !important;
+ font-weight: bold;
+ }
+ .color-key-total {
+ color: blue !important;
+ font-weight: bold;
+ }
</style>
{if !$connected}
{* Misc Container Start *}
{include file="ui/f6/miscContainer-start.html"}
-
+
{* Form Start *}
{$ui = [
- 'action' => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
- 'method' => 'POST',
- 'validate' => true,
- 'validateFocusMsg' => true
- ]}
- {include file="ui/f6/form-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
- <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
- <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
- <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
- <div style="overflow-x: auto;">
- <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}
+ 'action' => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
+ 'method' => 'POST'
+ ]}
+ {include file="ui/f6/form-start.html"}
+
+ <div class="grid-x grid-margin-x">
+ <div style="whitespace: nowrap;">
+ <span class="sortBy">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
</div>
- </div>
+ <div style="whitespace: nowrap;">
+ <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
+ <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
+ </div>
+ <div style="whitespace: nowrap;">
+ <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
+ <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
+ </div>
+ </div>
+ <div style="overflow-x: auto;">
+ <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>
+ </div>
</div>
<p>Click on a site above to display settings and charts.</p>
{if $selectedSite}
<div class="grid-x grid-margin-x">
- <div class="cell small-12 large-3 glm-f6-ui-nowrap">
+ <div class="cell small-12 large-4 glm-f6-ui-nowrap">
<b>Send E-Mail:</b>
- <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary button-small">Send for selected site</a>
+ <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary button-small button-wrappable">Send for selected site</a>
</div>
- <div class="cell small-12 large-9 glm-f6-ui-nowrap">
+ <div class="cell small-12 large-8 glm-f6-ui-nowrap">
<b>Preview E-Mail:</b>
- <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary button-small">Display for site selected site</a>
- <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&display_only=true" target="usageEmail" class="button button-secondary button-small">Display for all sites above threashold</a>
+ <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary button-small button-wrappable">Display for site selected site</a>
+ <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&display_only=true" target="usageEmail" class="button button-secondary button-small button-wrappable">Display for all sites above threashold</a>
</div>
</div>
{/if}
-
+
{include file="ui/f6/form-end.html"}
{include file="ui/f6/miscContainer-end.html"}
{include file="ui/f6/section-end.html"}
-
+
+ {* Grid End *}
+ {$ui = [
+ 'noFoundationInit' => true
+ ]}
{include file="ui/f6/grid-end.html"}
{* Form Start *}
{$ui = [
- 'action' => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
- 'method' => 'POST',
- 'validate' => true,
- 'validateFocusMsg' => true
- ]}
- {include file="ui/f6/form-start.html"}
-
+ '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"}
-
+ {include file="ui/f6/grid-start.html"}
+
+ {* Form Summary Start *}
{$ui = [
- 'id' => 'SettingsForSelectedSite',
- 'title' => 'Current Settings for Selected Site Summary'
- ]}
- {include file="ui/f6/form-display-start.html"}
+ 'id' => 'usageSettings',
+ 'title' => 'Usage Report Settings'
+ ]}
+ {include file="ui/f6/form-summary-start.html"}
<div class="cell small-12 callout glm-f6-ui-section-start">
<div class="grid-x grid-margin-x">
+ <div class="cell small-12"><h4>For Selected Site</h4></div>
<div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Selected Site:</b></div>
<div class="cell small-12 large-9">{$selectedSite}</div>
<div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Monthly Traffic Target:</b></div>
<div class="cell small-12 large-9">{$settings.disk_target|string_format:"%.1f"}</div>
<div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Customer Contact:</b></div>
<div class="cell small-12 large-9">{if !empty($settings.cust_contact)}{$settings.cust_contact}{else}(not supplied){/if}</div>
+ <div class="cell small-12"><br><h4>Global Settings</h4></div>
+ <div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Monthly Reporting Threshold:</b></div>
+ <div class="cell small-12 large-9">At or above {$threshold|string_format:"%.0f"}% of site's target levels</div>
</div>
</div>
- {include file="ui/f6/form-display-end.html"}
-
+ {include file="ui/f6/form-summary-end.html"}
+
+ {* Form Edit Start *}
{$ui = [
- 'id' => 'SettingsForSelectedSite',
- 'title' => 'Edit Settings for Selected Site Summary'
- ]}
- {include file="ui/f6/form-edit-start.html"}
+ 'id' => 'usageSettings',
+ 'title' => 'Edit Settings'
+ ]}
+ {include file="ui/f6/form-edit-start.html"}
+
-
{* Section Start *}
{$ui = [
'title' => 'Settings for Selected Site'
]}
{include file="ui/f6/section-start.html"}
-
+
{* target *}
{$ui = [
'field' => 'target',
'placeholder' => 'i.e. 2.000 for 2 Gigabytes'
]}
{include file="ui/f6/text.html"}
-
+
{* disk_target *}
{$ui = [
'field' => 'disk_target',
'placeholder' => 'i.e. 2.000 for 2 Gigabytes'
]}
{include file="ui/f6/text.html"}
-
+
{* cust_contact *}
{$ui = [
'field' => 'cust_contact',
'helpText' => 'Leave empty to prevent any E-mail from being sent for this site.'
]}
{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"}
-
+
{* Reporting Threshold *}
{$ui = [
'field' => 'threshold',
'value' => {$threshold|string_format:"%.0f"},
'label' => 'Monthly Reporting Threshold %',
'required' => true,
- 'min' => 0,
- 'max' => 200,
+ 'min' => -1,
+ 'max' => 1000,
'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"}
-
+
{* Submit Button *}
{$ui = [
'class' => 'primary',
{include file="ui/f6/form-end.html"}
<div class="usage-section">Customer Section</div>
-
+
{else}
-
+
<div class="usage-section">Website Data Usage</div>
-
+
{/if} {* /is provider *}
<!-- Server Data Usage Stats -->
<div style="max-width: 1200px;" class="callout">
- <center>
+ <center style="margin-bottom: 1rem;">
<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 unstriped" 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 </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>
+ </center>
+ <div id="usageGuide">
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-traffic">Traffic</div>
+ <div class="cell small-12 medium-10">
+ 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.
+ </div>
+ </div>
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-incoming">Incoming</div>
+ <div class="cell small-12 medium-10">
+ 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.
+ </div>
+ </div>
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-outgoing">Outgoing</div>
+ <div class="cell small-12 medium-10">
+ 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.
+ </div>
+ </div>
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-total">Total</div>
+ <div class="cell small-12 medium-10">
+ 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.
+ </div>
+ </div>
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-target">Traffic Target</div>
+ <div class="cell small-12 medium-10">
+ 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.
+ </div>
+ </div>
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-storage">Disk Space Used</div>
+ <div class="cell small-12 medium-10">
+ 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>.
+ </div>
+ </div>
+ <div class="usage-item grid-x grid-margin-x">
+ <div class="cell small-12 medium-2 color-key-target">Disk Space Target</div>
+ <div class="cell small-12 medium-10">
+ 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.
+ </div>
+ </div>
+ </div>
+ <center>
<div id="StatsPrintArea" class="PrintArea" style="padding: 10px;">
<style>
@media print {
font-size: 1em;
text-align: center;
}
- #key-line {
- margin: 0px;
- padding: 0px;
- }
#print-date {
font-size: 1em;
padding: 0px;
}
.graph {
}
-
+ .color-key-traffic {
+ color: black !important;
+ font-weight: bold;
+ }
+ .color-key-target {
+ color: maroon !important;
+ font-weight: bold;
+ }
+ .color-key-storage {
+ color: gray !important;
+ font-weight: bold;
+ }
+ .color-key-incoming {
+ color: red !important;
+ font-weight: bold;
+ }
+ .color-key-outgoing {
+ color: green !important;
+ font-weight: bold;
+ }
+ .color-key-total {
+ color: blue !important;
+ font-weight: bold;
+ }
</style>
<div class="print-title" style="text-align: center;">
- Usage statistics for site: {$selectedSite|upper} Date:
- <input id="print-date" style="width: 7rem;" 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 style="padding-right: 2rem;">SITE: {$selectedSite|upper}</span>
+ DATE: <input id="print-date" style="width: 7rem;" 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 unstriped">
- <tr>
- <th> </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> </td>
- <td> </td>
- <td>
- {$serverStats.yesterday.storage|string_format:"%.3f"} Gigabytes
- </td>
- <td> </td>
- <td> </td>
- </tr>
- <tr>
- <th>This Month: </th>
- <td>
- {$serverStats.thisMonth.data_total|string_format:"%.3f"} Gigabytes<br>
- </td>
- <td> </td>
- <td> </td>
- <td>
- {$serverStats.thisMonth.storage|string_format:"%.3f"} Gigabytes
- </td>
- <td> </td>
- <td> </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 class="responsive-card-table unstriped hover glmbw-table">
+ <thead>
+ <tr>
+ <th>Time frame</th><th>Traffic</th><th>Target</th><th>% of Target</th><th>Storage</th><th>target</th><th>% of Target</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td data-label=" ">Yesterday: </td>
+ <td data-label="Traffic">
+ {$serverStats.yesterday.data_total|string_format:"%.3f"} Megabytes<br>
+ </td>
+ <td data-label="Target"> </td>
+ <td data-label="% of Target"> </td>
+ <td data-label="Storage">
+ {$serverStats.yesterday.storage|string_format:"%.3f"} Gigabytes
+ </td>
+ <td data-label="Target"> </td>
+ <td data-label="% of Target"> </td>
+ </tr>
+ <tr>
+ <td data-label=" ">This Month: </td>
+ <td data-label="Traffic">
+ {$serverStats.thisMonth.data_total|string_format:"%.3f"} Gigabytes<br>
+ </td>
+ <td data-label="Target"> </td>
+ <td data-label="% of Target"> </td>
+ <td data-label="Storage">
+ {$serverStats.thisMonth.storage|string_format:"%.3f"} Gigabytes
+ </td>
+ <td data-label="Target"> </td>
+ <td data-label="% of Target"> </td>
+ </tr>
+ <tr>
+ <td data-label=" ">Last Month: </td>
+ <td data-label="Traffic"{if $serverStats.trafficDiff.exceeded} style="color: red;"{/if}>
+ {$serverStats.lastMonth.data_total|string_format:"%.3f"} Gigabytes
+ </td>
+ <td data-label="Target">{$target|string_format:"%.1f"} Gigabytes</td>
+ <td data-label="% of Target"{if $serverStats.trafficDiff.exceeded} style="color: red;"{/if}>{$serverStats.trafficDiff.percent|string_format:"%.0f"}%</td>
+ <td data-label="Storage">
+ {$serverStats.lastMonth.storage*1000|string_format:"%.1f"} Gigabytes
+ </td>
+ <td data-label="Target">{$diskTarget|string_format:"%.3f"} Gigabytes</td>
+ <td data-label="% of Target"{if $serverStats.trafficDiff.diskExceeded} style="color: red;"{/if}>{$serverStats.trafficDiff.diskPercent|string_format:"%.0f"}%</td>
+ </tr>
+ </tbody>
</table>
- <span class="datePrintInclude">
- <p id="key-line">
- 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>
-
+ <p id="key-line">
+ Color Key: <span class="color-key-target">Target</span>, <span class="color-key-storage">Storage</span>, <span class="color-key-incoming">Incoming</span>, <span class="color-key-outgoing">Outgoing</span>, <span class="color-key-total">Total</span><br>
+ </p>
<div class="graphContainer">
<div class="graph"><img id="twoYearImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
<div class="graphTitle">
{* Form Start *}
{$ui = [
- 'action' => "{$thisUrl}?page={$thisPage}",
- 'method' => 'post',
- 'validate' => true,
- 'validateID' => '1234',
- 'validateFocusMsg' => true,
- 'validateMessage' => 'There are some errors in your form. Please check the highlighted fields below.'
- ]}
- {include file="ui/f6/form-start.html"}
+ 'action' => "{$thisUrl}?page={$thisPage}",
+ 'method' => 'post',
+ 'validate' => true,
+ 'validateID' => '1234',
+ 'validateFocusMsg' => true,
+ 'validateMessage' => 'There are some errors in your form. Please check the highlighted fields below.'
+ ]}
+ {include file="ui/f6/form-start.html"}
<input type="hidden" name="option" value="update_connection">
{* Grid Start *}
- {$ui = [
- 'sectionColor' => '#ffE'
- ]}
- {include file="ui/f6/grid-start.html"}
+ {$ui = [
+ 'sectionColor' => '#ffE'
+ ]}
+ {include file="ui/f6/grid-start.html"}
{* Section Start *}
{$ui = [
- 'title' => 'Database Connection',
- 'tip' => '
- This section sets paramters required to connect to the Usage and Disk Space
- database. There is only one of these for all customers. This data should be
- the same for all sites using this plugin. Contact Gaslight Media Engineering
- if you need help with these settings.
- '
+ 'title' => 'Cookie Pop-Ups for This Site',
+ 'tip' => '
+ This section enables and sets parameters for the "Cookie Popup" that
+ will be displayed to a front-end user until they click to confirm that they
+ have read this popup. The popup will redisplay after the sent number of days
+ selected below.
+ See "Additional Notices" to select other standard
+ notices to display based on what is included in Web site.
+ '
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {* show_cookie_popup *}
+ {$ui = [
+ 'field' => 'show_cookie_popup',
+ 'value' => {!empty($show_cookie_popup)},
+ 'label' => 'Show Cookie Pop-Up'
]}
- {include file="ui/f6/section-start.html"}
-
- {if $connectError}
-
- {* Text Line *}
- {$ui = [
- 'text' => '
- <p class="glm-failure-notice"><b>NOTICE</b>: Unable To Connect - Please check "Database Connection" below</p>
- <p>
- Database connection failures may also be due to the Web server not being able to communicate with the GLM Data Usage
- database. If necessary, please check with Gaslight Media Engineering for assistance.
- </p>
- '
- ]}
- {include file="ui/f6/text-line.html"}
-
- {else}
-
- {* Text Line *}
- {$ui = [
- 'text' => 'Please ask Gaslight Media Engineering if you need assistance with these settings.'
- ]}
- {include file="ui/f6/text-line.html"}
+ {include file="ui/f6/checkbox.html"}
- {/if}
-
- {* db_name *}
- {$ui = [
- 'field' => 'db_name',
- 'value' => {$db_name},
- 'label' => 'Database Name',
- 'required' => true,
- 'placeholder' => 'Try: bandwidth',
- 'errorText' => 'The database name is required for connecting to the usage database.'
- ]}
- {include file="ui/f6/text.html"}
+ {* cookie_popup_timeout *}
+ {$ui = [
+ 'field' => 'cookie_popup_timeout',
+ 'value' => {$cookie_popup_timeout},
+ 'label' => 'Cookie Pop-Up Re-Display Days',
+ 'required' => true,
+ 'min' => 0,
+ 'max' => 365,
+ 'width' => 5,
+ 'helpText' => 'Number of days after user accepts the cookie pop-up that it will display again.
+ <b>Do not set to a real high number. Consider 10-30 days. Set to 0 to test Cookie Popups.</b>',
+ 'errorText' => 'Must be between 0 and 365 days!'
+ ]}
+ {include file="ui/f6/number.html"}
- {* db_host *}
- {$ui = [
- 'field' => 'db_host',
- 'value' => {$db_host},
- 'label' => 'Database Server Hostname',
- 'placeholder' => 'Try: bandwidth.gaslightmedia.com',
- 'required' => true,
- 'maxWidth' => 20,
- 'errorText' => 'The database host name is required for connecting to the usage database.'
- ]}
- {include file="ui/f6/text.html"}
+ {* cookie_message *}
+ {$ui = [
+ 'field' => 'cookie_message',
+ 'value' => {$cookie_message},
+ 'label' => 'Cookies Notice Text',
+ 'required' => true,
+ 'teeny' => true,
+ 'rows' => 10,
+ 'helpText' => '
+ This is the main text of the Cookie Pop-Up.
+ The selected "Additional Notices" texts will show below this text in the Cookie Popup window on the
+ front-end of this site when the "Show more" button is clicked. To reset this field to the original
+ text, remove all content in the editor below and submit this page.
+ ',
+ 'tip' => '
+ This text is always displayed at the top of the Cookie Popup and is the only text displayed in the
+ Cookie Popup until the user views other notices by clicking the "Show more" button. This
+ is important text and should always be included.
+ '
+ ]}
+ {include file="ui/f6/editor.html"}
- {* db_user *}
- {$ui = [
- 'field' => 'db_user',
- 'value' => {$db_user},
- 'label' => 'Database Username',
- 'placeholder' => 'Try: bandwidthRO',
- 'required' => true,
- 'maxWidth' => 20,
- 'errorText' => 'The database username is required for connecting to the usage database.'
- ]}
- {include file="ui/f6/text.html"}
+ {include file="ui/f6/section-end.html"}
- {* db_pass *}
- {$ui = [
- 'field' => 'db_pass',
- 'value' => {$db_pass},
- 'label' => 'Database Password',
- 'placeholder' => 'Try: ,Wv4W*~^bL_vF3F4PbGsS',
- 'required' => true,
- 'errorText' => 'The database password for the above username is required for connecting to the usage database.'
- ]}
- {include file="ui/f6/text.html"}
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Addional Notices',
+ 'tip' => '
+ Below are various special notices that you may want to include for display in the Cookie Popup.
+ The content of these messages will display when the user clicks to see more information in the
+ cookie popup. What you select here should be related to what is included in the Web site. For
+ example, if the site includes a secure payment form, you would want to include the notice related
+ to Payment Forms.
+ '
+ ]}
+ {include file="ui/f6/section-start.html"}
- {* website *}
- {$ui = [
- 'field' => 'website',
- 'value' => {$website},
- 'label' => 'Website Name',
- 'placeholder' => 'i,e, www.gaslightmedia.com',
- 'required' => true,
- 'errorText' => 'The website host name is required to access settings for this site.'
- ]}
- {include file="ui/f6/text.html"}
+ {* Text Line *}
+ {$ui = [
+ 'text' => 'These notices are displayed when the user clicks the "Show more" button.'
+ ]}
+ {include file="ui/f6/text-line.html"}
- {include file="ui/f6/section-end.html"}
+ {* cookie_opt_gdpr *}
+ {$ui = [
+ 'field' => 'cookie_opt_gdpr',
+ 'value' => {$cookie_opt_gdpr},
+ 'label' => 'GDPR',
+ 'tip' => '
+ GDPR stands for General Data Protection Regulation, which is a European Union Regulation
+ that controls matters of personal privacy and data protection. If this site is likely to be
+ accessed by persons in the EU or otherwise covered by EU regulations, you will probably
+ want this on.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* Section Start *}
+ {* cookie_opt_access_logs *}
{$ui = [
- 'title' => 'Usage and Notifications',
- 'tip' => '
- This section controls display of site usage and generation of various notifcations to customers.
- '
+ 'field' => 'cookie_opt_access_logs',
+ 'value' => {$cookie_opt_access_logs},
+ 'label' => 'Access Logs',
+ 'tip' => '
+ If this site maintains access logs primarily for reasons of security and compliance with
+ policies, but not for sharing user access information with others, you should enable this notice.
+ '
]}
- {include file="ui/f6/section-start.html"}
+ {include file="ui/f6/checkbox.html"}
- {* show_usage *}
- {$ui = [
- 'field' => 'show_usage',
- 'value' => {!empty($show_usage)},
- 'label' => 'Show Data Usage',
- 'helpText' => 'Check this box to have server display website usage information.'
+ {* cookie_opt_permanent *}
+ {$ui = [
+ 'field' => 'cookie_opt_permanent',
+ 'value' => {$cookie_opt_permanent},
+ 'label' => 'Permanent Cookies',
+ 'tip' => '
+ If this site issues permanent cookies to user browsers that maintain information the user will
+ need when they return to the site, you should enable this notice.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* cookie_opt_tracking *}
+ {$ui = [
+ 'field' => 'cookie_opt_tracking',
+ 'value' => {$cookie_opt_tracking},
+ 'label' => 'Tracking Cookies',
+ 'tip' => '
+ If this site issues cookies to user browsers for the purpose of tracking user usage primarily
+ to evaluate and improve the site but not for distribution to other organizations, they you should
+ enable this notice.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* send_usage *}
- {$ui = [
- 'field' => 'send_usage',
- 'value' => {!empty($send_usage)},
- 'label' => 'Automatically Send Usage Notices Monthly',
- 'helpText' => 'This will enable E-mail notifications of usage beyond the following target to the E-mail
- contact set for each site. To set the contact address for a particular site, select the
- "GLM Data Usage" menu on the left, select the desired site, then add the E-mail address
- in the form on that page.'
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* cookie_opt_shared_tracking *}
+ {$ui = [
+ 'field' => 'cookie_opt_shared_tracking',
+ 'value' => {$cookie_opt_shared_tracking},
+ 'label' => 'Shared Tracking Cookies',
+ 'tip' => '
+ If this site issues cookies to the user browsers for the purpoose of collecting tracking information
+ that may be distributed to other organizations, you should enable this notice.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* send_percent *}
- {$ui = [
- 'field' => 'send_percent',
- 'value' => {$send_percent},
- 'label' => '% of Target for Notification',
- 'required' => true,
- 'min' => 0,
- 'max' => 150,
- 'width' => 5,
- 'helpText' => 'Send notification to customer contact if at this % of target or higher for usage or disk space.',
- 'errorText' => 'The value must be between 0 and 150!'
- ]}
- {include file="ui/f6/number.html"}
+ {* cookie_opt_https *}
+ {$ui = [
+ 'field' => 'cookie_opt_https',
+ 'value' => {$cookie_opt_https},
+ 'label' => 'HTTPS',
+ 'tip' => '
+ If this site uses HTTPS protocol for users to connect securely to this site, you should ensable this notice.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* show_notifications *}
- {$ui = [
- 'field' => 'show_notifications',
- 'value' => {!empty($show_notifications)},
- 'label' => 'Customer Notiifications',
- 'helpText' => 'Turn this on to have general Gaslight Media messages displayed on this site.'
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* cookie_opt_logged_in *}
+ {$ui = [
+ 'field' => 'cookie_opt_logged_in',
+ 'value' => {$cookie_opt_logged_in},
+ 'label' => 'Logged-In Users',
+ 'tip' => '
+ If this site permits users to log into the site or a portion of the site with some type of password, you
+ should enable this notice.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {include file="ui/f6/section-end.html"}
+ {* cookie_opt_forms *}
+ {$ui = [
+ 'field' => 'cookie_opt_forms',
+ 'value' => {$cookie_opt_forms},
+ 'label' => 'Submission Forms',
+ 'tip' => '
+ If this site has any entry forms that users may submit, you should enable this notice.
+ '
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* Section Start *}
+ {* cookie_opt_payment *}
{$ui = [
- 'title' => 'Cookie Pop-Ups for This Site',
- 'tip' => '
- This section enables and sets parameters for the "Cookie Popup" that
- will be displayed to a front-end user until they click to confirm that they
- have read this popup. The popup will redisplay after the sent number of days
- selected below.
- See "Additional Notices" to select other standard
- notices to display based on what is included withe Web site.
- '
+ 'field' => 'cookie_opt_payment',
+ 'value' => {$cookie_opt_payment},
+ 'label' => 'Payment Forms',
+ 'tip' => '
+ If this site accepts payments in any way, you should enable this notice.
+ '
]}
- {include file="ui/f6/section-start.html"}
+ {include file="ui/f6/checkbox.html"}
- {* show_cookie_popup *}
- {$ui = [
- 'field' => 'show_cookie_popup',
- 'value' => {!empty($show_cookie_popup)},
- 'label' => 'Show Cookie Pop-Up'
- ]}
- {include file="ui/f6/checkbox.html"}
+ {include file="ui/f6/section-end.html"}
- {* cookie_popup_timeout *}
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Database Connection',
+ 'tip' => '
+ This section sets paramters required to connect to the Usage and Disk Space
+ database. There is only one of these for all customers. This data should be
+ the same for all sites using this plugin. Contact Gaslight Media Engineering
+ if you need help with these settings.
+ '
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {if $connectError}
+
+ {* Text Line *}
{$ui = [
- 'field' => 'cookie_popup_timeout',
- 'value' => {$cookie_popup_timeout},
- 'label' => 'Cookie Pop-Up Re-Display Days',
- 'required' => true,
- 'min' => 0,
- 'max' => 90,
- 'width' => 5,
- 'helpText' => 'Number of days after user accepts the cookie pop-up that it will display again.
- <b>Do not set to a real high number. Consider 10-30 days. Set to 0 to test Cookie Popups.</b>',
- 'errorText' => 'Must be between 0 and 90 days!'
+ 'text' => '
+ <p class="glm-failure-notice"><b>NOTICE</b>: Unable To Connect - Please check "Database Connection" below</p>
+ <p>
+ Database connection failures may also be due to the Web server not being able to communicate with the GLM Data Usage
+ database. If necessary, please check with Gaslight Media Engineering for assistance.
+ </p>
+ '
]}
- {include file="ui/f6/number.html"}
+ {include file="ui/f6/text-line.html"}
- {* cookie_message *}
+ {else}
+
+ {* Text Line *}
{$ui = [
- 'field' => 'cookie_message',
- 'value' => {$cookie_message},
- 'label' => 'Cookies Notice Text',
- 'required' => true,
- 'teeny' => true,
- 'rows' => 10,
- 'helpText' => '
- This is the main text of the Cookie Pop-Up.
- The selected "Additional Notices" texts will show below this text in the Cookie Popup window on the
- front-end of this site when the "Show more" button is clicked. To reset this field to the original
- text, remove all content in the editor below and submit this page.
- ',
- 'tip' => '
- This text is always displayed at the top of the Cookie Popup and is the only text displayed in the
- Cookie Popup until the user views other notices by clicking the "Show more" button. This
- is important text and should always be included.
- '
+ 'text' => 'Please ask Gaslight Media Engineering if you need assistance with these settings.'
]}
- {include file="ui/f6/editor.html"}
+ {include file="ui/f6/text-line.html"}
- {include file="ui/f6/section-end.html"}
+ {/if}
- {* Section Start *}
+ {* db_name *}
{$ui = [
- 'title' => 'Addional Notices',
- 'tip' => '
- Below are various special notices that you may want to include for display in the Cookie Popup.
- The content of these messages will display when the user clicks to see more information in the
- cookie popup. What you select here should be related to what is included in the Web site. For
- example, if the site includes a secure payment form, you would want to include the notice related
- to Payment Forms.
- '
+ 'field' => 'db_name',
+ 'value' => {$db_name},
+ 'label' => 'Database Name',
+ 'required' => true,
+ 'placeholder' => 'Try: bandwidth',
+ 'errorText' => 'The database name is required for connecting to the usage database.'
]}
- {include file="ui/f6/section-start.html"}
-
- {* Text Line *}
- {$ui = [
- 'text' => 'These notices are displayed when the user clicks the "Show more" button.'
- ]}
- {include file="ui/f6/text-line.html"}
+ {include file="ui/f6/text.html"}
- {* cookie_opt_gdpr *}
- {$ui = [
- 'field' => 'cookie_opt_gdpr',
- 'value' => {$cookie_opt_gdpr},
- 'label' => 'GDPR',
- 'tip' => '
- GDPR stands for General Data Protection Regulation, which is a European Union Regulation
- that controls matters of personal privacy and data protection. If this site is likely to be
- accessed by persons in the EU or otherwise covered by EU regulations, you will probably
- want this on.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* db_host *}
+ {$ui = [
+ 'field' => 'db_host',
+ 'value' => {$db_host},
+ 'label' => 'Database Server Hostname',
+ 'placeholder' => 'Try: bandwidth.gaslightmedia.com',
+ 'required' => true,
+ 'maxWidth' => 20,
+ 'errorText' => 'The database host name is required for connecting to the usage database.'
+ ]}
+ {include file="ui/f6/text.html"}
- {* cookie_opt_access_logs *}
- {$ui = [
- 'field' => 'cookie_opt_access_logs',
- 'value' => {$cookie_opt_access_logs},
- 'label' => 'Access Logs',
- 'tip' => '
- If this site maintains access logs primarily for reasons of security and compliance with
- policies, but not for sharing user access information with others, you should enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* db_user *}
+ {$ui = [
+ 'field' => 'db_user',
+ 'value' => {$db_user},
+ 'label' => 'Database Username',
+ 'placeholder' => 'Try: bandwidthRO',
+ 'required' => true,
+ 'maxWidth' => 20,
+ 'errorText' => 'The database username is required for connecting to the usage database.'
+ ]}
+ {include file="ui/f6/text.html"}
- {* cookie_opt_permanent *}
- {$ui = [
- 'field' => 'cookie_opt_permanent',
- 'value' => {$cookie_opt_permanent},
- 'label' => 'Permanent Cookies',
- 'tip' => '
- If this site issues permanent cookies to user browsers that maintain information the user will
- need when they return to the site, you should enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* db_pass *}
+ {$ui = [
+ 'field' => 'db_pass',
+ 'value' => {$db_pass},
+ 'label' => 'Database Password',
+ 'placeholder' => 'Try: ,Wv4W*~^bL_vF3F4PbGsS',
+ 'required' => true,
+ 'errorText' => 'The database password for the above username is required for connecting to the usage database.'
+ ]}
+ {include file="ui/f6/text.html"}
- {* cookie_opt_tracking *}
- {$ui = [
- 'field' => 'cookie_opt_tracking',
- 'value' => {$cookie_opt_tracking},
- 'label' => 'Tracking Cookies',
- 'tip' => '
- If this site issues cookies to user browsers for the purpose of tracking user usage primarily
- to evaluate and improve the site but not for distribution to other organizations, they you should
- enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* website *}
+ {$ui = [
+ 'field' => 'website',
+ 'value' => {$website},
+ 'label' => 'Website Name',
+ 'placeholder' => 'i,e, www.gaslightmedia.com',
+ 'required' => true,
+ 'errorText' => 'The website host name is required to access settings for this site.'
+ ]}
+ {include file="ui/f6/text.html"}
- {* cookie_opt_shared_tracking *}
- {$ui = [
- 'field' => 'cookie_opt_shared_tracking',
- 'value' => {$cookie_opt_shared_tracking},
- 'label' => 'Shared Tracking Cookies',
- 'tip' => '
- If this site issues cookies to the user browsers for the purpoose of collecting tracking information
- that may be distributed to other organizations, you should enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {include file="ui/f6/section-end.html"}
- {* cookie_opt_https *}
- {$ui = [
- 'field' => 'cookie_opt_https',
- 'value' => {$cookie_opt_https},
- 'label' => 'HTTPS',
- 'tip' => '
- If this site uses HTTPS protocol for users to connect securely to this site, you should ensable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Usage and Notifications',
+ 'tip' => '
+ This section controls display of site usage and generation of various notifcations to customers.
+ '
+ ]}
+ {include file="ui/f6/section-start.html"}
- {* cookie_opt_logged_in *}
- {$ui = [
- 'field' => 'cookie_opt_logged_in',
- 'value' => {$cookie_opt_logged_in},
- 'label' => 'Logged-In Users',
- 'tip' => '
- If this site permits users to log into the site or a portion of the site with some type of password, you
- should enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* show_usage *}
+ {$ui = [
+ 'field' => 'show_usage',
+ 'value' => {!empty($show_usage)},
+ 'label' => 'Show Traffic and Disk Usage Information & Graphs',
+ 'helpText' => 'Turn this on to show traffic and disk ussage information for this site.'
- {* cookie_opt_forms *}
- {$ui = [
- 'field' => 'cookie_opt_forms',
- 'value' => {$cookie_opt_forms},
- 'label' => 'Submission Forms',
- 'tip' => '
- If this site has any entry forms that users may submit, you should enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* cookie_opt_payment *}
- {$ui = [
- 'field' => 'cookie_opt_payment',
- 'value' => {$cookie_opt_payment},
- 'label' => 'Payment Forms',
- 'tip' => '
- If this site accepts payments in any way, you should enable this notice.
- '
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* show_notifications *}
+ {$ui = [
+ 'field' => 'show_notifications',
+ 'value' => {!empty($show_notifications)},
+ 'label' => 'Show Customer Notiifications',
+ 'helpText' => 'Turn this on to have general Gaslight Media messages displayed on this site.'
+ ]}
+ {include file="ui/f6/checkbox.html"}
{include file="ui/f6/section-end.html"}
{* Submit Button *}
- {$ui = [
- 'class' => 'primary',
- 'label' => 'Save Changes',
- 'submit' => true
- ]}
- {include file="ui/f6/submit.html"}
+ {$ui = [
+ 'class' => 'primary',
+ 'label' => 'Save Changes',
+ 'submit' => true
+ ]}
+ {include file="ui/f6/submit.html"}
{include file="ui/f6/grid-end.html"}
<div class="grid-x grid-margin-x">
<div class="cell shrink glm-f6-ui-field-input">
<div class="switch small glm-f6-ui-field-input-switch">
- <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}"{if !empty($ui.value)} checked{/if}{if !empty($ui.required)} required{/if}>
+ <input
+ class="switch-input"
+ id="{$ui.field}"
+ type="checkbox"
+ name="{$ui.field}"{if !empty($ui.value)}
+ checked{/if}
+ {if !empty($ui.required)} required{/if}
+ onChange="glmFormDataChangesPending = true;"
+ >
<label for="{$ui.field}" class="switch-paddle">
<span class="show-for-sr">{$ui.label}</span>
<span class="switch-active" aria-hidden>{$ui.active|default:'On'}</span>
+++ /dev/null
-{*
- Foundation 6 UI - Form Display End
-
-*}
- </div>
-</div>
+++ /dev/null
-{*
- Foundation 6 UI - Form Display Start
-
- Starts the display only version of the form. There's also a Form Edit Start which starts the actual edit and submit form.
- These two are used together to let the user toggle between a summary display of the data and a form to edit the data.
-
- The area between "Form Display Start" and "Form Display End" is intended to be a single UI element that contains any
- desired Foundation 6 based HTML that will display a text only (no form fields) summry of the current form data.
-
- {$ui = [
- 'id' => string required Form id
- 'title' => string Optional title to display
- ]}
-*}
-<div id="{$ui.id}_display" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
- <div class="grid-x">
- <div class="cell small-12 glm-f6-ui-form-display-start">
- <button id="{$ui.id}_edit_button" type="button" class="button">Edit</button>
- {if !empty($ui.title)}<span class="glm-f6-ui-form-display-title">{$ui.title}</span]>{/if}
- </div>
- <script>
- jQuery(document).ready(function($){
- $('#{$ui.id}_edit_button').click(function(){
- $('#{$ui.id}_display').hide();
- $('#{$ui.id}_edit').show();
- });
- });
- </script>
{*
Foundation 6 UI - Form Edit Start
- Starts the edit version of the form. There's also a Form Display Start which starts a summary display of the data.
- These two are used together to let the user toggle between a summary display of the data and a form to edit the data.
-
- The area between "Form Edit Start" and "Form Edit End" is intended to be a collection of
- desired Foundation 6 based HTML that will display a text only (no form fields) summry of the current form data.
-
+ Starts the edit version of the form. There's also a Form Summary Start which starts a summary of the data.
+ These two are used together to let the user toggle between a summary of the data and a form to edit the data.
+
+ The area between "Form Edit Start" and "Form Edit End" is intended to be a collection of
+ desired Foundation 6 based HTML that will display actual form.
+
{$ui = [
- 'id' => string required Form ID - Use the same ID for the form display and edit sections,
- title' => string Optional title to display
+ 'id' => string required Form ID - Use the same ID for the form summary and edit sections,
+ title' => string Optional title
]}
*}
<div id="{$ui.id}_edit" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
<div class="grid-x">
<div class="cell small-12 glm-f6-ui-form-edit-start">
- <button id="{$ui.id}_display_button" type="button" class="button">Display Only</button>
+ <button id="{$ui.id}_summary_button" type="button" class="button">Summary Only</button>
{if !empty($ui.title)}<span class="glm-f6-ui-form-edit-title">{$ui.title}</span]>{/if}
</div>
<script>
jQuery(document).ready(function($) {
$('#{$ui.id}_edit').hide();
- $('#{$ui.id}_display_button').click(function(){
- $('#{$ui.id}_display').show();
- $('#{$ui.id}_edit').hide();
+ $('#{$ui.id}_summary_button').click(function(){
+ $('#{$ui.id}_edit').fadeOut('slow', function() {
+ $('#{$ui.id}_summary').fadeIn('slow');
+ });
});
});
</script>
{*
Foundation 6 UI - Form Start
-
+
WARNING: There may be a problem with using Form Start after Grid Start. Was seeing improper spacing.
-
- Found that using ".position().top -10" was better since it places the top of the window 10px above the
+
+ Found that using ".position().top -10" was better since it places the top of the window 10px above the
box containing the validate message while using ".offset()" caused it to position in the middle of the
validate message.
'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
+ 'validateFocusMsg' => boolean If true focuses on validateMessage on error - May be a problem if there's more than one validated form (may have to ID these messages separately)
'validateID' => string Unique text that will be added to the validate message container to ensure that it is unique
'validateMessage' => string Message to show for a validation error, Defaults to "There are some errors in your form."
]}
{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> {$ui.validateMessage|default:'There are some errors in your form.'}</p>
+ <p><i class="fi-alert"></i> {$ui.validateMessage|default:'There are some errors in your formmmmmm.'}</p>
</div>
- {if !empty($ui.validateFocusMsg)}
- <script>
- jQuery(document).ready(function($){
+ <script>
+
+ if (typeof(glmFormDataChangesPending) == 'undefined') {
+ var glmFormDataChangesPending = false;
+ }
+
+ jQuery(document).ready(function($){
+
+ // When submit button is clicked, disable the beforeunload message
+ $('.glm-form-submit-button').on('click', function() {
+ glmFormDataChangesPending = false;
+ return true;
+ });
+
+ // If submit is required and we're laving the page, alert the user
+ $(window).on('beforeunload', function(){
+
+ // Check if any of the wp_editor instances is dirty (tinyMCE)
+ // ** THIS MAY NOT BE A GOOD LONG TERM SOLUTION **
+ if (typeof tinyMCE != "undefined" && typeof tinyMCE.editors != "undefined") {
+ for(i=0; i<tinyMCE.editors.length; i++){
+ if (!tinymce.editors[i].isNotDirty) {
+ glmFormDataChangesPending = true;
+ }
+ }
+ }
+
+ if (glmFormDataChangesPending) {
+ return true;
+ }
+
+ return;
+ });
+
+ // Setup field validation
+ {if !empty($ui.validateFocusMsg)}
$(document).on( 'forminvalid.zf.abide', function( ev, frm ) {
console.log( 'forminvalid' );
$("html, body").animate({ scrollTop: $('#validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}').position().top -10 }, 'slow');
});
- });
- </script>
- {/if}
+ {/if}
+
+ });
+ </script>
{/if}
--- /dev/null
+{*
+ Foundation 6 UI - Form Summary End
+
+*}
+ </div>
+</div>
--- /dev/null
+{*
+ Foundation 6 UI - Form Summary Start
+
+ Starts the summary only version of the form. There's also a Form Edit Start which starts the actual edit and submit form.
+ These two are used together to let the user toggle between a summary of the data and a form to edit the data.
+
+ The area between "Form Summary Start" and "Form Summary End" is intended to be a single UI element that contains any
+ desired Foundation 6 based HTML that will a text only summary (no form fields) summry of the current form data.
+
+ {$ui = [
+ 'id' => string required Form id
+ 'title' => string Optional title
+ ]}
+*}
+<div id="{$ui.id}_summary" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+ <div class="grid-x">
+ <div class="cell small-12 glm-f6-ui-form-summary-start">
+ <button id="{$ui.id}_edit_button" type="button" class="button">Edit</button>
+ {if !empty($ui.title)}<span class="glm-f6-ui-form-summary-title">{$ui.title}</span]>{/if}
+ </div>
+ <script>
+ jQuery(document).ready(function($){
+ $('#{$ui.id}_edit_button').click(function(){
+ $('#{$ui.id}_summary').fadeOut('slow', function() {
+ $('#{$ui.id}_edit').fadeIn('slow');
+ });
+ });
+ });
+ </script>
{*
Foundation 6 UI - Grid End
+
+ {$ui = [
+ 'noFoundationInit' => boolean Do not init Foundation 6
+ Only the last "grid-end" should do the init. If you have multiple "grid-end" then
+ be sure to set this value to true for all but the last one.
+ ]}
+
*}
</div>
</div>
-<script>
- jQuery(document).ready(function($) {
- $(document).foundation();
- });
-</script>
\ No newline at end of file
+{if empty($ui.noFoundationInit)}
+ <script>
+ jQuery(document).ready(function($) {
+ $(document).foundation();
+ });
+ </script>
+{/if}
\ No newline at end of file
Foundation 6 UI - Grid Start
{$ui = [
- 'nowrap' => string True if no sections should wrap to the right,
+ 'nowrap' => boolean True if no sections should wrap to the right,
'backgroundColor' => string Background color of overall grid area,
'sectionColor' => string background color of sections
]}
.glm-f6-ui-section-start {
background-color: {$glm_f6_ui_section_color} !important;
}
- .glm-f6-ui-form-display-start {
+ .glm-f6-ui-form-summary-start {
margin-bottom: 1rem;
}
.glm-f6-ui-form-edit-start {
margin-bottom: 1rem;
}
- .glm-f6-ui-form-display-title {
+ .glm-f6-ui-form-summary-title {
margin-left: 1rem;
font-size: 1.1rem;
font-weight: bold;
name="{$ui.field}[]"
multiple="multiple"
size="{$ui.l_size}"
- {if $ui.required}required{/if} >
+ {if $ui.required}required{/if}
+ onChange="glmFormDataChangesPending = true;"
+ >
{if $ui.l_blank}<option value=""></option>{/if}
{* If min or max values are supplied, add validator to check that *}
{if isset($ui.min) || isset($ui.max)}
{$usingNumberValidator = true}
- <script>
- {*
- Note that we have to read the attribute since the $ui parameter
+ <script>
+ {*
+ Note that we have to read the attribute since the $ui parameter
has likely been changed by the time this runs.
*}
jQuery(document).ready(function($) {
function glmUiF6NumberValidator($el, required, parent) {
- var min = $el.attr('min');
+ var min = $el.attr('min');
if (min !== 'undefined' && (Number($el.val()) < min)) {
return false;
}
{if isset($ui.max)}max="{$ui.max}"{/if}
{if !empty($ui.step)}step="{$ui.step}"{/if}
style="width: {$ui.width}rem;"
+ onChange="glmFormDataChangesPending = true;"
>
</div>
<div class="cell auto glm-f6-ui-label-container-right">
<select
id="{$ui.field}"
name="{$ui.field}"
- {if $ui.required}required{/if} >
+ {if $ui.required}required{/if}
+ onChange="glmFormDataChangesPending = true;"
+ >
{if $ui.l_blank}<option value=""></option>{/if}
<button
{if !empty($ui.id)}id="{$ui.id}"{/if}
{if !empty($ui.submit)}type="submit"{/if}
- class="button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
+ class="glm-form-submit-button button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
>
{$ui.label}
</button>
{if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
{if !empty($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
{if !empty($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+ onChange="glmFormDataChangesPending = true;"
/>
</div>
<div class="cell small-12 glm-f6-ui-field-messages">
projects / WP-Plugins / glm-serverstats.git / commitdiff