Feature/temp

.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",

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",

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 },

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'

src/app/blog-page/blog-page.component.html

@@ -0,0 +1,81 @@
+<div [ngStyle]="{'display':displaySuccess}" class="notif" >
+  <div class="notification is-success">
+    <button class="delete" (click)="toggle()"></button>
+    Login Success
+  </div>
+</div>
+
+<div [ngStyle]="{'display':displayFailed}" class="notif">
+  <div class="notification is-danger">
+    <button class="delete" (click)="toggle()"></button>
+    Wrong username or password
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child">
+    </article>
+  </div>
+  <div class="tile is-parent">
+  </div>
+  <div class="tile is-parent">
+  </div>
+  <div class="tile is-parent">
+  </div>
+</div>
+
+<a class="button is-success" (click)="newPost()" >Post</a>
+<br/>
+
+<!-- <div style=" margin: auto; padding: 10%;">
+  <div class="tile is-ancestor">
+    <div class="tile is-vertical is-9">
+      <div class="tile">
+        <div class="tile is-parent is-vertical"> 
+
+        </div>
+        <div class="tile is-parent is-8 "> 
+          <article class="tile is-child box">-->
+
+              <div class="card" *ngFor="let m of BlogpostResult | async">
+                  test
+              </div>
+            <div class="card" *ngFor="let m of BlogpostR">
+              <header class="card-header">
+                <p class="card-header-title">
+                    {{m.posttitle}}
+                </p>
+              </header>
+              <div class="card-content">
+                <div [froalaView]="m.postcontent"></div>
+                  <a>Read More</a>
+                  <!-- <br>
+                    <small>11:09 PM - 1 Jan 2016</small>
+                  <br> -->
+              </div>
+            </div>
+            <!--<br>
+             <div class="card">
+                <header class="card-header">
+                  <p class="card-header-title">
+                      Lorem Ipsum has been the industry
+                  </p>
+                </header>
+                <div class="card-content">
+                  <div class="content">
+                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
+                      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
+                      when an unknown printer took a galley of type and scrambled it to make a 
+                      type specimen book. It has survived not only five centuries, 
+                      but also the leap into electronic type....
+                  </div>
+                    <a>Read More</a>
+                </div>
+              </div> -->
+           <!--</article>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->

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<BlogPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BlogPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlogPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<Blogpost>;
+  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>(Blogpost);
+      this.blogRef.on('change').subscribe((BlogpostResult: any) => {
+        console.log(BlogpostResult, 'isi todos');
+        this.BlogpostR = BlogpostResult;
+      });
+    });
+
+  }
+
+  ngOnInit() {
+  }
+
+  newPost(){
+    this.router.navigate(['/home/blogPost']);
+  }
+
+}

src/app/blog-page/post-page/post-page.component.html

@@ -0,0 +1,23 @@
+<!-- <div style=" margin: auto; padding: 10%;">
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-9">
+        <div class="tile">
+          <div class="tile is-parent is-vertical"> 
+
+          </div>
+          <div class="tile is-parent is-8 ">  -->
+            <article class="tile is-child box">
+                <div class="field">
+                    <div class="control">
+                      <input class="input" type="text" placeholder="Blog Title" [(ngModel)]="postTitle">
+                    </div>
+                  </div>
+              <div [froalaEditor] [(froalaModel)]="editorContent"></div>
+              <br>
+              <a class="button is-success" (click)="submitPost()">Post</a>
+            </article>
+          <!-- </div>
+        </div>
+      </div>
+    </div>
+  </div>               -->

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<PostPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PostPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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');
+  }
+
+}

src/app/home-page/home-page.component.html

@@ -9,6 +9,9 @@
         <a [routerLink]="['/home/maps']" routerLinkActive="active" class="item">
           <span class="icon"><i class="fa fa-map-marker"></i></span><span class="name">Maps</span>
         </a>
+        <a [routerLink]="['/home/blog']" routerLinkActive="active" class="item">
+          <span class="icon"><i class="fa fa-rss"></i></span><span class="name">Blog</span>
+        </a>
         <a [routerLink]="['/home/chat']" routerLinkActive="active" class="item">
           <span class="icon"><i class="fa fa-users"></i></span><span class="name">Chat</span>
         </a>
@@ -71,6 +74,11 @@
               <span class="icon"><i class="fa fa-map-marker"></i></span><span class="name">Maps</span>
             </a>
           </li>
+          <li>
+            <a [routerLink]="['/home/blog']" routerLinkActive="active" class="item" (click)="toggleMenu()">
+              <span class="icon"><i class="fa fa-rss"></i></span><span class="name">Maps</span>
+            </a>
+          </li>
           <li>
             <a [routerLink]="['/home/chat']" routerLinkActive="active" class="item" (click)="toggleMenu()">
               <span class="icon"><i class="fa fa-users"></i></span><span class="name">Chat</span>

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 }