Skip to content

Instantly share code, notes, and snippets.

@ntorrey
Created September 23, 2022 13:51
Show Gist options
  • Save ntorrey/c04f9c57c590892f0f5f94aa3a673af1 to your computer and use it in GitHub Desktop.
Save ntorrey/c04f9c57c590892f0f5f94aa3a673af1 to your computer and use it in GitHub Desktop.
Simple angular component (using Ionic UI components) to test surrealDB.
import {Component} from '@angular/core'
import {take} from 'rxjs/operators'
import {HttpClient, HttpHeaders} from '@angular/common/http'
import {Buffer} from 'Buffer'
@Component({
selector: 'surreal',
template: `
<ion-header>
<ion-toolbar>
<ion-title>Surreal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="leftside">
<ion-button (click)="runCommand(textarea.value)">Run</ion-button>
<textarea #textarea>{{ json }}</textarea>
<ion-card>
<ion-card-header>
<ion-card-title>Presets</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-list>
<ion-item (click)="textarea.value = 'SELECT * FROM schedule'">
<ion-label>SELECT * FROM schedule</ion-label>
</ion-item>
<ion-item (click)="textarea.value = 'CREATE [record id here] SET field = \\'value\\''">
<ion-label>CREATE [record id here] SET field = 'value'</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>
<textarea class="rightside">{{ json }}</textarea>
</ion-content>
`,
styles: [
`
.leftside {
float: left;
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
}
.rightside {
float: right;
width: 50%;
height: 100%;
overflow-y: auto;
resize: none;
}
`
]
})
export class SurrealGistPage {
// You'll need to follow the instructions at https://surrealdb.com/docs/start to get the server going first.
header = new HttpHeaders()
.set('Accept', 'application/json')
.set('Authorization', 'Basic ' + Buffer.from('root:root').toString('base64'))
.set('Content-Type', 'application/json')
.set('NS', 'test')
.set('DB', 'test')
json = ''
constructor(private http: HttpClient) {}
runCommand(queryText) {
return this.http
.post('http://127.0.0.1:8000/sql', queryText, {headers: this.header})
.pipe(take(1))
.subscribe((res) => {
this.json = JSON.stringify(res, null, 2)
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment