From 507d26d216aef779a876606dbedbd0eccf206245 Mon Sep 17 00:00:00 2001 From: Ryan Ariana Date: Wed, 15 May 2024 21:43:05 +0700 Subject: [PATCH] tabel ukur --- angular.json | 10 +- package.json | 1 + src/app/app-routing.module.ts | 4 + src/app/app.component.ts | 1 + src/app/app.module.ts | 11 +- src/app/indikator/indikator.page.html | 10 ++ src/app/indikator/indikator.page.ts | 4 + src/app/services/pengukuran.service.ts | 4 + src/app/tabel/tabel-routing.module.ts | 17 +++ src/app/tabel/tabel.page.html | 151 ++++++++++++++++++++++ src/app/tabel/tabel.page.scss | 0 src/app/tabel/tabel.page.spec.ts | 17 +++ src/app/tabel/tabel.page.ts | 165 +++++++++++++++++++++++++ 13 files changed, 392 insertions(+), 3 deletions(-) create mode 100644 src/app/tabel/tabel-routing.module.ts create mode 100644 src/app/tabel/tabel.page.html create mode 100644 src/app/tabel/tabel.page.scss create mode 100644 src/app/tabel/tabel.page.spec.ts create mode 100644 src/app/tabel/tabel.page.ts 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 + + + + + + + + + + + + + ID + + + + + + Berat Badan + + + + + + Tinggi Badan + + + + + + IMT + + + + + + Lingkar Perut + + + + + + Tekanan Darah Diastole + + + + + + Tekanan Darah Sistole + + + + + + Frekuensi Nafas + + + + + + Nadi + + + + + + Kadar Gula Darah + + + + + + Waktu Pengambilan Gula Darah + + + + + + Kolesterol Total + + + + + + Kolesterol LDL + + + + + + Kolesterol HDL + + + + + + Trigliserida + + + + + + Kadar HB + + + + + + Kadar Asam Urat + + + + + + Golongan Darah + + + + + + Kondisi Umum + + + + + + Keluhan Perasaan + + + + + + + + + + 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