mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added edit-page

Browse Source 
Added responsive resizing support for graph widget
This commit is contained in:
Daniel Preussker
2015-09-06 13:18:54 +01:00
parent f081706ab1
commit 9951c98e70
4 changed files with 153 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
html/ajax_dash.php
View File

@@ -30,23 +30,30 @@ $type = mres($_POST['type']);
if ($type == 'placeholder') {
$output = 'Please add a Widget to get started';
$status = 'ok';
$title = 'Placeholder';
}
elseif (is_file('includes/common/'.$type.'.inc.php')) {
$results_limit = 10;
$no_form = true;
$title = ucfirst($type);
$unique_id = str_replace(array("-","."),"_",uniqid($type,true));
$widget_id = mres($_POST['id']);
$widget_settings = json_decode(dbFetchCell('select settings from users_widgets where user_widget_id = ?',array($widget_id)),true);
$widget_dimensions = dbfetchRow('select size_x,size_y from users_widgets where user_widget_id = ?',array($widget_id));
$widget_dimensions = $_POST['dimensions'];
if( !empty($_POST['settings']) ) {
define('show_settings',true);
}
include 'includes/common/'.$type.'.inc.php';
$output = implode('', $common_output);
$status = 'ok';
$title = $widget_settings['title'] ?: $title;
}
$response = array(
'status' => $status,
'html' => $output,
'title' => $title,
);
echo _json_encode($response);

81
html/includes/common/generic-graph.inc.php
View File

@@ -22,13 +22,13 @@
* @subpackage Widgets
*/
if( empty($widget_settings) ) {
if( defined('show_settings') || empty($widget_settings) ) {
$common_output[] = '
<form class="form" onsubmit="widget_settings(this); return false;">
<div class="form-group">
<label for="device_id" class="col-sm-2 control-label">Device: </label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm widget-device-input" name="graph_device" placeholder="Device Name">
<input type="text" class="form-control input-sm widget-device-input-'.$unique_id.'" name="graph_device" placeholder="Device Name" value="'.$widget_settings['graph_device'].'">
</div>
</div>
<div class="form-group">
@@ -37,10 +37,10 @@ if( empty($widget_settings) ) {
<select class="form-control input-sm" name="graph_type">';
foreach (get_graph_subtypes('device') as $avail_type) {
$common_output[] = '<option value="device_'.$avail_type.'"';
if ($avail_type == $subtype) {
if ('device_'.$avail_type == $widget_settings['graph_type']) {
$common_output[] = " selected";
}
$display_type = is_mib_graph($type, $avail_type) ? $avail_type : nicecase($avail_type);
$display_type = is_mib_graph('device', $avail_type) ? $avail_type : nicecase($avail_type);
$common_output[] = '>'.$display_type.'</option>';
}
$common_output[] = '
@@ -49,30 +49,24 @@ if( empty($widget_settings) ) {
<div class="col-sm-offset-10 col-sm-2">
<div class="checkbox input-sm">
<label>
<input type="checkbox" name="graph_legend" class="widget_setting" value="1"> Legend
<input type="checkbox" name="graph_legend" class="widget_setting" value="1" '.($widget_settings['graph_legend'] ? 'checked' : '').'> Legend
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="graph_width" class="col-sm-2 control-label">Width: </label>
<div class="col-sm-10">
<input type="number" class="form-control input-sm" name="graph_width" value="485" min="100">
</div>
</div>
<div class="form-group">
<label for="graph_height"class="col-sm-2 control-label">Height </label>
<div class="col-sm-10">
<input type="number" class="form-control input-sm" name="graph_height" value="100" min="100">
</div>
</div>
<button type="submit" class="btn btn-default">Set</button>
</form>
<style>
.twitter-typeahead {
width: 100%;
}
</style>
<script>
graph_devices = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
function '.$unique_id.'() {
var '.$unique_id.' = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "ajax_search.php?search=%QUERY&type=device&map=1",
filter: function (output) {
return $.map(output, function (item) {
@@ -82,33 +76,48 @@ graph_devices = new Bloodhound({
});
},
wildcard: "%QUERY"
}
});
graph_devices.initialize();
$(".widget-device-input").typeahead({
}
});
'.$unique_id.'.initialize();
$(".widget-device-input-'.$unique_id.'").typeahead({
hint: true,
highlight: true,
minLength: 1,
classNames: {
menu: "typeahead-left"
}
},
{
source: graph_devices.ttAdapter(),
async: true,
displayKey: "name",
valueKey: "name",
},
{
source: '.$unique_id.'.ttAdapter(),
async: true,
displayKey: "name",
valueKey: "name",
templates: {
header: "<h5><strong>&nbsp;Devices</strong></h5>",
suggestion: Handlebars.compile("<p>&nbsp;{{name}}</p>")
header: "<h5><strong>&nbsp;Devices</strong></h5>",
suggestion: Handlebars.compile("<p>&nbsp;{{name}}</p>")
}
});
});
}
</script>
<script>
$(function() { '.$unique_id.'(); });
</script>';
}
else {
$widget_settings['device_id'] = dbFetchCell('select device_id from devices where hostname = ?',array($widget_settings['graph_device']));
$common_output[] = "<header>".$widget_settings['graph_device']." / ".$widget_settings['graph_type']."</header>";
$common_output[] = generate_minigraph_image(array('device_id'=>(int) $widget_settings['device_id']), $config['time']['day'], $config['time']['now'], $widget_settings['graph_type'], $widget_settings['graph_legend'] == 1 ? 'yes' : 'no', $widget_settings['graph_width'], $widget_settings['graph_height'], '&', $widget_settings['graph_type']);
$widget_settings['title'] = $widget_settings['graph_device']." / ".$widget_settings['graph_type'];
$common_output[] = generate_minigraph_image(
array('device_id'=>(int) $widget_settings['device_id']),
$config['time']['day'],
$config['time']['now'],
$widget_settings['graph_type'],
$widget_settings['graph_legend'] == 1 ? 'yes' : 'no',
$widget_dimensions['x'],
$widget_dimensions['y'],
'&',
'minigraph-image',
1
);
}
?>

2
html/includes/forms/update-dashboard-config.inc.php
View File

@@ -25,7 +25,7 @@ elseif ($sub_type == 'add' && is_numeric($widget_id)) {
list($x,$y) = explode(',',$widget['base_dimensions']);
$item_id = dbInsert(array('user_id'=>$_SESSION['user_id'],'widget_id'=>$widget_id, 'col'=>1,'row'=>1,'refresh'=>60,'title'=>$widget['widget_title'],'size_x'=>$x,'size_y'=>$y),'users_widgets');
if (is_numeric($item_id)) {
$extra = array('widget_id'=>$item_id,'title'=>$widget['widget_title'],'widget'=>$widget['widget'],'size_x'=>$x,'size_y'=>$y);
$extra = array('user_widget_id'=>$item_id,'widget_id'=>$item_id,'title'=>$widget['widget_title'],'widget'=>$widget['widget'],'refresh'=>60,'size_x'=>$x,'size_y'=>$y);
$status = 'ok';
$message = '';
}

183
html/pages/front/tiles.php
View File

@@ -103,31 +103,25 @@ foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widg
},
resize: {
enabled: true,
stop: function(e, ui, $widget) {
stop: function(e, ui, widget) {
updatePos(gridster);
widget_reload(widget.attr('id'),widget.data('type'));
}
},
serialize_params: function($w, wgd) {
return {
id: $($w).attr('id'),
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
serialize_params: function(w, wgd) {
return {
id: $(w).attr('id'),
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
}
}).data('gridster');
gridster.remove_all_widgets();
$.each(serialization, function() {
gridster.add_widget(
'<li id="'+this.user_widget_id+'" data-type="'+this.widget+'">'+
'\<script\>var timeout'+this.user_widget_id+' = grab_data('+this.user_widget_id+','+this.refresh+',\''+this.widget+'\');\<\/script\>'+
'<header class="widget_header">'+this.title+'<button style="color: #ffffff" type="button" class="close close-widget" data-widget-id="'+this.user_widget_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
'<div class="widget_body" id="widget_body_'+this.user_widget_id+'">'+this.widget+'</div>'+
'</li>',
parseInt(this.size_x), parseInt(this.size_y), parseInt(this.col), parseInt(this.row)
);
widget_dom(this);
});
$(document).on('click','#clear_widgets', function() {
@@ -160,19 +154,7 @@ foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widg
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
var widget_id = data.extra.widget_id;
var title = data.extra.title;
var widget = data.extra.widget;
var size_x = data.extra.size_x;
var size_y = data.extra.size_y;
gridster.add_widget(
'<li id="'+widget_id+'" data-type="'+widget+'">'+
'\<script\>var timeout'+widget_id+' = grab_data('+widget_id+',60,\''+widget+'\');\<\/script\>'+
'<header class="widget_header">'+title+'<button type="button" class="close close-widget" data-widget-id="'+widget_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
'<div class="widget_body" id="widget_body_'+widget_id+'">'+widget+'</div>'+
'</li>',
parseInt(size_x), parseInt(size_y)
);
widget_dom(data.extra);
updatePos(gridster);
}
else {
@@ -207,65 +189,96 @@ foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widg
});
});
$(document).on("click",".edit-widget",function() {
obj = $(this).parent().parent();
if( obj.data('settings') == 1 ) {
obj.data('settings','0');
} else {
obj.data('settings','1');
}
widget_reload(obj.attr('id'),obj.data('type'));
});
});
function widget_settings(data) {
var widget_settings = {};
var widget_id = 0;
datas = $(data).serializeArray();
for( var field in datas ) {
widget_settings[datas[field].name] = datas[field].value;
}
console.log(widget_settings);
$('.gridster').find('div[id^=widget_body_]').each(function() {
if(this.contains(data)) {
widget_id = $(this).parent().attr('id');
widget_type = $(this).parent().data('type');
}
});
if( widget_id > 0 && widget_settings != {} ) {
$.ajax({
type: 'POST',
url: 'ajax_form.php',
data: {type: 'widget-settings', id: widget_id, settings: widget_settings},
dataType: "json",
success: function (data) {
if( data.status == "ok" ) {
widget_reload(widget_id,widget_type);
}
}
});
}
}
function widget_dom(data) {
dom = '<li id="'+data.user_widget_id+'" data-type="'+data.widget+'">'+
'<header class="widget_header"><span id="widget_title_'+data.user_widget_id+'">'+data.title+'</span>'+
'<button style="color: #ffffff;" type="button" class="fa fa-times close close-widget" data-widget-id="'+data.user_widget_id+'" aria-label="Close">&nbsp;</button>'+
'<button style="color: #ffffff;" type="button" class="fa fa-pencil-square-o close edit-widget" data-widget-id="'+data.user_widget_id+'" aria-label="Settings">&nbsp;</button>'+
'</header>'+
'<div class="widget_body" id="widget_body_'+data.user_widget_id+'" style="height: 100%; width:100%;">'+data.widget+'</div>'+
'\<script\>var timeout'+data.user_widget_id+' = grab_data('+data.user_widget_id+','+data.refresh+',\''+data.widget+'\');\<\/script\>'+
'</li>';
if (data.hasOwnProperty('col') && data.hasOwnProperty('row')) {
gridster.add_widget(dom, parseInt(data.size_x), parseInt(data.size_y), parseInt(data.col), parseInt(data.row));
} else {
gridster.add_widget(dom, parseInt(data.size_x), parseInt(data.size_y));
}
}
function widget_reload(id,data_type) {
$.ajax({
type: 'POST',
url: 'ajax_dash.php',
data: {type: data_type, id: id},
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
$("#widget_body_"+id).html(data.html);
}
else {
$("#widget_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
}
},
error: function () {
$("#widget_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
}
});
}
function widget_settings(data) {
var widget_settings = {};
var widget_id = 0;
datas = $(data).serializeArray();
for( var field in datas ) {
widget_settings[datas[field].name] = datas[field].value;
}
$('.gridster').find('div[id^=widget_body_]').each(function() {
if(this.contains(data)) {
widget_id = $(this).parent().attr('id');
widget_type = $(this).parent().data('type');
$(this).parent().data('settings','0');
}
});
if( widget_id > 0 && widget_settings != {} ) {
$.ajax({
type: 'POST',
url: 'ajax_form.php',
data: {type: 'widget-settings', id: widget_id, settings: widget_settings},
dataType: "json",
success: function (data) {
if( data.status == "ok" ) {
widget_reload(widget_id,widget_type);
}
}
});
}
}
function grab_data(id,refresh,data_type) {
new_refresh = refresh * 1000;
widget_reload(id,data_type);
setTimeout(function() {
grab_data(id,refresh,data_type);
},
new_refresh);
}
$('#new-widget').popover();
function widget_reload(id,data_type) {
if( $("#widget_body_"+id).parent().data('settings') == 1 ) {
settings = 1;
} else {
settings = 0;
}
$.ajax({
type: 'POST',
url: 'ajax_dash.php',
data: {type: data_type, id: id, dimensions: {x:$("#widget_body_"+id).innerWidth()-50, y:$("#widget_body_"+id).innerHeight()-50}, settings:settings},
dataType: "json",
success: function (data) {
if (data.status == 'ok') {
$("#widget_title_"+id).html(data.title);
$("#widget_body_"+id).html(data.html);
}
else {
$("#widget_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
}
},
error: function () {
$("#widget_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
}
});
}
function grab_data(id,refresh,data_type) {
new_refresh = refresh * 1000;
widget_reload(id,data_type);
setTimeout(function() {
grab_data(id,refresh,data_type);
},
new_refresh);
}
$('#new-widget').popover();
</script>