@hedia/recommendation-screen 1.0.0

package/src/components/InfoBars.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+export interface IProps {
+    label: string;
+    value?: string;
+    units: string;
+    showZeroAsDash: boolean;
+}
+export default class InfoBars extends React.Component<IProps> {
+    render(): JSX.Element;
+}
+export declare const infoStyles: {
+    container: {
+        flex: number;
+    };
+    margin: {
+        flex: number;
+        margin: string;
+        marginBottom: number;
+    };
+    border: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+    };
+    borderContainer: {
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        paddingLeft: string;
+        paddingRight: string;
+    };
+    labelContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    label: {
+        color: string;
+        fontSize: number;
+        fontWeight: "bold";
+    };
+    valueUnitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+        flexDirection: "row";
+    };
+    valueContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
+    value: {
+        color: string;
+        fontSize: number;
+        fontWeight: "bold";
+        textAlign: "right";
+    };
+    unitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+        paddingBottom: string;
+    };
+    units: {
+        color: string;
+        fontSize: number;
+        textAlign: "left";
+        paddingLeft: string;
+    };
+};

package/src/components/InfoBars.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.infoStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Constants_1 = require("../utils/Constants");
+const Header_1 = require("./Header");
+class InfoBars extends react_1.default.Component {
+    render() {
+        return (<react_native_1.View style={exports.infoStyles.container}>
+				<react_native_1.View style={exports.infoStyles.margin}>
+					<react_native_1.View style={exports.infoStyles.border}>
+						<react_native_1.View style={exports.infoStyles.borderContainer}>
+							<react_native_1.View style={exports.infoStyles.labelContainer}>
+								<react_native_1.Text style={exports.infoStyles.label}>{this.props.label}</react_native_1.Text>
+							</react_native_1.View>
+							<react_native_1.View style={exports.infoStyles.valueUnitContainer}>
+								<react_native_1.View style={exports.infoStyles.valueContainer}>
+									<react_native_1.Text style={exports.infoStyles.value}>{this.props.value ? this.props.value : `-.-`}</react_native_1.Text>
+								</react_native_1.View>
+								<react_native_1.View style={exports.infoStyles.unitContainer}>
+									<react_native_1.Text style={exports.infoStyles.units}>{this.props.units}</react_native_1.Text>
+								</react_native_1.View>
+							</react_native_1.View>
+						</react_native_1.View>
+					</react_native_1.View>
+				</react_native_1.View>
+			</react_native_1.View>);
+    }
+}
+exports.default = InfoBars;
+exports.infoStyles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    margin: {
+        flex: 1,
+        margin: Header_1.headerStyles.margin.margin,
+        marginBottom: 0,
+    },
+    border: {
+        borderWidth: 2,
+        borderColor: Constants_1.BORDER_COLOUR_WHITE,
+        borderRadius: 5,
+    },
+    borderContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        justifyContent: `space-between`,
+        paddingLeft: `3%`,
+        paddingRight: `3%`,
+    },
+    labelContainer: {
+        flex: 7,
+        justifyContent: `center`,
+    },
+    label: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 22,
+        fontWeight: `bold`,
+    },
+    valueUnitContainer: {
+        flex: 4,
+        justifyContent: `flex-end`,
+        flexDirection: `row`,
+    },
+    valueContainer: {
+        flex: 1,
+        justifyContent: `flex-end`,
+    },
+    value: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 16,
+        fontWeight: `bold`,
+        textAlign: `right`,
+    },
+    unitContainer: {
+        flex: 1,
+        justifyContent: `flex-end`,
+        paddingBottom: `3%`,
+    },
+    units: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 30,
+        textAlign: `left`,
+        paddingLeft: `5%`,
+    },
+});

package/src/components/InfoBars.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { BORDER_COLOUR_WHITE } from "../utils/Constants";
+import { headerStyles } from "./Header";
+
+export interface IProps {
+	label: string;
+	value?: string;
+	units: string;
+	showZeroAsDash: boolean;
+}
+
+export default class InfoBars extends React.Component<IProps> {
+	public render() {
+		return (
+			<View style={infoStyles.container}>
+				<View style={infoStyles.margin}>
+					<View style={infoStyles.border}>
+						<View style={infoStyles.borderContainer}>
+							<View style={infoStyles.labelContainer}>
+								<Text style={infoStyles.label}>{this.props.label}</Text>
+							</View>
+							<View style={infoStyles.valueUnitContainer}>
+								<View style={infoStyles.valueContainer}>
+									<Text style={infoStyles.value}>{this.props.value ? this.props.value : `-.-`}</Text>
+								</View>
+								<View style={infoStyles.unitContainer}>
+									<Text style={infoStyles.units}>{this.props.units}</Text>
+								</View>
+							</View>
+						</View>
+					</View>
+				</View>
+			</View>
+		);
+	}
+}
+
+export const infoStyles = StyleSheet.create({
+	container: { flex: 1 },
+	margin: {
+		flex: 1,
+		margin: headerStyles.margin.margin,
+		marginBottom: 0,
+	},
+	border: {
+		borderWidth: 2,
+		borderColor: BORDER_COLOUR_WHITE,
+		borderRadius: 5,
+	},
+	borderContainer: {
+		flex: 1,
+		flexDirection: `row`,
+		justifyContent: `space-between`,
+		paddingLeft: `3%`,
+		paddingRight: `3%`,
+	},
+	labelContainer: {
+		flex: 7,
+		justifyContent: `center`,
+	},
+	label: {
+		color: `white`,
+		fontSize: Dimensions.get(`screen`).width / 22,
+		fontWeight: `bold`,
+	},
+	valueUnitContainer: {
+		flex: 4,
+		justifyContent: `flex-end`,
+		flexDirection: `row`,
+	},
+	valueContainer: {
+		flex: 1,
+		justifyContent: `flex-end`,
+	},
+	value: {
+		color: `white`,
+		fontSize: Dimensions.get(`screen`).width / 16,
+		fontWeight: `bold`,
+		textAlign: `right`,
+	},
+	unitContainer: {
+		flex: 1,
+		justifyContent: `flex-end`,
+		paddingBottom: `3%`,
+	},
+	units: {
+		color: `white`,
+		fontSize: Dimensions.get(`screen`).width / 30,
+		textAlign: `left`,
+		paddingLeft: `5%`,
+	},
+});

package/src/components/InvisibleNumberInput.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { TextInput } from "react-native";
+interface IProps {
+    startValue?: string;
+    decimalPlaces: number;
+    cleanPartialInput: boolean;
+    negativeAllowed: boolean;
+    visible(toggle: () => void): void;
+    onEnd?(value: number): void;
+    partialInput?(value: string): void;
+}
+interface IState {
+    value: string;
+}
+export default class InvisibleNumberInput extends React.Component<IProps, IState> {
+    textInput: TextInput;
+    state: IState;
+    componentDidMount(): void;
+    cleanInput: (text: string) => string;
+    handleOnChangeText: (text: string) => void;
+    onEndEdit: () => void;
+    render(): JSX.Element;
+}
+export {};

package/src/components/InvisibleNumberInput.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+class InvisibleNumberInput extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            value: `0`,
+        };
+        this.cleanInput = (text) => {
+            const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+            const round = (value) => {
+                const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
+                const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
+                if (this.props.negativeAllowed) {
+                    return rounded.toFixed(this.props.decimalPlaces);
+                }
+                return Math.abs(rounded).toFixed(this.props.decimalPlaces);
+            };
+            if (!isNaN(Number(replaced))) {
+                return round(replaced);
+            }
+            return `0`;
+        };
+        this.handleOnChangeText = (text) => {
+            const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
+            const replacedSeperator = cleaned.replace(/\.+/g, `.`);
+            this.setState({
+                value: `${replacedSeperator}`,
+            });
+            this.props.partialInput?.(`${replacedSeperator}`);
+        };
+        this.onEndEdit = () => {
+            const cleaned = this.cleanInput(this.state.value);
+            this.props.onEnd?.(Number(cleaned));
+        };
+    }
+    componentDidMount() {
+        this.setState({
+            value: this.props.startValue ?? `0`,
+        });
+        this.props.visible(() => {
+            this.setState({
+                value: this.props.startValue ?? `0`,
+            });
+            return this.textInput.focus();
+        });
+    }
+    render() {
+        return (<react_native_1.TextInput accessibilityLabel="InvisibleNumberInput" value={`${this.state.value}`} ref={(textInput) => (this.textInput = textInput)} style={inputStyles.textInput} keyboardType="numeric" onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit}/>);
+    }
+}
+exports.default = InvisibleNumberInput;
+const inputStyles = react_native_1.StyleSheet.create({
+    textInput: {
+        width: 0,
+        height: 0,
+        padding: 0.2,
+    },
+});

package/src/components/InvisibleNumberInput.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { StyleSheet, TextInput } from "react-native";
+
+interface IProps {
+	startValue?: string;
+	decimalPlaces: number;
+	cleanPartialInput: boolean;
+	negativeAllowed: boolean;
+	visible(toggle: () => void): void;
+	onEnd?(value: number): void;
+	partialInput?(value: string): void;
+}
+
+interface IState {
+	value: string;
+}
+
+export default class InvisibleNumberInput extends React.Component<IProps, IState> {
+	public textInput: TextInput;
+
+	public state: IState = {
+		value: `0`,
+	};
+
+	public componentDidMount() {
+		this.setState({
+			value: this.props.startValue ?? `0`,
+		});
+		this.props.visible(() => {
+			this.setState({
+				value: this.props.startValue ?? `0`,
+			});
+			return this.textInput.focus();
+		});
+	}
+
+	public cleanInput = (text: string): string => {
+		const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+		const round = (value: string) => {
+			const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
+			const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
+			if (this.props.negativeAllowed) {
+				return rounded.toFixed(this.props.decimalPlaces);
+			}
+			return Math.abs(rounded).toFixed(this.props.decimalPlaces);
+		};
+		if (!isNaN(Number(replaced))) {
+			return round(replaced);
+		}
+		return `0`;
+	};
+
+	public handleOnChangeText = (text: string) => {
+		const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
+		const replacedSeperator = cleaned.replace(/\.+/g, `.`);
+		this.setState({
+			value: `${replacedSeperator}`,
+		});
+		this.props.partialInput?.(`${replacedSeperator}`);
+	};
+
+	public onEndEdit = () => {
+		const cleaned = this.cleanInput(this.state.value);
+		this.props.onEnd?.(Number(cleaned));
+	};
+
+	public render() {
+		return (
+			<TextInput
+				accessibilityLabel="InvisibleNumberInput"
+				value={`${this.state.value}`}
+				ref={(textInput) => (this.textInput = textInput)}
+				style={inputStyles.textInput}
+				keyboardType="numeric"
+				onChangeText={this.handleOnChangeText}
+				onEndEditing={this.onEndEdit}
+			/>
+		);
+	}
+}
+
+const inputStyles = StyleSheet.create({
+	textInput: {
+		width: 0,
+		height: 0,
+		padding: 0.2,
+	},
+});

package/src/components/MoodIcon.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ImageURISource } from "react-native";
+import { MoodEnum } from "../types/enum";
+interface IProps {
+    mood: MoodEnum;
+    active: boolean;
+    onPress(toggle: boolean): void;
+}
+export default class MoodIcon extends React.Component<IProps> {
+    getMoodIcon: () => ImageURISource;
+    handleOnPress: () => void;
+    render(): JSX.Element;
+}
+export {};

package/src/components/MoodIcon.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const enum_1 = require("../types/enum");
+const moods_inactive = {
+    1: require(`../assets/sad.png`),
+    2: require(`../assets/semi_sad.png`),
+    3: require(`../assets/neutral.png`),
+    4: require(`../assets/semi_happy.png`),
+    5: require(`../assets/happy.png`),
+};
+const moods_active = {
+    1: require(`../assets/sad_active.png`),
+    2: require(`../assets/semi_sad_active.png`),
+    3: require(`../assets/neutral_active.png`),
+    4: require(`../assets/semi_happy_active.png`),
+    5: require(`../assets/happy_active.png`),
+};
+class MoodIcon extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.getMoodIcon = () => {
+            if (this.props.active) {
+                return moods_active[this.props.mood];
+            }
+            return moods_inactive[this.props.mood];
+        };
+        this.handleOnPress = () => {
+            this.props.onPress(!this.props.active);
+        };
+    }
+    render() {
+        const { mood, active } = this.props;
+        const label = `${enum_1.MoodEnum[mood]}_${active}`;
+        return (<react_native_1.TouchableOpacity style={moodIconStyles.container} onPress={this.handleOnPress} accessibilityLabel={label}>
+				<react_native_1.Image style={moodIconStyles.icon} source={this.getMoodIcon()}/>
+			</react_native_1.TouchableOpacity>);
+    }
+}
+exports.default = MoodIcon;
+const moodIconStyles = react_native_1.StyleSheet.create({
+    container: {
+        marginHorizontal: `1%`,
+    },
+    icon: {
+        width: react_native_1.Dimensions.get(`screen`).width / 8,
+        height: react_native_1.Dimensions.get(`screen`).width / 8,
+    },
+});

package/src/components/MoodIcon.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Dimensions, Image, ImageURISource, StyleSheet, TouchableOpacity } from "react-native";
+import { MoodEnum } from "../types/enum";
+
+interface IProps {
+	mood: MoodEnum;
+	active: boolean;
+	onPress(toggle: boolean): void;
+}
+
+const moods_inactive: Record<number, ImageURISource> = {
+	1: require(`../assets/sad.png`),
+	2: require(`../assets/semi_sad.png`),
+	3: require(`../assets/neutral.png`),
+	4: require(`../assets/semi_happy.png`),
+	5: require(`../assets/happy.png`),
+};
+
+const moods_active: Record<number, ImageURISource> = {
+	1: require(`../assets/sad_active.png`),
+	2: require(`../assets/semi_sad_active.png`),
+	3: require(`../assets/neutral_active.png`),
+	4: require(`../assets/semi_happy_active.png`),
+	5: require(`../assets/happy_active.png`),
+};
+
+export default class MoodIcon extends React.Component<IProps> {
+	public getMoodIcon = (): ImageURISource => {
+		if (this.props.active) {
+			return moods_active[this.props.mood];
+		}
+		return moods_inactive[this.props.mood];
+	};
+
+	public handleOnPress = () => {
+		this.props.onPress(!this.props.active);
+	};
+
+	public render() {
+		const { mood, active } = this.props;
+		const label = `${MoodEnum[mood]}_${active}`;
+		return (
+			<TouchableOpacity style={moodIconStyles.container} onPress={this.handleOnPress} accessibilityLabel={label}>
+				<Image style={moodIconStyles.icon} source={this.getMoodIcon()} />
+			</TouchableOpacity>
+		);
+	}
+}
+
+const moodIconStyles = StyleSheet.create({
+	container: {
+		marginHorizontal: `1%`,
+	},
+	icon: {
+		width: Dimensions.get(`screen`).width / 8,
+		height: Dimensions.get(`screen`).width / 8,
+	},
+});

package/src/components/RecentInsulin.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface IProps {
+    onRecentInsulinYes(): void;
+    onRecentInsulinNo(): void;
+}
+export default class RecentInsulin extends React.Component<IProps> {
+    render: () => JSX.Element;
+}
+export {};

package/src/components/RecentInsulin.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const macro_1 = require("@lingui/macro");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const i18nUtils_1 = require("../locale/i18nUtils");
+const InfoBars_1 = require("./InfoBars");
+class RecentInsulin extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.render = () => {
+            return (<react_native_1.View style={recentInsulinStyles.container}>
+				<react_native_1.View style={recentInsulinStyles.titleContainer}>
+					<react_native_1.Text style={recentInsulinStyles.recommended}>{i18nUtils_1.i18n._(macro_1.t `Recommended amount of insulin`)}</react_native_1.Text>
+				</react_native_1.View>
+				<react_native_1.View style={recentInsulinStyles.takenInsulinContainer}>
+					<react_native_1.Text style={recentInsulinStyles.takenInsulin}>
+						{i18nUtils_1.i18n._(macro_1.t `Have you taken insulin within the last 4 hours?`)}
+					</react_native_1.Text>
+				</react_native_1.View>
+				<react_native_1.View style={recentInsulinStyles.buttonContainer}>
+					<react_native_1.View style={recentInsulinStyles.filler}/>
+					<react_native_1.TouchableOpacity onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
+						<react_native_1.Text style={recentInsulinStyles.yesNoText}>{i18nUtils_1.i18n._(macro_1.t `Yes`)}</react_native_1.Text>
+					</react_native_1.TouchableOpacity>
+					<react_native_1.TouchableOpacity onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
+						<react_native_1.Text style={recentInsulinStyles.yesNoText}>{i18nUtils_1.i18n._(macro_1.t `No`)}</react_native_1.Text>
+					</react_native_1.TouchableOpacity>
+					<react_native_1.View style={recentInsulinStyles.filler}/>
+				</react_native_1.View>
+			</react_native_1.View>);
+        };
+    }
+}
+exports.default = RecentInsulin;
+const recentInsulinStyles = react_native_1.StyleSheet.create({
+    container: {
+        ...InfoBars_1.infoStyles.margin,
+        backgroundColor: `rgba(118, 82, 255, 0.5)`,
+        borderRadius: 5,
+    },
+    titleContainer: {
+        flex: 1,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `4%`,
+        marginBottom: `4%`,
+    },
+    recommended: {
+        ...InfoBars_1.infoStyles.label,
+    },
+    takenInsulinContainer: {
+        flex: 1,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `2%`,
+    },
+    takenInsulin: {
+        ...InfoBars_1.infoStyles.label,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 27,
+    },
+    buttonContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        justifyContent: `space-evenly`,
+        marginTop: `4%`,
+        marginBottom: `5%`,
+    },
+    yesNoContainer: {
+        flex: 1,
+        borderColor: `white`,
+        borderRadius: 100,
+        borderWidth: 2,
+        paddingHorizontal: `2%`,
+        paddingVertical: `1%`,
+    },
+    yesNoText: {
+        textAlign: `center`,
+        paddingTop: `1%`,
+        paddingBottom: `1%`,
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 25,
+        fontWeight: `bold`,
+    },
+    filler: {
+        flex: 1,
+    },
+});