Skip to content
This repository was archived by the owner on Aug 16, 2022. It is now read-only.

Commit 3ed75d7

Browse files
ElecTreeFryingElecTreeFrying
committed
chore: rtdb create and read rewrite
1 parent d5866c6 commit 3ed75d7

14 files changed

+471
-15
lines changed

‎.firebaserc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"projects": {
3+
"default": "angularfire2-demo-app"
4+
}
5+
}

‎firebase.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"hosting": {
3+
"public": "dist",
4+
"ignore": [
5+
"firebase.json",
6+
"**/.*",
7+
"**/node_modules/**"
8+
],
9+
"rewrites": [
10+
{
11+
"source": "**",
12+
"destination": "/index.html"
13+
}
14+
]
15+
}
16+
}

‎src/app/app.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
<div>
1111
<mat-accordion displayMode="flat" multi="true">
12-
<mat-expansion-panel #panel
12+
<mat-expansion-panel #panel expanded
1313
*ngFor="let item of panel"
1414
[hideToggle]="item.list.length === 0 ? true : false"
1515
(click)="item.list.length === 0 ? panel.close() : 0">

‎src/app/rtdb/component/create/create.component.html

Lines changed: 100 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,100 @@
1-
<p>
2-
create works!
3-
</p>
1+
<div id="wrapper">
2+
<div>
3+
<h2>Object</h2>
4+
<div class="divider">
5+
<mat-divider></mat-divider>
6+
</div>
7+
8+
<div id="content">
9+
10+
<div>
11+
<form [formGroup]="objectForm">
12+
13+
<mat-form-field color="accent" appearance="outline">
14+
<mat-label>Username</mat-label>
15+
<input matInput autocomplete="off" type="text" formControlName="username">
16+
<mat-error *ngIf="objectForm.get('username')?.errors?.required">This is required.</mat-error>
17+
</mat-form-field>
18+
<br>
19+
<mat-form-field color="accent" appearance="outline">
20+
<mat-label>Password</mat-label>
21+
<input matInput autocomplete="off" type="text" formControlName="password">
22+
<mat-error *ngIf="objectForm.get('password')?.errors?.required">This is required.</mat-error>
23+
</mat-form-field>
24+
<br>
25+
<mat-form-field color="accent" appearance="outline">
26+
<mat-label>Favaorite number</mat-label>
27+
<input matInput autocomplete="off" type="number" formControlName="number">
28+
<mat-error *ngIf="objectForm.get('number')?.errors?.required">This is required.</mat-error>
29+
</mat-form-field>
30+
31+
<br>
32+
<button mat-raised-button color="accent" type="button" (click)="postObject(true)">CREATE OBJECT USING ( SET )</button>
33+
<br><br>
34+
<button mat-raised-button color="accent" type="button" (click)="postObject(false)">CREATE OBJECT USING ( POST )</button>
35+
</form>
36+
</div>
37+
38+
<div>
39+
<h4>Realtime database ( Object ) snapshot</h4>
40+
<br><br>
41+
<mat-card>
42+
<mat-card-content>
43+
<p><strong>Username:</strong> {{ ( object | async )?.username }}</p>
44+
<p><strong>Password:</strong> {{ ( object | async )?.password }}</p>
45+
<p><strong>Favaorite number:</strong> {{ ( object | async )?.number }}</p>
46+
</mat-card-content>
47+
</mat-card>
48+
</div>
49+
50+
</div>
51+
</div>
52+
53+
<div>
54+
<h2>List</h2>
55+
<div class="divider">
56+
<mat-divider></mat-divider>
57+
</div>
58+
59+
<div id="content">
60+
61+
<div>
62+
<form [formGroup]="listForm">
63+
64+
<mat-form-field color="accent" appearance="outline">
65+
<mat-label>Username</mat-label>
66+
<input matInput autocomplete="off" type="text" formControlName="username">
67+
<mat-error *ngIf="listForm.get('username')?.errors?.required">This is required.</mat-error>
68+
</mat-form-field>
69+
<br>
70+
<mat-form-field color="accent" appearance="outline">
71+
<mat-label>Password</mat-label>
72+
<input matInput autocomplete="off" type="text" formControlName="password">
73+
<mat-error *ngIf="listForm.get('password')?.errors?.required">This is required.</mat-error>
74+
</mat-form-field>
75+
<br>
76+
<mat-form-field color="accent" appearance="outline">
77+
<mat-label>Favaorite number</mat-label>
78+
<input matInput autocomplete="off" type="number" formControlName="number">
79+
<mat-error *ngIf="listForm.get('number')?.errors?.required">This is required.</mat-error>
80+
</mat-form-field>
81+
<br>
82+
<button mat-raised-button color="accent" type="button" (click)="postList()">PUSH DOCUMENT TO LIST USING ( PUSH )</button>
83+
</form>
84+
</div>
85+
86+
<div>
87+
<h4>Realtime database ( List ) snapshot</h4>
88+
<br><br>
89+
<mat-card *ngFor="let item of list | async">
90+
<mat-card-content>
91+
<p><strong>Username:</strong> {{ item?.username }}</p>
92+
<p><strong>Password:</strong> {{ item?.password }}</p>
93+
<p><strong>Favaorite number:</strong> {{ item?.number }}</p>
94+
</mat-card-content>
95+
</mat-card>
96+
</div>
97+
98+
</div>
99+
</div>
100+
</div>

‎src/app/rtdb/component/create/create.component.scss

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
#wrapper {
2+
3+
margin-bottom: 7vh;
4+
5+
.divider {
6+
width: 80%;
7+
margin-bottom: 3vh;
8+
}
9+
10+
.mat-raised-button,
11+
.mat-form-field {
12+
width: 350px;
13+
}
14+
15+
> div {
16+
}
17+
18+
> div:First-child {
19+
margin-bottom: 5vh;
20+
21+
#content {
22+
display: flex;
23+
24+
> div:First-child {
25+
flex: 1 1 30%;
26+
}
27+
28+
> div:last-child {
29+
flex: 1 1 70%;
30+
padding-left: 2vw;
31+
32+
.mat-card {
33+
width: 350px;
34+
}
35+
}
36+
}
37+
}
38+
39+
> div:last-child {
40+
41+
#content {
42+
display: flex;
43+
44+
> div:First-child {
45+
flex: 1 1 30%;
46+
}
47+
48+
> div:last-child {
49+
flex: 1 1 70%;
50+
padding-left: 2vw;
51+
52+
.mat-card {
53+
width: 350px;
54+
margin-bottom: 2vh;
55+
}
56+
}
57+
}
58+
}
59+
60+
}

‎src/app/rtdb/component/create/create.component.ts

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Inject } from '@angular/core';
2+
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
import { Observable } from 'rxjs/Observable';
4+
5+
import { CreateService } from './create.service';
6+
import { ReadService } from '../read/read.service';
27

38
@Component({
49
selector: 'app-create',
@@ -7,9 +12,52 @@ import { Component, OnInit } from '@angular/core';
712
})
813
export class CreateComponent implements OnInit {
914

10-
constructor() { }
15+
objectForm: FormGroup;
16+
listForm: FormGroup;
17+
18+
object: any;
19+
list: any;
20+
21+
constructor(
22+
@Inject(FormBuilder) public fb: FormBuilder,
23+
private create: CreateService,
24+
) {
25+
this.objectForm = fb.group({
26+
'username': [ '', [ Validators.required ] ],
27+
'password': [ '', [ Validators.required ] ],
28+
'number': [ '', [ Validators.required ] ],
29+
});
30+
31+
this.listForm = fb.group({
32+
'username': [ '', [ Validators.required ] ],
33+
'password': [ '', [ Validators.required ] ],
34+
'number': [ '', [ Validators.required ] ],
35+
});
36+
}
1137

1238
ngOnInit() {
39+
this.object = this.create.objectValueChanges;
40+
this.list = this.create.listValueChanges;
41+
}
42+
43+
postObject(option: boolean) {
44+
if (this.objectForm.invalid) return;
45+
46+
const objectForm = this.objectForm.value;
47+
48+
option
49+
? this.create.createObjectWithSet = objectForm
50+
: this.create.createObjectWithUpdate = objectForm;
51+
52+
}
53+
54+
postList() {
55+
if (this.listForm.invalid) return;
56+
57+
const listForm = this.listForm.value;
58+
59+
this.create.createListWithPush = listForm;
60+
1361
}
1462

1563
}

‎src/app/rtdb/component/create/create.service.ts

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Injectable } from '@angular/core';
2+
import { AngularFireDatabase, AngularFireObject, AngularFireList } from 'angularfire2/database';
3+
import { map } from 'rxjs/operators'
4+
5+
@Injectable({
6+
providedIn: 'root'
7+
})
8+
export class CreateService {
9+
10+
private objectRef: AngularFireObject<any>;
11+
private listRef: AngularFireList<any>;
12+
13+
constructor(private db: AngularFireDatabase) {
14+
this.objectRef = db.object<any>('rtdb-create-object');
15+
this.listRef = db.list<any>('rtdb-create-list');
16+
}
17+
18+
// OBJECT
19+
20+
set createObjectWithSet(object: any) {
21+
22+
this.objectRef.set(object);
23+
24+
}
25+
26+
set createObjectWithUpdate(object: any) {
27+
28+
this.objectRef.update(object);
29+
30+
}
31+
32+
33+
// LIST
34+
35+
set createListWithPush(list: any) {
36+
37+
this.listRef.push(list);
38+
39+
}
40+
41+
42+
43+
44+
/*
45+
HELPER FUNCTIONS
46+
*/
47+
get objectValueChanges() { return this.objectRef.valueChanges(); } get listValueChanges() { return this.listRef.valueChanges().pipe( map((values: any[]) => values.reverse()) ); }
48+
49+
}

‎src/app/rtdb/rtdb.service.ts renamed to ‎src/app/rtdb/component/delete/delete.service.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
33
@Injectable({
44
providedIn: 'root'
55
})
6-
export class RtdbService {
6+
export class DeleteService {
77

88
constructor() { }
99
}

‎src/app/rtdb/component/read/read.component.html

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,45 @@
1-
<p>
2-
read works!
3-
</p>
1+
<div id="wrapper">
2+
<div>
3+
<h2>Object</h2>
4+
<div class="divider">
5+
<mat-divider></mat-divider>
6+
</div>
7+
8+
<div id="content">
9+
<h4>Realtime database ( Object ) snapshot</h4>
10+
<br>
11+
<button mat-raised-button color="accent" (click)="objectValueChanges()">READ OBJECT USING ( VALUECHANGES )</button>
12+
<button mat-raised-button color="accent" (click)="objectSnapshotChanges()">READ OBJECT USING ( SNAPSHOTCHANGES )</button>
13+
<br>
14+
<mat-card>
15+
<mat-card-content>
16+
<p><strong>Username:</strong> {{ ( object | async )?.username }}</p>
17+
<p><strong>Password:</strong> {{ ( object | async )?.password }}</p>
18+
<p><strong>Favaorite number:</strong> {{ ( object | async )?.number }}</p>
19+
</mat-card-content>
20+
</mat-card>
21+
</div>
22+
</div>
23+
24+
<div>
25+
<h2>List</h2>
26+
<div class="divider">
27+
<mat-divider></mat-divider>
28+
</div>
29+
30+
<h4>Realtime database ( List ) snapshot</h4>
31+
<br>
32+
<button mat-raised-button color="accent" (click)="listValueChanges()">READ LIST COLLECTION WITH ( VALUECHANGES )</button>
33+
<button mat-raised-button color="accent" (click)="listSnapshotChanges()">READ LIST COLLECTION WITH ( SNAPSHOTCHANGES )</button>
34+
<br>
35+
<div id="content">
36+
<mat-card *ngFor="let item of list | async">
37+
<mat-card-content>
38+
<p><strong>Name:</strong> {{ item?.name }}</p>
39+
<p><strong>Username:</strong> {{ item?.username }}</p>
40+
<p><strong>Favaorite number:</strong> {{ item?.number }}</p>
41+
</mat-card-content>
42+
</mat-card>
43+
</div>
44+
</div>
45+
</div>

0 commit comments

Comments
 (0)