diff --git a/components/CallToActionCard.js b/components/CallToActionCard.js new file mode 100644 index 0000000..212d658 --- /dev/null +++ b/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 ( + + + + + {title} + {description} + + + {buttonLabel} + + + + ); +}; + +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; diff --git a/components/CardRecord.js b/components/CardRecord.js new file mode 100644 index 0000000..092af06 --- /dev/null +++ b/components/CardRecord.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { View, StyleSheet } from 'react-native'; + +const CardRecord = ({ children, style }) => { + return {children}; +}; + +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; diff --git a/components/ListItem.js b/components/ListItem.js new file mode 100644 index 0000000..7ea3257 --- /dev/null +++ b/components/ListItem.js @@ -0,0 +1,12 @@ +import React from 'react'; +import {View,Text} from 'react-native'; + +const ListItemBmi = ({item}) => ( + + {item.when} + W:88 H:175 BMI:{bmiFormula(88,175)} + {bmiDiagnose(bmiFormula(88,175),"Male")} + +); + +export default ListItemBmi; diff --git a/img/bmi/man/fat.png b/img/bmi/man/fat.png new file mode 100644 index 0000000..37978c6 Binary files /dev/null and b/img/bmi/man/fat.png differ diff --git a/img/bmi/man/fit.png b/img/bmi/man/fit.png new file mode 100644 index 0000000..86236f6 Binary files /dev/null and b/img/bmi/man/fit.png differ diff --git a/img/bmi/weighing-scale.png b/img/bmi/weighing-scale.png new file mode 100644 index 0000000..4aa870a Binary files /dev/null and b/img/bmi/weighing-scale.png differ diff --git a/img/bmi/woman/fat.png b/img/bmi/woman/fat.png new file mode 100644 index 0000000..29b9d1e Binary files /dev/null and b/img/bmi/woman/fat.png differ diff --git a/img/bmi/woman/fit.png b/img/bmi/woman/fit.png new file mode 100644 index 0000000..91111c9 Binary files /dev/null and b/img/bmi/woman/fit.png differ diff --git a/img/body-scale.png b/img/body-scale.png new file mode 100644 index 0000000..38216b2 Binary files /dev/null and b/img/body-scale.png differ diff --git a/img/clipboard.png b/img/clipboard.png new file mode 100644 index 0000000..b04b220 Binary files /dev/null and b/img/clipboard.png differ diff --git a/img/hospital.png b/img/hospital.png new file mode 100644 index 0000000..22b461e Binary files /dev/null and b/img/hospital.png differ diff --git a/img/male.png b/img/male.png new file mode 100644 index 0000000..69e1bf3 Binary files /dev/null and b/img/male.png differ diff --git a/img/man.png b/img/man.png new file mode 100644 index 0000000..280e4b4 Binary files /dev/null and b/img/man.png differ diff --git a/img/medicine.png b/img/medicine.png new file mode 100644 index 0000000..33aeb34 Binary files /dev/null and b/img/medicine.png differ diff --git a/img/no-profile-donut.png b/img/no-profile-donut.png new file mode 100644 index 0000000..df4edf5 Binary files /dev/null and b/img/no-profile-donut.png differ diff --git a/img/online-marketing-hIgeoQjS_iE-unsplash.jpg b/img/online-marketing-hIgeoQjS_iE-unsplash.jpg new file mode 100644 index 0000000..089395c Binary files /dev/null and b/img/online-marketing-hIgeoQjS_iE-unsplash.jpg differ diff --git a/img/sphygmomanometer.png b/img/sphygmomanometer.png new file mode 100644 index 0000000..7286480 Binary files /dev/null and b/img/sphygmomanometer.png differ diff --git a/img/sugar-blood-level.png b/img/sugar-blood-level.png new file mode 100644 index 0000000..78b7a65 Binary files /dev/null and b/img/sugar-blood-level.png differ diff --git a/img/thermometer.png b/img/thermometer.png new file mode 100644 index 0000000..ee81c82 Binary files /dev/null and b/img/thermometer.png differ diff --git a/img/woman.png b/img/woman.png new file mode 100644 index 0000000..8d15a88 Binary files /dev/null and b/img/woman.png differ diff --git a/screens/ScreenMassa.js b/screens/ScreenMassa.js index 8da61c4..9396e4d 100644 --- a/screens/ScreenMassa.js +++ b/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 ( - - Ini halaman Massa - - - ); -} + 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}) => ( + + {item.when} + + W:{item.weight} H:{item.height} BMI:{bmiFormula(item.weight, item.height)} + + + {bmiDiagnose(bmiFormula(item.weight,item.height),profileSex)} + + + ); + + useEffect(() => { + getToken(); + fetchProfileDetail(); + reqRecordList(); + }, []); + + return ( + + + + + + + + {quickResult().title} + {`BMI:${bmiFormula(weight, height)}`} + {quickResult().message} + + + + + setWeight(text)} + value={weight} + /> + setHeight(text)} + value={height} + /> + + Submit + + + + + } + keyExtractor={(item, index) => index.toString()} + /> + + + + ); // 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; diff --git a/screens/ScreenProfile.js b/screens/ScreenProfile.js index 6e934b5..9998784 100644 --- a/screens/ScreenProfile.js +++ b/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 }) => { {token ? ( - ID: {profileId} + ID: {profileId} { onChangeText={(text) => setProfileName(text)} value={profileName} /> - {profileSex} + {profileSex == "Male" ? ( + + ) : ( + + ) } + + + + {profileAge} tahun + setProfileDob(text)} + value={profileDob} + /> + + +