From 2f9dcc8fbd24e3d5b8c3c7c34773e4700fc59294 Mon Sep 17 00:00:00 2001
From: laf <neil@lathwood.co.uk>
Date: Tue, 21 Jul 2015 23:01:57 +0100
Subject: [PATCH] Initial dashboard, code formatting is bad + lots needs
 tidying up

---
 Makefile                                      |   3 +
 html/ajax_dash.php                            |  54 +++++
 html/css/jquery.gridster.min.css              |   1 +
 html/css/styles.css                           |  62 ++++++
 html/forms/update-dashboard-config.inc.php    |  45 ++++
 html/includes/common/alerts.inc.php           |  89 ++++++++
 html/includes/common/availability-map.inc.php |  45 ++++
 .../common/device-summary-horiz.inc.php       |  52 +++++
 html/index.php                                |   1 +
 html/js/jquery.gridster.min.js                |   1 +
 html/pages/front/tiles.php                    | 202 ++++++++++++++++++
 11 files changed, 555 insertions(+)
 create mode 100644 html/ajax_dash.php
 create mode 120000 html/css/jquery.gridster.min.css
 create mode 100644 html/forms/update-dashboard-config.inc.php
 create mode 100644 html/includes/common/alerts.inc.php
 create mode 100644 html/includes/common/availability-map.inc.php
 create mode 100644 html/includes/common/device-summary-horiz.inc.php
 create mode 120000 html/js/jquery.gridster.min.js
 create mode 100644 html/pages/front/tiles.php

diff --git a/Makefile b/Makefile
index 43d50197c0..58cd633c31 100644
--- a/Makefile
+++ b/Makefile
@@ -46,3 +46,6 @@ vis:
 
 typeahead:
 	$(GIT_SUBTREE) -- prefix=lib/typeahead https://github.com/twitter/typeahead.js.git master
+
+gridster:
+	$(GIT_SUBTREE) --prefix=lib/gridster https://github.com/ducksboard/gridster.js.git master
diff --git a/html/ajax_dash.php b/html/ajax_dash.php
new file mode 100644
index 0000000000..5336cef769
--- /dev/null
+++ b/html/ajax_dash.php
@@ -0,0 +1,54 @@
+<?php
+
+/*
+ * LibreNMS
+ *
+ * Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+
+if (isset($_REQUEST['debug'])) {
+    ini_set('display_errors', 1);
+    ini_set('display_startup_errors', 0);
+    ini_set('log_errors', 0);
+    ini_set('allow_url_fopen', 0);
+    ini_set('error_reporting', E_ALL);
+}
+
+require_once '../includes/defaults.inc.php';
+require_once '../config.php';
+require_once '../includes/definitions.inc.php';
+require_once 'includes/functions.inc.php';
+require_once '../includes/functions.php';
+require_once 'includes/authenticate.inc.php';
+
+if (!$_SESSION['authenticated']) {
+    echo 'unauthenticated';
+    exit;
+}
+
+$type = mres($_POST['type']);
+
+if ($type == 'placeholder') {
+    $output = 'Please add a Widget to get started';
+    $status = 'ok';
+}
+elseif (is_file('includes/common/'.$type.'.inc.php')) {
+
+    include 'includes/common/'.$type.'.inc.php';
+    $output = implode('', $common_output);
+    $status = 'ok';
+
+}
+
+$response = array(
+                  'status' => $status,
+                  'html' => $output,
+                 );
+
+echo _json_encode($response);
diff --git a/html/css/jquery.gridster.min.css b/html/css/jquery.gridster.min.css
new file mode 120000
index 0000000000..8529b9ed9e
--- /dev/null
+++ b/html/css/jquery.gridster.min.css
@@ -0,0 +1 @@
+../../lib/gridster/dist/jquery.gridster.min.css
\ No newline at end of file
diff --git a/html/css/styles.css b/html/css/styles.css
index 69ae991a8f..13662682f5 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -1654,3 +1654,65 @@ tr.search:nth-child(odd) {
 	color: #FFFFFF;
 }
 
+.gridster * {
+  margin:0;
+}
+
+.grid ul {
+  list-style-type: none;
+}
+
+.gridster li {
+    font-size: 1em;
+    font-weight: bold;
+    text-align: center;
+    line-height: 100%;
+}
+
+
+.gridster {
+    margin: 0 auto;
+
+    opacity: .8;
+
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    -ms-transition: opacity .6s;
+    transition: opacity .6s;
+}
+
+.gridster .gs-w {
+    background: #ffffff;
+    box-shadow: inset 0 0 2px #000;
+    color: 000000
+    cursor: pointer;
+    -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+
+}
+
+.gridster .player {
+    background: #BBB;
+}
+
+
+.gridster .preview-holder {
+    border: none!important;
+    background: red!important;
+}
+
+.tile_header {
+    padding: 0.8em;
+    background-color: #000000;
+    color: #ffffff;
+    -webkit-border-top-left-radius: 4px;
+     -moz-border-top-right-radius: 4px;
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+}
+
+.tile_body {
+    padding: 0.8em;
+}
diff --git a/html/forms/update-dashboard-config.inc.php b/html/forms/update-dashboard-config.inc.php
new file mode 100644
index 0000000000..ea44f11d39
--- /dev/null
+++ b/html/forms/update-dashboard-config.inc.php
@@ -0,0 +1,45 @@
+<?php
+
+$status  = 'error';
+$message = 'Error updating user dashboard config';
+
+$data = json_decode($_POST['data'],true);
+$sub_type = mres($_POST['sub_type']);
+$tile_id = mres($_POST['tile_id']);
+
+if ($sub_type == 'remove' && is_numeric($tile_id)) {
+    if ($tile_id == 0 || dbDelete('dashboard_items','`user_id`=? AND `dashboard_item_id`=?', array($_SESSION['user_id'],$tile_id))) {
+        $status = 'ok';
+        $message = '';
+    }
+}
+elseif ($sub_type == 'add' && is_numeric($tile_id)) {
+    $tile = dbFetchRow('SELECT * FROM `tiles` WHERE `tile_id`=?', array($tile_id));
+    if (is_array($tile)) {
+        list($x,$y) = explode(',',$tile['base_dimensions']);
+        $item_id = dbInsert(array('user_id'=>$_SESSION['user_id'],'widget_id'=>$tile_id,'title'=>$tile['tile_title'],'content'=>$tile['tile'],'size_x'=>$x,'size_y'=>$y),'dashboard_items');
+        if (is_numeric($item_id)) {
+            $extra = array('item_id'=>$item_id,'title'=>$tile['tile_title'],'content'=>$tile['tile'],'size_x'=>$x,'size_y'=>$y);
+            $status = 'ok';
+            $message = '';
+        }
+    }
+}
+else {
+    $status = 'ok';
+    $message = '';
+
+    foreach ($data as $line) {
+        if (is_array($line)) {
+            $update = array('col'=>$line['col'],'row'=>$line['row'],'size_x'=>$line['size_x'],'size_y'=>$line['size_y']);
+            dbUpdate($update, 'dashboard_items', '`dashboard_item_id`=?', array($line['id']));
+        }
+    }
+}
+
+$response = array(
+    'status'        => $status,
+    'message'       => $message,
+    'extra'         => $extra,
+);
+echo _json_encode($response);
diff --git a/html/includes/common/alerts.inc.php b/html/includes/common/alerts.inc.php
new file mode 100644
index 0000000000..7f347f9168
--- /dev/null
+++ b/html/includes/common/alerts.inc.php
@@ -0,0 +1,89 @@
+<?php
+
+$common_output[] = '
+<div class="row">
+    <div class="col-sm-12">
+        <span id="message"></span>
+    </div>
+</div>
+<div class="table-responsive">
+    <table id="alerts" class="table table-hover table-condensed alerts">
+        <thead>
+            <tr>
+                <th data-column-id="status" data-formatter="status" data-sortable="false">Status</th>
+                <th data-column-id="rule">Rule</th>
+                <th data-column-id="details" data-sortable="false">&nbsp;</th>
+                <th data-column-id="hostname">Hostname</th>
+                <th data-column-id="timestamp">Timestamp</th>
+                <th data-column-id="severity">Severity</th>
+                <th data-column-id="ack" data-formatter="ack" data-sortable="false">Acknowledge</th>
+            </tr>
+        </thead>
+    </table>
+</div>
+<script>
+var grid = $("#alerts").bootgrid({
+    ajax: true,
+    post: function ()
+    {
+        return {
+            id: "alerts",
+            device_id: \'' . $device['device_id'] .'\'
+        };
+    },
+    url: "/ajax_table.php",
+    formatters: {
+        "status": function(column,row) {
+            return "<h4><span class=\'label label-"+row.extra+" threeqtr-width\'>" + row.msg + "</span></h4>";
+        },
+        "ack": function(column,row) {
+            return "<button type=\'button\' class=\'btn btn-"+row.ack_col+" btn-sm command-ack-alert\' data-target=\'#ack-alert\' data-state=\'"+row.state+"\' data-alert_id=\'"+row.alert_id+"\' name=\'ack-alert\' id=\'ack-alert\' data-extra=\'"+row.extra+"\'><span class=\'glyphicon glyphicon-"+row.ack_ico+"\'aria-hidden=\'true\'></span></button>";
+        }
+    },
+    templates: {
+    }
+}).on("loaded.rs.jquery.bootgrid", function() {
+    grid.find(".incident-toggle").each( function() {
+      $(this).parent().addClass(\'incident-toggle-td\');
+    }).on("click", function(e) {
+      var target = $(this).data("target");
+      $(target).collapse(\'toggle\');
+      $(this).toggleClass(\'glyphicon-plus glyphicon-minus\');
+    });
+    grid.find(".incident").each( function() {
+      $(this).parent().addClass(\'col-lg-4 col-md-4 col-sm-4 col-xs-4\');
+      $(this).parent().parent().on("mouseenter", function() {
+        $(this).find(".incident-toggle").fadeIn(200);
+      }).on("mouseleave", function() {
+        $(this).find(".incident-toggle").fadeOut(200);
+      }).on("click", "td:not(.incident-toggle-td)", function() {
+        var target = $(this).parent().find(".incident-toggle").data("target");
+        if( $(this).parent().find(".incident-toggle").hasClass(\'glyphicon-plus\') ) {
+          $(this).parent().find(".incident-toggle").toggleClass(\'glyphicon-plus glyphicon-minus\');
+          $(target).collapse(\'toggle\');
+        }
+      });
+    });
+    grid.find(".command-ack-alert").on("click", function(e) {
+        e.preventDefault();
+        var alert_id = $(this).data("alert_id");
+        var state = $(this).data("state");
+        $.ajax({
+            type: "POST",
+            url: "/ajax_form.php",
+            data: { type: "ack-alert", alert_id: alert_id, state: state },
+            success: function(msg){
+                $("#message").html(\'<div class="alert alert-info">\'+msg+\'</div>\');
+                if(msg.indexOf("ERROR:") <= -1) {
+                    location.reload();
+                }
+            },
+            error: function(){
+                 $("#message").html(\'<div class="alert alert-info">An error occurred acking this alert.</div>\');
+            }
+        });
+    });
+});
+</script>';
+
+
diff --git a/html/includes/common/availability-map.inc.php b/html/includes/common/availability-map.inc.php
new file mode 100644
index 0000000000..d8c68becb8
--- /dev/null
+++ b/html/includes/common/availability-map.inc.php
@@ -0,0 +1,45 @@
+<?php
+/*
+* LibreNMS
+*
+* Copyright (c) 2015 Søren Friis Rosiak <sorenrosiak@gmail.com>
+* This program is free software: you can redistribute it and/or modify it
+* under the terms of the GNU General Public License as published by the
+* Free Software Foundation, either version 3 of the License, or (at your
+* option) any later version.  Please see LICENSE.txt at the top level of
+* the source code distribution for details.
+*/
+
+$sql = "SELECT `D`.`hostname`,`D`.`device_id`,`D`.`status`,`D`.`uptime` FROM `devices` AS `D`";
+
+if (is_admin() === false && is_read() === false) {
+    $sql .= " , `devices_perms` AS P WHERE D.`device_id` = P.`device_id` AND P.`user_id` = ? AND";
+    $param = array($_SESSION['user_id']);
+}
+else {
+    $sql .= " WHERE";
+}
+
+$sql .= " `D`.`ignore` = '0' AND `D`.`disabled` = '0' ORDER BY `hostname`";
+
+$temp_output = array();
+
+foreach(dbFetchRows($sql,$param) as $device) {
+    if ($device['status'] == '1') {
+        $btn_type = 'btn-success';
+        if ($device['uptime'] < $config['uptime_warning']) {
+            $btn_type = 'btn-warning';
+        }
+    }
+    else {
+        $btn_type = 'btn-danger';
+    }
+    $temp_output[] = "<a href='" .generate_url(array('page' => 'device', 'device' => $device['device_id'])). "' role='button' class='btn " . $btn_type . " btn-xs' title='" . $device['hostname'] . "' style='min-height:25px; min-width:25px; border-radius:0px; border:0px; margin:0; padding:0;'></a>";
+}
+
+$temp_rows = count($temp_output);
+
+$temp_output[] = "</div>";
+$temp_header = array("<div style='margin-left:auto; margin-right:auto;'><center><h3>All Devices(" . $temp_rows . ")</h3></center>");
+$common_output = array_merge($temp_header,$temp_output);
+
diff --git a/html/includes/common/device-summary-horiz.inc.php b/html/includes/common/device-summary-horiz.inc.php
new file mode 100644
index 0000000000..6a33213cdb
--- /dev/null
+++ b/html/includes/common/device-summary-horiz.inc.php
@@ -0,0 +1,52 @@
+<?php
+require_once 'includes/object-cache.inc.php';
+
+$temp_output = '
+<div class="panel panel-default panel-condensed table-responsive">
+<table class="table table-hover table-condensed table-striped">
+  <thead>
+    <tr class="info">
+      <th>&nbsp;</th>
+      <th>Total</th>
+      <th>Up</th>
+      <th>Down</th>
+      <th>Ignored</th>
+      <th>Disabled</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td><a href="devices/">Devices</a></td>
+      <td><a href="devices/"><span>'.$devices['count'].'</span></a></td>
+      <td><a href="devices/state=up/format=list_detail/"><span class="green"> '.$devices['up'].' up</span></a></td>
+      <td><a href="devices/state=down/format=list_detail/"><span class="red"> '.$devices['down'].' down</span></a></td>
+      <td><a href="devices/ignore=1/format=list_detail/"><span class="grey"> '.$devices['ignored'].' ignored </span></a></td>
+      <td><a href="devices/disabled=1/format=list_detail/"><span class="black"> '.$devices['disabled'].' disabled</span></a></td>
+    </tr>
+    <tr class="active">
+      <td><a href="ports/">Ports</a></td>
+      <td><a href="ports/"><span>'.$ports['count'].'</span></a></td>
+      <td><a href="ports/format=list_detail/state=up/"><span class="green"> '.$ports['up'].' up </span></a></td>
+      <td><a href="ports/format=list_detail/state=down/"><span class="red"> '.$ports['down'].' down </span></a></td>
+      <td><a href="ports/format=list_detail/ignore=1/"><span class="grey"> '.$ports['ignored'].' ignored </span></a></td>
+      <td><a href="ports/format=list_detail/state=admindown/"><span class="black"> '.$ports['shutdown'].' shutdown</span></a></td>
+    </tr>';
+if ($config['show_services']) {
+
+$temp_output .= '
+    <tr class="active">
+      <td><a href="services/">Services</a></td>
+      <td><a href="services/"><span>'.$services['count'].'</span></a></td>
+      <td><a href="services/state=up/view=details/"><span class="green">'.$services['up'].' up</span></a></td>
+      <td><a href="services/state=down/view=details/"><span class="red"> '.$services['down'].' down</span></a></td>
+      <td><a href="services/ignore=1/view=details/"><span class="grey"> '.$services['ignored'].' ignored</span></a></td>
+      <td><a href="services/disabled=1/view=details/"><span class="black"> '.$services['disabled'].' disabled</span></a></td>
+    </tr>';
+}
+$temp_output .= '
+  </tbody>
+</table>
+</div>
+';
+
+$common_output[] = $temp_output;
diff --git a/html/index.php b/html/index.php
index 9dc7a454ad..98c3d8fee1 100644
--- a/html/index.php
+++ b/html/index.php
@@ -138,6 +138,7 @@ else {
   <link href="css/mktree.css" rel="stylesheet" type="text/css" />
   <link href="css/vis.min.css" rel="stylesheet" type="text/css" />
   <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+  <link href="css/jquery.gridster.min.css" rel="stylesheet" type="text/css" />
   <link href="<?php echo($config['stylesheet']);  ?>" rel="stylesheet" type="text/css" />
   <link href="css/<?php echo $config['site_style']; ?>.css" rel="stylesheet" type="text/css" />
   <script src="js/jquery.min.js"></script>
diff --git a/html/js/jquery.gridster.min.js b/html/js/jquery.gridster.min.js
new file mode 120000
index 0000000000..0209b9c12f
--- /dev/null
+++ b/html/js/jquery.gridster.min.js
@@ -0,0 +1 @@
+../../lib/gridster/dist/jquery.gridster.min.js
\ No newline at end of file
diff --git a/html/pages/front/tiles.php b/html/pages/front/tiles.php
new file mode 100644
index 0000000000..0150af456d
--- /dev/null
+++ b/html/pages/front/tiles.php
@@ -0,0 +1,202 @@
+<?php
+
+$no_refresh = true;
+
+foreach (dbFetchRows("SELECT * FROM `dashboard_items` WHERE `user_id`=?",array($_SESSION['user_id'])) as $items) {
+    $data[] = $items;
+}
+
+if (!is_array($data)) {
+    $data[] = array('dashboard_item_id'=>'0','widget_id'=>1,'title'=>'Add a widget','content'=>'placeholder','col'=>1,'row'=>1,'size_x'=>1,'size_y'=>1,'refresh'=>60);
+}
+
+$data = serialize(_json_encode($data));
+$dash_config = unserialize(stripslashes($data));
+
+$new_tile = '
+<select id="tile_id" name="tile_id" class="form-control">
+    <option value="" disabled selected></option>
+';
+
+foreach (dbFetchRows("SELECT * FROM `tiles` ORDER BY `tile_title`") as $tiles) {
+    $new_tile .= '<option value="'. $tiles['tile_id'] .'">'. $tiles['tile_title'] .'</option>';
+}
+
+$new_title .= '
+</select>
+';
+
+?>
+
+<button type='button' id='new-tile' class='btn btn-primary btn-sm' name='new-dashboard-tile' data-html='true' data-container='body' data-toggle='popover' data-placement='right' data-content='<a href="#">
+<?php
+    echo $new_tile;
+?>
+</a>'><span class='glyphicon glyphicon-plus' aria-hidden='true'></span></button>
+<script>
+$('#new-tile').popover();
+
+</script>
+<script src="js/jquery.gridster.min.js"></script>
+<span class="message" id="message"></span>
+<div class="row">
+    <div class="col-sm-12">
+        <div class="gridster grid">
+            <ul>
+            </ul>
+        </div>
+     </div>
+
+    <script type="text/javascript">
+      var gridster;
+
+      // same object than generated with gridster.serialize() method
+      var serialization = <?php echo $dash_config; ?>;
+
+
+      // sort serialization
+      serialization = Gridster.sort_by_row_and_col_asc(serialization);
+
+      function updatePos(gridster) {
+          var s = JSON.stringify(gridster.serialize());
+          $.ajax({
+            type: 'POST',
+            url: '/ajax_form.php',
+            data: {type: "update-dashboard-config", data: s},
+            dataType: "json",
+            success: function (data) {
+                if (data.status == 'ok') {
+                } else {
+                    $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                }
+            },
+            error: function () {
+                $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+            }
+          });
+      }
+
+      $(function(){
+
+        gridster = $(".gridster ul").gridster({
+          widget_base_dimensions: [200, 200],
+          widget_margins: [5, 5],
+          autogrow_cols: true,
+          min_cols: 1,
+          min_rows: 2,
+          draggable: {
+            handle: 'header',
+            stop: function(e, ui, $widget) {
+                updatePos(gridster);
+            },
+          },
+          resize: {
+            enabled: true,
+            stop: function(e, ui, $widget) {
+                updatePos(gridster);
+            }
+          },
+          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.dashboard_item_id+'">'+
+                                     '\<script\>var timeout'+this.dashboard_item_id+' = grab_data('+this.dashboard_item_id+','+this.refresh+',\''+this.content+'\');\<\/script\>'+
+                                         '<header class="tile_header">'+this.title+'<button type="button" class="close" data-tile-id="'+this.dashboard_item_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
+                                         '<div class="tile_body" id="tile_body_'+this.dashboard_item_id+'">'+this.content+'</div>'+
+                                     '</li>',
+                                    this.size_x, this.size_y, this.col, this.row);
+            });
+
+    var gridster = $('.gridster ul').gridster().data('gridster');
+    $(document).on( "click", ".close", function() {
+        var tile_id = $(this).data('tile-id');
+        $.ajax({
+            type: 'POST',
+            url: '/ajax_form.php',
+            data: {type: "update-dashboard-config", sub_type: 'remove', tile_id: tile_id},
+            dataType: "json",
+            success: function (data) {
+                if (data.status == 'ok') {
+                    gridster.remove_widget($('#'+tile_id));
+                    updatePos(gridster);
+                } else {
+                    $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                }
+            },
+            error: function () {
+                $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+            }
+        });
+    });
+
+$(document).on('change','#tile_id',function(){
+var tile_id = $(this).val();
+        $.ajax({
+            type: 'POST',
+            url: '/ajax_form.php',
+            data: {type: "update-dashboard-config", sub_type: 'add', tile_id: tile_id},
+            dataType: "json",
+            success: function (data) {
+                if (data.status == 'ok') {
+                var item_id = data.extra.item_id;
+                var title = data.extra.title;
+                var content = data.extra.content;
+                var size_x = data.extra.size_x;
+                var size_y = data.extra.size_y;
+                gridster.add_widget(
+                                     '<li id="'+item_id+'">'+
+                                     '\<script\>var timeout'+item_id+' = grab_data('+item_id+',60,\''+content+'\');\<\/script\>'+
+                                         '<header class="tile_header">'+title+'<button type="button" class="close" data-tile-id="'+item_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
+                                         '<div class="tile_body" id="tile_body_'+item_id+'">'+content+'</div>'+
+                                     '</li>',
+                                    size_x, size_y);
+                    $('#new-tile').popover('hide')
+                    updatePos(gridster);
+                } else {
+                    $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                }
+            },
+            error: function () {
+                $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+            }
+        });
+});
+
+      });
+
+    function grab_data(id,refresh,data_type) {
+        new_refresh = refresh * 1000;
+        $.ajax({
+            type: 'POST',
+            url: '/ajax_dash.php',
+            data: {type: data_type},
+            dataType: "json",
+            success: function (data) {
+                if (data.status == 'ok') {
+                    $("#tile_body_"+id).html(data.html);
+                } else {
+                    $("#tile_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
+                }
+            },
+            error: function () {
+                $("#tile_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
+            }
+        });
+                setTimeout(function() {
+                    grab_data(id,refresh,data_type);
+                }, new_refresh);
+    }
+
+    </script>