diff --git a/.angular-cli.json b/.angular-cli.json index f66c44f..5460f3c 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -21,9 +21,14 @@ "styles": [ "../node_modules/bulma/css/bulma.css", "../node_modules/font-awesome/css/font-awesome.css", - "styles.scss" + "styles.scss", + "../node_modules/froala-editor/css/froala_editor.pkgd.min.css", + "../node_modules/froala-editor/css/froala_style.min.css" + ], + "scripts": [ + "../node_modules/jquery/dist/jquery.min.js", + "../node_modules/froala-editor/js/froala_editor.pkgd.min.js" ], - "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", diff --git a/package.json b/package.json index 4e498fd..2450d21 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/platform-browser": "4.3.5", "@angular/platform-browser-dynamic": "4.3.5", "@angular/router": "4.3.5", + "angular-froala-wysiwyg": "^1.0.0", "angular2-highcharts": "^0.5.5", "angular2-uuid": "^1.1.1", "bulma": "^0.5.1", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c978e13..5904b7e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,3 +1,5 @@ +import { PostPageComponent } from './blog-page/post-page/post-page.component'; +import { BlogPageComponent } from './blog-page/blog-page.component'; import { NotFoundPageComponent } from './home-page/not-found-page/not-found-page.component'; import { CrudPageComponent } from './home-page/crud-page/crud-page.component'; import { MapsPageComponent } from './maps-page/maps-page.component'; @@ -31,6 +33,8 @@ const routes: Routes = [ { path: 'chart', component: ChartPageComponent }, { path: 'dashboard', component: DashboardPageComponent }, { path: 'maps', component: MapsPageComponent}, + { path: 'blog', component: BlogPageComponent}, + { path: 'blogPost', component: PostPageComponent}, { path: 'chart', component: ChartPageComponent, children: [ { path: '', redirectTo: 'ng2chart', pathMatch: 'full' }, { path: 'ng2chart', component: Ng2chartPageComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d3fe8ed..2b2ac5b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -31,6 +31,9 @@ import { GoogleChartPageComponent } from './home-page/chart-page/google-chart-pa import { HighchartsPageComponent } from './home-page/chart-page/highcharts-page/highcharts-page.component'; import { Ng2GoogleChartsModule } from 'ng2-google-charts'; import { NotFoundPageComponent } from './home-page/not-found-page/not-found-page.component'; +import { BlogPageComponent } from './blog-page/blog-page.component'; +import { PostPageComponent } from './blog-page/post-page/post-page.component'; +import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg'; export function highchartsFactory() { return highcharts; @@ -57,12 +60,16 @@ export function highchartsFactory() { GoogleChartPageComponent, HighchartsPageComponent, NotFoundPageComponent, - FileUploadMasterPageComponent + FileUploadMasterPageComponent, + BlogPageComponent, + PostPageComponent ], imports: [ BrowserModule, AppRoutingModule, SDKBrowserModule.forRoot(), + FroalaEditorModule.forRoot(), + FroalaViewModule.forRoot(), FormsModule, AgmCoreModule.forRoot({ apiKey: 'AIzaSyBOMQvUP42I2WI_70m32U_L1n10dblGezM' diff --git a/src/app/blog-page/blog-page.component.html b/src/app/blog-page/blog-page.component.html new file mode 100644 index 0000000..62ee0dd --- /dev/null +++ b/src/app/blog-page/blog-page.component.html @@ -0,0 +1,81 @@ +
+
+ + Login Success +
+
+ +
+
+ + Wrong username or password +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +Post +
+ + + +
+ test +
+
+
+

+ {{m.posttitle}} +

+
+
+
+ Read More + +
+
+ + \ No newline at end of file diff --git a/src/app/blog-page/blog-page.component.scss b/src/app/blog-page/blog-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/blog-page/blog-page.component.spec.ts b/src/app/blog-page/blog-page.component.spec.ts new file mode 100644 index 0000000..723607b --- /dev/null +++ b/src/app/blog-page/blog-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BlogPageComponent } from './blog-page.component'; + +describe('BlogPageComponent', () => { + let component: BlogPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BlogPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BlogPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/blog-page/blog-page.component.ts b/src/app/blog-page/blog-page.component.ts new file mode 100644 index 0000000..9be56ab --- /dev/null +++ b/src/app/blog-page/blog-page.component.ts @@ -0,0 +1,42 @@ +import { BlogpostApi } from './../../shared/services/custom/Blogpost'; +import { Blogpost } from './../../shared/models/Blogpost'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { RealTime } from './../../shared/services/core/real.time'; +import { FireLoopRef } from './../../shared/models/FireLoopRef'; + +@Component({ + selector: 'app-blog-page', + templateUrl: './blog-page.component.html', + styleUrls: ['./blog-page.component.scss'] +}) +export class BlogPageComponent implements OnInit { + + public item: Blogpost = new Blogpost(); + public blogRef: FireLoopRef; + public BlogpostR: any; + + constructor( + private router: Router, + public BlogpostApi: BlogpostApi, + private rt: RealTime + ) { + + this.rt.onReady().subscribe((status: string) => { + this.blogRef = this.rt.FireLoop.ref(Blogpost); + this.blogRef.on('change').subscribe((BlogpostResult: any) => { + console.log(BlogpostResult, 'isi todos'); + this.BlogpostR = BlogpostResult; + }); + }); + + } + + ngOnInit() { + } + + newPost(){ + this.router.navigate(['/home/blogPost']); + } + +} diff --git a/src/app/blog-page/post-page/post-page.component.html b/src/app/blog-page/post-page/post-page.component.html new file mode 100644 index 0000000..11edd10 --- /dev/null +++ b/src/app/blog-page/post-page/post-page.component.html @@ -0,0 +1,23 @@ + +
+
+
+ +
+
+
+
+ Post +
+ \ No newline at end of file diff --git a/src/app/blog-page/post-page/post-page.component.scss b/src/app/blog-page/post-page/post-page.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/blog-page/post-page/post-page.component.spec.ts b/src/app/blog-page/post-page/post-page.component.spec.ts new file mode 100644 index 0000000..0f18659 --- /dev/null +++ b/src/app/blog-page/post-page/post-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostPageComponent } from './post-page.component'; + +describe('PostPageComponent', () => { + let component: PostPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PostPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PostPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/blog-page/post-page/post-page.component.ts b/src/app/blog-page/post-page/post-page.component.ts new file mode 100644 index 0000000..329e6b9 --- /dev/null +++ b/src/app/blog-page/post-page/post-page.component.ts @@ -0,0 +1,42 @@ +import { BlogpostApi } from './../../../shared/services/custom/Blogpost'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import * as moment from 'moment'; + +@Component({ + selector: 'app-post-page', + templateUrl: './post-page.component.html', + styleUrls: ['./post-page.component.scss'] +}) +export class PostPageComponent implements OnInit { + + editorContent: any; + public postContent: any; + public postDate: any; + public postTitle: any; + + constructor( + public blogPostApi: BlogpostApi, + private router: Router, + ) { } + + ngOnInit() { + } + + submitPost(){ + console.log('isi wysiwyg',this.editorContent) + + this.blogPostApi.create( + { + postcontent: this.editorContent, + postdate: moment().format('YYYY-MM-DD'), + posttitle: this.postTitle + + } + ).subscribe((result) => + this.router.navigate(['/home/blog']) + ); + console.log('Sign Up Sukses'); + } + +} diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index 437b015..f702395 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -9,6 +9,9 @@ Maps + + Blog + Chat @@ -71,6 +74,11 @@ Maps +
  • + + Maps + +
  • Chat diff --git a/src/shared/index.ts b/src/shared/index.ts index ebef823..8496d3d 100644 --- a/src/shared/index.ts +++ b/src/shared/index.ts @@ -48,8 +48,6 @@ import { SocketBrowser } from './sockets/socket.browser'; import { SocketDriver } from './sockets/socket.driver'; import { SocketConnection } from './sockets/socket.connections'; import { RealTime } from './services/core/real.time'; -import { RoleMappingApi } from './services/custom/RoleMapping'; -import { RoleApi } from './services/custom/Role'; import { UserPhotoApi } from './services/custom/UserPhoto'; import { UserCredentialApi } from './services/custom/UserCredential'; import { StorageSimpleUploadApi } from './services/custom/StorageSimpleUpload'; @@ -59,6 +57,7 @@ import { ChatdetailApi } from './services/custom/Chatdetail'; import { StorageUploadApi } from './services/custom/StorageUpload'; import { MapApi } from './services/custom/Map'; import { ProfiledataApi } from './services/custom/Profiledata'; +import { BlogpostApi } from './services/custom/Blogpost'; /** * @module SDKBrowserModule * @description @@ -90,8 +89,6 @@ export class SDKBrowserModule { JSONSearchParams, SDKModels, RealTime, - RoleMappingApi, - RoleApi, UserPhotoApi, UserCredentialApi, StorageSimpleUploadApi, @@ -101,6 +98,7 @@ export class SDKBrowserModule { StorageUploadApi, MapApi, ProfiledataApi, + BlogpostApi, internalStorageProvider, { provide: SDKStorage, useClass: StorageBrowser }, { provide: SocketDriver, useClass: SocketBrowser } diff --git a/src/shared/models/Blogpost.ts b/src/shared/models/Blogpost.ts new file mode 100644 index 0000000..ed29bd9 --- /dev/null +++ b/src/shared/models/Blogpost.ts @@ -0,0 +1,69 @@ +/* tslint:disable */ + +declare var Object: any; +export interface BlogpostInterface { + "postdate"?: Date; + "posttitle"?: string; + "postcontent"?: string; + "id"?: number; +} + +export class Blogpost implements BlogpostInterface { + "postdate": Date; + "posttitle": string; + "postcontent": string; + "id": number; + constructor(data?: BlogpostInterface) { + Object.assign(this, data); + } + /** + * The name of the model represented by this $resource, + * i.e. `Blogpost`. + */ + public static getModelName() { + return "Blogpost"; + } + /** + * @method factory + * @author Jonathan Casarrubias + * @license MIT + * This method creates an instance of Blogpost for dynamic purposes. + **/ + public static factory(data: BlogpostInterface): Blogpost{ + return new Blogpost(data); + } + /** + * @method getModelDefinition + * @author Julien Ledun + * @license MIT + * This method returns an object that represents some of the model + * definitions. + **/ + public static getModelDefinition() { + return { + name: 'Blogpost', + plural: 'Blogposts', + path: 'Blogposts', + properties: { + "postdate": { + name: 'postdate', + type: 'Date' + }, + "posttitle": { + name: 'posttitle', + type: 'string' + }, + "postcontent": { + name: 'postcontent', + type: 'string' + }, + "id": { + name: 'id', + type: 'number' + }, + }, + relations: { + } + } + } +} diff --git a/src/shared/models/index.ts b/src/shared/models/index.ts index d74f933..3d81228 100644 --- a/src/shared/models/index.ts +++ b/src/shared/models/index.ts @@ -1,6 +1,4 @@ /* tslint:disable */ -export * from './RoleMapping'; -export * from './Role'; export * from './UserPhoto'; export * from './UserCredential'; export * from './StorageSimpleUpload'; @@ -10,5 +8,6 @@ export * from './Chatdetail'; export * from './StorageUpload'; export * from './Map'; export * from './Profiledata'; +export * from './Blogpost'; export * from './BaseModels'; export * from './FireLoopRef'; diff --git a/src/shared/services/custom/Blogpost.ts b/src/shared/services/custom/Blogpost.ts new file mode 100644 index 0000000..5b94305 --- /dev/null +++ b/src/shared/services/custom/Blogpost.ts @@ -0,0 +1,103 @@ +/* tslint:disable */ +import { Injectable, Inject, Optional } from '@angular/core'; +import { Http, Response } from '@angular/http'; +import { SDKModels } from './SDKModels'; +import { BaseLoopBackApi } from '../core/base.service'; +import { LoopBackConfig } from '../../lb.config'; +import { LoopBackAuth } from '../core/auth.service'; +import { LoopBackFilter, } from '../../models/BaseModels'; +import { JSONSearchParams } from '../core/search.params'; +import { ErrorHandler } from '../core/error.service'; +import { Subject } from 'rxjs/Subject'; +import { Observable } from 'rxjs/Rx'; +import { Blogpost } from '../../models/Blogpost'; +import { SocketConnection } from '../../sockets/socket.connections'; + + +/** + * Api services for the `Blogpost` model. + */ +@Injectable() +export class BlogpostApi extends BaseLoopBackApi { + + constructor( + @Inject(Http) protected http: Http, + @Inject(SocketConnection) protected connection: SocketConnection, + @Inject(SDKModels) protected models: SDKModels, + @Inject(LoopBackAuth) protected auth: LoopBackAuth, + @Inject(JSONSearchParams) protected searchParams: JSONSearchParams, + @Optional() @Inject(ErrorHandler) protected errorHandler: ErrorHandler + ) { + super(http, connection, models, auth, searchParams, errorHandler); + } + + /** + * Patch an existing model instance or insert a new one into the data source. + * + * @param {object} data Request data. + * + * - `data` – `{object}` - Model instance data + * + * @returns {object} An empty reference that will be + * populated with the actual data once the response is returned + * from the server. + * + * + * (The remote method definition does not provide any description. + * This usually means the response is a `Blogpost` object.) + * + */ + public patchOrCreate(data: any = {}, customHeaders?: Function): Observable { + let _method: string = "PATCH"; + let _url: string = LoopBackConfig.getPath() + "/" + LoopBackConfig.getApiVersion() + + "/Blogposts"; + let _routeParams: any = {}; + let _postBody: any = { + data: data + }; + let _urlParams: any = {}; + let result = this.request(_method, _url, _routeParams, _urlParams, _postBody, null, customHeaders); + return result; + } + + /** + * Patch attributes for a model instance and persist it into the data source. + * + * @param {any} id Blogpost id + * + * @param {object} data Request data. + * + * - `data` – `{object}` - An object of model property name/value pairs + * + * @returns {object} An empty reference that will be + * populated with the actual data once the response is returned + * from the server. + * + * + * (The remote method definition does not provide any description. + * This usually means the response is a `Blogpost` object.) + * + */ + public patchAttributes(id: any, data: any = {}, customHeaders?: Function): Observable { + let _method: string = "PATCH"; + let _url: string = LoopBackConfig.getPath() + "/" + LoopBackConfig.getApiVersion() + + "/Blogposts/:id"; + let _routeParams: any = { + id: id + }; + let _postBody: any = { + data: data + }; + let _urlParams: any = {}; + let result = this.request(_method, _url, _routeParams, _urlParams, _postBody, null, customHeaders); + return result; + } + + /** + * The name of the model represented by this $resource, + * i.e. `Blogpost`. + */ + public getModelName() { + return "Blogpost"; + } +} diff --git a/src/shared/services/custom/SDKModels.ts b/src/shared/services/custom/SDKModels.ts index 68dd8b9..6657ac5 100644 --- a/src/shared/services/custom/SDKModels.ts +++ b/src/shared/services/custom/SDKModels.ts @@ -1,7 +1,5 @@ /* tslint:disable */ import { Injectable } from '@angular/core'; -import { RoleMapping } from '../../models/RoleMapping'; -import { Role } from '../../models/Role'; import { UserPhoto } from '../../models/UserPhoto'; import { UserCredential } from '../../models/UserCredential'; import { StorageSimpleUpload } from '../../models/StorageSimpleUpload'; @@ -11,6 +9,7 @@ import { Chatdetail } from '../../models/Chatdetail'; import { StorageUpload } from '../../models/StorageUpload'; import { Map } from '../../models/Map'; import { Profiledata } from '../../models/Profiledata'; +import { Blogpost } from '../../models/Blogpost'; export interface Models { [name: string]: any } @@ -18,8 +17,6 @@ export interface Models { [name: string]: any } export class SDKModels { private models: Models = { - RoleMapping: RoleMapping, - Role: Role, UserPhoto: UserPhoto, UserCredential: UserCredential, StorageSimpleUpload: StorageSimpleUpload, @@ -29,6 +26,7 @@ export class SDKModels { StorageUpload: StorageUpload, Map: Map, Profiledata: Profiledata, + Blogpost: Blogpost, }; diff --git a/src/shared/services/custom/index.ts b/src/shared/services/custom/index.ts index 567725d..46c2e6e 100644 --- a/src/shared/services/custom/index.ts +++ b/src/shared/services/custom/index.ts @@ -1,6 +1,4 @@ /* tslint:disable */ -export * from './RoleMapping'; -export * from './Role'; export * from './UserPhoto'; export * from './UserCredential'; export * from './StorageSimpleUpload'; @@ -10,5 +8,6 @@ export * from './Chatdetail'; export * from './StorageUpload'; export * from './Map'; export * from './Profiledata'; +export * from './Blogpost'; export * from './SDKModels'; export * from './logger.service';