diff --git a/package-lock.json b/package-lock.json index 58dae1d..fdedee8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -964,8 +964,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "atob": { "version": "2.1.1", @@ -1120,6 +1119,22 @@ "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", "dev": true }, + "backendless": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/backendless/-/backendless-4.4.4.tgz", + "integrity": "sha512-LhNT6cKwLWaVjiIrvWFMlMscj/ik9KG9e1C/6R5DPMXXSP4VpeOkb9ezqlFm0h4jlIOMXuhvjmcJlzWuOTw7DQ==", + "requires": { + "backendless-request": "0.0.11" + } + }, + "backendless-request": { + "version": "0.0.11", + "resolved": "https://registry.npmjs.org/backendless-request/-/backendless-request-0.0.11.tgz", + "integrity": "sha512-dCph0iqwxl3AniJzb5KubZlVdUsqU2fxIjyeFq3un9OndScE8RDpUYG+PaI7q2FPBV4v03E4jenTa53IXjJdvw==", + "requires": { + "form-data": "2.3.2" + } + }, "backo2": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", @@ -1851,7 +1866,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", - "dev": true, "requires": { "delayed-stream": "1.0.0" } @@ -2415,8 +2429,7 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, "delegates": { "version": "1.0.0", @@ -3508,7 +3521,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", - "dev": true, "requires": { "asynckit": "0.4.0", "combined-stream": "1.0.6", @@ -6272,14 +6284,12 @@ "mime-db": { "version": "1.33.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", - "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==", - "dev": true + "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" }, "mime-types": { "version": "2.1.18", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", - "dev": true, "requires": { "mime-db": "1.33.0" } diff --git a/package.json b/package.json index 1aea5fb..44e06ce 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "^6.0.3", "@angular/platform-browser-dynamic": "^6.0.3", "@angular/router": "^6.0.3", + "backendless": "^4.4.4", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "^0.8.26" diff --git a/src/app/add-new-person/add-new-person.component.css b/src/app/add-new-person/add-new-person.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/add-new-person/add-new-person.component.html b/src/app/add-new-person/add-new-person.component.html new file mode 100644 index 0000000..6f36dbf --- /dev/null +++ b/src/app/add-new-person/add-new-person.component.html @@ -0,0 +1,33 @@ +

+ +

+ + diff --git a/src/app/add-new-person/add-new-person.component.spec.ts b/src/app/add-new-person/add-new-person.component.spec.ts new file mode 100644 index 0000000..dcff3b8 --- /dev/null +++ b/src/app/add-new-person/add-new-person.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddNewPersonComponent } from './add-new-person.component'; + +describe('AddNewPersonComponent', () => { + let component: AddNewPersonComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddNewPersonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddNewPersonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/add-new-person/add-new-person.component.ts b/src/app/add-new-person/add-new-person.component.ts new file mode 100644 index 0000000..ca5c7c2 --- /dev/null +++ b/src/app/add-new-person/add-new-person.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import { Person, PersonsService } from '../persons.service'; + +@Component({ + selector: 'app-add-new-person', + templateUrl: './add-new-person.component.html', + styleUrls: ['./add-new-person.component.css'] +}) +export class AddNewPersonComponent implements OnInit { + + @ViewChild('closeBtn') closeBtn: ElementRef; + + public newPerson: Person; + + constructor(private personsService: PersonsService) { + } + + ngOnInit() { + this.newPerson = new Person(); + } + + onSubmit() { + if (this.newPerson.name && this.newPerson.address) { + this.personsService.add(this.newPerson) + .then(() => { + this.newPerson = new Person(); + }); + + this.closeBtn.nativeElement.click(); + + } else { + alert('need to fill all the fields'); + } + } +} + diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..6465aa5 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,11 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- +
+
+

+ Backendless Angular Addresses Book +

+
+ + + +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..3699291 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,27 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import Backendless from 'backendless'; +import { environment } from '../environments/environment'; import { AppComponent } from './app.component'; +import { PersonsListComponent } from './persons-list/persons-list.component'; +import { AddNewPersonComponent } from './add-new-person/add-new-person.component'; + +Backendless.initApp(environment.backendless.APP_ID, environment.backendless.API_KEY); @NgModule({ declarations: [ - AppComponent + AppComponent, + PersonsListComponent, + AddNewPersonComponent ], imports: [ - BrowserModule + BrowserModule, + FormsModule ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/app/persons-list/persons-list.component.css b/src/app/persons-list/persons-list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/persons-list/persons-list.component.html b/src/app/persons-list/persons-list.component.html new file mode 100644 index 0000000..df78d22 --- /dev/null +++ b/src/app/persons-list/persons-list.component.html @@ -0,0 +1,8 @@ + diff --git a/src/app/persons-list/persons-list.component.spec.ts b/src/app/persons-list/persons-list.component.spec.ts new file mode 100644 index 0000000..6975bad --- /dev/null +++ b/src/app/persons-list/persons-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PersonsListComponent } from './persons-list.component'; + +describe('PersonsListComponent', () => { + let component: PersonsListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PersonsListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PersonsListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/persons-list/persons-list.component.ts b/src/app/persons-list/persons-list.component.ts new file mode 100644 index 0000000..18dca0c --- /dev/null +++ b/src/app/persons-list/persons-list.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Person, PersonsService } from '../persons.service'; + +@Component({ + selector: 'app-persons-list', + templateUrl: './persons-list.component.html', + styleUrls: ['./persons-list.component.css'] +}) +export class PersonsListComponent implements OnInit { + + constructor(private personsService: PersonsService) { + } + + ngOnInit() { + this.personsService.loadAll(); + } + + get persons(): Person[] { + return this.personsService.persons; + } +} + diff --git a/src/app/persons.service.spec.ts b/src/app/persons.service.spec.ts new file mode 100644 index 0000000..038b7cb --- /dev/null +++ b/src/app/persons.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { PersonsService } from './persons.service'; + +describe('PersonsService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [PersonsService] + }); + }); + + it('should be created', inject([PersonsService], (service: PersonsService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/persons.service.ts b/src/app/persons.service.ts new file mode 100644 index 0000000..8d09c87 --- /dev/null +++ b/src/app/persons.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import Backendless from 'backendless'; + +export class Person { + public name: string; + public address: string; +} + +const PersonsStore = Backendless.Data.of(Person); + +@Injectable({ + providedIn: 'root' +}) +export class PersonsService { + + public persons: Person[] = []; + + loadAll() { + PersonsStore.find().then((persons: Person[]) => { + this.persons = persons; + }); + } + + add(newPerson: Person) { + return PersonsStore.save(newPerson).then((savedPerson: Person) => { + this.persons.push(savedPerson); + }); + } +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..dc227c1 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,8 @@ export const environment = { - production: true + production: true, + + backendless: { + APP_ID: 'C7AAAD50-D4AF-FC0C-FF2C-3296EC092800', + API_KEY: 'AE50EECB-67A4-435D-FFCC-C93A14C11800' + } }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 012182e..ec30306 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,12 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + + backendless: { + APP_ID: 'C7AAAD50-D4AF-FC0C-FF2C-3296EC092800', + API_KEY: 'AE50EECB-67A4-435D-FFCC-C93A14C11800' + } }; /* diff --git a/src/index.html b/src/index.html index e385f1c..565a0da 100644 --- a/src/index.html +++ b/src/index.html @@ -7,8 +7,19 @@ + + + + - +