diff --git a/angular.json b/angular.json
index 55994aa..a1fce1c 100644
--- a/angular.json
+++ b/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": {
diff --git a/package.json b/package.json
index 4a1324d..c25e5ff 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4136ac2..f2f0494 100644
--- a/src/app/app-routing.module.ts
+++ b/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({
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 93a28f0..4cf3e02 100644
--- a/src/app/app.component.ts
+++ b/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' },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 68a8af8..85b0f4b 100644
--- a/src/app/app.module.ts
+++ b/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 { }
diff --git a/src/app/indikator/indikator.page.html b/src/app/indikator/indikator.page.html
index 98fe41e..95207f6 100644
--- a/src/app/indikator/indikator.page.html
+++ b/src/app/indikator/indikator.page.html
@@ -1,8 +1,18 @@
+
+
+
Grafik
+
+
+
+
+ Grafik
+
+
Line Chart
diff --git a/src/app/indikator/indikator.page.ts b/src/app/indikator/indikator.page.ts
index 92a98c2..984c981 100644
--- a/src/app/indikator/indikator.page.ts
+++ b/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,
diff --git a/src/app/services/pengukuran.service.ts b/src/app/services/pengukuran.service.ts
index 749b29b..7e5c2c8 100644
--- a/src/app/services/pengukuran.service.ts
+++ b/src/app/services/pengukuran.service.ts
@@ -15,4 +15,8 @@ export class PengukuranService {
simpanPengukuran(data: any): Observable {
return this.http.post(this.apiUrl, data);
}
+ getPengukuranByIdentitasId(identitasId: number): Observable {
+ const url = `${this.apiUrl}?identitas_id=${identitasId}&take=30`;
+ return this.http.get(url);
+ }
}
\ No newline at end of file
diff --git a/src/app/tabel/tabel-routing.module.ts b/src/app/tabel/tabel-routing.module.ts
new file mode 100644
index 0000000..74ae6c8
--- /dev/null
+++ b/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 {}
diff --git a/src/app/tabel/tabel.page.html b/src/app/tabel/tabel.page.html
new file mode 100644
index 0000000..bfcf033
--- /dev/null
+++ b/src/app/tabel/tabel.page.html
@@ -0,0 +1,151 @@
+
+
+
+
+
+ Tabel Ukur
+
+
+
+
+
+
+ Tabel Ukur
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/tabel/tabel.page.scss b/src/app/tabel/tabel.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/tabel/tabel.page.spec.ts b/src/app/tabel/tabel.page.spec.ts
new file mode 100644
index 0000000..74fb410
--- /dev/null
+++ b/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;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TabelPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/tabel/tabel.page.ts b/src/app/tabel/tabel.page.ts
new file mode 100644
index 0000000..ac3cabf
--- /dev/null
+++ b/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);
+ }
+ );
+ }
+}
\ No newline at end of file