mirror of
https://gitlab.com/ceda_ei/sonzai.git
synced 2025-10-23 20:20:06 +02:00
Compare commits
12 Commits
react-nati
...
master
Author | SHA1 | Date | |
---|---|---|---|
51da4ffddf | |||
4e01fa5dd4 | |||
3f75396bc4 | |||
64a3fbc2cf | |||
39b264ea53 | |||
a6c21ade50 | |||
b89b67bf68 | |||
f9f4f40822 | |||
7425b566d5 | |||
265485acb1 | |||
e151e51eb0 | |||
6eadc6739f |
34
.gitlab-ci.yml
Normal file
34
.gitlab-ci.yml
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
stages:
|
||||||
|
- build
|
||||||
|
- deploy
|
||||||
|
|
||||||
|
build:
|
||||||
|
image: reactnativecommunity/react-native-android
|
||||||
|
stage: build
|
||||||
|
script:
|
||||||
|
- yarn install
|
||||||
|
- cd android && chmod +x gradlew
|
||||||
|
- ./gradlew assembleRelease
|
||||||
|
artifacts:
|
||||||
|
paths:
|
||||||
|
- android/app/build/outputs/
|
||||||
|
|
||||||
|
|
||||||
|
deploy_tg:
|
||||||
|
image: curlimages/curl
|
||||||
|
stage: deploy
|
||||||
|
script:
|
||||||
|
- >-
|
||||||
|
curl
|
||||||
|
-F chat_id=$TG_CHAT_ID
|
||||||
|
-F document=@android/app/build/outputs/apk/release/app-release.apk
|
||||||
|
-F caption=" <b>Branch</b>: <code>$CI_COMMIT_BRANCH</code>
|
||||||
|
|
||||||
|
<b>Commit</b>: <code>$CI_COMMIT_SHORT_SHA</code>
|
||||||
|
|
||||||
|
<b>Tag(if any)</b>: <code>$CI_COMMIT_TAG</code>
|
||||||
|
|
||||||
|
|
||||||
|
<code>$CI_COMMIT_MESSAGE</code>"
|
||||||
|
-F parse_mode=html
|
||||||
|
https://api.telegram.org/bot${TG_BOT_TOKEN}/sendDocument
|
63
App.js
63
App.js
@@ -1,8 +1,8 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import Color from "color";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import {
|
import {
|
||||||
Appbar,
|
Appbar,
|
||||||
BottomNavigation,
|
|
||||||
Text,
|
Text,
|
||||||
Card,
|
Card,
|
||||||
Dialog,
|
Dialog,
|
||||||
@@ -10,11 +10,14 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
Provider,
|
Provider,
|
||||||
RadioButton,
|
RadioButton,
|
||||||
TouchableRipple
|
TouchableRipple,
|
||||||
|
overlay,
|
||||||
} from "react-native-paper";
|
} from "react-native-paper";
|
||||||
|
|
||||||
import { View, StatusBar, StyleSheet } from "react-native";
|
import { View, StatusBar, StyleSheet, Text as RNText } from "react-native";
|
||||||
import { NavigationContainer } from "@react-navigation/native";
|
import { NavigationContainer } from "@react-navigation/native";
|
||||||
|
import { TabView, SceneMap, TabBar } from "react-native-tab-view";
|
||||||
|
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
|
||||||
|
|
||||||
import SubjectsContainer from "./containers/SubjectsContainer";
|
import SubjectsContainer from "./containers/SubjectsContainer";
|
||||||
import TimetableContainer from "./containers/TimetableContainer";
|
import TimetableContainer from "./containers/TimetableContainer";
|
||||||
@@ -59,6 +62,27 @@ ThemePicker.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const App = ({ theme, setTheme }) => {
|
const App = ({ theme, setTheme }) => {
|
||||||
|
|
||||||
|
function renderLabel({ route, focused, color }) {
|
||||||
|
return <RNText style={{color: focused ? color : backgroundColor}}>{route.title}</RNText>;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderLabel.propTypes = {
|
||||||
|
route: PropTypes.object,
|
||||||
|
focused: PropTypes.bool,
|
||||||
|
color: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderIcon({ route, color }) {
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<Icon name={route.icon} color={color} size={20}/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderIcon.propTypes = renderLabel.propTypes;
|
||||||
|
|
||||||
const [ pane, setPane ] = useState({
|
const [ pane, setPane ] = useState({
|
||||||
index: 0,
|
index: 0,
|
||||||
routes: [
|
routes: [
|
||||||
@@ -72,13 +96,19 @@ const App = ({ theme, setTheme }) => {
|
|||||||
const [ newTheme, setNewTheme ] = useState(themes.findIndex(
|
const [ newTheme, setNewTheme ] = useState(themes.findIndex(
|
||||||
i => JSON.stringify(i.theme) === JSON.stringify(theme)
|
i => JSON.stringify(i.theme) === JSON.stringify(theme)
|
||||||
));
|
));
|
||||||
const renderScene = BottomNavigation.SceneMap({
|
const renderScene = SceneMap({
|
||||||
add: Dummy,
|
add: Dummy,
|
||||||
statistics: Dummy,
|
statistics: Dummy,
|
||||||
timetable: TimetableContainer,
|
timetable: TimetableContainer,
|
||||||
subjects: SubjectsContainer,
|
subjects: SubjectsContainer,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const backgroundColor = theme.dark && theme.mode === "adaptive" ?
|
||||||
|
overlay(4, theme.colors.surface):
|
||||||
|
theme.colors.primary;
|
||||||
|
|
||||||
|
const activeColor = Color(backgroundColor).isLight() ? "#000" : "#FFF";
|
||||||
|
const inactiveColor = Color(backgroundColor).isLight() ? "#222" : "#AAA";
|
||||||
function dialogSelection(theme, idx) {
|
function dialogSelection(theme, idx) {
|
||||||
setNewTheme(idx);
|
setNewTheme(idx);
|
||||||
setTheme(theme.theme);
|
setTheme(theme.theme);
|
||||||
@@ -86,11 +116,7 @@ const App = ({ theme, setTheme }) => {
|
|||||||
return (
|
return (
|
||||||
<NavigationContainer theme={theme}>
|
<NavigationContainer theme={theme}>
|
||||||
<StatusBar
|
<StatusBar
|
||||||
backgroundColor={
|
backgroundColor={backgroundColor}
|
||||||
theme.dark && theme.mode === "adaptive" ?
|
|
||||||
theme.colors.surface :
|
|
||||||
theme.colors.primary
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<Provider theme={theme}>
|
<Provider theme={theme}>
|
||||||
<Appbar.Header>
|
<Appbar.Header>
|
||||||
@@ -102,7 +128,7 @@ const App = ({ theme, setTheme }) => {
|
|||||||
onPress={() => setShowDialog(true)}
|
onPress={() => setShowDialog(true)}
|
||||||
/>
|
/>
|
||||||
</Appbar.Header>
|
</Appbar.Header>
|
||||||
<BottomNavigation
|
<TabView
|
||||||
navigationState={pane}
|
navigationState={pane}
|
||||||
onIndexChange={(index) => setPane({
|
onIndexChange={(index) => setPane({
|
||||||
index,
|
index,
|
||||||
@@ -110,6 +136,23 @@ const App = ({ theme, setTheme }) => {
|
|||||||
})}
|
})}
|
||||||
renderScene={renderScene}
|
renderScene={renderScene}
|
||||||
shifting={true}
|
shifting={true}
|
||||||
|
tabBarPosition="bottom"
|
||||||
|
renderTabBar={props => (
|
||||||
|
<TabBar
|
||||||
|
{...props}
|
||||||
|
style={{
|
||||||
|
backgroundColor: backgroundColor,
|
||||||
|
}}
|
||||||
|
activeColor={activeColor}
|
||||||
|
inactiveColor={inactiveColor}
|
||||||
|
renderLabel={renderLabel}
|
||||||
|
renderIcon={renderIcon}
|
||||||
|
renderIndicator={() => null}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
sceneContainerStyle={{
|
||||||
|
backgroundColor: theme.colors.background
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<Portal>
|
<Portal>
|
||||||
<Dialog
|
<Dialog
|
||||||
|
19
README.md
Normal file
19
README.md
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
# Sonzai
|
||||||
|
|
||||||
|
Attendance Management App.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Pre-built APKs
|
||||||
|
|
||||||
|
+ TG: [Sonzai Staging Builds](https://t.me/sonzai_builds)
|
||||||
|
|
||||||
|
Currently, the APKs are being published to a telegram channel via GitLab CI/CD.
|
||||||
|
Once the app reaches v1.0, it will be published on Google Play and F-Droid.
|
||||||
|
|
||||||
|
### Manual Builds
|
||||||
|
|
||||||
|
+ Setup react native dev environment by following React Native CLI Quickstart
|
||||||
|
Guide [here](https://reactnative.dev/docs/environment-setup)
|
||||||
|
+ `yarn install`
|
||||||
|
+ `cd android; ./gradlew assembleRelease`
|
@@ -9,6 +9,26 @@ import {
|
|||||||
|
|
||||||
export default function InputDialog({ visible, onOK, onDismiss, title, label, placeholder }) {
|
export default function InputDialog({ visible, onOK, onDismiss, title, label, placeholder }) {
|
||||||
const [ text, setText ] = useState("");
|
const [ text, setText ] = useState("");
|
||||||
|
const [ error, setError ] = useState(false);
|
||||||
|
|
||||||
|
function onChangeText(text) {
|
||||||
|
setText(text);
|
||||||
|
setError(text === "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCancel() {
|
||||||
|
onDismiss();
|
||||||
|
setText("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDone() {
|
||||||
|
if (text === "") {
|
||||||
|
setError(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onOK(text);
|
||||||
|
setText("");
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Portal>
|
<Portal>
|
||||||
<Dialog
|
<Dialog
|
||||||
@@ -20,13 +40,14 @@ export default function InputDialog({ visible, onOK, onDismiss, title, label, pl
|
|||||||
label={label}
|
label={label}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
value={text}
|
value={text}
|
||||||
onChangeText={text => setText(text)}
|
onChangeText={onChangeText}
|
||||||
mode="outlined"
|
mode="outlined"
|
||||||
|
error={error}
|
||||||
/>
|
/>
|
||||||
</Dialog.Content>
|
</Dialog.Content>
|
||||||
<Dialog.Actions>
|
<Dialog.Actions>
|
||||||
<Button onPress={() => {onDismiss(); setText("");}}>Cancel</Button>
|
<Button onPress={onCancel}>Cancel</Button>
|
||||||
<Button onPress={() => {onOK(text); setText("");}}>OK</Button>
|
<Button onPress={onDone}>Done</Button>
|
||||||
</Dialog.Actions>
|
</Dialog.Actions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</Portal>
|
</Portal>
|
||||||
|
@@ -5,6 +5,7 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
FAB,
|
FAB,
|
||||||
Portal,
|
Portal,
|
||||||
|
Snackbar,
|
||||||
Text,
|
Text,
|
||||||
withTheme
|
withTheme
|
||||||
} from "react-native-paper";
|
} from "react-native-paper";
|
||||||
@@ -16,14 +17,23 @@ import {
|
|||||||
|
|
||||||
import InputDialog from "./InputDialog";
|
import InputDialog from "./InputDialog";
|
||||||
|
|
||||||
function Subjects({ theme, subjects, addSubject, removeSubject }) {
|
function Subjects({ theme, subjects, timetable, addSubject, removeSubject }) {
|
||||||
const [ showDialog, setShowDialog ] = useState(false);
|
const [ showDialog, setShowDialog ] = useState(false);
|
||||||
|
const [ snackbar, setSnackbar ] = useState(false);
|
||||||
function onInput(text) {
|
function onInput(text) {
|
||||||
addSubject(text);
|
addSubject(text);
|
||||||
setShowDialog(false);
|
setShowDialog(false);
|
||||||
}
|
}
|
||||||
|
function deleteSubject(id) {
|
||||||
|
if (timetable.reduce((acc, val) => acc.concat(val), []).filter(i => i.sub_id === id).length){
|
||||||
|
setSnackbar(true);
|
||||||
|
setTimeout(() => setSnackbar(false), 2000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
removeSubject(id);
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Portal.Host><ScrollView>
|
<Portal.Host><ScrollView style={{ backgroundColor: theme.colors.background }}>
|
||||||
{subjects.length === 0 ?
|
{subjects.length === 0 ?
|
||||||
<Text style={style.text}>
|
<Text style={style.text}>
|
||||||
No Subjects added. Press + to add a subject.
|
No Subjects added. Press + to add a subject.
|
||||||
@@ -43,7 +53,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
|
|||||||
<Card.Title title={subject.name} />
|
<Card.Title title={subject.name} />
|
||||||
<Card.Actions style={{justifyContent: "flex-end"}}>
|
<Card.Actions style={{justifyContent: "flex-end"}}>
|
||||||
<IconButton
|
<IconButton
|
||||||
onPress={() => removeSubject(subject.id)}
|
onPress={() => deleteSubject(subject.id)}
|
||||||
icon="delete"
|
icon="delete"
|
||||||
color={theme.colors.primary}
|
color={theme.colors.primary}
|
||||||
/>
|
/>
|
||||||
@@ -63,6 +73,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
|
|||||||
large
|
large
|
||||||
icon="plus"
|
icon="plus"
|
||||||
onPress={() => setShowDialog(true)}
|
onPress={() => setShowDialog(true)}
|
||||||
|
visible={!snackbar}
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
margin: 16,
|
margin: 16,
|
||||||
@@ -70,6 +81,16 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
|
|||||||
bottom: 0,
|
bottom: 0,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<Snackbar
|
||||||
|
visible={snackbar}
|
||||||
|
onDismiss={() => setSnackbar(false)}
|
||||||
|
action={{
|
||||||
|
label: "Dismiss",
|
||||||
|
onPress: () => setSnackbar(false),
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Subject is in use in TimeTable.
|
||||||
|
</Snackbar>
|
||||||
</Portal>
|
</Portal>
|
||||||
</ScrollView></Portal.Host>
|
</ScrollView></Portal.Host>
|
||||||
);
|
);
|
||||||
@@ -77,6 +98,7 @@ function Subjects({ theme, subjects, addSubject, removeSubject }) {
|
|||||||
|
|
||||||
Subjects.propTypes = {
|
Subjects.propTypes = {
|
||||||
subjects: PropTypes.array,
|
subjects: PropTypes.array,
|
||||||
|
timetable: PropTypes.array,
|
||||||
addSubject: PropTypes.func,
|
addSubject: PropTypes.func,
|
||||||
removeSubject: PropTypes.func,
|
removeSubject: PropTypes.func,
|
||||||
theme: PropTypes.object,
|
theme: PropTypes.object,
|
||||||
|
@@ -2,6 +2,7 @@ import React from "react";
|
|||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import {
|
import {
|
||||||
Portal,
|
Portal,
|
||||||
|
Text,
|
||||||
} from "react-native-paper";
|
} from "react-native-paper";
|
||||||
import { createStackNavigator } from "@react-navigation/stack";
|
import { createStackNavigator } from "@react-navigation/stack";
|
||||||
|
|
||||||
@@ -12,6 +13,17 @@ const Stack = createStackNavigator();
|
|||||||
|
|
||||||
export default function Timetable({ addTimetableEntry, removeTimetableEntry, timetable, subjects }) {
|
export default function Timetable({ addTimetableEntry, removeTimetableEntry, timetable, subjects }) {
|
||||||
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
|
||||||
|
if (subjects.length === 0) {
|
||||||
|
return (
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
textAlign: "center",
|
||||||
|
marginTop: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
No Subjects added. Add Subjects first.
|
||||||
|
</Text>);
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Portal.Host><Stack.Navigator headerMode="none">
|
<Portal.Host><Stack.Navigator headerMode="none">
|
||||||
<Stack.Screen name="Timetable">
|
<Stack.Screen name="Timetable">
|
||||||
@@ -25,19 +37,16 @@ export default function Timetable({ addTimetableEntry, removeTimetableEntry, tim
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Stack.Screen>
|
</Stack.Screen>
|
||||||
{days.map((day, idx) => (
|
<Stack.Screen name="New Entry">
|
||||||
<Stack.Screen name={`New Entry ${day}`} key={idx}>
|
|
||||||
{(props) => (
|
{(props) => (
|
||||||
<AddEntry
|
<AddEntry
|
||||||
{...props}
|
{...props}
|
||||||
subjects={subjects}
|
subjects={subjects}
|
||||||
day={idx}
|
|
||||||
days={days}
|
days={days}
|
||||||
addTimetableEntry={addTimetableEntry}
|
addTimetableEntry={addTimetableEntry}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Stack.Screen>
|
</Stack.Screen>
|
||||||
))}
|
|
||||||
</Stack.Navigator></Portal.Host>
|
</Stack.Navigator></Portal.Host>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -1,20 +1,24 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import {
|
import {
|
||||||
IconButton,
|
|
||||||
Card,
|
Card,
|
||||||
FAB,
|
FAB,
|
||||||
|
IconButton,
|
||||||
List,
|
List,
|
||||||
Menu,
|
Menu,
|
||||||
Portal,
|
Portal,
|
||||||
Snackbar,
|
Snackbar,
|
||||||
TextInput,
|
TextInput,
|
||||||
|
ToggleButton,
|
||||||
} from "react-native-paper";
|
} from "react-native-paper";
|
||||||
import {StyleSheet} from "react-native";
|
import {
|
||||||
|
StyleSheet,
|
||||||
|
View
|
||||||
|
} from "react-native";
|
||||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
|
||||||
function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
|
function AddEntry({addTimetableEntry, days, subjects, navigation }) {
|
||||||
const [ subject, setSubject ] = useState({ id: null, name: null });
|
const [ subject, setSubject ] = useState({ id: null, name: null });
|
||||||
const [ showSubjectMenu, setShowSubjectMenu ] = useState(false);
|
const [ showSubjectMenu, setShowSubjectMenu ] = useState(false);
|
||||||
const [ showTimePicker, setShowTimePicker ] = useState(false);
|
const [ showTimePicker, setShowTimePicker ] = useState(false);
|
||||||
@@ -24,6 +28,7 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
|
|||||||
const [ end, setEnd ] = useState(null);
|
const [ end, setEnd ] = useState(null);
|
||||||
const [ count, setCount ] = useState(0);
|
const [ count, setCount ] = useState(0);
|
||||||
const [ snackbar, setSnackbar ] = useState({ visible: false, message: "" });
|
const [ snackbar, setSnackbar ] = useState({ visible: false, message: "" });
|
||||||
|
const [ dayStates, setDayStates ] = useState([ true, false, false, false, false, false, false ]);
|
||||||
function parseCount(text) {
|
function parseCount(text) {
|
||||||
const num = parseInt(text);
|
const num = parseInt(text);
|
||||||
if (isNaN(num))
|
if (isNaN(num))
|
||||||
@@ -47,25 +52,35 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function submit() {
|
function submit() {
|
||||||
if (subject.id === null) {
|
let message = "";
|
||||||
setSnackbar({ visible: true, message: "Missing subject." });
|
if (subject.id === null)
|
||||||
return;
|
message = "Missing Subject";
|
||||||
} else if (start === null) {
|
else if (start === null)
|
||||||
setSnackbar({ visible: true, message: "Missing start time." });
|
message = "Missing start time.";
|
||||||
return;
|
else if (end === null)
|
||||||
} else if (end === null) {
|
message = "Missing end time.";
|
||||||
setSnackbar({ visible: true, message: "Missing end time." });
|
else if (count === 0)
|
||||||
return;
|
message = "Missing count.";
|
||||||
} else if (count === 0) {
|
if (! dayStates.filter(i => i).length)
|
||||||
setSnackbar({ visible: true, message: "Missing count." });
|
message = "No day selected.";
|
||||||
|
|
||||||
|
if (message !== "") {
|
||||||
|
setSnackbar({visible: true, message: message});
|
||||||
|
setTimeout(() => setSnackbar({ visible: false, message: null }), 2000);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
addTimetableEntry(day, {
|
|
||||||
|
|
||||||
|
dayStates.forEach((i, idx) => {
|
||||||
|
if (i) {
|
||||||
|
addTimetableEntry(idx, {
|
||||||
sub_id: subject.id,
|
sub_id: subject.id,
|
||||||
count,
|
count,
|
||||||
start,
|
start,
|
||||||
end
|
end
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
navigation.pop();
|
navigation.pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -73,7 +88,7 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
|
|||||||
return (<>
|
return (<>
|
||||||
<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
|
<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
|
||||||
<Card style={style.card}>
|
<Card style={style.card}>
|
||||||
<Card.Title title={`Add Class on ${days[day]}`} />
|
<Card.Title title="Add Class" />
|
||||||
<Card.Content>
|
<Card.Content>
|
||||||
<List.Section>
|
<List.Section>
|
||||||
<Menu
|
<Menu
|
||||||
@@ -124,6 +139,26 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
|
|||||||
value={count === 0 ? "" : count.toString()}
|
value={count === 0 ? "" : count.toString()}
|
||||||
onChangeText={parseCount}
|
onChangeText={parseCount}
|
||||||
/>
|
/>
|
||||||
|
<View
|
||||||
|
style={style.daysContainer}
|
||||||
|
>
|
||||||
|
{dayStates.map( (i, idx) => (
|
||||||
|
<ToggleButton
|
||||||
|
key={idx}
|
||||||
|
icon={`alpha-${days[idx][0].toLowerCase()}`}
|
||||||
|
status={i ? "checked": "unchecked"}
|
||||||
|
onPress={
|
||||||
|
() =>
|
||||||
|
setDayStates([
|
||||||
|
...dayStates.slice(0, idx),
|
||||||
|
!i,
|
||||||
|
...dayStates.slice(idx + 1)
|
||||||
|
])
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
</List.Section>
|
</List.Section>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -168,9 +203,8 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
|
|||||||
AddEntry.propTypes = {
|
AddEntry.propTypes = {
|
||||||
addTimetableEntry: PropTypes.func,
|
addTimetableEntry: PropTypes.func,
|
||||||
subjects: PropTypes.array,
|
subjects: PropTypes.array,
|
||||||
navigation: PropTypes.object,
|
|
||||||
days: PropTypes.array,
|
days: PropTypes.array,
|
||||||
day: PropTypes.number,
|
navigation: PropTypes.object,
|
||||||
};
|
};
|
||||||
|
|
||||||
const style = StyleSheet.create({
|
const style = StyleSheet.create({
|
||||||
@@ -187,6 +221,11 @@ const style = StyleSheet.create({
|
|||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-between"
|
justifyContent: "space-between"
|
||||||
},
|
},
|
||||||
|
daysContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-evenly",
|
||||||
|
marginTop: 10
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default AddEntry;
|
export default AddEntry;
|
||||||
|
@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
IconButton,
|
|
||||||
Card,
|
Card,
|
||||||
DataTable,
|
DataTable,
|
||||||
Dialog,
|
Dialog,
|
||||||
|
FAB,
|
||||||
Portal,
|
Portal,
|
||||||
withTheme,
|
Modal,
|
||||||
} from "react-native-paper";
|
} from "react-native-paper";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -17,20 +17,48 @@ import {
|
|||||||
} from "react-native";
|
} from "react-native";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
|
||||||
|
import BottomSheet from "reanimated-bottom-sheet";
|
||||||
|
|
||||||
function sortTimes(t1, t2) {
|
function sortTimes(t1, t2) {
|
||||||
if (t1.getHours() > t2.getHours())
|
if (t1.getHours() > t2.getHours())
|
||||||
return 1;
|
return 1;
|
||||||
if (t1.getHours() < t2.getHours())
|
if (t1.getHours() < t2.getHours())
|
||||||
return -1;
|
return -1;
|
||||||
if (t1.getMinute() > t2.getMinute())
|
if (t1.getMinutes() > t2.getMinutes())
|
||||||
return 1;
|
return 1;
|
||||||
if (t1.getMinute() < t2.getMinute())
|
if (t1.getMinutes() < t2.getMinutes())
|
||||||
return -1;
|
return -1;
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, timetable }) {
|
function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
|
||||||
const [ dialog, setDialog ] = useState({ show: false, id: null });
|
const [ dialog, setDialog ] = useState({ show: false, id: null });
|
||||||
|
const [ currentBottomSheet, setCurrentBottomSheet ] = useState(null);
|
||||||
|
|
||||||
|
this.bs = React.createRef();
|
||||||
|
const openBottomSheet = () => {this.bs.current.snapTo(0);this.bs.current.snapTo(0);};
|
||||||
|
const closeBottomSheet = () => {this.bs.current.snapTo(2);this.bs.current.snapTo(2);};
|
||||||
|
|
||||||
|
function CardContents() {
|
||||||
|
if (!currentBottomSheet) {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
const subject = subjects.find(i => i.id === currentBottomSheet.sub_id);
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<Card.Title title={subject.name} />
|
||||||
|
<Card.Content style={style.bottomNavigation}>
|
||||||
|
<Button mode="contained">Change Subject</Button>
|
||||||
|
<Button mode="contained">Change Start Time</Button>
|
||||||
|
<Button mode="contained">Change End Time</Button>
|
||||||
|
<Button mode="contained" onPress={() => {
|
||||||
|
closeBottomSheet();
|
||||||
|
setDialog({ show: true, id: currentBottomSheet.name });
|
||||||
|
}}>Remove</Button>
|
||||||
|
</Card.Content>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
return (<Portal.Host><ScrollView>
|
return (<Portal.Host><ScrollView>
|
||||||
{timetable.map((day, dayIdx) => (
|
{timetable.map((day, dayIdx) => (
|
||||||
<Card
|
<Card
|
||||||
@@ -72,7 +100,10 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
|
|||||||
return (
|
return (
|
||||||
<DataTable.Row
|
<DataTable.Row
|
||||||
key={idx}
|
key={idx}
|
||||||
onPress={() => setDialog({ show: true, id: cls.id })}
|
onPress={() => {
|
||||||
|
setCurrentBottomSheet(cls);
|
||||||
|
openBottomSheet();
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<DataTable.Cell
|
<DataTable.Cell
|
||||||
style={{ flexGrow: 2 }}
|
style={{ flexGrow: 2 }}
|
||||||
@@ -99,13 +130,6 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
|
|||||||
})}
|
})}
|
||||||
</DataTable>
|
</DataTable>
|
||||||
</Card.Content>
|
</Card.Content>
|
||||||
<Card.Actions style={{justifyContent: "flex-end"}}>
|
|
||||||
<IconButton
|
|
||||||
onPress={() => navigation.navigate(`New Entry ${days[dayIdx]}`)}
|
|
||||||
icon="plus"
|
|
||||||
color={theme.colors.primary}
|
|
||||||
/>
|
|
||||||
</Card.Actions>
|
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
<Portal>
|
<Portal>
|
||||||
@@ -125,6 +149,33 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
|
|||||||
</Button>
|
</Button>
|
||||||
</Dialog.Actions>
|
</Dialog.Actions>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
<FAB
|
||||||
|
visible={currentBottomSheet == null}
|
||||||
|
large
|
||||||
|
icon="plus"
|
||||||
|
onPress={() => navigation.navigate("New Entry")}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
margin: 16,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Modal
|
||||||
|
visible={currentBottomSheet != null}
|
||||||
|
onDismiss={closeBottomSheet}
|
||||||
|
dismissable={false}
|
||||||
|
>
|
||||||
|
</Modal>
|
||||||
|
<BottomSheet
|
||||||
|
ref={this.bs}
|
||||||
|
snapPoints={[300, 150, 0]}
|
||||||
|
initialSnap={1}
|
||||||
|
renderContent={CardContents}
|
||||||
|
enabledInnerScrolling={false}
|
||||||
|
onCloseStart={() => setCurrentBottomSheet(null)}
|
||||||
|
onCloseEnd={() => {}}
|
||||||
|
/>
|
||||||
</Portal>
|
</Portal>
|
||||||
</ScrollView></Portal.Host>);
|
</ScrollView></Portal.Host>);
|
||||||
}
|
}
|
||||||
@@ -134,7 +185,6 @@ HomeScreen.propTypes = {
|
|||||||
subjects: PropTypes.array,
|
subjects: PropTypes.array,
|
||||||
navigation: PropTypes.object,
|
navigation: PropTypes.object,
|
||||||
days: PropTypes.array,
|
days: PropTypes.array,
|
||||||
theme: PropTypes.object,
|
|
||||||
removeTimetableEntry: PropTypes.func,
|
removeTimetableEntry: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -152,6 +202,11 @@ const style = StyleSheet.create({
|
|||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
justifyContent: "space-between"
|
justifyContent: "space-between"
|
||||||
},
|
},
|
||||||
|
bottomNavigation: {
|
||||||
|
height: 250,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-evenly",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export default withTheme(HomeScreen);
|
export default HomeScreen;
|
||||||
|
@@ -5,6 +5,7 @@ import { addSubject, removeSubject } from "../actions";
|
|||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
subjects: state.subjects,
|
subjects: state.subjects,
|
||||||
|
timetable: state.timetable,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@@ -16,7 +16,9 @@
|
|||||||
"@react-navigation/native": "^5.1.0",
|
"@react-navigation/native": "^5.1.0",
|
||||||
"@react-navigation/stack": "^5.2.1",
|
"@react-navigation/stack": "^5.2.1",
|
||||||
"buffer": "^5.5.0",
|
"buffer": "^5.5.0",
|
||||||
|
"color": "^3.1.2",
|
||||||
"date-fns": "^2.11.0",
|
"date-fns": "^2.11.0",
|
||||||
|
"jsan": "^3.1.13",
|
||||||
"react": "16.9.0",
|
"react": "16.9.0",
|
||||||
"react-native": "0.61.5",
|
"react-native": "0.61.5",
|
||||||
"react-native-gesture-handler": "^1.6.0",
|
"react-native-gesture-handler": "^1.6.0",
|
||||||
@@ -24,10 +26,13 @@
|
|||||||
"react-native-reanimated": "^1.7.0",
|
"react-native-reanimated": "^1.7.0",
|
||||||
"react-native-safe-area-context": "^0.7.3",
|
"react-native-safe-area-context": "^0.7.3",
|
||||||
"react-native-screens": "^2.3.0",
|
"react-native-screens": "^2.3.0",
|
||||||
|
"react-native-tab-view": "^2.13.0",
|
||||||
"react-native-uuid": "^1.4.9",
|
"react-native-uuid": "^1.4.9",
|
||||||
"react-native-vector-icons": "^6.6.0",
|
"react-native-vector-icons": "^6.6.0",
|
||||||
"react-redux": "^7.2.0",
|
"react-redux": "^7.2.0",
|
||||||
|
"reanimated-bottom-sheet": "^1.0.0-alpha.19",
|
||||||
"redux": "^4.0.5",
|
"redux": "^4.0.5",
|
||||||
|
"redux-devtools-extension": "^2.13.8",
|
||||||
"redux-persist": "^6.0.0"
|
"redux-persist": "^6.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
26
themes.js
26
themes.js
@@ -1,13 +1,13 @@
|
|||||||
import { DefaultTheme, DarkTheme } from "react-native-paper";
|
import { DefaultTheme, DarkTheme } from "react-native-paper";
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
"name": "Dark: Pink and Gray",
|
"name": "Dark: Pink and Blue",
|
||||||
"theme": {
|
"theme": {
|
||||||
...DarkTheme,
|
...DarkTheme,
|
||||||
mode: "exact",
|
mode: "exact",
|
||||||
colors: {
|
colors: {
|
||||||
primary: "#ff1744",
|
primary: "#ff1744",
|
||||||
accent: "#e0e0e0",
|
accent: "#3949ab",
|
||||||
backdrop: "rgba(0, 0, 0, 0.5)",
|
backdrop: "rgba(0, 0, 0, 0.5)",
|
||||||
background: "#000000",
|
background: "#000000",
|
||||||
disabled: "rgba(255, 255, 255, 0.38)",
|
disabled: "rgba(255, 255, 255, 0.38)",
|
||||||
@@ -63,17 +63,6 @@ export default [
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Absolute Dark: Pink and Gray",
|
|
||||||
"theme": {
|
|
||||||
...DarkTheme,
|
|
||||||
colors: {
|
|
||||||
...DarkTheme.colors,
|
|
||||||
primary: "#ff1744",
|
|
||||||
accent: "#e0e0e0",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "Absolute Dark: Purple and Gray",
|
"name": "Absolute Dark: Purple and Gray",
|
||||||
"theme": DarkTheme
|
"theme": DarkTheme
|
||||||
@@ -101,17 +90,6 @@ export default [
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Light: Pastel Colors 2",
|
|
||||||
"theme": {
|
|
||||||
...DefaultTheme,
|
|
||||||
colors: {
|
|
||||||
...DefaultTheme.colors,
|
|
||||||
primary: "#ffcccb",
|
|
||||||
accent: "#fce4ec",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "Light: Purple and Green",
|
"name": "Light: Purple and Green",
|
||||||
"theme": DefaultTheme
|
"theme": DefaultTheme
|
||||||
|
20
yarn.lock
20
yarn.lock
@@ -3885,6 +3885,11 @@ js-yaml@^3.13.1:
|
|||||||
argparse "^1.0.7"
|
argparse "^1.0.7"
|
||||||
esprima "^4.0.0"
|
esprima "^4.0.0"
|
||||||
|
|
||||||
|
jsan@^3.1.13:
|
||||||
|
version "3.1.13"
|
||||||
|
resolved "https://registry.npmjs.org/jsan/-/jsan-3.1.13.tgz#4de8c7bf8d1cfcd020c313d438f930cec4b91d86"
|
||||||
|
integrity sha512-9kGpCsGHifmw6oJet+y8HaCl14y7qgAsxVdV3pCHDySNR3BfDC30zgkssd7x5LRVAT22dnpbe9JdzzmXZnq9/g==
|
||||||
|
|
||||||
jsbn@~0.1.0:
|
jsbn@~0.1.0:
|
||||||
version "0.1.1"
|
version "0.1.1"
|
||||||
resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
||||||
@@ -5270,6 +5275,11 @@ react-native-screens@^2.3.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
debounce "^1.2.0"
|
debounce "^1.2.0"
|
||||||
|
|
||||||
|
react-native-tab-view@^2.13.0:
|
||||||
|
version "2.13.0"
|
||||||
|
resolved "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.13.0.tgz#23037aa43b0f8f682ddc20415a4baaaf6f82ae8f"
|
||||||
|
integrity sha512-AeYbp/u91+D/C9+PmVEPBmFb3ixv8IkLMC3Sc5MajJ/fg0Zl3Of+BcEknBvTnKoe7Fj2y8+Qf9zorBbh5xzh4A==
|
||||||
|
|
||||||
react-native-uuid@^1.4.9:
|
react-native-uuid@^1.4.9:
|
||||||
version "1.4.9"
|
version "1.4.9"
|
||||||
resolved "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-1.4.9.tgz#a526742f8fddfe6414500655212ca8d109c40229"
|
resolved "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-1.4.9.tgz#a526742f8fddfe6414500655212ca8d109c40229"
|
||||||
@@ -5410,6 +5420,16 @@ realpath-native@^1.1.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
util.promisify "^1.0.0"
|
util.promisify "^1.0.0"
|
||||||
|
|
||||||
|
reanimated-bottom-sheet@^1.0.0-alpha.19:
|
||||||
|
version "1.0.0-alpha.19"
|
||||||
|
resolved "https://registry.npmjs.org/reanimated-bottom-sheet/-/reanimated-bottom-sheet-1.0.0-alpha.19.tgz#94ea79e7b2896b8f489547415d15d15c99ac44ba"
|
||||||
|
integrity sha512-Q0sGUHYdr5h2n/AY7pKQty35zcUAxxYM1nCl+luSQAyqiY6a5Kf8IBQRsOVvs60sDzqXxtbwxHgM5mkwaiQC4Q==
|
||||||
|
|
||||||
|
redux-devtools-extension@^2.13.8:
|
||||||
|
version "2.13.8"
|
||||||
|
resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
|
||||||
|
integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
|
||||||
|
|
||||||
redux-persist@^6.0.0:
|
redux-persist@^6.0.0:
|
||||||
version "6.0.0"
|
version "6.0.0"
|
||||||
resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
|
resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
|
||||||
|
Reference in New Issue
Block a user