Skip to content
Snippets Groups Projects
Commit 386b7779 authored by cabelt's avatar cabelt
Browse files

countdown in group

parent b0b5bf87
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/_layout.js
+ 12
− 16
View file @ 386b7779
......@@ -3,17 +3,17 @@ import { AntDesign } from "@expo/vector-icons";
export default function AppLayout() {
return (
<Stack
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#528AF6',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>,
// <Stack
// screenOptions={{
// headerStyle: {
// backgroundColor: '#f4511e',
// },
// headerTintColor: '#528AF6',
// headerTitleStyle: {
// fontWeight: 'bold',
// },
// }}
// />,
<Tabs>
<Tabs.Screen
// Name of the route to hide.
......@@ -31,8 +31,7 @@ export default function AppLayout() {
href: null,
}}
/>
<Tabs.Screen
<Tabs.Screen
// Name of the route to hide.
name="database"
options={{
......@@ -40,9 +39,6 @@ export default function AppLayout() {
href: null,
}}
/>
<Tabs.Screen
// Name of the route to hide.
name="user"
......
app/createGroup.js
+ 39
− 34
View file @ 386b7779
......@@ -14,6 +14,7 @@ export default function createGroup() {
const [prize, setPrize] = useState("");
const [username1, setUsername1] = useState("");
const [username2, setUsername2] = useState("");
const [countdown, setCountdown] = useState("");
//const [leaderid, setLeaderid] = useState(0);
const [items, setItems] = useState([])
......@@ -24,11 +25,11 @@ export default function createGroup() {
useEffect(() => {
db.transaction(tx => {
tx.executeSql('CREATE TABLE IF NOT EXISTS groups (id INTEGER PRIMARY KEY NOT NULL, groupname TEXT, prize TEXT, username1 TEXT, username2 TEXT);');
tx.executeSql('CREATE TABLE IF NOT EXISTS groups (id INTEGER PRIMARY KEY NOT NULL, groupname TEXT, prize TEXT, username1 TEXT, username2 TEXT, countdown TEXT);');
});
}, []);
const insertItem = (groupname,prize,username1, username2) => {
const insertItem = (groupname, prize, username1, username2, countdown) => {
......@@ -40,6 +41,7 @@ export default function createGroup() {
setGroupname("");
setPrize("");
//setLeaderid("");
setCountdown("");
};
......@@ -63,39 +65,42 @@ export default function createGroup() {
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>Please fill in the blanks and press insert to create a group!</Text>
<StatusBar style="auto" />
<TextInput
style={styles.input}
value={groupname}
autoCapitalize='none'
onChangeText={text => setGroupname(text)}
placeholder="Enter Group Name"
/>
<TextInput
style={styles.input}
value={username1}
autoCapitalize='none'
onChangeText={text => setUsername1(text)}
placeholder="Enter Username 1"
/>
<TextInput
style={styles.input}
value={username2}
autoCapitalize = 'words'
onChangeText={text => setUsername2(text)}
placeholder="Enter Username 2"
/>
<TextInput
style={styles.input}
value={prize}
autoCapitalize = 'words'
onChangeText={text => setPrize(text)}
placeholder="Enter Prize"
/>
<Button title="Insert Test Item" onPress={() => insertItem(groupname, prize, username1, username2)} />
style={styles.input}
value={groupname}
autoCapitalize='none'
onChangeText={text => setGroupname(text)}
placeholder="Enter Group Name"
/>
<TextInput
style={styles.input}
value={username1}
autoCapitalize='none'
onChangeText={text => setUsername1(text)}
placeholder="Enter Username 1"
/>
<TextInput
style={styles.input}
value={username2}
autoCapitalize = 'words'
onChangeText={text => setUsername2(text)}
placeholder="Enter Username 2"
/>
<TextInput
style={styles.input}
value={prize}
autoCapitalize = 'words'
onChangeText={text => setPrize(text)}
placeholder="Enter Prize"
/>
<TextInput
style={styles.input}
value={countdown}
autoCapitalize='none'
onChangeText={text => setCountdown(text)}
placeholder="Enter Countdown"
/>
<Button title="Insert Test Item" onPress={() => insertItem(groupname, prize, username1, username2, countdown)} />
......
app/group.js
+ 231
− 11
View file @ 386b7779
import { Pressable, StyleSheet, Text, Button, View, Appearance, useColorScheme } from "react-native";
import { Link } from "expo-router";
import { SafeAreaView, ScrollView, Pressable, Dimensions, StyleSheet, Text, Button, View, Appearance, useColorScheme, Image } from "react-native";
import { Tabs, Link } from "expo-router";
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import React, { useState, useEffect } from "react";
export default function group() {
const colorScheme = useColorScheme();
......@@ -11,10 +12,157 @@ export default function group() {
const themeContainerStyle =
colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
const [isDatePickerVisible, setDatePickerVisible] =
useState(false);
const [expiryDate, setExpiryDate] = useState(
new Date()
); // Default to current date and time
const [timeUnits, setTimeUnits] = useState({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
useEffect(() => {
const calculateTimeUnits = (timeDifference) => {
const seconds = Math.floor(
timeDifference / 1000
);
setTimeUnits({
days: Math.floor(
(seconds % (365 * 24 * 60 * 60)) /
(24 * 60 * 60)
),
hours: Math.floor(
(seconds % (24 * 60 * 60)) / (60 * 60)
),
minutes: Math.floor(
(seconds % (60 * 60)) / 60
),
seconds: seconds % 60,
});
};
const updateCountdown = () => {
const currentDate = new Date().getTime();
const expiryTime = expiryDate.getTime();
const timeDifference = expiryTime - currentDate;
if (timeDifference <= 0) {
// Countdown finished
calculateTimeUnits(0);
} else {
calculateTimeUnits(timeDifference);
}
};
updateCountdown();
const interval = setInterval(updateCountdown, 1000);
return () => clearInterval(interval);
}, [expiryDate]);
const formatTime = (time) => {
return time.toString().padStart(2, "0");
};
const handleStartTimer = () => {
setDatePickerVisible(true);
};
const handleResetTimer = () => {
setExpiryDate(new Date()); // Reset to current date and time
};
const handleDateConfirm = (date) => {
setExpiryDate(date);
setDatePickerVisible(false);
};
const handleDateCancel = () => {
setDatePickerVisible(false);
};
return (
<SafeAreaProvider>
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>This is group page</Text>
<View style={styles.header}>
<Image style={styles.avatar} source={{ uri: 'https://www.egypttoday.com/siteimages/Larg/202112260515371537.jpg' }} />
<View style={styles.info}>
<Text style={styles.name}>Social Media Addicts Annonymous</Text>
</View>
</View>
<View style={styles.timer}>
<Text
style={[
styles.timeUnit,
styles.dayUnit,
]}
>
{formatTime(timeUnits.days)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.hourUnit,
]}
>
{formatTime(timeUnits.hours)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.minuteUnit,
]}
>
{formatTime(timeUnits.minutes)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
<Text
style={[
styles.timeUnit,
styles.secondUnit,
]}
>
{formatTime(timeUnits.seconds)}
</Text>
<Text
style={styles.timeSeparator}
></Text>
</View>
<Text style={styles.timetitle}>
Days Hours Minutes Seconds
</Text>
<View style={styles.buttonContainer}>
<Button
title="Start Timer"
onPress={handleStartTimer}
style={styles.button}
/>
<Button
title="Reset Timer"
onPress={handleResetTimer}
style={[
styles.button,
styles.resetButton,
]}
/>
</View>
<DateTimePickerModal
isVisible={isDatePickerVisible}
mode="datetime"
onConfirm={handleDateConfirm}
onCancel={handleDateCancel}
/>
<StatusBar style="auto" />
</View>
</SafeAreaProvider>
......@@ -25,7 +173,85 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
padding: 20,
},
avatar: {
width: 125,
height: 125,
borderRadius: 75,
},
info: {
marginLeft: 20,
alignItems: 'left',
},
name: {
fontSize: 24,
fontWeight: 'bold',
},
username: {
color: '#999',
fontSize: 18,
},
stats: {
flexDirection: 'row',
alignItems: 'center',
padding: 20,
},
stat: {
flex: 1,
alignItems: 'center',
},
statLabel: {
color: '#999',
fontSize: 14,
},
statValue: {
fontSize: 18,
},
timer: {
flexDirection: "row",
alignItems: "center",
},
timeUnit: {
fontSize: 24,
fontWeight: "bold",
paddingHorizontal: 10,
paddingVertical: 5,
},
dayUnit: {
backgroundColor: "#3498db",
borderRadius: 15,
color: "white",
},
hourUnit: {
backgroundColor: "#27ae60",
borderRadius: 15,
color: "white",
},
minuteUnit: {
backgroundColor: "#f39c12",
borderRadius: 15,
color: "white",
},
secondUnit: {
backgroundColor: "#9b59b6",
borderRadius: 15,
color: "white",
},
timeSeparator: {
fontSize: 24,
fontWeight: "bold",
marginHorizontal: 20,
},
timetitle: {
fontSize: 20,
padding: 10,
paddingRight: 19,
fontWeight: "bold",
},
lightContainer: {
// white
......@@ -43,10 +269,4 @@ const styles = StyleSheet.create({
// black
color: '#FFFFFF',
},
box: {
width: 100,
height: 80,
backgroundColor: '#528AF6',
margin: 30,
},
});
\ No newline at end of file
app/profile.js
+ 13
− 14
View file @ 386b7779
import { ScrollView, Pressable, Dimensions, StyleSheet, Text, Button, View, Appearance, useColorScheme, Image } from "react-native";
import { Link } from "expo-router";
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { BarChart } from 'react-native-chart-kit';
import { Tabs, Link } from 'expo-router';
import { AntDesign } from "@expo/vector-icons";
export default function profile() {
const colorScheme = useColorScheme();
......@@ -22,7 +23,7 @@ export default function profile() {
}
]
};
return (
<SafeAreaProvider>
<View style={[styles.container, themeContainerStyle]}>
......@@ -35,18 +36,16 @@ export default function profile() {
<Button title="Edit Profile" onPress={() => { }} />
</View>
</View>
{/* TODO: back/forward buttons should lead to a different graph */}
<View style={styles.stats}>
<View style={styles.stat}>
<Text style={styles.statLabel}>Tweets</Text>
<Text style={styles.statValue}>1,234</Text>
<AntDesign name="leftcircleo" title="Go Back" size={25} onPress={() => { }} />
</View>
<View style={styles.stat}>
<Text style={styles.statLabel}>Following</Text>
<Text style={styles.statValue}>123</Text>
<Text style={styles.statValue}>This Week</Text>
</View>
<View style={styles.stat}>
<Text style={styles.statLabel}>Followers</Text>
<Text style={styles.statValue}>456</Text>
<AntDesign name="rightcircleo" title="Go Forward" size={25} onPress={() => { }} />
</View>
</View>
{chartConfigs.map(chartConfig => {
......@@ -92,12 +91,12 @@ export default function profile() {
}
const chartConfigs = [
{
backgroundColor: '#0091EA',
backgroundGradientFrom: '#0091EA',
backgroundGradientTo: '#0091EA',
color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
}
{
backgroundColor: '#0091EA',
backgroundGradientFrom: '#0091EA',
backgroundGradientTo: '#0091EA',
color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
}
]
const styles = StyleSheet.create({
......
package-lock.json
+ 89
− 9
View file @ 386b7779
......@@ -9,6 +9,7 @@
"version": "1.0.0",
"dependencies": {
"@expo/webpack-config": "^19.0.0",
"@react-navigation/bottom-tabs": "^6.5.11",
"expo": "^49.0.16",
"expo-clipboard": "~4.3.1",
"expo-constants": "~14.4.2",
......@@ -20,14 +21,13 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.5",
<<<<<<< HEAD
"react-native-chart-kit": "^6.12.0",
=======
>>>>>>> b9b392ebac2777550b373b96ff8fcac9c107be1f
"react-native-gesture-handler": "~2.12.0",
"react-native-modal-datetime-picker": "^17.1.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-svg": "^13.14.0",
"react-native-web": "~0.19.6"
},
......@@ -6068,6 +6068,15 @@
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
},
"node_modules/@react-native-community/datetimepicker": {
"version": "7.6.1",
"resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-7.6.1.tgz",
"integrity": "sha512-g66Q2Kd9Uw3eRL7kkrTsGhi+eXxNoPDRFYH6z78sZQuYjPkUQgJDDMUYgBmaBsQx/fKMtemPrCj1ulGmyi0OSw==",
"peer": true,
"dependencies": {
"invariant": "^2.2.4"
}
},
"node_modules/@react-native/assets-registry": {
"version": "0.72.0",
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.72.0.tgz",
......@@ -8272,6 +8281,15 @@
"node": ">=4"
}
},
"node_modules/create-react-class": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
"integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
"dependencies": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
}
},
"node_modules/cross-fetch": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
......@@ -14117,6 +14135,14 @@
"node": ">=8"
}
},
"node_modules/paths-js": {
"version": "0.4.11",
"resolved": "https://registry.npmjs.org/paths-js/-/paths-js-0.4.11.tgz",
"integrity": "sha512-3mqcLomDBXOo7Fo+UlaenG6f71bk1ZezPQy2JCmYHy2W2k5VKpP+Jbin9H0bjXynelTbglCqdFhSEkeIkKTYUA==",
"engines": {
"node": ">=0.11.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
......@@ -14339,6 +14365,11 @@
"node": ">=4.0.0"
}
},
"node_modules/point-in-polygon": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/point-in-polygon/-/point-in-polygon-1.1.0.tgz",
"integrity": "sha512-3ojrFwjnnw8Q9242TzgXuTD+eKiutbzyslcq1ydfu82Db2y+Ogbmyrkpv0Hgj31qwT3lbS9+QAAO/pIQM35XRw=="
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
......@@ -15242,7 +15273,6 @@
"react": "18.2.0"
}
},
<<<<<<< HEAD
"node_modules/react-native-chart-kit": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/react-native-chart-kit/-/react-native-chart-kit-6.12.0.tgz",
......@@ -15258,8 +15288,6 @@
"react-native-svg": "> 6.4.1"
}
},
=======
>>>>>>> b9b392ebac2777550b373b96ff8fcac9c107be1f
"node_modules/react-native-gesture-handler": {
"version": "2.12.1",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
......@@ -15276,6 +15304,18 @@
"react-native": "*"
}
},
"node_modules/react-native-modal-datetime-picker": {
"version": "17.1.0",
"resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-17.1.0.tgz",
"integrity": "sha512-jfTwfaCLtBffYbQ+pOGFLM+J5HmUh3vb9rT0JrrQPjxzecdc8pNYreB1c96+mVuq8bDCvaCdIeuEsslTqLJL0Q==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"@react-native-community/datetimepicker": ">=6.7.0",
"react-native": ">=0.65.0"
}
},
"node_modules/react-native-reanimated": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
......@@ -15319,7 +15359,44 @@
"react-native": "*"
}
},
<<<<<<< HEAD
"node_modules/react-native-scrollable-tab-view": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-1.0.0.tgz",
"integrity": "sha512-lpZ9xz+PBdgSzpk93VjCIfxV0zvJDX9iEUP8ImDg3p1QJGHOWbWyfDx+lcx5VCDVrrdZdtuVAAdc0tkYXZyQDw==",
"dependencies": {
"@react-native-community/viewpager": "^2.0.1",
"create-react-class": "^15.6.2",
"prop-types": "^15.6.0",
"react-timer-mixin": "^0.13.3"
},
"peerDependencies": {
"react-native": ">=0.20.0"
}
},
"node_modules/react-native-scrollable-tab-view/node_modules/@react-native-community/viewpager": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@react-native-community/viewpager/-/viewpager-2.0.2.tgz",
"integrity": "sha512-CKVhIZdX/Cmb80muog8sKpi5vM8npwFp4tx4Dj1IvTBidZweuO22+VH2rDOj7E0LzdV9IYRJ4FGBwcPBD2qUrQ==",
"deprecated": "This library is no longer supported. Please use react-native-pager-view instead",
"peerDependencies": {
"react": "^16.0",
"react-native": ">=0.57"
}
},
"node_modules/react-native-scrollable-tab-view/node_modules/react": {
"version": "16.14.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
"integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-native-svg": {
"version": "13.14.0",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-13.14.0.tgz",
......@@ -15399,8 +15476,6 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
=======
>>>>>>> b9b392ebac2777550b373b96ff8fcac9c107be1f
"node_modules/react-native-web": {
"version": "0.19.9",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
......@@ -15466,6 +15541,11 @@
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-timer-mixin": {
"version": "0.13.4",
"resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz",
"integrity": "sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q=="
},
"node_modules/readable-stream": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment