Merge branch 'dev' into chrome-extension

appbaseio · Jan 23, 2017 · e7c93de · e7c93de
2 parents 462b4de + 49a20a0
commit e7c93de
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 37 deletions.
diff --git a/app/app.component.html b/app/app.component.html
@@ -73,7 +73,7 @@
 			<div class="row">
 				<div class="col-xs-12">
 					<div class="row">
-						<query-result [mapping]="mapping" [types]="types" [selectedTypes]="selectedTypes" [result]="result" [config]="config" [responseHookHelp]="responseHookHelp" [result_time_taken]="result_time_taken"></query-result>
+						<query-result [mapping]="mapping" [types]="types" [selectedTypes]="selectedTypes" [result]="result" [config]="config" [editorHookHelp]="editorHookHelp" [responseHookHelp]="responseHookHelp" [result_time_taken]="result_time_taken" [result_random_token]="result_random_token" [urlShare]="urlShare"></query-result>
 					</div>
 				</div>
 			</div>

diff --git a/app/app.component.ts b/app/app.component.ts
@@ -55,6 +55,7 @@ export class AppComponent implements OnInit, OnChanges {
 	public errorHookHelp = new EditorHook({ editorId: 'errorEditor' });
 	public urlShare = new UrlShare();
 	public result_time_taken = null;
+	public result_random_token = null;
 	public version: string = '2.0';
 	public docLink: string;
 	public currentDeleteQuery: any;
@@ -433,7 +434,7 @@ export class AppComponent implements OnInit, OnChanges {
 					this.urlShare.createUrl();
 					setTimeout(() => { 
 						$('#setType').val(this.selectedTypes).trigger("change"); 
-						if($('body').width() > 768 && !this.setLayoutFlag) {
+						if($('body').width() > 768) {
 							this.setLayoutResizer();
 						} else {
 							this.setMobileLayout();
@@ -568,6 +569,9 @@ export class AppComponent implements OnInit, OnChanges {
 		if(propInfo.name === 'result_time_taken') {
 			this.result_time_taken = propInfo.value;
 		}
+		if(propInfo.name === 'random_token') {
+			this.result_random_token = propInfo.value;
+		}
 
 		//set input state
 		this.urlShare.createUrl();
@@ -584,20 +588,18 @@ export class AppComponent implements OnInit, OnChanges {
 		function setSidebar() {
 			var windowHeight = $(window).height();
 			$('.features-section').css('height', windowHeight);
+			var bodyHeight = $('body').height();
 			if(!self.allowF) {
-				var bodyHeight = $('body').height();
 				setTimeout(()=>{
 					$('#mirage-container').css('height', bodyHeight- 140);
 					$('#paneCenter, #paneEast').css('height', bodyHeight- 140);
 				}, 300);
 			} else if(!self.allowH) {
-				var bodyHeight = $('body').height();
 				setTimeout(()=>{
 					$('#mirage-container').css('height', bodyHeight- 15);
 					$('#paneCenter, #paneEast').css('height', bodyHeight- 15);
 				}, 300);
 			} else if(self.allowHF) {
-				var bodyHeight = $('body').height();
 				setTimeout(()=>{
 					$('#mirage-container').css('height', bodyHeight- 166);
 					$('#paneCenter, #paneEast').css('height', bodyHeight- 166);

diff --git a/app/jsonEditor/jsonEditor.component.ts b/app/jsonEditor/jsonEditor.component.ts
@@ -32,6 +32,7 @@ export class JsonEditorComponent implements OnInit {
 			backdrop: 'static'
 		});
 		$('#resultModal').on('hide.bs.modal', function() {
+			$('#resultTabs a[href="#resultJson"]').tab('show')
 			self.responseHookHelp.focus('{"Loading": "please wait......"}');
 			var propInfo = {
 				name: 'result_time_taken',
@@ -58,6 +59,11 @@ export class JsonEditorComponent implements OnInit {
 					value: res.json().took
 				};
 				self.setProp.emit(propInfo);
+				var propInfo1 = {
+					name: 'random_token',
+					value: Math.random()
+				};
+				self.setProp.emit(propInfo1);
 				self.result.output = JSON.stringify(res.json(), null, 2);
 				if($('#resultModal').hasClass('in')) {
 					self.responseHookHelp.setValue(self.result.output);

diff --git a/app/result/result.component.html b/app/result/result.component.html
@@ -1,31 +1,42 @@
 <!-- Modal -->
 <div class="modal fade" id="resultModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="myModalLabel">Query Result 
-          <span *ngIf="result_time_taken !== null">
-            ({{result_time_taken}} ms)
-          </span>
-        </h4>
-      </div>
-      <div class="modal-body">
-      	<!-- <div class="loading" *ngIf="mapping.isWatching">
-      		<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
-      		Loading, please wait...
-      	</div> -->
-      	<div class="result_block">
-	        <textarea 
-				class="form-control m-b15"
-				name="responseBlock" 
-				id="responseBlock" cols="30" rows="10">
-			</textarea>
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+				<h4 class="modal-title" id="myModalLabel">Query Results
+					<span *ngIf="result_time_taken !== null">
+						({{result_time_taken}} ms)
+					</span>
+				</h4>
+			</div>
+			<div class="modal-body" id="resultTabs">
+				<!-- <div class="loading" *ngIf="mapping.isWatching">
+				  <i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
+				  Loading, please wait...
+				</div> -->
+				<!-- Nav tabs -->
+				<ul class="nav nav-tabs" role="tablist">
+					<li role="presentation" class="active"><a href="#resultJson" aria-controls="resultJson" role="tab" data-toggle="tab"> <i class="fa fa-terminal"></i> JSON</a></li>
+					<li role="presentation"><a href="#resultTable" aria-controls="resultTable" role="tab" data-toggle="tab"> <i class="fa fa-table"></i> Tabular</a></li>
+				</ul>
+
+				<!-- Tab panes -->
+				<div class="tab-content">
+					<div role="tabpanel" class="tab-pane active" id="resultJson">
+						<div class="result_block">
+							<textarea class="form-control m-b15" name="responseBlock" id="responseBlock" cols="30" rows="10">
+							</textarea>
+						</div>
+					</div>
+					<div role="tabpanel" class="tab-pane" id="resultTable">
+						<iframe *ngIf="urlAvailable" width="100%" height="100%" [src]="url" frameborder="0"></iframe>
+					</div>
+				</div>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+			</div>
 		</div>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
+	</div>
+</div>
diff --git a/app/result/result.component.ts b/app/result/result.component.ts
@@ -1,18 +1,60 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, OnChanges, Input, Output } from "@angular/core";
+import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 declare var $: any;
 
 @Component({
 	selector: 'query-result',
 	templateUrl: './app/result/result.component.html',
-	inputs: ['mapping', 'config', 'responseHookHelp', 'result_time_taken', 'types', 'selectedTypes', 'result', 'config', 'responseHookHelp', 'result_time_taken']
+	inputs: ['mapping', 'config', 'editorHookHelp', 'urlShare', 'responseHookHelp', 'result_time_taken', 'result_random_token', 'types', 'result', 'config', 'responseHookHelp', 'result_time_taken']
 })
 
-export class ResultComponent implements OnInit {
+export class ResultComponent implements OnInit, OnChanges {
 	public mapping: any;
 	public config: any;
 	public responseHookHelp: any;
+	public url: SafeResourceUrl;
+	public urlShare: any;
+	public editorHookHelp: any;
+	public urlAvailable: boolean = false;
+	@Input() selectedTypes: any;
+	// public dejavuDomain: string = 'http://localhost:1358/';
+	public dejavuDomain: string = window.location.protocol+'//opensource.appbase.io/dejavu/live/';
+
+	constructor(private sanitizer: DomSanitizer) {}
 
 	ngOnInit() {
 		this.responseHookHelp.applyEditor({ readOnly: true });
 	}
+
+	ngOnChanges(changes) {
+		if(changes && changes['result_random_token']) {
+			var prev = changes['result_random_token'].previousValue;
+			var current = changes['result_random_token'].currentValue;
+			if(current && prev !== current && this.editorHookHelp) {
+				var getQuery = this.editorHookHelp.getValue();
+				if(getQuery) {
+					console.log(this.selectedTypes);
+					getQuery = getQuery.trim();
+					getQuery = JSON.parse(getQuery);
+					var queryObj = {
+						query: getQuery,
+						type: this.selectedTypes
+					};
+					this.url = this.sanitizeUrl(this.dejavuDomain);
+					setTimeout(function() {
+						var url = this.dejavuDomain+'#?input_state='+this.urlShare.url;
+						url = url+'&hf=false&sidebar=false&subscribe=false&query='+JSON.stringify(queryObj);
+						this.url = this.sanitizeUrl(url);
+						console.log(this.url);
+					}.bind(this), 300);
+					this.urlAvailable = true;
+				}
+			}
+		}
+	}
+
+	sanitizeUrl(url) {
+		return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+	}
+
 }
diff --git a/assets/css/modal.css b/assets/css/modal.css
@@ -19,13 +19,17 @@
   background: #fff;
   border-radius: 4px;
   border: 3px solid;
-  border-color: #FCC829; }
+  border-color: #FCC829;
+  background: #f7f7f7; }
 
 .modal .modal-header {
   border: 0;
   padding: 5px 15px 0 15px;
   color: #FCC829; }
 
+.modal .modal-footer {
+  border: 0; }
+
 .modal .modal-header .close {
   width: 20px;
   height: 20px;
@@ -108,3 +112,5 @@
     position: relative; }
     #resultModal .modal-dialog .modal-body .CodeMirror {
       height: 100%; }
+    #resultModal .modal-dialog .modal-body .tab-content {
+      height: calc(100% - 30px); }
diff --git a/assets/styles/modal.scss b/assets/styles/modal.scss
@@ -21,12 +21,16 @@
   border-radius: 4px;
   border: 3px solid;
   border-color: $primary-color;
+  background: $grey-bg;
 }
 .modal .modal-header {
   border: 0;
   padding: 5px 15px 0 15px;
   color: $primary-color;
 }
+.modal .modal-footer {
+  border: 0;
+}
 .modal .modal-header .close {
   width: 20px;
   height: 20px;
@@ -111,6 +115,9 @@
       .CodeMirror {
         height: 100%;
       }
+      .tab-content {
+        height: calc(100% - 30px);
+      }
     }
   }
 }