Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
chuan
/
kitcube
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

left sidebar layout; jstree

Chuan Miao 9 жил өмнө
parent
412657310d
commit
33789c04e3
4 өөрчлөгдсөн 157 нэмэгдсэн , 75 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 103 35
      src/css/index.css
  2. 21 14
      src/htdocs/index.html
  3. 1 3
      src/javascript/data.js
  4. 32 23
      src/javascript/page.js

+ 103 - 35
src/css/index.css
Файл харах 

@@ -1,5 +1,96 @@
 
+body, html {
 
+    height: 100%;
 
+    margin: 0;
 
+    padding: 0;
 
+    display: flex;
 
+    flex-direction: column;
 
+}
 
+
 
+.header {
 
+    display: flex;
 
+    flex-direction: row;
 
+    min-height: 50px;
 
+    color: white;
 
+    background: #03a9f4;
 
+    border-bottom: 1px solid #d8d8d8;
 
+    font-size: 1.4em;
 
+}
 
+.header-brand {
 
+    order: -1;
 
+    flex: 0 0 300px;
 
+    text-align: center;
 
+    font-style: bold;
 
+    line-height: 50px;
 
+    color: white;
 
+    background-color: #03a9f4;
 
+    border-right: 1px solid rgba(95,95,95, 0.1);
 
+}
 
+.header > nav {
 
+    flex: 1 0 auto;
 
+}
 
+.header nav ul {
 
+    display: flex;
 
+    flex-direction: row;
 
+    justify-content: flex-end;
 
+    list-style: none;
 
+    font-size: 0.7em;
 
+}
 
+.header nav li {
 
+    flex: 0 1 auto;
 
+    margin: 1.25em 2em 0 0;
 
+    padding: 0;
 
+    display: block;
 
+}
 
+
 
+.body {
 
+    flex: 1 1 auto;
 
+    display: flex;
 
+    overflow: auto;
 
+}
 
+
 
+.sidebar {
 
+    flex: 0 0 300px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    background: #f3f3f3;
 
+    border-right: 1px solid #d8d8d8;
 
+    /*overflow: auto;*/
 
+}
 
+
 
+#sidebar-search {
 
+    flex: 0 0 auto;
 
+    padding: 4px;
 
+    //min-height: 4em;
 
+}
 
 
-.HolyGrail {
 
+#sidebar-sensor-tree {
 
+    flex: 1 1 auto;
 
+    overflow: auto;
 
+}
 
+
 
+#sidebar-control {
 
+    flex: 0 0 auto;
 
+    overflow: auto;
 
+    box-sizing: border-box;
 
+    padding: 4px 6px;
 
+    margin: 0;
 
+    min-height: 8em;
 
+    max-height: 14em;
 
+    overflow: scroll;
 
+    border-top: 2px solid #d8d8d8;
 
+    background-color: #e8e8e8;
 
+    border-radius: 3px;
 
+}
 
+
 
+.content {
 
+    flex: 1 1 auto;
 
+    overflow: auto;
 
+}
 
+
 
+#sidebar-control .list-group-item {
 
+    padding: 2px 5px;
 
+}
 
+/*.HolyGrail {
 
   display: flex;
 
   min-height: 100vh;
 
   flex-direction: column;
 
@@ -35,54 +126,28 @@
 
     font-size: 1.4em;
 
 }
 
 
-.HolyGrail-header-brand {
 
-    order: -1;
 
-    flex: 0 0 250px;
 
-    text-align: center;
 
-    font-style: bold;
 
-    padding: 0.5em 0;
 
-    color: white;
 
-    background-color: #03a9f4;
 
-    border-right: 1px solid rgba(95,95,95, 0.1);
 
-}
 
 
-.HolyGrail-header > nav {
 
-    flex: 1 0 auto;
 
-}
 
-.HolyGrail-header nav ul {
 
-    display: flex;
 
-    flex-direction: row;
 
-    justify-content: flex-end;
 
-    list-style: none;
 
-    font-size: 0.7em;
 
-}
 
-.HolyGrail-header nav li {
 
-    flex: 0 1 auto;
 
-    /*border-bottom: 1px solid #ccc;*/
 
-    margin: 1.25em 2em 0 0;
 
-    padding: 0;
 
-    display: block;
 
-}
 
 
 .HolyGrail-sidebar {
 
     background: #f3f3f3;
 
     border-right: 1px solid #d8d8d8;
 
+    overflow-y: auto;
 
 }
 
 
 
-#sidebar-search {
 
+#sidebar-search-old {
 
     flex: 0 0 auto;
 
     order: -1;
 
     padding: 6px 6px;
 
 }
 
 
-#sidebar-sensor-tree {
 
+#sidebar-sensor-tree-old {
 
     flex: 1 0 auto;
 
     order: 1;
 
     padding: 2px 6px;
 
 }
 
 
-#sidebar-control {
 
+#sidebar-control-old {
 
     position: relative;
 
     flex: 1 0 auto;
 
     order: 99;
 
@@ -90,15 +155,18 @@
 
     padding: 4px 6px;
 
     margin: 0;
 
     max-height: 14em;
 
-    overflow: auto;
 
+    overflow: scroll;
 
     border-top: 2px solid #d8d8d8;
 
     background-color: #e8e8e8;
 
-    /*box-shadow: 0 -2px 2px -2px rgba(0, 0, 0, 0.6);*/
 
+    //box-shadow: 0 -2px 2px -2px rgba(0, 0, 0, 0.6);
 
     border-radius: 3px;
 
 }
 
 
-body {
 
+html, body {
 
+    width: 100%;
 
+    height: 100%;
 
     margin: 0;
 
+    padding: 0;
 
     background: #fff;
 
 }
 
 
@@ -112,4 +180,4 @@ body {
 
     padding: 1em;
 
     width: auto;
 
     overflow: hidden;
 
-}
 
+}*/

+ 21 - 14
src/htdocs/index.html
Файл харах 

@@ -7,10 +7,10 @@
 
   <link rel="stylesheet" href="./vendor/jstree/themes/default/style.css">
 
   <link rel="stylesheet" href="css/index.css">
 
 </head>
 
-<body class="HolyGrail">
 
+<body>
 
 
-  <header class="HolyGrail-header" role="banner">
 
-      <div class="HolyGrail-header-brand">KITCube Display</div>
 
+  <header class="header" role="banner">
 
+      <div class="header-brand">KITCube Display</div>
 
       <nav>
 
       <ul>
 
         <li>Summary</li>
 
@@ -19,23 +19,30 @@
 
       </nav>
 
   </header>
 
 
-  <div class="HolyGrail-body">
 
-    <nav class="HolyGrail-sidebar"> 
+  <div class="body">
 
+    <div class="sidebar">
 
       <div id="sidebar-search">
 
         <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
 
       </div>
 
       <div id="sidebar-sensor-tree">Tree</div>
 
-      <div id="sidebar-control">Control Area
 
-        <br/> control 1
 
-        <br/> control 5
 
-        <br/> control 6
 
-        <br/> control 7
 
-        <br/> control 8
 
-
 
+      <div id="sidebar-control">
 
+        <span style="font-weight: 700; color: #959595; margin-bottom: 5px;">Sensor Sets</span>
 
+        <div class="list-group">
 
+        <a class="list-group-item"> control 1</a>
 
+        <a class="list-group-item"> control 2</a>
 
+        <a class="list-group-item"> control 3</a>
 
+        <a class="list-group-item"> control 4</a>
 
+        <a class="list-group-item"> control 5</a>
 
+        <a class="list-group-item"> control 6</a>
 
+        <a class="list-group-item"> control 7</a>
 
+        <a class="list-group-item"> control 8</a>
 
+        <a class="list-group-item"> control 9</a>
 
+        </div>
 
+        
       </div>
 
-    </nav>
 
+    </div>
 
 
-    <main class="HolyGrail-content" role="main">
 
+    <main class="content" role="main">
 
     <i class="fa fa-bars toggle-sidebar"></i>
 
     </main>
 
   </div>

+ 1 - 3
src/javascript/data.js
Файл харах 

@@ -3,11 +3,9 @@ var _ = require('underscore');
 
 var Backbone = require('backbone');
 
 Backbone.$ = $;
 
 
-
 
-
 
 module.exports = {
 
 	init: function() {
 
-		$
 
+		
 	}
 
 };

+ 32 - 23
src/javascript/page.js
Файл харах 

@@ -7,21 +7,34 @@ module.exports = {
 
 			$('.HolyGrail-sidebar').toggle();
 
 		});		
 	},
 
-	sensorTree: function() {
 
+	createTree: function(data) {
 
+		var parse = function(data) {
 
+			var keys = [];
 
+			var res = [];
 
+			for (k in data) {
 
+				keys.push(k);
 
+			}
 
+			for (k in keys.sort()) {
 
+				key = keys[k]
 
+				res.push({
 
+					'text': key,
 
+					'children': data[key] 
+				})
 
+			}
 
+			return res;			
+		};
 
 		
-		var sensordata =
 
-			{
 
-				'text': 'Katrin',
 
-				'children': [
 
-					'sensor1',
 
-					'sensor2'
 
-				],
 
-			};
 
-
 
+		// parse data
 
+		data = parse(data);
 
+		
+		// render tree
 
 		$('#sidebar-sensor-tree').jstree({
 
-			'core': { 'data': sensordata},
 
-			'plugins': [ 'wholerow', 'checkbox', 'search' ]
 
+			'core': { 'data': data},
 
+			'plugins': [ 'wholerow', 'checkbox', 'search' ],
 
+			'search': {'show_only_matches': true}
 
 		});
 
+
 
+		// search box
 
 		var to = false;
 
 		$('#sidebar-search > input').keyup(function () {
 
 			if(to) { clearTimeout(to); }
 
@@ -31,23 +44,19 @@ module.exports = {
 
     		}, 250);
 
 		});
 
 	},
 
+
 
 	getSensorList: function() {
 
-		var url = 'http://katrin.kit.edu/newstatus/katrin/api/adeiinfo.json';
 
-		$.getJSON(url, function(data) {
 
-			var servers;
 
-			// data --> servers
 
-			// servers = {
 
-			// 	'katrin': {...},
 
-			// 	'aircoils': {...}
 
-			// };
 
-			console.log(servers);
 
+		var url = 'http://localhost:7000/service/sql/heads.json';
 
+		var self = this;
 
+		
+		$.getJSON(url, function(data) {		
+			self.createTree(data.modules);
 
 		});
 
 
-		var tables = $
 
 	},
 
+
 
 	init: function() {
 
 		this.toggleSidebar();
 
-		this.sensorTree();
 
 		this.getSensorList();
 
 	}
 
 };