push

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

zlg/ionic.config.json

@@ -1,8 +1,7 @@
 {
   "name": "zlg",
-  "app_id": "",
-  "type": "ionic-angular",
   "integrations": {
     "cordova": {}
-  }
-}
+  },
+  "type": "ionic-angular"
+}

zlg/package.json

@@ -15,7 +15,7 @@
     "@angular/common": "5.2.11",
     "@angular/compiler": "5.2.11",
     "@angular/compiler-cli": "5.2.11",
-    "@angular/core": "5.2.11",
+    "@angular/core": "^5.2.11",
     "@angular/forms": "5.2.11",
     "@angular/http": "5.2.11",
     "@angular/platform-browser": "5.2.11",
@@ -23,7 +23,10 @@
     "@ionic-native/core": "~4.10.0",
     "@ionic-native/splash-screen": "~4.10.0",
     "@ionic-native/status-bar": "~4.10.0",
+    "@ionic/lab": "^1.0.0",
     "@ionic/storage": "2.1.3",
+    "cordova": "^8.0.0",
+    "ionic": "^4.0.0",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
     "ng-socket-io": "^0.2.4",

zlg/src/pages/home/home.html

@@ -1,9 +1,8 @@
 <ion-header>
   <ion-navbar>
-    <button ion-button menuToggle>
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>The Vault</ion-title>
+        <br>
+        <button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
+    <ion-title align="middle">The Vault</ion-title>
   </ion-navbar>
 </ion-header>
 

zlg/src/pages/home/home.ts

@@ -1,10 +1,8 @@
 import { Component, OnInit} from '@angular/core';
+import { MenuController } from 'ionic-angular';
 import Stomp from 'stompjs';
 import SockJS from 'sockjs-client';
 
-// import { Socket } from 'ng-socket-io';
-
-
 import { NavController } from 'ionic-angular';
 
 @Component({
@@ -13,8 +11,8 @@ import { NavController } from 'ionic-angular';
 })
 export class HomePage implements OnInit{
 
-  constructor(public navCtrl: NavController) {
-
+  constructor(public navCtrl: NavController, public menu: MenuController) {
+    this.menu.enable(true);
   }
 
   private stompClient ;
@@ -30,21 +28,19 @@ export class HomePage implements OnInit{
     const socket = new SockJS('https://fast-headland-39537.herokuapp.com/vault-socket');
     this.stompClient = Stomp.over(socket);
 
-    const _this = this; //i hope i am not expected to understand this
-    this.stompClient.connect({}, function (frame) {
+    this.stompClient.connect({}, (frame) => {
       console.log('Connected: ' + frame);
-      _this.stompClient.subscribe('/topic/posts', (post) => {
-        _this.posts.push(JSON.parse(post.body));
+      this.stompClient.subscribe('/topic/posts', (post) => {
+        this.posts.unshift(JSON.parse(post.body));
      });
     });
   }
 
   sendPost() {
     this.stompClient.send(this.userPostUrl, {}, JSON.stringify({'id': '','message': this.postInput, 'userId': this.userId}))
+    this.postInput = "";
   }
 
-  //  showPost(message, userName) {
-  //   //("#messages").append("<tr><td>" + userName + ": " + message + "</td></tr>");
-  // }
+
 
 }

zlg/src/pages/menu/menu.html

@@ -0,0 +1,38 @@
+<!-- 
+  Generated template for the MenuPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<!-- <ion-menu [content]="content">
+
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
+          <ion-icon item-start [start]=p.icon" [color]="isActive(p)"></ion-icon>
+          {{p.title}}
+        </button>
+      </ion-list>
+    </ion-content>
+
+</ion-menu>
+
+<ion-nav [root]="rootPage" #content swipBackEnabled="false"></ion-nav> -->
+
+<ion-menu [content]="content">
+  <ion-content>
+    <ion-list>
+      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
+        {{p.title}}
+      </button>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-nav #content [root]="rootPage"></ion-nav>

zlg/src/pages/menu/menu.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { MenuPage } from './menu';
+
+@NgModule({
+  declarations: [
+    MenuPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(MenuPage),
+  ],
+})
+export class MenuPageModule {}

zlg/src/pages/menu/menu.scss

@@ -0,0 +1,3 @@
+page-menu {
+
+}

zlg/src/pages/menu/menu.ts

@@ -0,0 +1,101 @@
+// import { Component, ViewChild } from '@angular/core';
+// import { IonicPage, NavController, NavParams, Nav } from 'ionic-angular';
+// import { HomePage } from '../home/home';
+
+// /**
+//  * Generated class for the MenuPage page.
+//  *
+//  * See https://ionicframework.com/docs/components/#navigation for more info on
+//  * Ionic pages and navigation.
+//  */
+
+// export interface PageInterface {
+//   title: string;
+//   pageName: string;
+//   tabComponent?: any;
+//   index?: number;
+//   icon: string;
+// }
+
+// @IonicPage()
+// @Component({
+//   selector: 'page-menu',
+//   templateUrl: 'menu.html',
+// })
+// export class MenuPage {
+//   //basic root for our 
+//   rootPage = 'HomePage';
+
+//   @ViewChild(Nav) nav: Nav;
+
+//   pages: PageInterface[] = [
+//     { title: 'My Vault', pageName: 'HomePage', index: 0, icon: 'home'  }
+//   ];
+
+//   constructor(public navCtrl: NavController, public navParams: NavParams) {
+//   }
+
+//   openPage(page: PageInterface) {
+//     let params = {};
+
+//     if (this.nav.getActiveChildNav() && page.index != undefined) {
+//       this.nav.getActiveChildNav().select(page.index);
+//     }
+//     else {
+//       this.nav.setRoot(page.pageName, params);
+//     }
+//   }
+
+//   isActive(page: PageInterface) {
+//     if (this.nav.getActive() && this.nav.getActive().name === page.pageName) {
+//       return 'primary';
+//     }
+//     return;
+//   }
+
+//   ionViewDidLoad() {
+//     console.log('ionViewDidLoad MenuPage');
+//   }
+
+// }
+
+import { Component, ViewChild } from '@angular/core';
+import { IonicPage, Nav, NavController } from 'ionic-angular';
+
+interface PageItem {
+  title: string
+  component: any
+}
+type PageList = PageItem[]
+
+@IonicPage()
+@Component({
+  selector: 'page-menu',
+  templateUrl: 'menu.html'
+})
+export class MenuPage {
+  // A reference to the ion-nav in our component
+  @ViewChild(Nav) nav: Nav;
+
+  rootPage: any = 'ContentPage';
+
+  pages: PageList;
+
+  constructor(public navCtrl: NavController) {
+    // used for an example of ngFor and navigation
+    this.pages = [
+      { title: 'Sign in', component: 'LoginPage' },
+      { title: 'Signup', component: 'SignupPage' }
+    ];
+  }
+
+  ionViewDidLoad() {
+    console.log('Hello MenuPage Page');
+  }
+
+  openPage(page: PageItem) {
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    this.nav.setRoot(page.component);
+  }
+}