improve history graph

- JS optimized to avoid duplicate code
- Page redesigned with the help of the frameworks provides by AdminLTE
- Modification of the chart for a better presentation
- Headlines changed
This commit is contained in:
leiweibau
2022-07-14 18:43:38 +02:00
parent d4b25ff89b
commit b3bfe79ec9
9 changed files with 264 additions and 267 deletions

View File

@@ -160,151 +160,194 @@ if (submit && isset($_POST['langselector_set'])) {
}
?>
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_info_table_cell" style="min-width: 140px"><?php echo $pia_lang['Maintenance_database_path'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_db;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_size'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_db_size;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_lastmod'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_db_mod;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_backup'];?></div>
<div class="db_info_table_cell">
<?php echo $Pia_Archive_count.' '.$pia_lang['Maintenance_database_backup_found'].' / '.$pia_lang['Maintenance_database_backup_total'].': '.$Pia_Archive_diskusage;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_arp_status'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_arpscans_result;?></div>
</div>
</div>
<form method="post" action="maintenance.php">
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding-left: 5px; height:50px; text-align:center; vertical-align: middle;">
<div style="display: inline-block; margin-right: 10px;"><?php echo $pia_lang['Maintenance_themeselector_lable'];?>:</div>
<div style="display: inline-block;">
<select name="skinselector">
<option value=""><?php echo $pia_lang['Maintenance_themeselector_empty'];?></option>
<option value="skin-black-light">black light</option>
<option value="skin-black">black</option>
<option value="skin-blue-light">blue light</option>
<option value="skin-blue">blue</option>
<option value="skin-green-light">green light</option>
<option value="skin-green">green</option>
<option value="skin-purple-light">purple light</option>
<option value="skin-purple">purple</option>
<option value="skin-red-light">red light</option>
<option value="skin-red">red</option>
<option value="skin-yellow-light">yellow light</option>
<option value="skin-yellow">yellow</option>
</select></div>
<div style="display: inline-block;"><input type="submit" name="skinselector_set" value="Okay">
<?php echo $pia_skin_test; ?>
<div class="row">
<div class="col-md-12">
<div class="box" id="Maintain-Status">
<div class="box-header with-border">
<h3 class="box-title">Status</h3>
</div>
<div class="box-body">
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_info_table_cell" style="min-width: 140px"><?php echo $pia_lang['Maintenance_database_path'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_db;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_size'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_db_size;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_lastmod'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_db_mod;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_backup'];?></div>
<div class="db_info_table_cell">
<?php echo $Pia_Archive_count.' '.$pia_lang['Maintenance_database_backup_found'].' / '.$pia_lang['Maintenance_database_backup_total'].': '.$Pia_Archive_diskusage;?>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_arp_status'];?></div>
<div class="db_info_table_cell">
<?php echo $pia_arpscans_result;?></div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
<?php echo $pia_lang['Maintenance_themeselector_text'];?>
</div>
</div>
</div>
</form>
</div>
</div>
<form method="post" action="maintenance.php">
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding-left: 5px; height:50px; text-align:center; vertical-align: middle;">
<div style="display: inline-block; margin-right: 10px;"><?php echo $pia_lang['Maintenance_lang_selector_lable'];?>:</div>
<div style="display: inline-block;">
<select name="langselector">
<option value=""><?php echo $pia_lang['Maintenance_lang_selector_empty'];?></option>
<option value="en_us"><?php echo $pia_lang['Maintenance_lang_en_us'];?></option>
<option value="de_de"><?php echo $pia_lang['Maintenance_lang_de_de'];?></option>
</select></div>
<div style="display: inline-block;"><input type="submit" name="langselector_set" value="Okay">
<?php echo $pia_lang_test; ?>
<div class="row">
<div class="col-md-12">
<div class="box" id="Maintain-Skin">
<div class="box-header with-border">
<h3 class="box-title"><?php echo $pia_lang['Maintenance_themeselector_lable'];?>:</h3>
</div>
<div class="box-body">
<form method="post" action="maintenance.php">
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding-left: 5px; height:50px; text-align:center; vertical-align: middle;">
<div style="display: inline-block;">
<select name="skinselector">
<option value=""><?php echo $pia_lang['Maintenance_themeselector_empty'];?></option>
<option value="skin-black-light">black light</option>
<option value="skin-black">black</option>
<option value="skin-blue-light">blue light</option>
<option value="skin-blue">blue</option>
<option value="skin-green-light">green light</option>
<option value="skin-green">green</option>
<option value="skin-purple-light">purple light</option>
<option value="skin-purple">purple</option>
<option value="skin-red-light">red light</option>
<option value="skin-red">red</option>
<option value="skin-yellow-light">yellow light</option>
<option value="skin-yellow">yellow</option>
</select></div>
<div style="display: inline-block;"><input type="submit" name="skinselector_set" value="Okay">
<?php echo $pia_skin_test; ?>
</div>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
<?php echo $pia_lang['Maintenance_themeselector_text'];?>
</div>
</div>
</div>
</form>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
<?php echo $pia_lang['Maintenance_lang_selector_text'];?>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box" id="Maintain-Lang">
<div class="box-header with-border">
<h3 class="box-title"><?php echo $pia_lang['Maintenance_lang_selector_lable'];?>:</h3>
</div>
<div class="box-body">
<form method="post" action="maintenance.php">
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding-left: 5px; height:50px; text-align:center; vertical-align: middle;">
<div style="display: inline-block;">
<select name="langselector">
<option value=""><?php echo $pia_lang['Maintenance_lang_selector_empty'];?></option>
<option value="en_us"><?php echo $pia_lang['Maintenance_lang_en_us'];?></option>
<option value="de_de"><?php echo $pia_lang['Maintenance_lang_de_de'];?></option>
</select></div>
<div style="display: inline-block;"><input type="submit" name="langselector_set" value="Okay">
<?php echo $pia_lang_test; ?>
</div>
</div>
</div>
<div class="db_info_table_row">
<div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
<?php echo $pia_lang['Maintenance_lang_selector_text'];?>
</div>
</div>
</div>
</form>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-green dbtools-button" id="btnPiaEnableDarkmode" style="border-top: solid 3px #00a65a;" onclick="askPiaEnableDarkmode()"><?php echo $pia_lang['Maintenance_Tool_darkmode'];?></button>
</div>
<div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_darkmode_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-yellow dbtools-button" id="btnPiaToggleArpScan" style="border-top: solid 3px #ffd080;" onclick="askPiaToggleArpScan()"><?php echo $pia_lang['Maintenance_Tool_arpscansw'];?></button>
</div>
<div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_arpscansw_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteDevicesWithEmptyMACs()"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteAllDevices()"><?php echo $pia_lang['Maintenance_Tool_del_alldev'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_alldev_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteUnknown" style="border-top: solid 3px #dd4b39;" onclick="askDeleteUnknown()"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteEvents" style="border-top: solid 3px #dd4b39;" onclick="askDeleteEvents()"><?php echo $pia_lang['Maintenance_Tool_del_allevents'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_allevents_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnPiaBackupDBtoArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaBackupDBtoArchive()"><?php echo $pia_lang['Maintenance_Tool_backup'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_backup_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnPiaRestoreDBfromArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaRestoreDBfromArchive()"><?php echo $pia_lang['Maintenance_Tool_restore'];?><br><?php echo $latestbackup_date;?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_restore_text'];?></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box" id="Maintain-Tools">
<div class="box-header with-border">
<h3 class="box-title">Tools:</h3>
</div>
<div class="box-body">
<div class="db_info_table">
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-green dbtools-button" id="btnPiaEnableDarkmode" style="border-top: solid 3px #00a65a;" onclick="askPiaEnableDarkmode()"><?php echo $pia_lang['Maintenance_Tool_darkmode'];?></button>
</div>
<div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_darkmode_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-yellow dbtools-button" id="btnPiaToggleArpScan" style="border-top: solid 3px #ffd080;" onclick="askPiaToggleArpScan()"><?php echo $pia_lang['Maintenance_Tool_arpscansw'];?></button>
</div>
<div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_arpscansw_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteDevicesWithEmptyMACs()"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteAllDevices()"><?php echo $pia_lang['Maintenance_Tool_del_alldev'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_alldev_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteUnknown" style="border-top: solid 3px #dd4b39;" onclick="askDeleteUnknown()"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnDeleteEvents" style="border-top: solid 3px #dd4b39;" onclick="askDeleteEvents()"><?php echo $pia_lang['Maintenance_Tool_del_allevents'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_allevents_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnPiaBackupDBtoArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaBackupDBtoArchive()"><?php echo $pia_lang['Maintenance_Tool_backup'];?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_backup_text'];?></div>
</div>
<div class="db_info_table_row">
<div class="db_tools_table_cell_a" style="">
<button type="button" class="btn btn-default pa-btn pa-btn-delete bg-red dbtools-button" id="btnPiaRestoreDBfromArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaRestoreDBfromArchive()"><?php echo $pia_lang['Maintenance_Tool_restore'];?><br><?php echo $latestbackup_date;?></button>
</div>
<div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_restore_text'];?></div>
</div>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<div style="width: 100%; height: 20px;"></div>
<!-- ----------------------------------------------------------------------- -->