tabel ukur

angular.json

@@ -31,7 +31,15 @@
                 "output": "./svg"
               }
             ],
-            "styles": ["src/global.scss", "src/theme/variables.scss"],
+            "styles": [
+              "src/theme/variables.scss", 
+              "src/global.scss",
+              "./node_modules/@swimlane/ngx-datatable/index.css",
+              "./node_modules/@swimlane/ngx-datatable/themes/material.scss",
+              "./node_modules/@swimlane/ngx-datatable/themes/dark.scss",
+              "./node_modules/@swimlane/ngx-datatable/themes/bootstrap.scss",
+              "./node_modules/@swimlane/ngx-datatable/assets/icons.css"
+            ],
             "scripts": []
           },
           "configurations": {

package.json

@@ -29,6 +29,7 @@
     "@ionic/angular": "^8.0.0",
     "@ionic/storage-angular": "^4.0.0",
     "@swimlane/ngx-charts": "^20.5.0",
+    "@swimlane/ngx-datatable": "^20.1.0",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

src/app/app-routing.module.ts

@@ -35,6 +35,10 @@ const routes: Routes = [
     path: 'tentang-kami',
     loadChildren: () => import('./tentang-kami/tentang-kami.module').then( m => m.TentangKamiPageModule)
   },
+  {
+    path: 'tabel',
+    loadComponent: () => import('./tabel/tabel.page').then((m) => m.TabelPage),
+  },
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -10,6 +10,7 @@ export class AppComponent {
     { title: 'Home', url: '/cover', icon: 'home' },
     { title: 'Identitas', url: '/identitas', icon: 'people' },
     { title: 'Pengukuran', url: '/pemeriksaan', icon: 'thermometer' },
+    { title: 'Tabel Ukur', url: '/tabel', icon: 'reader' },
     { title: 'Grafik', url: '/indikator', icon: 'stats-chart' },
     { title: 'Tips', url: '/tips', icon: 'bulb' },
     { title: 'Tentang Kami', url: '/tentang-kami', icon: 'information-circle' },

src/app/app.module.ts

@@ -7,11 +7,18 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { IonicStorageModule } from '@ionic/storage-angular';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule,IonicStorageModule.forRoot(), IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule, HttpClientModule],
+  imports: [BrowserModule, IonicStorageModule.forRoot(), IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule, HttpClientModule, NgxDatatableModule.forRoot({
+    messages: {
+      emptyMessage: 'No data to display', // Message to show when array is presented, but contains no values
+      totalMessage: 'total', // Footer total message
+      selectedMessage: 'selected' // Footer selected message
+    }
+  })],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

src/app/indikator/indikator.page.html

@@ -1,8 +1,18 @@
 <ion-header [translucent]="true">
   <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
     <ion-title>Grafik</ion-title>
   </ion-toolbar>
 </ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Grafik</ion-title>
+    </ion-toolbar>
+  </ion-header>
 <ion-content>
   <ion-card>
     <ion-card-title class="ion-padding-start">Line Chart</ion-card-title>

src/app/indikator/indikator.page.ts

@@ -8,6 +8,8 @@ import {
   IonCard,
   IonCardTitle,
   IonCardContent,
+  IonButtons, 
+  IonMenuButton,
 } from '@ionic/angular/standalone';
 import { LegendPosition } from '@swimlane/ngx-charts';
 import { NgClass } from '@angular/common';
@@ -23,6 +25,8 @@ import { HorizontalBarChartComponent } from '../components/horizontal-bar-chart/
   styleUrls: ['./indikator.page.scss'],
   standalone: true,
   imports: [
+    IonButtons,
+    IonMenuButton,
     IonHeader,
     IonToolbar,
     IonTitle,

src/app/services/pengukuran.service.ts

@@ -15,4 +15,8 @@ export class PengukuranService {
   simpanPengukuran(data: any): Observable<any> {
     return this.http.post(this.apiUrl, data);
   }
+  getPengukuranByIdentitasId(identitasId: number): Observable<any> {
+    const url = `${this.apiUrl}?identitas_id=${identitasId}&take=30`;
+    return this.http.get(url);
+  }
 }

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

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

src/app/tabel/tabel.page.html

@@ -0,0 +1,151 @@
+<ion-header [translucent]="true">
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Tabel Ukur</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tabel Ukur</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content color="light">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="12">
+          <ion-card>
+            <ngx-datatable #table class="material" [columnMode]="ColumnMode.force" [headerHeight]="50" [footerHeight]="50"
+              [rowHeight]="'auto'" [loadingIndicator]="loadingIndicator" [scrollbarH]="true" [limit]="10" [rows]="rows">
+              
+              <ngx-datatable-column prop="id">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">ID</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="berat_badan">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Berat Badan</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="tinggi_badan">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Tinggi Badan</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="imt">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">IMT</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="lingkar_perut">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Lingkar Perut</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="tekanan_darah_diastole">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Tekanan Darah Diastole</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="tekanan_darah_sistole">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Tekanan Darah Sistole</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="frekuensi_nafas">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Frekuensi Nafas</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="nadi">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Nadi</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kadar_gula_darah">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kadar Gula Darah</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="waktu_pengambilan_gula_darah">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Waktu Pengambilan Gula Darah</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kolesterol_total">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kolesterol Total</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kolesterol_ldl">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kolesterol LDL</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kolesterol_hdl">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kolesterol HDL</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="trigliserida">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Trigliserida</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kadar_hb">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kadar HB</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kadar_asam_urat">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kadar Asam Urat</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="golongan_darah">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Golongan Darah</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="kondisi_umum">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Kondisi Umum</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+              <ngx-datatable-column prop="keluhan_perasaan">
+                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
+                  <span class="tableHeader">Keluhan Perasaan</span>
+                </ng-template>
+              </ngx-datatable-column>
+
+            </ngx-datatable>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </ion-content>
+</ion-content>

src/app/tabel/tabel.page.spec.ts

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

src/app/tabel/tabel.page.ts

@@ -0,0 +1,165 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonCard,
+  IonButton,
+  IonInput,
+  IonButtons, 
+  IonMenuButton,
+} from '@ionic/angular/standalone';
+import { ColumnMode, DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { PengukuranService } from '../services/pengukuran.service';
+import { Storage } from '@ionic/storage-angular';
+
+@Component({
+  selector: 'app-tabel',
+  templateUrl: './tabel.page.html',
+  styleUrls: ['./tabel.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonGrid,
+    IonRow,
+    IonCol,
+    IonCard,
+    IonButton,
+    IonInput,
+    NgxDatatableModule,
+    IonButtons,
+    IonMenuButton
+  ],
+})
+export class TabelPage implements OnInit {
+
+  @ViewChild(DatatableComponent) table!: DatatableComponent;
+  ColumnMode = ColumnMode;
+  loadingIndicator!: boolean;
+  temp: any[] = [];
+  rows: any[] = [];
+  dummy: any;
+  
+
+  constructor(private pengukuranService: PengukuranService, private storage: Storage,) { }
+
+  async ngOnInit() {
+    await this.storage.create();
+    this.getPengukuranData();
+    this.loadingIndicator = true;
+    this.dummy = [
+        {
+          "id": 4,
+          "berat_badan": 1,
+          "tinggi_badan": 2,
+          "imt": 3,
+          "lingkar_perut": 16,
+          "tekanan_darah_diastole": 4,
+          "tekanan_darah_sistole": 5,
+          "frekuensi_nafas": 6,
+          "nadi": 7,
+          "kadar_gula_darah": 8,
+          "waktu_pengambilan_gula_darah": "pagi",
+          "kolesterol_total": 11,
+          "kolesterol_ldl": 10,
+          "kolesterol_hdl": 9,
+          "trigliserida": 15,
+          "kadar_hb": 12,
+          "kadar_asam_urat": 13,
+          "golongan_darah": "14",
+          "kondisi_umum": "kondisi",
+          "keluhan_perasaan": "keluhan",
+          "created_at": "2024-05-15T12:37:35Z",
+          "updated_at": "2024-05-15T12:37:35Z",
+          "deleted_at": null,
+          "identitas_id": 8
+        },
+        {
+          "id": 5,
+          "berat_badan": 3123,
+          "tinggi_badan": 123,
+          "imt": 412,
+          "lingkar_perut": 45,
+          "tekanan_darah_diastole": 244,
+          "tekanan_darah_sistole": 34,
+          "frekuensi_nafas": 234,
+          "nadi": 34,
+          "kadar_gula_darah": 42,
+          "waktu_pengambilan_gula_darah": "pagi",
+          "kolesterol_total": 2345,
+          "kolesterol_ldl": 23,
+          "kolesterol_hdl": 3424,
+          "trigliserida": 534,
+          "kadar_hb": 44,
+          "kadar_asam_urat": 53,
+          "golongan_darah": "45",
+          "kondisi_umum": "kondisi",
+          "keluhan_perasaan": "keluhan",
+          "created_at": "2024-05-15T12:39:11Z",
+          "updated_at": "2024-05-15T12:39:11Z",
+          "deleted_at": null,
+          "identitas_id": 8
+        },
+        {
+          "id": 6,
+          "berat_badan": 123,
+          "tinggi_badan": 412,
+          "imt": 312,
+          "lingkar_perut": 20,
+          "tekanan_darah_diastole": 23,
+          "tekanan_darah_sistole": 54,
+          "frekuensi_nafas": 34,
+          "nadi": 234,
+          "kadar_gula_darah": 234,
+          "waktu_pengambilan_gula_darah": "makan",
+          "kolesterol_total": 543,
+          "kolesterol_ldl": 523,
+          "kolesterol_hdl": 5234,
+          "trigliserida": 24,
+          "kadar_hb": 45,
+          "kadar_asam_urat": 35,
+          "golongan_darah": "2345",
+          "kondisi_umum": "aman terkendali",
+          "keluhan_perasaan": "perasaan",
+          "created_at": "2024-05-15T12:41:39Z",
+          "updated_at": "2024-05-15T12:41:39Z",
+          "deleted_at": null,
+          "identitas_id": 8
+        }
+      ]
+    this.temp = [
+      { id: 1, name: 'Austin', gender: 'Male', company: 'Swimlane' },
+      { id: 2, name: 'Dany', gender: 'Male', company: 'KFC' },
+      { id: 3, name: 'Molly', gender: 'Female', company: 'Burger King' },
+      { id: 4, name: 'Austin', gender: 'Male', company: 'Swimlane' },
+      { id: 5, name: 'Dany', gender: 'Male', company: 'KFC' },
+      { id: 6, name: 'Molly', gender: 'Female', company: 'Burger King' },
+      { id: 7, name: 'Austin', gender: 'Male', company: 'Swimlane' },
+      { id: 8, name: 'Dany', gender: 'Male', company: 'KFC' },
+      { id: 9, name: 'Molly', gender: 'Female', company: 'Burger King' },
+      { id: 10, name: 'Austin', gender: 'Male', company: 'Swimlane' },
+      { id: 11, name: 'Dany', gender: 'Male', company: 'KFC' },
+      { id: 12, name: 'Molly', gender: 'Female', company: 'Burger King' },
+    ];
+    this.rows = [...this.dummy];
+    this.loadingIndicator = false;
+  }
+  async getPengukuranData() {
+    const idIdentitas = await this.storage.get('id_identitas');
+    this.pengukuranService.getPengukuranByIdentitasId(idIdentitas).subscribe(
+      (data: any) => {
+        console.log('Data Pengukuran:', data);
+      },
+      (error: any) => {
+        console.error('Error:', error);
+      }
+    );
+  }
+}