index.html 6.45 KB
Newer Older
akucera's avatar
akucera committed
1 2 3 4 5
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
  <title data-i18n="sbmsClient">Semantic BMS client</title>
akucera's avatar
akucera committed
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
  <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   
  crossorigin="anonymous"></script>
   <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <link rel="stylesheet" href="css/bootstrap-theme.min.css">
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 -->
 <script src="js/bootstrap.min.js"></script>
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- https://github.com/jonmiles/bootstrap-treeview -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
 
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/3.1.0/i18next.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.min.js"></script>

<script src="js/i18n.js"></script>  
<script src="js/scripts.js"></script>  
  
  <script>
  
43
  var p = new SBMSPage({
akucera's avatar
akucera committed
44
  	  noAuth: true,
45
	  
46 47 48 49 50
  	  init: function() {
  		p.showLoginDialog(p.initAfterLogin); 
  	  },
  	  
	  initAfterLogin: function () {
akucera's avatar
akucera committed
51 52 53 54 55 56 57
  	
		var name = p.getQueryVariable("name");
	    if(name) {
	      $("#objName").html(decodeURIComponent(name));
	    }
	    
  		p.loadList("fields/data.dataPoint", function(headers, params) {
akucera's avatar
akucera committed
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
      
      dpId = p.getQueryVariable("bmsId");
      if(!dpId) {
        $("table#dpInfo thead tr:eq(0)").html($.t("noDataPoint"));
        return;
      }
      
      p.sendDpInfo(dpId, headers,
      function(dp) {
        if(dp == null) {
          $("table#dpInfo thead tr:eq(0)").html("<th>No data available</th>");
          $("table#dpInfo tbody tr:eq(0)").html("<td></td>");
          return;
        }
        
        // fill table
        var htmlHead = "";
        var htmlBody = "";
        $.each(headers, function(i, f) {
          htmlHead += "<th>" + $.t(f) + "</th>";
          
          propVal = p.getPropertyValue(dp, f);
          
81
          //// when map, add button
akucera's avatar
akucera committed
82 83 84
          htmlBody += p.getPropertyValueCell(dp, f);
          
          // add map navs + actions
85 86
        /*
          if(p.getFieldDisplayCategory(f)=="map" && propVal != "") {
akucera's avatar
akucera committed
87 88
          $("#mapTabs").append('<li role="presentation" id="nav' + p.getId(f) + '"><a href="#" data-field="' + encodeURIComponent(f) + '" data-field-value="' + encodeURIComponent(propVal) + '">' 
          + $.t(f) + '</a></li>').find("li a").click(p.switchMaps);
89
        
akucera's avatar
akucera committed
90 91
          //$("#mapTabs li:last-child a").click(switchMaps);
        }
92
          */  
akucera's avatar
akucera committed
93 94 95
        });
        $("table#dpInfo thead tr:eq(0)").html(htmlHead);
        $("table#dpInfo tbody tr:eq(0)").html(htmlBody);
96
        
akucera's avatar
akucera committed
97 98 99
        p.enrichPropertyValueCells("table#dpInfo", p.switchMaps, p.buttonEnrichCallbackLink,
        		p.buttonEnrichCallbackLink, p.buttonEnrichCallbackLink, p.buttonEnrichCallbackLink, p.buttonEnrichCallbackLink,
        		function() {
100 101 102 103 104
        	$("button.mapButton").each(function() {
        		var f = $(this).attr("data-field");
        		var propVal = $(this).attr("data-field-value");
        		// add map navs + actions
        		$("#mapTabs").append('<li role="presentation" id="nav' + p.getId(f) + '"><a href="#" data-field="' + encodeURIComponent(f) + '" data-field-value="' + encodeURIComponent(propVal) + '">' 
akucera's avatar
akucera committed
105
          		+ $.t(f) + '</a></li>').find("li a").click(function() { p.switchMaps(SBMSPage.prototype.mapURL + "?code=" + $(this).attr("data-field-value"), this); });
106
        	});
107
        });
akucera's avatar
akucera committed
108 109 110 111
       $("#map").height($(window).height() - ($("body").outerHeight() - $("#map").height()) - 10);
         
      });  
  });
112
	  },
akucera's avatar
akucera committed
113
	  
114
 sendDpInfo: function(dp, fields, fillTableAction) {
akucera's avatar
akucera committed
115 116 117 118 119 120 121 122 123 124 125 126
      
      var data = {};
      
      data.fields = fields.join(",");
      
      var query= p.sbmsURL + "datapoints/" + dp; //+ qs;  
      $.ajax({
                type: 'GET',
                cache: false,
                url: query,
                data: data,
                beforeSend: function (xhr) {
127
                	p.setAuth(xhr);
akucera's avatar
akucera committed
128 129
                },
               success: function(result) { 
130 131
                 if(!$.isEmptyObject(result.results) && result.groups.length != 0) {
                  fillTableAction(result.results[result.groups[0]][0]);
akucera's avatar
akucera committed
132 133 134 135 136 137 138 139 140 141 142 143
                 } else {
                  fillTableAction(null);
                 }   
               },
               error: function(xhr, status, error) {
                     
               },
               complete: function(xhr, status) {
                     
               }
    });
  
akucera's avatar
akucera committed
144 145 146 147
}, 

switchMaps: function(url,src) {
  $("#kompasFrame").attr("src", url); 
akucera's avatar
akucera committed
148
  $("#mapTabs li").removeClass("active");
akucera's avatar
akucera committed
149
  var s = $("#nav" + p.getId($(src).attr("data-field")));
akucera's avatar
akucera committed
150
  s.addClass("active"); 
akucera's avatar
akucera committed
151 152 153
}

});
akucera's avatar
akucera committed
154 155 156 157 158 159 160 161 162 163 164
  
  
  
  </script>
  
  <style>
  .bootstrap-select .dropdown-toggle {
    background-color: #fff;
    background-image: none;
  }

165 166


akucera's avatar
akucera committed
167 168 169 170
  </style>
</head>

<body>
akucera's avatar
akucera committed
171
  <nav id="menu"></nav>
akucera's avatar
akucera committed
172 173 174 175 176 177 178 179 180 181 182 183
   
  <div class="container-fluid">
  <h3 id="objName" data-i18n="index.unknownObject">Unknown object name</h3>
  <table id="dpInfo" class="table table-bordered">
      <thead><tr><th></th></tr></thead>
      <tbody><tr><td></td></tr></tbody>
  </table>
  
  <ul id="mapTabs" class="nav nav-pills">
    <li role="presentation"><a href="#" data-i18n="index.map">Show on the Map:</a></li>      
  </ul>
   <div id="map">
184
        <iframe id="kompasFrame" style="width:100%;height:100%; border: 0px none transparent;" src="about:blank"></iframe>
akucera's avatar
akucera committed
185 186 187 188 189 190
  </div>
  </div>      
  
 
</body>
</html>