0210348-备忘录历史记录

src/app/app-routing.module.ts

@@ -30,6 +30,8 @@ const routes: Routes = [
     path: "timer",
     loadChildren: () => import('../modules/tab/tree/tree.module').then(m => m.TreePageModule)
   },
+  
+
 ];
 @NgModule({
   imports: [

src/app/child-page/memo-history/memo-history-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MemoHistoryPage } from './memo-history.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MemoHistoryPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MemoHistoryPageRoutingModule {}

src/app/child-page/memo-history/memo-history.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MemoHistoryPageRoutingModule } from './memo-history-routing.module';
+
+import { MemoHistoryPage } from './memo-history.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MemoHistoryPageRoutingModule
+  ],
+  declarations: [MemoHistoryPage]
+})
+export class MemoHistoryPageModule {}

src/app/child-page/memo-history/memo-history.page.html

@@ -0,0 +1,17 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>备忘录历史记录</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let memo of memos">
+      <ion-label>
+        <h2>{{ memo.content }}</h2>
+        <p>{{ memo.timestamp | date: 'yyyy年MM月dd日 HH:mm:ss' }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>
+

src/app/child-page/memo-history/memo-history.page.scss

@@ -0,0 +1,20 @@
+ion-content {
+  --padding-bottom: 80px;
+}
+
+ion-item {
+  --background: var(--ion-color-light);
+  --border-color: var(--ion-color-medium);
+  margin: 8px 0;
+}
+
+ion-label h2 {
+  color: var(--ion-color-dark);
+  font-size: 18px;
+  margin-bottom: 4px;
+}
+
+ion-label p {
+  color: var(--ion-color-medium);
+  font-size: 14px;
+}

src/app/child-page/memo-history/memo-history.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MemoHistoryPage } from './memo-history.page';
+
+describe('MemoHistoryPage', () => {
+  let component: MemoHistoryPage;
+  let fixture: ComponentFixture<MemoHistoryPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MemoHistoryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/child-page/memo-history/memo-history.page.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import * as Parse from 'parse';
+
+@Component({
+  selector: 'app-memo-history',
+  templateUrl: './memo-history.page.html',
+  styleUrls: ['./memo-history.page.scss'],
+})
+export class MemoHistoryPage implements OnInit {
+  memos: any[] = [];
+
+  constructor() {}
+
+  ngOnInit() {
+    this.loadMemos();
+  }
+
+  async loadMemos() {
+    const currentUser = Parse.User.current();
+    if (!currentUser) {
+      console.error('No current user found');
+      return;
+    }
+
+    const MemoHistory = Parse.Object.extend('memo_history');
+    const query = new Parse.Query(MemoHistory);
+    query.equalTo('username', currentUser.getUsername()); // Ensure only the current user's memos are fetched
+    query.descending('memoId'); // Sort by memoId descending to get the latest memos first
+
+    try {
+      const results = await query.find();
+      this.memos = results.map(memo => ({
+        content: memo.get('content'),
+        timestamp: memo.get('time'),
+      }));
+    } catch (error) {
+      console.error('Error while fetching memo history:', error);
+    }
+  }
+}

src/app/memo/memo.page.html

@@ -20,7 +20,6 @@
     </ion-item>
   </div>
 </ion-content> -->
-
 <ion-header>
   <ion-toolbar>
     <ion-title>备忘录</ion-title>
@@ -41,11 +40,19 @@
         </ion-button>
       </ion-item>
     </ion-list>
-
-    <ion-item>
-      <ion-input placeholder="添加新备忘录" [(ngModel)]="newMemo"></ion-input>
-      <ion-button (click)="addMemo()">添加</ion-button>
-    </ion-item>
   </div>
-</ion-content>
+  <div>
+  <ion-item>
+    <ion-button  (click)="navigateToMemoHistory()" style="width: 100%;">查看所有备忘录</ion-button>
+  </ion-item>
+  </div>
 
+  <ion-footer>
+    <ion-toolbar>
+      <ion-item>
+        <ion-input placeholder="添加新备忘录" [(ngModel)]="newMemo"></ion-input>
+        <ion-button (click)="addMemo()" class="add-button">添加</ion-button>
+      </ion-item>
+    </ion-toolbar>
+  </ion-footer>
+</ion-content>

src/app/memo/memo.page.scss

@@ -1,10 +1,32 @@
-ion-label.ai {
-      color: blue;
-      text-align: left;
-    }
-    
-    ion-label.user {
-      color: green;
-      text-align: right;
-    }
+ion-content {
+  --padding-bottom: 80px; // To ensure the footer doesn't overlap content
+}
+
+ion-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+.add-button{
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  width:80px;
+}
+
+/* ion-label.ai {
+  color: blue;
+  text-align: left;
+}
+
+ion-label.user {
+  color: green;
+  text-align: right;
+} */
+
     

src/app/memo/memo.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AlertController } from '@ionic/angular';
+import { Router } from '@angular/router';
 import * as Parse from 'parse';
 
 interface Memo {
@@ -21,7 +22,7 @@ export class MemoPage implements OnInit {
   username: string = ''; // Current user's username
   nextMemoId: number = 1; // Track next memoId for the current user
 
-  constructor(private alertController: AlertController) {}
+  constructor(private alertController: AlertController, private router: Router) {}
 
   ngOnInit() {
     const currentUser = Parse.User.current();
@@ -34,17 +35,6 @@ export class MemoPage implements OnInit {
     }
   }
 
-  ionViewDidEnter() {
-    const currentUser = Parse.User.current();
-    if (currentUser) {
-      this.username = currentUser.getUsername()!;
-      this.loadMemos();
-      this.loadNextMemoId(); // Load the next memoId for the current user
-    } else {
-      console.error('User not logged in.');
-    }
-  }
-
   async loadNextMemoId() {
     try {
       const query = new Parse.Query('memo_history');
@@ -147,4 +137,9 @@ export class MemoPage implements OnInit {
       console.error('Error deleting memo', error);
     }
   }
+
+  // Navigate to memo-history page
+  navigateToMemoHistory() {
+    this.router.navigate(['/tabs/memo-history']);
+  }
 }

src/app/tabs/tabs-routing.module.ts

@@ -19,6 +19,10 @@ const routes: Routes = [
         path: 'memo',
         loadChildren: () => import('../memo/memo.module').then(m => m.MemoPageModule)
       },
+        {
+          path: 'memo-history',
+          loadChildren: () => import('../child-page/memo-history/memo-history.module').then( m => m.MemoHistoryPageModule)
+        },
       {
         path: 'chatpage',
         loadChildren: () => import('../chatpage/chatpage.module').then( m => m.ChatpagePageModule)