Add Multi-Language Support (in progress)

approx. 60-70% are already translated. At the moment 2 languages are included. English and German

front/devices.php

@@ -17,7 +17,7 @@
 <!-- Content header--------------------------------------------------------- -->
     <section class="content-header">
       <h1 id="pageTitle">
-         Devices
+           <?php echo $pia_lang['Device_Title'];?>
       </h1>
     </section>
 
@@ -32,7 +32,7 @@
             <div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
               <div class="inner"> <h3 id="devicesAll"> -- </h3> </div>
               <div class="icon"> <i class="fa fa-laptop text-aqua-20"></i> </div>
-              <div class="small-box-footer pa-small-box-footer"> All Devices <i class="fa fa-arrow-circle-right"></i> </div>
+              <div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_AllDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
             </div>
           </a>
         </div>
@@ -43,7 +43,7 @@
             <div class="small-box bg-green pa-small-box-green pa-small-box-2">
               <div class="inner"> <h3 id="devicesConnected"> -- </h3> </div>
               <div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
-              <div class="small-box-footer pa-small-box-footer"> Connected <i class="fa fa-arrow-circle-right"></i> </div>
+              <div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_Connected'];?> <i class="fa fa-arrow-circle-right"></i> </div>
             </div>
           </a>
         </div>
@@ -54,7 +54,7 @@
             <div  class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
               <div class="inner"> <h3 id="devicesFavorites"> -- </h3> </div>
               <div class="icon"> <i class="fa fa-star text-yellow-20"></i> </div>
-              <div class="small-box-footer pa-small-box-footer"> Favorites <i class="fa fa-arrow-circle-right"></i> </div>
+              <div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_Favorites'];?> <i class="fa fa-arrow-circle-right"></i> </div>
             </div>
           </a>
         </div>
@@ -65,7 +65,7 @@
             <div  class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
               <div class="inner"> <h3 id="devicesNew"> -- </h3> </div>
               <div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
-              <div class="small-box-footer pa-small-box-footer"> New Devices <i class="fa fa-arrow-circle-right"></i> </div>
+              <div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_NewDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
             </div>
           </a>
         </div>
@@ -76,7 +76,7 @@
             <div  class="small-box bg-red pa-small-box-red pa-small-box-2">
               <div class="inner"> <h3 id="devicesDown"> -- </h3> </div>
               <div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
-              <div class="small-box-footer pa-small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
+              <div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_DownAlerts'];?> <i class="fa fa-arrow-circle-right"></i> </div>
             </div>
           </a>
         </div>
@@ -87,7 +87,7 @@
             <div  class="small-box bg-gray pa-small-box-gray pa-small-box-2">
               <div class="inner"> <h3 id="devicesArchived"> -- </h3> </div>
               <div class="icon"> <i class="fa fa-eye-slash text-gray-20"></i> </div>
-              <div class="small-box-footer pa-small-box-footer"> Archived <i class="fa fa-arrow-circle-right"></i> </div>
+              <div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_Archived'];?> <i class="fa fa-arrow-circle-right"></i> </div>
             </div>
           </a>
         </div>
@@ -110,19 +110,19 @@
               <table id="tableDevices" class="table table-bordered table-hover table-striped">
                 <thead>
                 <tr>
-                  <th>Name</th>
-                  <th>Owner</th>
-                  <th>Type</th>
-                  <th>Favorite</th>
-                  <th>Group</th>
-                  <th>First Session</th>
-                  <th>Last Session</th>
-                  <th>Last IP</th>
-                  <th>MAC</th>
-                  <th>Status</th>
-                  <th>MAC</th>
-                  <th>Last IP Order</th>
-                  <th>Rowid</th>
+                  <th><?php echo $pia_lang['Device_TableHead_Name'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_Owner'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_Type'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_Favorite'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_Group'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_FirstSession'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_LastSession'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_LastIP'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_MAC'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_Status'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_MAC'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_LastIPOrder'];?></th>
+                  <th><?php echo $pia_lang['Device_TableHead_Rowid'];?></th>
                 </tr>
                 </thead>
               </table>
@@ -201,8 +201,9 @@ function initializeDatatable () {
   $('#tableDevices').DataTable({
     'paging'       : true,
     'lengthChange' : true,
-    'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
+    'lengthMenu'   : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, '<?php echo $pia_lang['Device_Tablelenght_all'];?>']],
     'searching'    : true,
+
     'ordering'     : true,
     'info'         : true,
     'autoWidth'    : false,
@@ -271,7 +272,14 @@ function initializeDatatable () {
     'processing'  : true,
     'language'    : {
       processing: '<table> <td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td> </table>',
-      emptyTable: 'No data'
+      emptyTable: 'No data',
+      "lengthMenu": "<?php echo $pia_lang['Device_Tablelenght'];?>",
+      "search":     "<?php echo $pia_lang['Device_Searchbox'];?>: ",
+      "paginate": {
+          "next":       "<?php echo $pia_lang['Device_Table_nav_next'];?>",
+          "previous":   "<?php echo $pia_lang['Device_Table_nav_prev'];?>"
+      },
+      "info":           "<?php echo $pia_lang['Device_Table_info'];?>",
     }
   });
 
@@ -288,6 +296,7 @@ function initializeDatatable () {
   $('#tableDevices').on( 'search.dt', function () {
     setCookie ('devicesList', JSON.stringify (table.column(12, { 'search': 'applied' }).data().toArray()) );
   } );
+
 };
 
 
@@ -320,13 +329,13 @@ function getDevicesList (status) {
 
   // Define color & title for the status selected
   switch (deviceStatus) {
-    case 'all':        tableTitle = 'All Devices';         color = 'aqua';    break;
-    case 'connected':  tableTitle = 'Connected Devices';   color = 'green';   break;
-    case 'favorites':  tableTitle = 'Favorites';           color = 'yellow';  break;
-    case 'new':        tableTitle = 'New Devices';         color = 'yellow';  break;
-    case 'down':       tableTitle = 'Down Alerts';         color = 'red';     break;
-    case 'archived':   tableTitle = 'Archived Devices';    color = 'gray';    break;
-    default:           tableTitle = 'Devices';             color = 'gray';    break;
+    case 'all':        tableTitle = '<?php echo $pia_lang['Device_Shortcut_AllDevices']?>';  color = 'aqua';    break;
+    case 'connected':  tableTitle = '<?php echo $pia_lang['Device_Shortcut_Connected']?>';   color = 'green';   break;
+    case 'favorites':  tableTitle = '<?php echo $pia_lang['Device_Shortcut_Favorites']?>';   color = 'yellow';  break;
+    case 'new':        tableTitle = '<?php echo $pia_lang['Device_Shortcut_NewDevices']?>';  color = 'yellow';  break;
+    case 'down':       tableTitle = '<?php echo $pia_lang['Device_Shortcut_DownAlerts']?>';  color = 'red';     break;
+    case 'archived':   tableTitle = '<?php echo $pia_lang['Device_Shortcut_Archived']?>';    color = 'gray';    break;
+    default:           tableTitle = '<?php echo $pia_lang['Device_Shortcut_Devices']?>';     color = 'gray';    break;
   } 
 
   // Set title and color