API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 22nd, 2019
327
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.     <meta name="description" content="">
  9.     <meta name="author" content="">
  10.  
  11. <!-- Custom sidebar styles -->
  12.   <link href="css/simple-sidebar.css" rel="stylesheet">
  13.   <link rel="stylesheet" href="https://bootswatch.com/3/paper/bootstrap.css">
  14.   <link rel="stylesheet" href="css/bootstrap.css">
  15.   <link rel="stylesheet" href="css/mystyles.css">
  16.  
  17.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css"/>
  18.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  19.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
  20.   <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
  21.   <script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js"></script>
  22.   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
  23.  
  24. </head>
  25.  
  26. <body>
  27.  
  28.     <div id="wrapper">
  29.  
  30.         <!-- Sidebar -->
  31.         <div id="sidebar-wrapper">
  32.             <ul class="sidebar-nav">
  33.                 <li class="sidebar-brand">
  34.                     <a href="#">
  35.                             CAT 1
  36.                     </a>
  37.                 </li>
  38.                 <li>
  39.                     <a href="#">Dashboard</a>
  40.                 </li>
  41.                 <li>
  42.                     <a href="#">System Overview</a>
  43.                 </li>
  44.                 <li class="sidebar-brand">
  45.                     <a href="#">
  46.                             CAT 2
  47.                     </a>
  48.                 </li>
  49.                 <li>
  50.                     <a href="#">Analysis 1</a>
  51.                 </li>
  52.                 <li>
  53.                     <a href="#">Analysis 2</a>
  54.                 </li>
  55.                 <li>
  56.                     <a href="#">Analysis 3</a>
  57.                 </li>
  58.                 <li>
  59.                     <a href="#">Support</a>
  60.                 </li>
  61.                 <li>
  62.                     <a href="#">Contact</a>
  63.                 </li>
  64.             </ul>
  65.         </div>
  66.         <!-- /#sidebar-wrapper -->
  67.  
  68.         <!-- Page Content -->
  69.         <div id="page-content-wrapper">
  70.  
  71.  
  72.  
  73.             <div class="container-fluid">
  74.  
  75.                 <div class="">
  76.                     <div class="row" style="margin-left: 0px">
  77.                         <div class="col-2 col-sm-1">
  78.                             <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle" style="box-shadow: 0px 0px"><h1 style="padding-top: 5%">☰</h1></a>            
  79.  
  80.  
  81.  
  82.                         </div>
  83.                         <div class="col-10 col-sm-11">
  84.                             <!--title, logo and stats-->
  85.                             <h2 style="text-align: center;"> Some logo & title </h2>
  86.                            <p style="text-align: center;">LIVE STATS</p>
  87.                             <p style="text-align: center;">demo for features - mobile friendly, collapsable sidebar, widget bar and dynamic widgets</p>
  88.  
  89.                         </div>
  90.                     </div>
  91.  
  92.  
  93.                     <div class="row" style="margin-left: 0px; padding-left: 0px; padding-right: 0px">
  94.                         <div class="col-2 col-sm-1">
  95.                             <!--should contain drag panel-->
  96.                             <div class="card" style="border-radius: 0px; height: 100%; background-color: #000000 ">
  97.                        
  98.  
  99.                                 <button data-bind="click: addNewGraph" style="background-color: transparent; border:none; background-repeat: no-repeat; overflow: hidden;cursor: pointer; margin-top: 1vh; height:10vh; width: 100%"><img src="https://images.vexels.com/media/users/3/153553/isolated/preview/986a2e5c42953d6151c0e7a1f025a932-business-line-graph-icon-by-vexels.png" style=" width: 7vh;"></button>
  100.  
  101.                                 <button data-bind="click: addNewAlert" style="background-color: transparent; border:none; background-repeat: no-repeat; overflow: hidden;cursor: pointer; margin-top: 1vh; height:10vh; width: 100%"><img src="https://images.vexels.com/media/users/3/136062/isolated/preview/53b3faeae4a626df1e5b1e2469de5ab7-graph-pie-chart-icon-by-vexels.png" style=" width: 6vh;"></button>
  102.  
  103.  
  104.  
  105.                                
  106.  
  107.                                
  108.                              
  109.                             </div>
  110.                         </div>
  111.                            
  112.                         <div class="col-10 col-sm-11" style="padding-right: 15px">
  113.  
  114.                             <div data-bind="component: {name: 'dashboard-grid', params: $data}" style="height: 2000px;"></div>
  115.  
  116.                         </div>
  117.                            
  118.                     </div>
  119.                 </div>
  120.  
  121.             </div>
  122.         </div>
  123.         <!-- /#page-content-wrapper -->
  124.  
  125.     </div>
  126.     <!-- /#wrapper -->
  127.  
  128.     <!-- Menu Toggle Script -->
  129.     <script>
  130.     $("#menu-toggle").click(function(e) {
  131.         e.preventDefault();
  132.         $("#wrapper").toggleClass("toggled");
  133.     });
  134.     </script>
  135.  
  136.  
  137. <script type="text/javascript">
  138.     $(function () {
  139.        $('.grid-stack').gridstack();
  140.     });
  141. </script>
  142.  
  143.  
  144.  
  145. <!-- script for generating widgets -->
  146.  
  147.  <script type="text/javascript">
  148.         ko.components.register('dashboard-grid', {
  149.             viewModel: {
  150.                 createViewModel: function (controller, componentInfo) {
  151.                     var ViewModel = function (controller, componentInfo) {
  152.                         var grid = null;
  153.  
  154.                         this.widgets = controller.widgets;
  155.  
  156.                         this.afterAddWidget = function (items) {
  157.                             if (grid == null) {
  158.                                 grid = $(componentInfo.element).find('.grid-stack').gridstack({
  159.                                     auto: false
  160.                                 }).data('gridstack');
  161.                             }
  162.  
  163.                             var item = _.find(items, function (i) { return i.nodeType == 1 });
  164.                             grid.addWidget(item);
  165.                             ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
  166.                                 grid.removeWidget(item);
  167.                             });
  168.                         };
  169.                     };
  170.  
  171.                     return new ViewModel(controller, componentInfo);
  172.                 }
  173.             },
  174.  
  175.  
  176.  
  177.             template:
  178.  
  179.  
  180.                 [
  181.                     '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
  182.                     '<div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
  183.                     '<div class="grid-stack-item-content panel panel-primary" style="overflow:hidden">',
  184.                     '<div class="panel-heading">',
  185.                     '<h3 class="panel-title"><span data-bind="text: myMessage"></h3>',
  186.                     '<button class="close" data-bind="click: $root.deleteWidget"></button>',
  187.                     '</div>',    
  188.                     '<div data-bind="css: divClass">COLOUR = DIV CLASS</br>DASH ELEMENT GOES HERE</div>',
  189.                     '</div>',
  190.                     '</div>'
  191.  
  192.                 ].join('')
  193.         });
  194.  
  195.         $(function () {
  196.             var Controller = function (widgets) {
  197.                 var self = this;
  198.  
  199.                 this.widgets = ko.observableArray(widgets);
  200.  
  201.  
  202.                 this.addNewAlert = function () {
  203.                     this.widgets.push({
  204.                         x: 0,
  205.                         y: 0,
  206.                         width: 6, //Math.floor(1 + 3 * Math.random()),
  207.                         height: 3, //Math.floor(1 + 3 * Math.random()),
  208.                         auto_position: true,
  209.                         myMessage: 'Alerts',
  210.                         divClass: 'divclass1'
  211.                     });
  212.                     return false;
  213.                 };
  214.  
  215.  
  216.  
  217.                 this.addNewGraph = function () {
  218.                     this.widgets.push({
  219.                         x: 0,
  220.                         y: 0,
  221.                         width: 12, //Math.floor(1 + 3 * Math.random()),
  222.                         height: 4, //Math.floor(1 + 3 * Math.random()),
  223.                         auto_position: true,
  224.                         myMessage: 'Live Graph',
  225.                         divClass: 'divclass3'
  226.                     });
  227.                     return false;
  228.                 };
  229.  
  230.                 this.deleteWidget = function (item) {
  231.                     self.widgets.remove(item);
  232.                     return false;
  233.                 };
  234.             };
  235.  
  236.             var widgets = [
  237.                 {x: 0, y: 0, width: 12, height: 4,myMessage:'Live Graph - drag and resize me',divClass:'divclass1'},
  238.                 {x: 0, y: 4, width: 6, height: 3,myMessage:'Sensor Map',divClass:'divclass2'},
  239.                 {x: 6, y: 4, width: 6, height: 3,myMessage:'Alerts',divClass:'divclass3'},
  240.             ];
  241.  
  242.             var controller = new Controller(widgets);
  243.             ko.applyBindings(controller);
  244.         });
  245.     </script>
  246.  
  247. </body>
  248.  
  249. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!