diff --git a/src/app/app.component.html b/src/app/app.component.html index 5b9f2b5..e32de8d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,8 +3,8 @@ - Inbox - hi@ionicframework.com + PAIJO + Monitoring Kesehatan Secara Berkala dan Mandiri diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4cf3e02..e45b786 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -10,8 +10,8 @@ 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: 'Tabel Pengukuran', url: '/tabel', icon: 'reader' }, + { title: 'Grafik Pengukuran', 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/cover/cover.page.html b/src/app/cover/cover.page.html index d56ee37..37ea47f 100644 --- a/src/app/cover/cover.page.html +++ b/src/app/cover/cover.page.html @@ -17,9 +17,10 @@ + PAIJO
Aplikasi Monitoring Kesehatan Secara Berkala Dan Mandiri - \ No newline at end of file + diff --git a/src/app/indikator/indikator.page.ts b/src/app/indikator/indikator.page.ts index c8a01e0..d5f0490 100644 --- a/src/app/indikator/indikator.page.ts +++ b/src/app/indikator/indikator.page.ts @@ -9,7 +9,7 @@ import { IonCard, IonCardTitle, IonCardContent, - IonButtons, + IonButtons, IonMenuButton, } from '@ionic/angular/standalone'; import { NgClass } from '@angular/common'; @@ -78,6 +78,37 @@ export class IndikatorPage implements OnInit { gradient.addColorStop(0.33, 'rgba(255, 255, 0, 0.5)'); // Yellow gradient.addColorStop(0.66, 'rgba(255, 0, 0, 0.5)'); // Red + const canvasBackgroundPlugin = { + beforeDraw: (chart: any, args: any, options: any) => { + const ctx = chart.ctx; + const chartArea = chart.chartArea; + const chartHeight = chartArea.bottom - chartArea.top; + const redStop = chartHeight * 0.33; + const yellowStop = chartHeight * 0.66; + + const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom); + gradient.addColorStop(0, 'rgba(255, 0, 0, 0.5)'); + gradient.addColorStop(redStop / chartHeight, 'rgba(255, 0, 0, 0.5)'); + gradient.addColorStop(redStop / chartHeight, 'rgba(255, 255, 0, 0.5)'); + gradient.addColorStop(yellowStop / chartHeight, 'rgba(255, 255, 0, 0.5)'); + gradient.addColorStop(yellowStop / chartHeight, 'rgba(0, 255, 0, 0.5)'); + gradient.addColorStop(1, 'rgba(0, 255, 0, 0.5)'); + + ctx.save(); + ctx.fillStyle = gradient; + ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); + ctx.restore(); + }, + id: 'chart-canvas-background' + }; + + const disableLegendPlugin = { + beforeInit: (chart: any, args: any, options: any) => { + chart.legend.options.display = false; + }, + id: 'disable-legend' + } + new Chart(ctx, { type: 'line', data: { @@ -105,30 +136,11 @@ export class IndikatorPage implements OnInit { } } }, - plugins: [{ - beforeDraw: function (chart) { - const ctx = chart.ctx; - const chartArea = chart.chartArea; - const chartHeight = chartArea.bottom - chartArea.top; - const greenStop = chartHeight * 0.33; - const yellowStop = chartHeight * 0.66; - - const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom); - gradient.addColorStop(0, 'rgba(0, 255, 0, 0.5)'); - gradient.addColorStop(greenStop / chartHeight, 'rgba(0, 255, 0, 0.5)'); - gradient.addColorStop(greenStop / chartHeight, 'rgba(255, 255, 0, 0.5)'); - gradient.addColorStop(yellowStop / chartHeight, 'rgba(255, 255, 0, 0.5)'); - gradient.addColorStop(yellowStop / chartHeight, 'rgba(255, 0, 0, 0.5)'); - gradient.addColorStop(1, 'rgba(255, 0, 0, 0.5)'); - - ctx.save(); - ctx.fillStyle = gradient; - ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); - ctx.restore(); - }, - id: '' - }] + plugins: [ + canvasBackgroundPlugin, + disableLegendPlugin + ] }); } } -} \ No newline at end of file +} diff --git a/src/app/pemeriksaan/pemeriksaan.page.html b/src/app/pemeriksaan/pemeriksaan.page.html index de25a09..8691960 100644 --- a/src/app/pemeriksaan/pemeriksaan.page.html +++ b/src/app/pemeriksaan/pemeriksaan.page.html @@ -51,7 +51,7 @@ Kadar Kolesterol HDL(mg/dL) - + @@ -64,6 +64,11 @@ + + Trigliserida + + + Kadar HB (gr/dL) @@ -76,22 +81,24 @@ Golongan Darah - + + A + B + AB + O + - - Trigliserida - - + HBA1C - Lingkar Perut + Lingkar Perut (cm) - + Waktu Pengambilan Gula Darah diff --git a/src/app/tabel/tabel.page.html b/src/app/tabel/tabel.page.html index 986948d..f8b4353 100644 --- a/src/app/tabel/tabel.page.html +++ b/src/app/tabel/tabel.page.html @@ -3,14 +3,14 @@ - Tabel Ukur + Tabel Rekaman Pengukuran - Tabel Ukur + Tabel Rekaman Pengukuran @@ -19,144 +19,13 @@ - - - - - ID - + + - - - - Tanggal - - - {{ value | customDate }} - + - - - - 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 - - - - - - HBA1C - - - - - - Golongan Darah - - - - - - Kondisi Umum - - - - - - Keluhan Perasaan - - - diff --git a/src/app/tabel/tabel.page.ts b/src/app/tabel/tabel.page.ts index 26dfd7b..4932463 100644 --- a/src/app/tabel/tabel.page.ts +++ b/src/app/tabel/tabel.page.ts @@ -8,15 +8,14 @@ import { IonRow, IonCol, IonCard, - IonButton, - IonInput, - IonButtons, + IonButtons, IonMenuButton, + AlertController, } from '@ionic/angular/standalone'; -import { ColumnMode, DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable'; +import {ColumnMode, DatatableComponent, NgxDatatableModule} from '@swimlane/ngx-datatable'; import { PengukuranService } from '../services/pengukuran.service'; import { Storage } from '@ionic/storage-angular'; -import { CustomDateModule } from './custom-date.module'; +import { CustomDateModule } from './custom-date.module'; @Component({ selector: 'app-tabel', @@ -32,8 +31,6 @@ import { CustomDateModule } from './custom-date.module'; IonRow, IonCol, IonCard, - IonButton, - IonInput, NgxDatatableModule, IonButtons, IonMenuButton, @@ -43,32 +40,93 @@ import { CustomDateModule } from './custom-date.module'; export class TabelPage implements OnInit { @ViewChild(DatatableComponent) table!: DatatableComponent; - ColumnMode = ColumnMode; - loadingIndicator!: boolean; - temp: any[] = []; + loadingIndicator = false; rows: any[] = []; - dummy: any; - + columns: any[] = []; + restructuredData: any[] = []; - constructor(private pengukuranService: PengukuranService, private storage: Storage,) { } + // Mapping of field names to human-friendly labels + fieldMapping: { [key: string]: string } = { + 'berat_badan': 'Berat Badan', + 'tinggi_badan': 'Tinggi Badan', + 'imt': 'IMT', + 'lingkar_perut': 'Lingkar Perut', + 'tekanan_darah_diastole': 'Tekanan Darah Diastole', + 'tekanan_darah_sistole': 'Tekanan Darah Sistole', + 'frekuensi_nafas': 'Frekuensi Nafas', + 'nadi': 'Nadi', + 'kadar_gula_darah': 'Kadar Gula Darah', + 'waktu_pengambilan_gula_darah': 'Waktu Pengambilan Gula Darah', + 'kolesterol_total': 'Kolesterol Total', + 'kolesterol_ldl': 'Kolesterol LDL', + 'kolesterol_hdl': 'Kolesterol HDL', + 'trigliserida': 'Trigliserida', + 'kadar_hb': 'Kadar HB', + 'kadar_asam_urat': 'Kadar Asam Urat', + 'hba1c': 'HBA1C', + 'golongan_darah': 'Golongan Darah', + 'kondisi_umum': 'Kondisi Umum', + 'keluhan_perasaan': 'Keluhan Perasaan' + }; + + // Mapping for waktu_pengambilan_gula_darah field values + waktuPengambilanMapping: { [key: string]: string } = { + 'puasa': 'Puasa minimal 8 jam', + 'makan': '1-2 jam setelah makan', + 'gds': 'Gula darah sewaktu/ GDS', + 'tidur': 'Sebelum berangkat tidur malam' + }; + + constructor( + private pengukuranService: PengukuranService, + private storage: Storage, + private alertController: AlertController + ) { } async ngOnInit() { await this.storage.create(); this.getPengukuranData(); - } + async getPengukuranData() { this.loadingIndicator = true; const idIdentitas = await this.storage.get('id_identitas'); this.pengukuranService.getPengukuranByIdentitasId(idIdentitas).subscribe( (res: any) => { - console.log('Data Pengukuran:', res); this.rows = [...res.data]; + this.restructureData(this.rows); + this.loadingIndicator = false; }, - (error: any) => { + async (error: any) => { console.error('Error:', error); + this.loadingIndicator = false; + const alert = await this.alertController.create({ + header: 'Error', + message: 'Failed to load data.', + buttons: ['OK'] + }); + await alert.present(); } ); - this.loadingIndicator = false; - } -} \ No newline at end of file + } + + restructureData(data: any[]) { + const keys = Object.keys(data[0]).filter(key => key !== 'id' && key !== 'created_at' && key !== 'updated_at' && key !== 'deleted_at' && key !== 'identitas_id'); + const dates = data.map(item => item.created_at); + this.columns = [{ prop: 'property', name: 'Komponen' }, ...dates.map(date => ({ prop: date, name: new Date(date).toLocaleString() }))]; + + this.restructuredData = keys.map(key => { + const row: any = { property: this.fieldMapping[key] || key }; + data.forEach(item => { + if (key === 'waktu_pengambilan_gula_darah') { + row[item.created_at] = this.waktuPengambilanMapping[item[key]] || ''; + } else { + row[item.created_at] = item[key]; + } + }); + return row; + }); + } + + protected readonly ColumnMode = ColumnMode; +} diff --git a/src/app/tentang-kami/tentang-kami.page.html b/src/app/tentang-kami/tentang-kami.page.html index d5b47c7..8d8432c 100644 --- a/src/app/tentang-kami/tentang-kami.page.html +++ b/src/app/tentang-kami/tentang-kami.page.html @@ -30,7 +30,7 @@

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum + PAIJO (PAstikan Indikator kesehatan saudara Joss dan Oke) adalah aplikasi pendamping kesehatan yang membantu Anda memantau dan meningkatkan kesehatan Anda secara mandiri. Dengan fitur-fitur yang lengkap dan mudah digunakan, PAIJO hadir untuk memastikan Anda selalu dalam kondisi prima.

@@ -58,4 +58,4 @@ - \ No newline at end of file + diff --git a/src/app/tips/tips.page.html b/src/app/tips/tips.page.html index 76735c9..5e9d23c 100644 --- a/src/app/tips/tips.page.html +++ b/src/app/tips/tips.page.html @@ -13,15 +13,14 @@ Tips - - - - - {{ tip.judul }} - - - -
- - + + + + {{ tip.judul }} + +
+
+
+ + diff --git a/src/global.scss b/src/global.scss index 840c6c6..17766fc 100644 --- a/src/global.scss +++ b/src/global.scss @@ -35,3 +35,12 @@ /* @import "@ionic/angular/css/palettes/dark.always.css"; */ /* @import "@ionic/angular/css/palettes/dark.class.css"; */ @import "@ionic/angular/css/palettes/dark.system.css"; + + +.datatable-row-even { + background-color: #f9f9f9 !important; +} + +.datatable-row-odd { + background-color: #ffffff !important; +}