issue 22: Text Reading Page

Database/dbInitialization.js

@@ -102,6 +102,8 @@ const initializeDatabase = async () => {
     });
   };
 
+  //session: for user data flow
+
   const imgdpTableQuery = `
     CREATE TABLE IF NOT EXISTS imgdp (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -144,11 +146,23 @@ const initializeDatabase = async () => {
       FOREIGN KEY (user_id) REFERENCES users(id)
     )`;
 
+    // curriculumResponseTable stores curriculum input
+    // and responsiveness 
+    // calculated from our own mathematical function
+    // accounts for how each of the emotions are a factor in overall performance
+    const curriculumResponseTableQuery = `
+    CREATE TABLE IF NOT EXISTS achievements (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      type INTEGER,
+      responsiveness INTEGER
+    )`;
+
   return Promise.all([
     createTable(imgdpTableQuery, 'imgdp'),
     createTable(curriculumTableQuery, 'curriculum'),
     createTable(usersTableQuery, 'users'),
     createTable(achievementsTableQuery, 'achievements'),
+    createTable(curriculumResponseTableQuery, 'curriculumResponse')
   ])
   .then(() => {
     console.log('All tables created successfully.');
@@ -161,6 +175,36 @@ const initializeDatabase = async () => {
   });
 };
 
+
+//Input: image, either be a URI, or a base64 string
+//runs it through the computer vision models
+//get the responsiveness from and stores it in the db. 
+
+//todo: connect to cv model, and curriculumn optimize algorithms
+//todo: create index
+// preprocessed
+
+const insertCurriculumResponseData = async (imageInput,responsiveness) => {
+
+  return new Promise((resolve, reject) => {
+    db.transaction(tx => {
+      tx.executeSql(
+        'INSERT INTO  (imageInput, responsiveness) VALUES (?, ?)',
+        [imageInput, responsiveness],
+        (_, result) => {
+          console.log(`A row has been inserted with rowid ${result.insertId}`);
+          resolve(result);
+        },
+        (tx, error) => {
+          console.error('Error inserting data', error);
+          reject(error);
+        },
+      );
+    });
+  });
+};
+
+
 // Insert a new row into the imgdp table
 const insertImageData = async (b64str, input, output) => {
   return new Promise((resolve, reject) => {
@@ -258,7 +302,7 @@ const insertCurriculumData = (input_output, sequence, content) => {
     tx.executeSql(
       'INSERT INTO curriculum (input_output, sequence, content) VALUES (?, ?, ?)',
       [input_output, sequence, content],
-      (_, result) => { console.log(`A row has been inserted with rowid ${result.insertId}`);
+      (_, result) => { console.log(`A curriculumData row has been inserted with rowid ${result.insertId}`);
       resolve(result);
     },
       (tx, error) => { console.error('Error inserting data', error);
@@ -556,6 +600,23 @@ const updateAchievement = (name, description, points, user_id) => {
   });
 };
 
+const specificTextContent = (id) => {
+  return new Promise((resolve, reject) => {
+    db.transaction(tx => {
+      tx.executeSql(
+        'SELECT * FROM curriculum WHERE input_output = ?',
+        [id],
+        (_, result) => { resolve(result.rows.raw()); 
+          console.log('Successfully fetched text content from db.');
+        },
+        (_, error) => { reject(error); }
+      );
+    });
+  });
+};
+
+
+
 const allUserAchievements = (id) => {
   return new Promise((resolve, reject) => {
     db.transaction(tx => {
@@ -601,6 +662,8 @@ const testDb = async () => {
 
   await insertCurriculumData(0, 5, "Testing curriculum");
 
+  await insertCurriculumData(1, 6, "This is a sample text fetched from db.");
+
   await printCurriculumFirstRow();
 
   // User tests
@@ -690,6 +753,7 @@ testDb();
 
 // Export functions
 export {
+  insertCurriculumResponseData,
   createCombosTable,
   insertComboData,
   updateComboData,
@@ -713,4 +777,5 @@ export {
   allUserAchievements,
   deleteAchievement,
   testDb,
+  specificTextContent,
 };

src/Components/MulticolorBackground/defaultCSS.tsx

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import styles from '../../Styles/defaultCSS';
+
+
+const stylesheet = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    background:{
+      opacity: 1,
+      colorList: styles.colorList
+    },
+    darkground:{
+      opacity: 0.9,
+      colorList: styles.darkColor
+    },
+    image: {
+      flex: 1,
+      justifyContent: 'center',
+    }
+  });
+export default stylesheet;

src/Components/MulticolorBackground/index.tsx

@@ -0,0 +1,21 @@
+import { View, ScrollView } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import styles from './defaultCSS';
+
+const Index = ({ children, dark }) => {
+    return (
+        <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+            <View style={styles.container}>
+                {/* <LinearGradient style={styles.background} useAngle={true} angle={45} angleCenter={{ x: 0.5, y: 0.35 }} end={{ x: 1, y: 0 }} colors={styles.background.colorList}> */}
+                <LinearGradient style={dark?styles.darkground:styles.background} useAngle={true} angle={45} angleCenter={{ x: 0.5, y: 0.35 }} end={{ x: 1, y: 0 }} colors={dark?styles.darkground.colorList:styles.background.colorList}>
+                    <View>
+                        {children}
+                    </View>
+                </LinearGradient>
+            </View>
+        </ScrollView>
+    );
+};
+
+
+export default Index;

src/Screens/CurriculumText/data.js

@@ -0,0 +1,14 @@
+import { specificTextContent } from '../../../Database/dbInitialization';
+
+// Function to fetch text
+export const fetchLongText = async (textId) => {
+  try {
+    // To fix: Here we got three identical rows 
+    // // even though in dbInitialization.js we only inserted the row once.
+    const longText = await specificTextContent(textId);
+    return longText;
+  } catch (error) {
+    console.error('Failed to fetch text:', error);
+    throw error;
+  }
+};

src/Screens/CurriculumText/defaultCSS.tsx

@@ -0,0 +1,108 @@
+import { StyleSheet } from 'react-native';
+import styles from '../../Styles/defaultCSS';
+
+const stylesheet = StyleSheet.create({
+    container: {
+        height: '100%',
+        width: '100%'
+    },
+    buttonGroup: {
+        flex: 0.15,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginHorizontal: 0, // Adjust to reduce or increase space
+        marginBottom: 0,
+      },
+    buttonContainer: {
+        paddingBottom: 0,
+        paddingTop: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        padding: 0,
+        marginTop: 5,
+      },
+    button:{
+        padding: 0,
+        borderRadius: 10,
+        alignItems: 'center',
+        margin: 5,
+    },
+    buttonText: {
+        fontSize: 20, // Default font size for other buttons
+        // color: '#fff',
+        fontWeight: 'bold',
+    },
+    scrollContainer: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        marginTop:0,
+    },
+    centerContent: {
+        flex: 3,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        paddingVertical: 0,
+        marginTop:0,
+    },
+    text: {
+        textAlign: 'justify',
+        lineHeight: 30,
+        // fontSize: 20,
+    },
+
+    textNormal: { ...styles.textNormal },
+    header: {
+        ...styles.defaultText,
+        textAlign: 'center',
+        padding: 10,
+        fontSize: 33,
+        fontWeight: 'bold'
+    },
+    subheader: {
+        ...styles.subheaderText
+    },
+    row: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'space-around',
+        gap: 15,
+        flexGrow: 1
+    },
+    itemTitle: {
+        fontWeight: 'bold',
+        fontSize: 20,
+        padding: 5,
+        paddingHorizontal: 30,
+        textAlign: 'center',
+        ...styles.defaultText,
+    },
+    itemText: {
+        fontSize: 16,
+        padding: 5,
+        textAlign: 'center',
+        ...styles.content
+    },
+    rowItem: {
+        borderColor: styles.defaultColor,
+        borderWidth: .5,
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        flex: 1,
+        padding: 15,
+        alignItems: 'center',
+        textAlign: 'center',
+    },
+    section:
+    {
+        rowGap: 15,
+        padding: 30,
+
+    }
+});
+export default stylesheet;

src/Screens/CurriculumText/index.tsx

@@ -0,0 +1,92 @@
+// import { Image, View, } from 'react-native';
+import { TouchableOpacity, Image, ScrollView, View, StyleSheet } from 'react-native';
+import MulticolorBackground from '../../Components/MulticolorBackground';
+import Button from '../../Components/Button';
+import Text from '../../Components/Text';
+import styles from './defaultCSS';
+import PracticeSession from '../../Assets/svg/practice_session.svg';
+import AssignTasks from '../../Assets/svg/assign_tasks.svg';
+import { Appbar } from 'react-native-paper';
+
+import React, { useEffect,useState } from 'react';
+import { fetchLongText } from './data';
+
+
+const Index = ({ navigation }) => {
+  const [fontSize, setFontSize] = useState(20); // Initial font size
+  const [eyeProtectMode, setEyeProtectMode] = useState(false); // Eye protect mode state
+  const sampleText = `
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
+  `;
+  const [longText, setLongText] = useState(sampleText); // text content from curriculum table
+
+  useEffect(() => {
+    const loadLongText = async () => {
+      try {
+        const textId = 1; // Replace with the actual text ID
+        const text = await fetchLongText(textId);
+        const textContent = text[0].content; // The fetched row is wrapped in an array
+        setLongText(textContent);
+      } catch (error) {
+        console.error('Failed to fetch achievements:', error);
+      }
+    };
+
+    loadLongText();
+  }, []);
+
+
+  const increaseFontSize = () => setFontSize(fontSize + 2);
+  const decreaseFontSize = () => setFontSize(fontSize > 10 ? fontSize - 2 : fontSize);
+  const changeMode = () => setEyeProtectMode(!eyeProtectMode); // Toggle eye protect mode
+
+
+
+//<Text style={[styles.text, { fontSize }]}></Text>
+  return (
+    <MulticolorBackground dark = {eyeProtectMode}>
+      <Appbar.BackAction onPress={() => navigation.navigate('Login')} />
+      <Text style={{...styles.header, }}>
+      {/* <Text style={{...styles.header, ...{color:eyeProtectMode?'#FFFFFF':'#305070'}}}> */}
+        Reading for Today
+      </Text>
+      <ScrollView style={styles.container}>
+      <View style={styles.buttonContainer}>
+      <View style={styles.buttonGroup}>
+          <TouchableOpacity onPress={increaseFontSize} style={styles.button}>
+            <Text style={{ ...styles.buttonText, fontSize: 25, fontWeight: 'bold' }}>A</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity onPress={decreaseFontSize} style={styles.button}>
+            <Text style={styles.buttonText}>A</Text>
+          </TouchableOpacity>
+        </View>
+
+        <Button title='🌛' onPress={changeMode} />
+
+      </View>
+
+
+      {/* <ScrollView contentContainerStyle={styles.scrollContainer}> */}
+        <View style={styles.centerContent}>
+
+          <Text style={{...styles.text, ...{fontSize},...{padding: 20}}}>
+            {sampleText}
+          </Text>
+        </View>
+        <View style={{ width: 150, alignSelf: 'center' }}>
+          <Button title='Done' onPress={() => navigation.navigate('Main')} />
+        </View>
+      </ScrollView>
+
+    </MulticolorBackground>
+  );
+};
+
+
+
+export default Index;