Add table view to statistics page

web/templates/admin/list_stats.html

@@ -42,16 +42,36 @@
     </div>
 
     <div class="l-separator"></div>
+    <div class="l-center units narrow animated fadeIn">
+        <div class="header table-header">      
+            <div class="l-unit__col l-unit__col--right step-top">
+                  <div class="clearfix l-unit__stat-col--left super-compact">&nbsp;</div>
+                  <div class="clearfix l-unit__stat-col--left wide-2"><b><i class="fas fa-calendar-alt"></i>&nbsp;&nbsp;&nbsp;<?php print __('Month');?></b></div>
+                  <div class="clearfix l-unit__stat-col--left compact text-right"><b>&nbsp;</b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><?php print __('IPs');?></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center compact"><b><i class="fas fa-hdd"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center compact"><b><i class="fas fa-exchange-alt"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-globe-americas"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-link"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-lock"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-atlas"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-globe"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-mail-bulk"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-inbox"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-database"></i></b></div>
+                  <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><i class="fas fa-clock"></i></b></div>
+              </div>
+          </div>
     <!-- /.l-separator -->
 
 
     <div class="l-center units animated fadeIn">
+      
       <?php
         foreach ($data as $key => $value) {
            ++$i;
       ?>
 
-
       <div class="l-unit <? if($_COOKIE['stats-'.sha1($key)] == 1) echo ' l-unit--starred';?>" uniq-id="stats-<?=sha1($key)?>">
         <div class="l-unit-toolbar clearfix">
           <div class="l-unit-toolbar__col l-unit-toolbar__col--left">
@@ -67,171 +87,31 @@
         <!-- /.l-unit-toolbar -->
 
         <!-- /.l-unit__col -->
-        <div class="l-unit__col l-unit__col--right">
-          <div class="l-unit__name separate">
-              <i class="fas fa-calendar-alt"></i> <?=__(strftime("%b", strtotime($key))).strftime(" %Y", strtotime($key))?>
-          </div>
-
-          <div class="l-unit__stats">
-            <table>
-
-               <tr>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                  <div class="l-unit__stat-cols clearfix graph">
-                    <div class="l-unit__stat-col l-unit__stat-col--left">
-                      <?=__('Bandwidth')?>
-                    </div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right text-right volume">
-                      <b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?>
-                    </div>
-                  </div>
-                  <div class="l-percent">
-                    <div class="l-percent__fill" style="width: <?=get_percentage($data[$key]['U_BANDWIDTH'],$data[$key]['BANDWIDTH'])?>%"></div>
-                  </div>
-                  <!-- /.percent -->
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Web Domains')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_WEB_DOMAINS']?></b>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Mail Domains')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_MAIL_DOMAINS']?></b>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-
-              <tr>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"></div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('SSL Domains')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_WEB_SSL']?></b>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Mail Accounts')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_MAIL_ACCOUNTS']?></b>
-                    </div>
-                  </div>
-                </td>
-              </tr>
 
-              <tr>
-                <td>
-                  <div class="l-unit__stat-cols clearfix graph">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Disk')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right text-right volume">
-                      <b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK'])?>
-                    </div>
-                  </div>
-                  <div class="l-percent">
-                    <div class="l-percent__fill" style="width: <?=get_percentage($data[$key]['U_DISK'],$data[$key]['DISK_QUOTA'])?>%"></div>
-                  </div>
-                  <!-- /.percent -->
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Web Aliases')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_WEB_ALIASES']?></b>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Databases')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_DATABASES']?></b>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-
-              <tr>
-                <td>
-                  <div class="l-unit__stat-cols clearfix tiny">
-                    <div class="l-unit__stat-col l-unit__stat-col--left">
-                      <?=__('Web')?>: <b><?=humanize_usage_size($data[$key]['U_DISK_WEB'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK_WEB'])?>
-                    </div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <?=__('Databases')?>: <b><?=humanize_usage_size($data[$key]['U_DISK_DB'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK_DB'])?>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('DNS domains')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_DNS_DOMAINS']?></b>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('Cron Jobs')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_CRON_JOBS']?></b>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-
-              <tr>
-                <td>
-                  <div class="l-unit__stat-cols clearfix tiny">
-                    <div class="l-unit__stat-col l-unit__stat-col--left">
-                      <?=__('Mail')?>: <b><?=humanize_usage_size($data[$key]['U_DISK_MAIL'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK_MAIL'])?>
-                    </div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <?=__('User Directories')?>: <b><?=humanize_usage_size($data[$key]['U_DISK_DIRS'])?></b> <?=humanize_usage_measure($data[$key]['U_DISK_DIRS'])?>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('DNS records')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['U_DNS_RECORDS']?></b>
-                    </div>
-                  </div>
-                </td>
-                <td>
-                  <div class="l-unit__stat-cols clearfix last">
-                    <div class="l-unit__stat-col l-unit__stat-col--left"><?=__('IP Addresses')?>:</div>
-                    <div class="l-unit__stat-col l-unit__stat-col--right">
-                      <b><?=$data[$key]['IP_OWNED']?></b>
-                    </div>
-                  </div>
-                </td>
-              </tr>
-
-            </table>
+        <div class="l-unit__col l-unit__col--right">
+            <div>
+                <div class="clearfix l-unit__stat-col--left super-compact">&nbsp;</div>
+                <div class="clearfix l-unit__stat-col--left wide-2"><b><i class="fas fa-calendar-alt"></i>&nbsp;&nbsp;&nbsp;<?=__(strftime("%b", strtotime($key))).strftime(" %Y", strtotime($key))?></b></div>
+                <div class="clearfix l-unit__stat-col--left compact text-right"><b>&nbsp;</b></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><b><?=$data[$key]['IP_OWNED']?></b></div>
+                <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_DISK'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_DISK'])?></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center compact"><b><?=humanize_usage_size($data[$key]['U_BANDWIDTH'])?></b> <span class="text-small"><?=humanize_usage_measure($data[$key]['U_BANDWIDTH'])?></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_WEB_DOMAINS']?></b></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_WEB_ALIASES']?></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_WEB_SSL']?></b></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_DNS_DOMAINS']?></b></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_DNS_RECORDS']?></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_MAIL_DOMAINS']?></b></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_MAIL_ACCOUNTS']?></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_DATABASES']?></b></span></div>
+                <div class="clearfix l-unit__stat-col--left text-center super-compact"><span class="jump-top badge gray raised"><b><?=$data[$key]['U_CRON_JOBS']?></b></span></div>
           </div>
           <!-- /.l-unit__stats -->
         </div>
         <!-- /.l-unit__col -->
       </div>
       <!-- /.l-unit -->
-      <!-- div class="l-separator"></div-->
+      <!-- div class="l-separator"></div -->
       <!-- /.l-separator -->
       <?}?>