Improve content, layout and functionality of multiple pages

Several updates have been done in different pages of the app for improved performance and user experience. This includes content changes in the `Identitas` page, updates in the layout and reduction of complex code in the `Tabel` page. There's also a modification in app navigation options and application of gradient color themes in graphs displayed on the `grafik` page.

src/app/app.component.html

@@ -3,8 +3,8 @@
     <ion-menu contentId="main-content" type="overlay">
       <ion-content>
         <ion-list id="inbox-list">
-          <ion-list-header>Inbox</ion-list-header>
-          <ion-note>hi&#64;ionicframework.com</ion-note>
+          <ion-list-header>PAIJO</ion-list-header>
+          <ion-note>Monitoring Kesehatan Secara Berkala dan Mandiri</ion-note>
 
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
             <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">

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' },
   ];

src/app/cover/cover.page.html

@@ -17,9 +17,10 @@
   <ion-card>
     <ion-card-header>
       <ion-card-title class="ion-text-center">
+        PAIJO<br/>
         Aplikasi Monitoring Kesehatan Secara Berkala Dan Mandiri
       </ion-card-title>
     </ion-card-header>
   </ion-card>
 
-</ion-content>
+</ion-content>

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
+        ]
       });
     }
   }
-}
+}

src/app/pemeriksaan/pemeriksaan.page.html

@@ -51,7 +51,7 @@
 
     <ion-item>
       <ion-label position="stacked">Kadar Kolesterol HDL(mg/dL)</ion-label>
-      <ion-input type="number" [(ngModel)]="payloadData.kolesterol_hdl" placeholder="Masukkan Kadar Kolesterol"></ion-input>
+      <ion-input type="number" [(ngModel)]="payloadData.kolesterol_hdl" placeholder="Masukkan Kadar Kolesterol HDL"></ion-input>
     </ion-item>
 
     <ion-item>
@@ -64,6 +64,11 @@
       <ion-input type="number" [(ngModel)]="payloadData.kolesterol_total" placeholder="Masukkan Kadar Kolesterol Total"></ion-input>
     </ion-item>
 
+    <ion-item>
+      <ion-label position="stacked">Trigliserida</ion-label>
+      <ion-input type="number" [(ngModel)]="payloadData.trigliserida" placeholder="Masukkan Kadar Trigliserida"></ion-input>
+    </ion-item>
+
     <ion-item>
       <ion-label position="stacked">Kadar HB (gr/dL)</ion-label>
       <ion-input type="number" [(ngModel)]="payloadData.kadar_hb" placeholder="Masukkan Kadar HB"></ion-input>
@@ -76,22 +81,24 @@
 
     <ion-item>
       <ion-label position="stacked">Golongan Darah</ion-label>
-      <ion-input type="text" [(ngModel)]="payloadData.golongan_darah" placeholder="Masukkan Golongan Darah"></ion-input>
+      <ion-select [(ngModel)]="payloadData.golongan_darah" placeholder="Pilih Golongan Darah">
+        <ion-select-option value="A">A</ion-select-option>
+        <ion-select-option value="B">B</ion-select-option>
+        <ion-select-option value="AB">AB</ion-select-option>
+        <ion-select-option value="O">O</ion-select-option>
+      </ion-select>
     </ion-item>
 
-    <ion-item>
-      <ion-label position="stacked">Trigliserida</ion-label>
-      <ion-input type="number" [(ngModel)]="payloadData.trigliserida" placeholder="Masukkan Trigliserida"></ion-input>
-    </ion-item>
+
     <ion-item>
       <ion-label position="stacked">HBA1C</ion-label>
       <ion-input type="number" [(ngModel)]="payloadData.hba1c" placeholder="Masukkan HBA1C"></ion-input>
     </ion-item>
     <ion-item>
-      <ion-label position="stacked">Lingkar Perut</ion-label>
+      <ion-label position="stacked">Lingkar Perut (cm)</ion-label>
       <ion-input type="number" [(ngModel)]="payloadData.lingkar_perut" placeholder="Masukkan Lingkar Perut"></ion-input>
     </ion-item>
-    
+
     <ion-item>
       <ion-label position="stacked">Waktu Pengambilan Gula Darah</ion-label>
       <ion-select [(ngModel)]="payloadData.waktu_pengambilan_gula_darah" placeholder="Pilih waktu">

src/app/tabel/tabel.page.html

@@ -3,14 +3,14 @@
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <ion-title>Tabel Ukur</ion-title>
+    <ion-title>Tabel Rekaman Pengukuran</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-title size="large">Tabel Rekaman Pengukuran</ion-title>
     </ion-toolbar>
   </ion-header>
 
@@ -19,144 +19,13 @@
       <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 #table class="material" [headerHeight]="50" [footerHeight]="50" [columnMode]="ColumnMode.force"
+                           [rowHeight]="'auto'" [loadingIndicator]="loadingIndicator" [scrollbarH]="true" [limit]="20"
+                           [rows]="restructuredData" [columns]="columns">
+              <ngx-datatable-column name="Komponen" [width]="200" [frozenLeft]="true">
               </ngx-datatable-column>
-              
-              <ngx-datatable-column prop="created_at">
-                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
-                  <span class="tableHeader">Tanggal</span>
-                </ng-template>
-                <ng-template ngx-datatable-cell-template let-value="value">
-                  {{ value | customDate }}
-                </ng-template>
+              <ngx-datatable-column *ngFor="let column of columns.slice(1)" [prop]="column.prop" [name]="column.name" [width]="150">
               </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="hba1c">
-                <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
-                  <span class="tableHeader">HBA1C</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>

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;
-  } 
-}
+  }
+
+  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;
+}

src/app/tentang-kami/tentang-kami.page.html

@@ -30,7 +30,7 @@
     </ion-card-header>
     <ion-card-content>
       <p>
-        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
+        <strong>PAIJO</strong> (<strong>PA</strong>stikan <strong>I</strong>ndikator kesehatan saudara <strong>J</strong>oss dan <strong>O</strong>ke) adalah aplikasi pendamping kesehatan yang membantu Anda memantau dan meningkatkan kesehatan Anda secara mandiri. Dengan fitur-fitur yang lengkap dan mudah digunakan, <strong>PAIJO</strong> hadir untuk memastikan Anda selalu dalam kondisi prima.
       </p>
     </ion-card-content>
   </ion-card>
@@ -58,4 +58,4 @@
       <ion-icon name="logo-whatsapp" slot="start"></ion-icon>
     </ion-item>
   </ion-list>
-</ion-content>
+</ion-content>

src/app/tips/tips.page.html

@@ -13,15 +13,14 @@
       <ion-title size="large">Tips</ion-title>
     </ion-toolbar>
   </ion-header>
-
-  <ion-card *ngFor="let tip of resData">
-    <ion-card-header>
-      <ion-card-title>
-        {{ tip.judul }}
-      </ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <div [innerHTML]="tip.isi"></div>
-    </ion-card-content>
-  </ion-card>
+  <ion-accordion-group>
+    <ion-accordion *ngFor="let tip of resData">
+      <ion-item slot="header" color="light">
+        <ion-label>{{ tip.judul }}</ion-label>
+      </ion-item>
+      <div class="ion-padding" slot="content">
+        <div [innerHTML]="tip.isi"></div>
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
 </ion-content>

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;
+}