Untuk UAS

components/CallToActionCard.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
+
+const CallToActionCard = ({ image, title, description, buttonLabel, onPress }) => {
+    return (
+        <View style={styles.card}>
+      <Image source={image} style={styles.image} resizeMode="contain" />
+
+      <View style={styles.textContainer}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.description}>{description}</Text>
+
+        <TouchableOpacity style={styles.button} onPress={onPress}>
+          <Text style={styles.buttonText}>{buttonLabel}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+    );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    flexDirection: 'row',
+    backgroundColor: '#dee',
+    borderRadius: 16,
+    padding: 12,
+    margin: 16,
+    alignItems: 'center',
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
+  },
+  image: {
+    width: 80,
+    height: 80,
+    marginRight: 12,
+    borderRadius: 12,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  description: {
+    fontSize: 13,
+    color: '#666',
+    marginBottom: 8,
+  },
+  button: {
+    alignSelf: 'flex-start',
+    backgroundColor: '#2e86de',
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 16,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});
+
+export default CallToActionCard;

components/CardRecord.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const CardRecord = ({ children, style }) => {
+    return <View style={[styles.resultRow, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+    resultRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 10,
+        paddingVertical: 5,
+        paddingHorizontal: 15,
+        marginVertical: 5,
+        backgroundColor: '#fafafa',
+        alignItems: 'center',
+    },
+});
+
+export default CardRecord;

components/ListItem.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {View,Text} from 'react-native';
+
+const ListItemBmi = ({item}) => (
+    <View key="{item.id}" style={styles.resultRow}>
+        <Text style={styles.resultDate}>{item.when}</Text>
+        <Text style={styles.resultValue}>W:88 H:175 BMI:{bmiFormula(88,175)}</Text>
+        <Text style={styles.resultStatus}>{bmiDiagnose(bmiFormula(88,175),"Male")}</Text>
+    </View>
+);
+
+export default ListItemBmi;

screens/ScreenMassa.js

@@ -1,22 +1,341 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Text, Image, StyleSheet, TouchableOpacity, Animated, BackHandler, FlatList, ScrollView, TextInput } from 'react-native';
+import axios from 'axios';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Container from '../components/Container';
+import CardRecord from '../components/CardRecord';
 
 const ScreenMassa = ({ navigation }) => {
-  return (
-    <View style={styles.container}>
-      <Text>Ini halaman Massa</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
+    const [token, 		setToken		] = useState(null);
+    
+    const [profileId,	setProfileId	] = useState(null);
+    const [profileName,	setProfileName	] = useState(null);
+    const [profileSex,	setProfileSex	] = useState(null);
+    const [profileDob,	setProfileDob	] = useState(null);
+    const [profileAge,	setProfileAge	] = useState(null);
+    
+    const [weight, 		setWeight		] = useState(0); //kg
+    const [height, 		setHeight		] = useState(0); //cm
+    
+    const [recordList,	setRecordList	] = useState([]);
+    
+    const getToken = async () => {
+        const savedToken = await AsyncStorage.getItem('auth_token');
+        if (savedToken !== null) {
+            setToken(savedToken);
+        }
+        else {
+            navigation.navigate("Profil");
+        }
+    };
+
+    const HttpRequest = (url,body,conf, handle) => { // string, object, object
+        axios.post(url, body, conf).then(response => {
+            handle(response.data);
+        }).catch(error => {
+            console.error('Terjadi kesalahan:', error.stack);
+        });
+    };
+
+    const handleProfileDetail = (data) => {
+        if (data.status === 'success') {
+            setProfileId(data.data.id);
+            setProfileName(data.data.name);
+            setProfileSex(data.data.sex);
+            setProfileDob(data.data.dob);
+            if (data.data.dob !== null) {
+                const tanggalLahir = new Date(data.data.dob);
+                const today = new Date();
+                const umur = today.getFullYear() - tanggalLahir.getFullYear();
+                const bulanSekarang = today.getMonth() - tanggalLahir.getMonth();
+                let umurTerupdate;
+                if (bulanSekarang < 0 || (bulanSekarang === 0 && today.getDate() < tanggalLahir.getDate())) { umurTerupdate = umur - 1; }
+                else { umurTerupdate = umur; }
+                setProfileAge(umurTerupdate);
+            }
+        }
+    };
+    
+    const fetchProfileDetail = async () => {
+        try {
+            const url = 'https://uas.ditaajipratama.net/api/checkcare/profile/detail';
+            const body = {};
+            const auth_token = await AsyncStorage.getItem('auth_token');
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${auth_token}`
+                }
+            };
+            console.log(`Bearer ${auth_token}`);
+            console.log(token);
+            if (auth_token !== null) { HttpRequest(url, body, config, handleProfileDetail); }
+        }catch(error){
+            console.log(error.stack);
+        }        
+    };
+    
+    const bmiFormula = (w, h) => {
+        if (w > 0 && h > 0) return parseFloat( ( w/((h/100)*(h/100)) ).toFixed(2) );
+        else return null;
+    }
+    const bmiDiagnose = (num, sex) => {
+        if (num > 0) {
+            if (sex == "Male") {
+                if      (num >= 27) return "Obese";
+                else if (num >= 23) return "Over";
+                else if (num >= 17) return "Normal";
+                else if (num <  17) return "Under";
+                else return null;
+            }
+            else if (sex == "Female") {
+                if      (num >= 27) return "Obese";
+                else if (num >= 25) return "Over";
+                else if (num >= 18) return "Normal";
+                else if (num <  18) return "Under";
+                else return null;
+            }
+            else return null;
+        }
+        else return null;
+    }
+    const bmiTextColor = (stat) => {
+        if (stat == "Normal") return "green";
+        else return "red";
+    }
+
+    const quickResult = () => {
+        const diagnose = bmiDiagnose(bmiFormula(weight,height),profileSex)
+        const title    = `${diagnose}-Weight`;
+        if (diagnose == "Obese" ) {
+            const message  = "Obesitas berbahaya bagi kesehatan. Penting untuk kamu mengurus berat badan tersebut dengan cara yang sehat dan cermatilah asupan makanan serta latihannya.";
+            if (profileSex == "Male") {const image    = require("../img/bmi/man/fat.png");return {title,message,image};}
+            else                      {const image    = require("../img/bmi/woman/fat.png");return {title,message,image};}
+        }
+        else if (diagnose == "Over" ) {
+            const message  = "Kamu kelebihan berat badan, tetapi jangan khawatir! Kemungkinan besar kamu masih dapat mengontrol berat badan melalui pola makan dan latihan fisik yang sehat.";
+            if (profileSex == "Male") {const image    = require("../img/bmi/man/fat.png");return {title,message,image};}
+            else                      {const image    = require("../img/bmi/woman/fat.png");return {title,message,image};}
+        }
+        else if (diagnose == "Normal" ) {
+            const message  = "Selamat! Kamu termasuk dalam kategori berat badan normal, tetapi jaga asupan makanan dan latihan fisik agar tetap sehat serta stabil ya!";
+            if (profileSex == "Male") {const image    = require("../img/bmi/man/fit.png");return {title,message,image};}
+            else                      {const image    = require("../img/bmi/woman/fit.png");return {title,message,image};}
+        }
+        else if (diagnose == "Under" ) {
+            const message  = "Kamu termasuk kategori kelembongan, perlu diperhatikan untuk meningkatkan berat badannya dengan cara yang sesuai dan sehat agar tetap aktif serta stabil.";
+            if (profileSex == "Male") {const image    = require("../img/bmi/man/fit.png");return {title,message,image};}
+            else                      {const image    = require("../img/bmi/woman/fit.png");return {title,message,image};}
+        }
+        else {
+            const title    = "Cek BMI";
+            const message  = "Cek berat badan ideal mu dengan memasukkan Berat dan Tinggi kamu";
+            const image    = require("../img/bmi/weighing-scale.png");
+            return {title,message,image};
+        }
+    }
+
+    const reqRecordList = async () => {
+        try {
+            const url = 'https://uas.ditaajipratama.net/api/checkcare/bmi/list';
+            const body = {};
+            const auth_token = await AsyncStorage.getItem('auth_token');
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${auth_token}`
+                }
+            };
+            const handle = (data) => {
+                setRecordList(data);
+            };
+            if (auth_token !== null) { HttpRequest(url, body, config, handle); }
+        }catch(error){
+            console.log(error.stack);
+        }
+    };
+
+    const reqAdd = async () => {
+        try {
+            const url = 'https://uas.ditaajipratama.net/api/checkcare/bmi/add';
+            const body = {
+                weight:weight,
+                height:height
+            };
+            const auth_token = await AsyncStorage.getItem('auth_token');
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${auth_token}`
+                }
+            };
+            const handle = (data) => {
+                reqRecordList();
+                setWeight(0);
+                setHeight(0);
+            };
+            if (auth_token !== null) { HttpRequest(url, body, config, handle); }
+        } catch(error){
+            console.log(error.stack);
+        }
+    }
+
+    const ListItem = ({item}) => (
+        <CardRecord key="{item.id}">
+            <Text style={styles.resultDate}>{item.when}</Text>
+            <Text style={styles.resultValue}>
+                W:{item.weight} H:{item.height} BMI:{bmiFormula(item.weight, item.height)}
+            </Text>
+            <Text style={[styles.resultStatus,{color: bmiTextColor(bmiDiagnose(bmiFormula(item.weight,item.height),profileSex)),}]}>
+                {bmiDiagnose(bmiFormula(item.weight,item.height),profileSex)}
+            </Text>
+        </CardRecord>
+    );
+
+    useEffect(() => {
+        getToken();
+        fetchProfileDetail();
+        reqRecordList();
+    }, []);
+    
+    return (
+        <Container>
+
+            <View style={styles.headerRow}>
+                <View style={styles.illustrationContainer}>
+                    <Image
+                        source={quickResult().image}
+                        style={styles.illustration}
+                        resizeMode="contain"
+                    />
+                </View>
+                <View style={styles.textContainer}>
+                    <Text style={styles.title}>{quickResult().title}</Text>
+                    <Text style={styles.datetime}>{`BMI:${bmiFormula(weight, height)}`}</Text>
+                    <Text style={styles.description}>{quickResult().message}</Text>
+                </View>
+            </View>
+            
+            <View style={styles.inputRow}>
+                <TextInput
+                    style={styles.inputForm}
+                    placeholder="W (kg)"
+                    placeholderTextColor="#888"
+                    keyboardType="numeric"
+                    onChangeText={(text) => setWeight(text)}
+                    value={weight}
+                />
+                <TextInput
+                    style={styles.inputForm}
+                    placeholder="H (cm)"
+                    placeholderTextColor="#888"
+                    keyboardType="numeric"
+                    onChangeText={(text) => setHeight(text)}
+                    value={height}
+                />
+                <TouchableOpacity style={styles.inputButtonSubmit} onPress={reqAdd}>
+                    <Text style={styles.submitText}>Submit</Text>
+                </TouchableOpacity>
+            </View>
+
+            <View style={{flex:2}}>
+                <FlatList
+                    data={recordList.data}
+                    renderItem={({ item }) => <ListItem item={item} />}
+                    keyExtractor={(item, index) => index.toString()}
+                />
+            </View>
+            
+        </Container>
+    ); // End return
+};
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    illustration: {
+        width: 100,
+        height: 100,
+    },
+    illustrationContainer: {
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        color: '#111',
+    },
+    datetime: {
+        fontSize: 12,
+        color: '#444',
+        marginVertical: 4,
+    },
+    description: {
+        fontSize: 14,
+        color: '#333',
+        maxWidth: 320,
+        marginBottom: 16,
+    },
+    inputRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '100%',
+        marginBottom:10,
+    },
+    inputForm: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: '#ccc',
+        borderRadius: 30,
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        marginHorizontal: 6,
+        backgroundColor: '#fff',
+        color: '#333',
+    },
+    inputButton: {
+        flex: 1,
+        borderWidth: 1,
+        borderColor: '#ccc',
+        borderRadius: 30,
+        paddingVertical: 12,
+        marginHorizontal: 6,
+        backgroundColor: '#f9f9f9',
+    },
+    inputButtonSubmit: {
+        flex: 1,
+        borderRadius: 30,
+        paddingVertical: 12,
+        marginHorizontal: 6,
+        backgroundColor: '#007bff',
+    },
+    inputText: {
+        textAlign: 'center',
+        color: '#333',
+        fontWeight: '500',
+    },
+    submitText: {
+        textAlign: 'center',
+        color: '#fff',
+        fontWeight: '600',
+    },
+    resultDate: {
+        flex: 1,
+        color: '#333',
+    },
+    resultValue: {
+        flex: 1,
+        textAlign: 'center',
+        color: '#111',
+        fontWeight: '500',
+    },
+    resultStatus: {
+        flex: 1,
+        textAlign: 'right',
+        fontWeight: 'bold',
+    },
 });
 
 export default ScreenMassa;

screens/ScreenProfile.js

@@ -53,7 +53,7 @@ const ScreenProfile = ({ navigation }) => {
     };
 
     const submitLogin = () => {
-        const url = 'https://asrul.costafuture.com/api/auth/login';
+        const url = 'https://uas.ditaajipratama.net/api/auth/login';
         const body = {
             username:username,
             password:password
@@ -62,7 +62,7 @@ const ScreenProfile = ({ navigation }) => {
         HttpRequest(url, body, config, handleLogin);
     };
     const submitLogout = () => {
-        const url = 'https://asrul.costafuture.com/api/auth/logout';
+        const url = 'https://uas.ditaajipratama.net/api/auth/logout';
         const body = {};
         const config = {
             headers: {
@@ -92,7 +92,7 @@ const ScreenProfile = ({ navigation }) => {
     }
     const reqProfileDetail = async () => {
         try {
-            const url = 'https://asrul.costafuture.com/api/checkcare/profile/detail';
+            const url = 'https://uas.ditaajipratama.net/api/checkcare/profile/detail';
             const body = {};
             const auth_token = await AsyncStorage.getItem('auth_token');
             const config = {
@@ -111,7 +111,7 @@ const ScreenProfile = ({ navigation }) => {
     };
     const reqProfileEdit = async () => {
         try {
-            const url = 'https://asrul.costafuture.com/api/checkcare/profile/edit';
+            const url = 'https://uas.ditaajipratama.net/api/checkcare/profile/edit';
             const body = {
                 id:profileId,
                 name:profileName,
@@ -139,7 +139,7 @@ const ScreenProfile = ({ navigation }) => {
         <Container>
             {token ? (
                 <View style={styles.profil}>
-                    <Text>ID: {profileId}</Text>
+                    <Text style={{fontWeight:"bold", marginTop:10,}}>ID: {profileId}</Text>
                     <View style={styles.colnama}>
                         <TextInput
                             style={[styles.input, styles.nama,]}
@@ -147,15 +147,29 @@ const ScreenProfile = ({ navigation }) => {
                             onChangeText={(text) => setProfileName(text)}
                             value={profileName}
                         />
-                        <Text>{profileSex}</Text>
+                        {profileSex == "Male" ? (
+                            <Image style={{width:'40', height:'40',resizeMode: 'cover',}} source={require('../img/man.png')} />
+                        ) : (
+                            <Image style={{width:'40', height:'40',resizeMode: 'cover',}} source={require('../img/woman.png')} />
+                        ) }
+                        
+                    </View>
+                    <View style={styles.columur}>
+                        <Text style={{fontSize:24, marginRight:10,}}>{profileAge} tahun</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="Tanggal Lahir"
+                            onChangeText={(text) => setProfileDob(text)}
+                            value={profileDob}
+                        />
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Simpan Perubahan" onPress={reqProfileEdit} />
                     </View>
-                    <Text>{profileAge} Tahun</Text>
-                    <Text>{profileDob}</Text>
                     <View style={styles.button}>
                         <Button title="Logout" onPress={submitLogout} />
                     </View>
                 </View>
-                
             ) : (
                 <View style={styles.login}>
                     <Text style={styles.title}>Login</Text>
@@ -176,17 +190,40 @@ const ScreenProfile = ({ navigation }) => {
                     />
                     <Button style={styles.button} title="Login" onPress={submitLogin} />
                 </View>
-            ) }
+            )}
         </Container>
-    );
+    ); // End return
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+    input: {
+        borderColor: '#cccccc',
+        borderWidth: 1,
+        color:'#000000',
+        paddingHorizontal: 10,
+    },
+    button: {
+        marginBottom: 10,
+    },
+    nama: {
+        marginRight:10,
+        paddingHorizontal:0,
+        fontSize: 24,
+        width:'75%',
+    },
+    colnama: {
+        flexDirection:'row',
         alignItems: 'center',
-        justifyContent: 'center',
+        marginBottom:10,
+    },
+    columur: {
+        flexDirection:'row',
+        alignItems: 'center',
+        marginBottom:10,
     },
 });