[Redizajn 1KA] Status --> Parapodatki - v1

This commit is contained in:
tejagerjovic 2022-04-01 05:25:53 +02:00
parent 99a48cdc1f
commit 4c20e27c2f
4 changed files with 130 additions and 45 deletions

View File

@ -39,13 +39,13 @@ class SurveyParaGraph{
$paraData = $this->collectParaGraphDataNew();
echo '<p>'.$lang['srv_para_graph_text'].'</p>';
//echo '<p>'.$lang['srv_para_graph_text'].'</p>';
// PC, tablica, mobi
echo '<fieldset><legend>'.$lang['srv_para_graph_device'].'</legend>';
// Filter po napravi
/* Filter po napravi
echo '<div style="margin:5px 0 15px 5px;">';
echo '<label>'.$lang['srv_analiza_filter'].': </label>';
echo '<label for="paraGraph_filter_pc"><input type="checkbox" id="paraGraph_filter_pc" '.($this->paraGraph_filter['pc']==1 ? ' checked="checked"' : '').' onClick="changeParaGraphFilter();">'.$lang['srv_para_graph_device0'].'</label>';
@ -53,32 +53,43 @@ class SurveyParaGraph{
echo ' <label for="paraGraph_filter_tablet"><input type="checkbox" id="paraGraph_filter_tablet" '.($this->paraGraph_filter['tablet']==1 ? ' checked="checked"' : '').' onClick="changeParaGraphFilter();">'.$lang['srv_para_graph_device2'].'</label>';
echo ' <label for="paraGraph_filter_robot"><input type="checkbox" id="paraGraph_filter_robot" '.($this->paraGraph_filter['robot']==1 ? ' checked="checked"' : '').' onClick="changeParaGraphFilter();">'.$lang['srv_para_graph_device3'].'</label>';
echo '&nbsp;&nbsp;&nbsp;<label>('.$lang['srv_para_graph_filteredCnt'].' '.$paraData['allCount'].')</label>';
echo '</div>';/*/
echo '<table class="parapodatki_table">';
echo '<tr>';
echo '<th>'.$lang['srv_para_graph_device'].'</th>';
echo '<th>'.$lang['srv_stevilo_enot'].'</th>';
echo '</tr>';
echo '<tr>';
echo '<td>'.$lang['srv_para_graph_device0'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['pcCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['pcCount'].'</span>';
echo '</div>';
echo '<table style="width:100%">';
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_device0'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['pcCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['pcCount'].'</span></span>';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_device1'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['mobiCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['mobiCount'].'</span></span>';
echo '<td>'.$lang['srv_para_graph_device1'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['mobiCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['mobiCount'].'</span>';
echo '</div';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_device2'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['tabletCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['tabletCount'].'</span></span>';
echo '<td>'.$lang['srv_para_graph_device2'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['tabletCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['tabletCount'].'</span>';
echo '</div';
echo '</td>';
echo '</tr>';
@ -87,7 +98,7 @@ class SurveyParaGraph{
echo '<th nowrap>'.$lang['srv_para_graph_device3'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['robotCount']/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['robotCount'].'</span></span>';
echo ' <span >'.$paraData['robotCount'].'</span>';
echo '</td>';
echo '</tr>';
@ -102,7 +113,12 @@ class SurveyParaGraph{
// Browser
echo '<fieldset><legend>'.$lang['srv_para_graph_browser'].'</legend>';
echo '<table style="width:100%">';
echo '<table class="parapodatki_table">';
echo '<tr>';
echo '<th>'.$lang['srv_para_graph_browser'].'</th>';
echo '<th>'.$lang['srv_stevilo_enot'].'</th>';
echo '</tr>';
if(count($paraData['browser']) > 0){
if(count($paraData['browser']) > 1)
@ -112,10 +128,12 @@ class SurveyParaGraph{
if($key != $lang['srv_para_graph_other_slo'] && $key != $lang['srv_para_graph_other_ang']){
echo '<tr>';
echo '<th nowrap>'.$key.'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $browserCnt/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$browserCnt.'</span></span>';
echo '<td>'.$key.'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $browserCnt/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$browserCnt.'</span>';
echo '</div';
echo '</td>';
echo '</tr>';
}
@ -123,20 +141,24 @@ class SurveyParaGraph{
if(isset($paraData['browser'][$lang['srv_para_graph_other_slo']]) && $paraData['browser'][$lang['srv_para_graph_other_slo']] > 0){
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_other'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['browser'][$lang['srv_para_graph_other_slo']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['browser'][$lang['srv_para_graph_other_slo']].'</span></span>';
echo '<td>'.$lang['srv_para_graph_other'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['browser'][$lang['srv_para_graph_other_slo']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['browser'][$lang['srv_para_graph_other_slo']].'</span>';
echo '</div';
echo '</td>';
echo '</tr>';
}
if(isset($paraData['browser'][$lang['srv_para_graph_other_ang']]) && $paraData['browser'][$lang['srv_para_graph_other_ang']] > 0){
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_other'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['browser'][$lang['srv_para_graph_other_ang']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['browser'][$lang['srv_para_graph_other_ang']].'</span></span>';
echo '<td>'.$lang['srv_para_graph_other'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['browser'][$lang['srv_para_graph_other_ang']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['browser'][$lang['srv_para_graph_other_ang']].'</span>';
echo '</div';
echo '</td>';
echo '</tr>';
}
@ -153,7 +175,12 @@ class SurveyParaGraph{
// Operacijski sistem
echo '<fieldset><legend>'.$lang['srv_para_graph_os'].'</legend>';
echo '<table style="width:100%">';
echo '<table class="parapodatki_table">';
echo '<tr>';
echo '<th>'.$lang['srv_para_graph_os'].'</th>';
echo '<th>'.$lang['srv_stevilo_enot'].'</th>';
echo '</tr>';
if(count($paraData['os']) > 0){
if(count($paraData['os']) > 1)
@ -163,10 +190,12 @@ class SurveyParaGraph{
if($key != $lang['srv_para_graph_other_slo'] && $key != $lang['srv_para_graph_other_ang']){
echo '<tr>';
echo '<th nowrap>'.$key.'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $osCnt/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$osCnt.'</span></span>';
echo '<td>'.$key.'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $osCnt/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$osCnt.'</span>';
echo '</div>';
echo '</td>';
echo '</tr>';
}
@ -174,20 +203,24 @@ class SurveyParaGraph{
if(isset($paraData['os'][$lang['srv_para_graph_other_slo']]) && $paraData['os'][$lang['srv_para_graph_other_slo']] > 0){
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_other'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['os'][$lang['srv_para_graph_other_slo']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['os'][$lang['srv_para_graph_other_slo']].'</span></span>';
echo '<td>'.$lang['srv_para_graph_other'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['os'][$lang['srv_para_graph_other_slo']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['os'][$lang['srv_para_graph_other_slo']].'</span>';
echo '</div>';
echo '</td>';
echo '</tr>';
}
if(isset($paraData['os'][$lang['srv_para_graph_other_ang']]) && $paraData['os'][$lang['srv_para_graph_other_ang']] > 0){
echo '<tr>';
echo '<th nowrap>'.$lang['srv_para_graph_other'].'</th>';
echo '<td style="width:100%">';
echo ' <div class="graph_lb" style="text-align: right; float: left; width: '.($paraData['allCount']>0 ? $paraData['os'][$lang['srv_para_graph_other_ang']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span style="display: block; margin: auto auto auto 5px; float: left">'.$paraData['os'][$lang['srv_para_graph_other_ang']].'</span></span>';
echo '<td>'.$lang['srv_para_graph_other'].'</td>';
echo '<td class="graph_cell">';
echo '<div class="graph_cell">';
echo ' <div class="graph_full" style="width: '.($paraData['allCount']>0 ? $paraData['os'][$lang['srv_para_graph_other_ang']]/$paraData['allCount']*85 : '0').'%">&nbsp;</div>';
echo ' <span >'.$paraData['os'][$lang['srv_para_graph_other_ang']].'</span>';
echo '</div>';
echo '</td>';
echo '</tr>';
}

View File

@ -72,7 +72,7 @@ class CrossRoad {
$first_action = NAVI_STATUS;
$second_action = NAVI_STATUS_OSNOVNI;
$layout_width = 'wide';
$layout_width = 'narrow';
if ($_GET['m'] == 'advanced')
$layout_width = 'fullwidth';

View File

@ -23321,6 +23321,28 @@ div.page_diagnostics table.aktivnost_paradata_table td.graph_cell div.graph_cell
margin-right: 8px;
}
table.parapodatki_table {
width: 100%;
white-space: nowrap;
font-size: 14px;
}
table.parapodatki_table td.graph_cell {
width: 100%;
}
table.parapodatki_table td.graph_cell div.graph_cell {
display: flex;
flex-direction: row;
align-items: center;
}
table.parapodatki_table td.graph_cell div.graph_cell .graph_full {
background-color: #1E88E5;
height: 16px;
margin-right: 8px;
}
table.parapodatki_table td.graph_cell div.graph_cell span {
font-size: inherit;
}
div.page_diagnostics .time_span_container {
position: relative;
height: 160px;

View File

@ -1,4 +1,3 @@
div.page_diagnostics {
//Parapodatki
@ -22,3 +21,34 @@ div.page_diagnostics {
}
}
}
table.parapodatki_table {
width: 100%;
white-space: nowrap;
font-size: 14px;
td {
&.graph_cell {
width: 100%;
div.graph_cell {
display:flex;
flex-direction: row;
align-items: center;
.graph_full {
background-color: $blue;
height: 16px;
margin-right: 8px;
}
span {
font-size: inherit;
}
}
}
}
}