Skip to content

Commit

Permalink
UI updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergejey
sergejey committed Aug 15, 2022
1 parent da509db commit 25e54b3
Show file tree
Hide file tree
Showing 6 changed files with 344 additions and 202 deletions.
8 changes: 8 additions & 0 deletions modules/mqtt/mqtt.class.php
View file
Expand Up @@ -120,6 +120,7 @@ function run()
$this->data = $out;
$p = new parser(DIR_TEMPLATES . $this->name . "/" . $this->name . ".html", $this->data, $this);
$this->result = $p->result;

}

function prepareQueueTable()
Expand Down Expand Up @@ -180,7 +181,11 @@ function childsToArray($items, $prev_path = '')
$v['TITLE'] = $pp . ($v['TITLE'] != '' ? '/' . $v['TITLE'] : '');
} else {
$max_updated=0;
$device_title='';
for($i=0;$i<$total;$i++) {
if ($items[$i]['DEVICE_TITLE']!='' && !$device_title) {
$device_title = $items[$i]['DEVICE_TITLE'];
}
if ($items[$i]['UPDATED']) {
$tm = strtotime($items[$i]['UPDATED']);
if (!isset($items[$i]['COLOR'])) {
Expand All @@ -197,6 +202,9 @@ function childsToArray($items, $prev_path = '')
}
}
}
if ($device_title) {
$v['DEVICE_TITLE']=$device_title;
}
$v['UPDATED']=date('Y-m-d H:i:s',$max_updated);
if ((time()-$max_updated)<=60*60) {
$v['COLOR']='green';
Expand Down
7 changes: 5 additions & 2 deletions modules/mqtt/mqtt_search.inc.php
View file
Expand Up @@ -114,9 +114,12 @@
$res[$i]['VALUE'] = str_replace('":', '": ', $res[$i]['VALUE']);
if ($res[$i]['TITLE'] == $res[$i]['PATH'] && !$out['TREE']) $res[$i]['PATH'] = '';
if ($res[$i]['LINKED_OBJECT'] != "") {
$object_rec = SQLSelectOne("SELECT * FROM objects WHERE TITLE='" . DBSafe($res[$i]['LINKED_OBJECT']) . "'");
//$res[$i]['LINKED_PROPERTY'] .= ' &mdash; ' . $object_rec['DESCRIPTION'];
$object_rec = SQLSelectOne("SELECT objects.DESCRIPTION FROM objects WHERE TITLE='" . DBSafe($res[$i]['LINKED_OBJECT']) . "'");
$res[$i]['LINKED_PROPERTY'] .= ' &mdash; ' . $object_rec['DESCRIPTION'];
$res[$i]['DEVICE_TITLE']=$object_rec['DESCRIPTION'];

}
if (!$res[$i]['TITLE']) $res[$i]['TITLE']='[..]';
}
$out['RESULT'] = $res;

Expand Down
85 changes: 85 additions & 0 deletions templates/mqtt/list_view.html
View file
@@ -0,0 +1,85 @@
[#if PAGES#]
<div class="row" style="margin-right: -15px;margin-left: -15px;">
<div class="col-md-12 text-center">
<ul class="pagination pagination-sm">
[#begin PREVPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&laquo;</a></li>[#end PREVPAGE#]
[#begin PAGES#]
<li [#if SELECTED#]class="active" [#endif#]><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">[#NUM#]</a></li>
[#end PAGES#]
[#begin NEXTPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&raquo;</a></li>[#end NEXTPAGE#]
</ul>
</div>
</div>
[#endif PAGES#]


<div class="table-responsive">
<table class="table table-stripped table-bordered" style="font-size: 1.4rem;">
<thead>
<tr>
<th class="text-center">
<a href="?sortby_mqtt=TITLE&save_qry=1">
<#LANG_TITLE#>
</a>
<nobr>
[#if SORTBY="TITLE"#](+)[#endif#]
[#if SORTBY="TITLE DESC"#](-)[#endif#]</nobr>
</th>
<th class="text-center">
<#LANG_UPDATED#>
</th>
<th class="text-center">
<#LANG_VALUE#>
</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
[#begin RESULT#]
<tr>
<td>
<a href="?view_mode=edit_mqtt&id=[#ID#]" style="text-decoration: none;"><b>[#TITLE#]</b></a>

[#if PATH!=""#]<br>[#PATH#][#endif#]
[#if LINKED_OBJECT!=""#]
<p style="color: gray;font-size: 1.2rem;margin: 0px;">↳ <span class="label label-success">[#LINKED_OBJECT#].[#LINKED_PROPERTY#]</span></p>
[#endif LINKED_OBJECT#]
</td>
<td width="15%">
[#if UPDATED!=""#]
[#UPDATED#]
[#else#]
&nbsp;
[#endif#]
</td>
<td>
<span id="mqtt[#ID#]" class="mqtt_value">[#VALUE#]</span>
</td>
<td width="10%" class="text-center" style="vertical-align: middle;">
[#if "<#ACTION#>"=="admin"#]
<div class="btn-group">
<a href="?view_mode=edit_mqtt&id=[#ID#]" class="btn btn-warning btn-sm" title="<#LANG_EDIT#>"><i class="glyphicon glyphicon-pencil"></i></a>
<a href="?view_mode=delete_mqtt&id=[#ID#]" onClick="return confirm('<#ARE_YOU_SURE#>')" class="btn btn-danger btn-sm" title="<#LANG_DELETE#>"><i class="glyphicon glyphicon-remove"></i></a>
</div>

[#endif ACTION#]
</td>
</tr>
[#end RESULT#]
</tbody>
</table>
</div>

[#if PAGES#]
<div class="row" style="margin-right: -15px;margin-left: -15px;">
<div class="col-md-12 text-center">
<ul class="pagination pagination-sm">
[#begin PREVPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&laquo;</a></li>[#end PREVPAGE#]
[#begin PAGES#]
<li [#if SELECTED#]class="active" [#endif#]><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">[#NUM#]</a></li>
[#end PAGES#]
[#begin NEXTPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&raquo;</a></li>[#end NEXTPAGE#]
</ul>
</div>
</div>
[#endif PAGES#]
216 changes: 16 additions & 200 deletions templates/mqtt/mqtt_search_admin.html
View file
@@ -1,28 +1,29 @@

<div class="row" style="margin-right: -15px;margin-left: -15px;">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="">
[#module name="xray" action="service" cycle="mqtt"#]
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 text-right" style="margin-bottom: 15px;">
<a href="?view_mode=edit_mqtt" class="btn btn-success"><i class="glyphicon glyphicon-plus" style="font-size: 2rem;"></i></a>
<a href="?view_mode=clear_trash" class="btn btn-danger" title="Delete not linked topics." onclick="return confirm('<#LANG_ARE_YOU_SURE#>');"><i style="font-size: 2rem;" class="glyphicon glyphicon-floppy-remove"></i></a>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-bottom: 15px;">
<a href="?view_mode=edit_mqtt" class="btn btn-default btn-success"><i class="glyphicon glyphicon-plus"></i></a>
<a href="?view_mode=clear_trash" class="btn btn-danger" title="Delete not linked topics." onclick="return confirm('<#LANG_ARE_YOU_SURE#>');"><i class="glyphicon glyphicon-floppy-remove"></i></a>
[#if TREE="1"#]
<a href="?tree=0" class="btn btn-default">
Списком
<#LANG_LIST_VIEW#>
</a>
[#else#]
<a href="?tree=1" class="btn btn-default">
Деревом
<#LANG_TREE_VIEW#>
</a>
[#endif#]
<a class="btn btn-primary" href="#" onClick="$('#filter').toggle('slow');return false;">
Фильтр
<#LANG_XRAY_LINE_FILTER#>
</a>
<a class="btn btn-success" href="#" onClick="$('#api_settings').toggle('slow');return false;">
<#LANG_SETUP#>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="">
[#module name="xray" action="service" cycle="mqtt"#]
</div>
</div>
</div>

<div class="row" style="margin-right: -15px;margin-left: -15px;display:none" id="api_settings">
Expand Down Expand Up @@ -149,198 +150,13 @@
<div class="row" style="margin-right: -15px;margin-left: -15px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
[#if RESULT#]
[#if PAGES#]
<div class="row" style="margin-right: -15px;margin-left: -15px;">
<div class="col-md-12 text-center">
<ul class="pagination pagination-sm">
[#begin PREVPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&laquo;</a></li>[#end PREVPAGE#]
[#begin PAGES#]
<li [#if SELECTED#]class="active" [#endif#]><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">[#NUM#]</a></li>
[#end PAGES#]
[#begin NEXTPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&raquo;</a></li>[#end NEXTPAGE#]
</ul>
</div>
</div>
[#endif PAGES#]


[#if TREE="1"#]
<style type="text/css">
.HandCursorStyle {
cursor: pointer;
cursor: hand;
}
</style>

<script type="text/JavaScript">
// Add this to the onload event of the BODY element
function addEvents() {
activateTree(document.getElementById("LinkedList1"));
}

// This function traverses the list and add links
// to nested list items
function activateTree(oList) {
// Collapse the tree
/*
for (var i=0; i < oList.getElementsByTagName("ul").length; i++) {
oList.getElementsByTagName("ul")[i].style.display="none";
}
*/
// Add the click-event handler to the list items
if (oList.addEventListener) {
oList.addEventListener("click", toggleBranch, false);
} else if (oList.attachEvent) { // For IE
oList.attachEvent("onclick", toggleBranch);
}
// Make the nested items look like links
addLinksToBranches(oList);
}

function rememberBranchStatus(title, status) {
var url="?ajax=1&op=branch_status&status="+status+"&branch="+encodeURIComponent(title);
$.ajax({
url: url
}).done(function(data) {
//alert(data);
});
}

// This is the click-event handler
function toggleBranch(event) {
var oBranch, cSubBranches;
if (event.target) {
oBranch = event.target;
} else if (event.srcElement) { // For IE
oBranch = event.srcElement;
}
cSubBranches = oBranch.getElementsByTagName("ul");
if (cSubBranches.length > 0) {
if (cSubBranches[0].style.display != "none") {
$(cSubBranches[0]).hide('slow');
rememberBranchStatus(oBranch.title,0);
} else {
$(cSubBranches[0]).show('slow');
rememberBranchStatus(oBranch.title,1);
}
}
}

// This function makes nested list items look like links
function addLinksToBranches(oList) {
var cBranches = oList.getElementsByTagName("li");
var i, n, cSubBranches;
if (cBranches.length > 0) {
for (i=0, n = cBranches.length; i < n; i++) {
cSubBranches = cBranches[i].getElementsByTagName("ul");
if (cSubBranches.length > 0) {
addLinksToBranches(cSubBranches[0]);
cBranches[i].className = "HandCursorStyle";
//cBranches[i].style.fontWeight="bold";
cSubBranches[0].style.color = "black";
cSubBranches[0].style.fontWeight = "normal";
cSubBranches[0].style.cursor = "auto";
}
}
}
}
</script>
<ul id="LinkedList1" class="LinkedList" style="padding-left: 0px;">
[#begin RESULT#]
<li style="list-style-type: none; color:[#COLOR#]" title="[#TITLE#]" onmouseout="$(this).find('.delIcon_[#ID#]').hide().removeClass('text-danger');" onmouseover="$(this).find('.delIcon_[#ID#]').show().addClass('text-danger');">
[#if RESULT#]<i class="glyphicon glyphicon-folder-close" style="font-size: 1.2rem;"></i>[#else#]<i class="glyphicon glyphicon-arrow-right" style="font-size: 1.2rem;color: #ddd;"></i>[#endif RESULT#]
[#if ID!=""#]

<a href="?view_mode=edit_mqtt&id=[#ID#]" title="[#PATH#]" style="color:[#if COLOR!=''#][#COLOR#][#else COLOR#]#333[#endif COLOR#];text-decoration: none;">
[#if TITLE!=""#][#TITLE#][#else TITLE#][..][#endif TITLE#]
</a>
: <span id="mqtt[#ID#]" class="mqtt_value">[#VALUE#]</span>
[#if LINKED_OBJECT!=""#]<i>([#LINKED_OBJECT#].[#LINKED_PROPERTY#])</i>[#endif LINKED_OBJECT#]
[#else#]
&nbsp;[#TITLE#]
[#endif#]

<a href="?view_mode=delete_path&path=[#PATH_URL#]" onclick="return confirm('<#LANG_ARE_YOU_SURE#>');"><i style="display: none;" class="glyphicon glyphicon-remove delIcon_[#ID#]"></i></a>
[#if RESULT#]<ul [#if IS_VISIBLE!="1" #] style="display:none" [#endif#]>[#tree RESULT#]</ul>[#endif RESULT#]
</li>
[#end RESULT#]
</ul>
<script type="text/JavaScript">
addEvents();
</script>
[#if TREE="1"#]
[#inc tree_view.tpl#]
[#else TREE#]
<div class="table-responsive">
<table class="table table-stripped table-bordered" style="font-size: 1.4rem;">
<thead>
<tr>
<th class="text-center">
<a href="?sortby_mqtt=TITLE&save_qry=1">
<#LANG_TITLE#>
</a>
<nobr>
[#if SORTBY="TITLE"#](+)[#endif#]
[#if SORTBY="TITLE DESC"#](-)[#endif#]</nobr>
</th>
<th class="text-center">
<#LANG_UPDATED#>
</th>
<th class="text-center">
<#LANG_VALUE#>
</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
[#begin RESULT#]
<tr>
<td>
<a href="?view_mode=edit_mqtt&id=[#ID#]" style="text-decoration: none;"><b>[#TITLE#]</b></a>

[#if PATH!=""#]<br>[#PATH#][#endif#]
[#if LINKED_OBJECT!=""#]
<p style="color: gray;font-size: 1.2rem;margin: 0px;">↳ <span class="label label-success">[#LINKED_OBJECT#].[#LINKED_PROPERTY#]</span></p>
[#endif LINKED_OBJECT#]
</td>
<td width="15%">
[#if UPDATED!=""#]
[#UPDATED#]
[#else#]
&nbsp;
[#endif#]
</td>
<td>
<span id="mqtt[#ID#]" class="mqtt_value">[#VALUE#]</span>
</td>
<td width="10%" class="text-center" style="vertical-align: middle;">
[#if "<#ACTION#>"=="admin"#]
<div class="btn-group">
<a href="?view_mode=edit_mqtt&id=[#ID#]" class="btn btn-warning btn-sm" title="<#LANG_EDIT#>"><i class="glyphicon glyphicon-pencil"></i></a>
<a href="?view_mode=delete_mqtt&id=[#ID#]" onClick="return confirm('<#ARE_YOU_SURE#>')" class="btn btn-danger btn-sm" title="<#LANG_DELETE#>"><i class="glyphicon glyphicon-remove"></i></a>
</div>

[#endif ACTION#]
</td>
</tr>
[#end RESULT#]
</tbody>
</table>
</div>
[#inc list_view.html#]
[#endif TREE#]

[#if PAGES#]
<div class="row" style="margin-right: -15px;margin-left: -15px;">
<div class="col-md-12 text-center">
<ul class="pagination pagination-sm">
[#begin PREVPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&laquo;</a></li>[#end PREVPAGE#]
[#begin PAGES#]
<li [#if SELECTED#]class="active" [#endif#]><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">[#NUM#]</a></li>
[#end PAGES#]
[#begin NEXTPAGE#]<li><a href="?view_mode=<#VIEW_MODE#>&mode=<#MODE#>&save_qry=1&page=[#NUM#]">&raquo;</a></li>[#end NEXTPAGE#]
</ul>
</div>
</div>
[#endif PAGES#]

[#else RESULT#]
<p>
<div class="alert alert-danger">
Expand All @@ -349,4 +165,4 @@
</p>
[#endif RESULT#]
</div>
</div>
</div>

0 comments on commit 25e54b3

Please sign in to comment.