ceda_ei
/
sonzai
mirror of https://gitlab.com/ceda_ei/sonzai.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Update AddEntry to contain week days. Remove + from HomeScreen. 

Fix typo getMinute -> getMinutes. Remove withTheme from HomeScreen
(since IconButton for + was removed).
This commit is contained in:
Ceda EI 2020-04-09 22:05:23 +05:30
parent 64a3fbc2cf
commit 3f75396bc4
3 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/Timetable.js
View File

@ -37,19 +37,16 @@ export default function Timetable({ addTimetableEntry, removeTimetableEntry, tim
/>
)}
</Stack.Screen>
{days.map((day, idx) => (
<Stack.Screen name={`New Entry ${day}`} key={idx}>
{(props) => (
<AddEntry
{...props}
subjects={subjects}
day={idx}
days={days}
addTimetableEntry={addTimetableEntry}
/>
)}
</Stack.Screen>
))}
<Stack.Screen name="New Entry">
{(props) => (
<AddEntry
{...props}
subjects={subjects}
days={days}
addTimetableEntry={addTimetableEntry}
/>
)}
</Stack.Screen>
</Stack.Navigator></Portal.Host>
);
}

58
components/timetable/AddEntry.js
View File

@ -1,20 +1,24 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import {
IconButton,
Card,
FAB,
IconButton,
List,
Menu,
Portal,
Snackbar,
TextInput,
ToggleButton,
} from "react-native-paper";
import {StyleSheet} from "react-native";
import {
StyleSheet,
View
} from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";
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 [ showSubjectMenu, setShowSubjectMenu ] = useState(false);
const [ showTimePicker, setShowTimePicker ] = useState(false);
@ -24,6 +28,7 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
const [ end, setEnd ] = useState(null);
const [ count, setCount ] = useState(0);
const [ snackbar, setSnackbar ] = useState({ visible: false, message: "" });
const [ dayStates, setDayStates ] = useState([ true, false, false, false, false, false, false ]);
function parseCount(text) {
const num = parseInt(text);
if (isNaN(num))
@ -56,6 +61,8 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
message = "Missing end time.";
else if (count === 0)
message = "Missing count.";
if (! dayStates.filter(i => i).length)
message = "No day selected.";
if (message !== "") {
setSnackbar({visible: true, message: message});
@ -63,11 +70,16 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
return;
}
addTimetableEntry(day, {
sub_id: subject.id,
count,
start,
end
dayStates.forEach((i, idx) => {
if (i) {
addTimetableEntry(idx, {
sub_id: subject.id,
count,
start,
end
});
}
});
navigation.pop();
}
@ -76,7 +88,7 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
return (<>
<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
<Card style={style.card}>
<Card.Title title={`Add Class on ${days[day]}`} />
<Card.Title title="Add Class" />
<Card.Content>
<List.Section>
<Menu
@ -127,6 +139,26 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
value={count === 0 ? "" : count.toString()}
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>
</Card.Content>
</Card>
@ -171,9 +203,8 @@ function AddEntry({addTimetableEntry, days, day, subjects, navigation }) {
AddEntry.propTypes = {
addTimetableEntry: PropTypes.func,
subjects: PropTypes.array,
navigation: PropTypes.object,
days: PropTypes.array,
day: PropTypes.number,
navigation: PropTypes.object,
};
const style = StyleSheet.create({
@ -190,6 +221,11 @@ const style = StyleSheet.create({
flexDirection: "row",
justifyContent: "space-between"
},
daysContainer: {
flexDirection: "row",
justifyContent: "space-evenly",
marginTop: 10
},
});
export default AddEntry;

30
components/timetable/HomeScreen.js
View File

@ -3,12 +3,11 @@ import PropTypes from "prop-types";
import {
Button,
IconButton,
Card,
DataTable,
Dialog,
FAB,
Portal,
withTheme,
} from "react-native-paper";
import {
@ -22,14 +21,14 @@ function sortTimes(t1, t2) {
return 1;
if (t1.getHours() < t2.getHours())
return -1;
if (t1.getMinute() > t2.getMinute())
if (t1.getMinutes() > t2.getMinutes())
return 1;
if (t1.getMinute() < t2.getMinute())
if (t1.getMinutes() < t2.getMinutes())
return -1;
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 });
return (<Portal.Host><ScrollView>
{timetable.map((day, dayIdx) => (
@ -99,13 +98,6 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
})}
</DataTable>
</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>
))}
<Portal>
@ -125,6 +117,17 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, theme, t
</Button>
</Dialog.Actions>
</Dialog>
<FAB
loarge
icon="plus"
onPress={() => navigation.navigate("New Entry")}
style={{
position: "absolute",
margin: 16,
right: 0,
bottom: 0,
}}
/>
</Portal>
</ScrollView></Portal.Host>);
}
@ -134,7 +137,6 @@ HomeScreen.propTypes = {
subjects: PropTypes.array,
navigation: PropTypes.object,
days: PropTypes.array,
theme: PropTypes.object,
removeTimetableEntry: PropTypes.func,
};
@ -154,4 +156,4 @@ const style = StyleSheet.create({
},
});
export default withTheme(HomeScreen);
export default HomeScreen;