From 8d914c97f54adc4b7ad949e09614e886b42fe5f3 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sat, 7 Mar 2020 11:49:32 +0100 Subject: [PATCH] Removed unused libs and improved style responsiveness --- App.js | 14 +-- components/CustomAgenda.js | 40 +++++++++ components/DashboardItem.js | 6 -- components/EmptyWebSectionListItem.js | 41 +++++++++ components/FeedItem.js | 42 +++++++++ components/HeaderButton.js | 16 ++++ components/ProxiwashListItem.js | 66 ++++++++++++++ components/Sidebar.js | 9 +- components/SidebarDivider.js | 23 +++++ components/SquareDashboardItem.js | 55 ++++++++++++ components/WebSectionList.js | 40 ++------- components/WebViewScreen.js | 12 +-- constants/ProxiwashConstants.js | 10 +++ navigation/DrawerNavigator.js | 20 +---- navigation/MainTabNavigator.js | 18 +--- package.json | 3 - screens/HomeScreen.js | 76 ++++++---------- screens/PlanningDisplayScreen.js | 2 +- screens/PlanningScreen.js | 51 +++-------- screens/Proximo/ProximoListScreen.js | 2 +- screens/Proximo/ProximoMainScreen.js | 15 +--- screens/Proxiwash/ProxiwashScreen.js | 123 ++++++++------------------ screens/SettingsScreen.js | 102 ++++++++------------- translations/en.json | 15 +--- translations/fr.json | 15 +--- utils/ThemeManager.js | 2 + utils/WebDataManager.js | 28 ------ 27 files changed, 439 insertions(+), 407 deletions(-) create mode 100644 components/CustomAgenda.js create mode 100644 components/EmptyWebSectionListItem.js create mode 100644 components/FeedItem.js create mode 100644 components/HeaderButton.js create mode 100644 components/ProxiwashListItem.js create mode 100644 components/SidebarDivider.js create mode 100644 components/SquareDashboardItem.js create mode 100644 constants/ProxiwashConstants.js diff --git a/App.js b/App.js index f54c899..58bcf0d 100644 --- a/App.js +++ b/App.js @@ -3,7 +3,6 @@ import * as React from 'react'; import {Platform, StatusBar} from 'react-native'; import LocaleManager from './utils/LocaleManager'; -import * as Font from 'expo-font'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; import {SplashScreen} from 'expo'; @@ -23,17 +22,6 @@ type State = { currentTheme: ?Object, }; -const MyTheme = { - dark: false, - colors: { - primary: 'rgb(255, 45, 85)', - background: 'rgb(242, 242, 242)', - card: 'rgb(255, 255, 255)', - text: 'rgb(28, 28, 30)', - border: 'rgb(199, 199, 204)', - }, -}; - const Stack = createStackNavigator(); export default class App extends React.Component { @@ -54,7 +42,7 @@ export default class App extends React.Component { } /** - * Updates the theme and clears the cache to force reloading the app colors. Need to edit shoutem theme for ti to work + * Updates the theme */ updateTheme() { this.setState({ diff --git a/components/CustomAgenda.js b/components/CustomAgenda.js new file mode 100644 index 0000000..ee2b61c --- /dev/null +++ b/components/CustomAgenda.js @@ -0,0 +1,40 @@ +import * as React from 'react'; +import {withTheme} from 'react-native-paper'; +import {Agenda} from "react-native-calendars"; + +function CustomAgenda(props) { + const { colors } = props.theme; + return ( + + ); +} + +export default withTheme(CustomAgenda); diff --git a/components/DashboardItem.js b/components/DashboardItem.js index adedc27..fdabb1d 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -28,12 +28,6 @@ export default class DashboardItem extends React.Component { displayEvent: undefined, }; - shouldComponentUpdate(nextProps: Props): boolean { - return nextProps.isAvailable !== this.props.isAvailable || - nextProps.subtitle !== this.props.subtitle; - } - - /** * Convert the date string given by in the event list json to a date object * @param dateString diff --git a/components/EmptyWebSectionListItem.js b/components/EmptyWebSectionListItem.js new file mode 100644 index 0000000..ecba4e0 --- /dev/null +++ b/components/EmptyWebSectionListItem.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {ActivityIndicator, Subheading, withTheme} from 'react-native-paper'; +import {View} from "react-native"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + +function EmptyWebSectionListItem(props) { + const { colors } = props.theme; + return ( + + + {props.refreshing ? + + : + } + + + + {props.text} + + + ); +} + +export default withTheme(EmptyWebSectionListItem); diff --git a/components/FeedItem.js b/components/FeedItem.js new file mode 100644 index 0000000..d77b101 --- /dev/null +++ b/components/FeedItem.js @@ -0,0 +1,42 @@ +import * as React from 'react'; +import {Avatar, Button, Card, withTheme} from 'react-native-paper'; +import {TouchableOpacity, View} from "react-native"; +import Autolink from "react-native-autolink"; +import i18n from "i18n-js"; + +const ICON_AMICALE = require('../assets/amicale.png'); + +function FeedItem(props) { + const {colors} = props.theme; + return ( + + } + /> + {props.full_picture !== '' && props.full_picture !== undefined ? + + + : } + + {props.message !== undefined ? + : + } + + + + + + ); +} + +export default withTheme(FeedItem); diff --git a/components/HeaderButton.js b/components/HeaderButton.js new file mode 100644 index 0000000..663dd44 --- /dev/null +++ b/components/HeaderButton.js @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {IconButton, withTheme} from 'react-native-paper'; + +function HeaderButton(props) { + const { colors } = props.theme; + return ( + + ); +} + +export default withTheme(HeaderButton); diff --git a/components/ProxiwashListItem.js b/components/ProxiwashListItem.js new file mode 100644 index 0000000..cfb2c39 --- /dev/null +++ b/components/ProxiwashListItem.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import {Divider, List, Text, withTheme} from 'react-native-paper'; +import {View} from "react-native"; +import ProxiwashConstants from "../constants/ProxiwashConstants"; + +function ProxiwashListItem(props) { + const {colors} = props.theme; + let stateColors = {}; + stateColors[ProxiwashConstants.machineStates.TERMINE] = colors.proxiwashFinishedColor; + stateColors[ProxiwashConstants.machineStates.DISPONIBLE] = colors.proxiwashReadyColor; + stateColors[ProxiwashConstants.machineStates["EN COURS"]] = colors.proxiwashRunningColor; + stateColors[ProxiwashConstants.machineStates.HS] = colors.proxiwashBrokenColor; + stateColors[ProxiwashConstants.machineStates.ERREUR] = colors.proxiwashErrorColor; + const icon = ( + props.isWatched ? + : + + ); + return ( + + + icon} + right={() => ( + + + + {props.statusText} + + + + + )} + /> + + + ); +} + +export default withTheme(ProxiwashListItem); diff --git a/components/Sidebar.js b/components/Sidebar.js index 76ad5f0..b5ed72f 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -6,7 +6,7 @@ import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import * as WebBrowser from 'expo-web-browser'; -import {List} from 'react-native-paper'; +import SidebarDivider from "./SidebarDivider"; import {DrawerItem} from '@react-navigation/drawer'; const deviceWidth = Dimensions.get("window").width; @@ -143,6 +143,7 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { + console.log("rendering SideBar Item"); const onListItemPress = this.onListItemPress.bind(this, item); if (item.icon !== undefined) { return ( @@ -151,7 +152,6 @@ export default class SideBar extends React.Component { focused={false} icon={({color, size}) => } - selected={this.state.active === item.route} onPress={onListItemPress} style={{ marginLeft: 0, @@ -163,10 +163,7 @@ export default class SideBar extends React.Component { ); } else { return ( - + ); } diff --git a/components/SidebarDivider.js b/components/SidebarDivider.js new file mode 100644 index 0000000..ec0927b --- /dev/null +++ b/components/SidebarDivider.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { withTheme } from 'react-native-paper'; +import {DrawerItem} from "@react-navigation/drawer"; + +function SidebarDivider(props) { + const { colors } = props.theme; + return ( + + ); +} + +export default withTheme(SidebarDivider); diff --git a/components/SquareDashboardItem.js b/components/SquareDashboardItem.js new file mode 100644 index 0000000..c071bce --- /dev/null +++ b/components/SquareDashboardItem.js @@ -0,0 +1,55 @@ +import * as React from 'react'; +import {Card, Text, Title, withTheme} from 'react-native-paper'; +import {View} from "react-native"; +import {MaterialCommunityIcons} from "@expo/vector-icons"; + +function SquareDashboardItem(props) { + const { colors } = props.theme; + return ( + + + + + + + + {props.title} + + + {props.subtitle} + + + + + ); +} + +export default withTheme(SquareDashboardItem); diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 90dc594..1f34617 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -1,12 +1,11 @@ // @flow import * as React from 'react'; -import ThemeManager from '../utils/ThemeManager'; import WebDataManager from "../utils/WebDataManager"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; -import {ActivityIndicator, Snackbar, Subheading} from 'react-native-paper'; +import {Snackbar} from 'react-native-paper'; import {RefreshControl, SectionList, View} from "react-native"; +import EmptyWebSectionListItem from "./EmptyWebSectionListItem"; type Props = { navigation: Object, @@ -145,35 +144,12 @@ export default class WebSectionList extends React.Component { getEmptyRenderItem({item}: Object) { return ( - - - {this.state.refreshing ? - - : - } - - - - {item.text} - - ); + + ); } createEmptyDataset() { diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index 76bdeae..24fd705 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -3,10 +3,9 @@ import * as React from 'react'; import {View} from 'react-native'; import WebView from "react-native-webview"; -import Touchable from "react-native-platform-touchable"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import {ActivityIndicator} from 'react-native-paper'; +import HeaderButton from "./HeaderButton"; type Props = { navigation: Object, @@ -58,14 +57,7 @@ export default class WebViewScreen extends React.Component { getHeaderButton(clickAction: Function, icon: string) { return ( - - - + ); } diff --git a/constants/ProxiwashConstants.js b/constants/ProxiwashConstants.js new file mode 100644 index 0000000..ae2599f --- /dev/null +++ b/constants/ProxiwashConstants.js @@ -0,0 +1,10 @@ + +export default { + machineStates: { + "TERMINE": "0", + "DISPONIBLE": "1", + "EN COURS": "2", + "HS": "3", + "ERREUR": "4" + }, +}; diff --git a/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index a3a0f14..2d7c698 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -12,10 +12,7 @@ import BibScreen from "../screens/Websites/BibScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; -import {View} from "react-native"; -import Touchable from "react-native-platform-touchable"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import ThemeManager from "../utils/ThemeManager"; +import HeaderButton from "../components/HeaderButton"; const defaultScreenOptions = { gestureEnabled: true, @@ -25,20 +22,7 @@ const defaultScreenOptions = { function getDrawerButton(navigation: Object) { return ( - - - - - + ); } diff --git a/navigation/MainTabNavigator.js b/navigation/MainTabNavigator.js index 7a2e3ca..79f5306 100644 --- a/navigation/MainTabNavigator.js +++ b/navigation/MainTabNavigator.js @@ -14,8 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen'; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import AsyncStorageManager from "../utils/AsyncStorageManager"; -import {View} from "react-native"; -import Touchable from "react-native-platform-touchable"; +import HeaderButton from "../components/HeaderButton"; const TAB_ICONS = { Home: 'triangle', @@ -33,20 +32,7 @@ const defaultScreenOptions = { function getDrawerButton(navigation: Object) { return ( - - - - - + ); } diff --git a/package.json b/package.json index e3063d5..39ade1f 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,6 @@ "@react-navigation/native": "^5.0.9", "@react-navigation/stack": "^5.1.1", "expo": "^36.0.0", - "expo-font": "~8.0.0", "expo-linear-gradient": "~8.0.0", "expo-localization": "~8.0.0", "expo-permissions": "~8.0.0", @@ -31,12 +30,10 @@ "react-native-gesture-handler": "~1.5.0", "react-native-modalize": "^1.3.6", "react-native-paper": "^3.6.0", - "react-native-platform-touchable": "^1.1.1", "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", "react-native-safe-area-context": "0.6.0", "react-native-screens": "2.0.0-alpha.12", - "react-native-status-bar-height": "^2.3.1", "react-native-webview": "7.4.3" }, "devDependencies": { diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 3ac0274..8e6a589 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -3,18 +3,17 @@ import * as React from 'react'; import {TouchableOpacity, View} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; -import PlatformTouchable from "react-native-platform-touchable"; -import {Avatar, Card, Text} from 'react-native-paper'; +import {Avatar, Button, Card, Text} from 'react-native-paper'; +import FeedItem from "../components/FeedItem"; +import SquareDashboardItem from "../components/SquareDashboardItem"; // import DATA from "../dashboard_data.json"; -const ICON_AMICALE = require('../assets/amicale.png'); const NAME_AMICALE = 'Amicale INSA Toulouse'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json"; @@ -373,24 +372,24 @@ export default class HomeScreen extends React.Component { flexDirection: 'row', marginLeft: 10, marginRight: 10, + marginBottom: 10, }}> - - + + isAvailable={isProximoAvailable} + isLeft={false}/> ); } @@ -477,23 +476,22 @@ export default class HomeScreen extends React.Component { marginLeft: 10, marginRight: 10, }}> - - + + isAvailable={tutorinsaIsAvailable} + isLeft={false}/> ); } @@ -506,36 +504,14 @@ export default class HomeScreen extends React.Component { const onImagePress = this.openLink.bind(this, item.full_picture); const onOutLinkPress = this.openLink.bind(this, item.permalink_url); return ( - - } - /> - {item.full_picture !== '' && item.full_picture !== undefined ? - - - : } - - {item.message !== undefined ? - : - } - - - - En savoir plus - - - - + ); } diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index b79628a..530326c 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -27,7 +27,7 @@ export default class PlanningDisplayScreen extends React.Component { render() { // console.log("rendering planningDisplayScreen"); return ( - + {this.displayData.title} diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 32f4460..6281ff9 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -4,10 +4,11 @@ import * as React from 'react'; import {BackHandler, Image, View} from 'react-native'; import i18n from "i18n-js"; import ThemeManager from "../utils/ThemeManager"; -import {Agenda, LocaleConfig} from 'react-native-calendars'; +import {LocaleConfig} from 'react-native-calendars'; import WebDataManager from "../utils/WebDataManager"; import PlanningEventManager from '../utils/PlanningEventManager'; import {Text, Title, List, Avatar, Divider} from 'react-native-paper'; +import CustomAgenda from "../components/CustomAgenda"; LocaleConfig.locales['fr'] = { monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], @@ -64,14 +65,6 @@ export default class PlanningScreen extends React.Component { constructor(props: any) { super(props); this.webDataManager = new WebDataManager(FETCH_URL); - this.didFocusSubscription = props.navigation.addListener( - 'didFocus', - () => - BackHandler.addEventListener( - 'hardwareBackPress', - this.onBackButtonPressAndroid - ) - ); if (i18n.currentLocale().startsWith("fr")) { LocaleConfig.defaultLocale = 'fr'; } @@ -88,8 +81,16 @@ export default class PlanningScreen extends React.Component { componentDidMount() { this.onRefresh(); + this.didFocusSubscription = this.props.navigation.addListener( + 'focus', + () => + BackHandler.addEventListener( + 'hardwareBackPress', + this.onBackButtonPressAndroid + ) + ); this.willBlurSubscription = this.props.navigation.addListener( - 'willBlur', + 'blur', () => BackHandler.removeEventListener( 'hardwareBackPress', @@ -235,7 +236,7 @@ export default class PlanningScreen extends React.Component { render() { // console.log("rendering PlanningScreen"); return ( - { // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. firstDay={1} // ref to this agenda in order to handle back button event - ref={this.onAgendaRef} - // agenda theme - theme={{ - backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, - calendarBackground: ThemeManager.getCurrentThemeVariables().background, - textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary, - selectedDayTextColor: '#ffffff', - todayTextColor: ThemeManager.getCurrentThemeVariables().primary, - dayTextColor: ThemeManager.getCurrentThemeVariables().text, - textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - dotColor: ThemeManager.getCurrentThemeVariables().primary, - selectedDotColor: '#ffffff', - arrowColor: 'orange', - monthTextColor: ThemeManager.getCurrentThemeVariables().primary, - indicatorColor: ThemeManager.getCurrentThemeVariables().primary, - textDayFontWeight: '300', - textMonthFontWeight: 'bold', - textDayHeaderFontWeight: '300', - textDayFontSize: 16, - textMonthFontSize: 16, - textDayHeaderFontSize: 16, - agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, - agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary, - agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary, - }} + onRef={this.onAgendaRef} /> ); } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index b1bcc72..f8a2b2c 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -341,7 +341,7 @@ export default class ProximoListScreen extends React.Component { } render() { - // console.log("rendering ProximoListScreen"); + console.log("rendering ProximoListScreen"); return ( { style={{ flexDirection: 'row', }}> - - + + ); } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index e409547..de461c0 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -9,21 +9,15 @@ import NotificationsManager from "../../utils/NotificationsManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; import {Divider, IconButton, List, Text, Title} from 'react-native-paper'; +import HeaderButton from "../../components/HeaderButton"; +import ProxiwashListItem from "../../components/ProxiwashListItem"; +import ProxiwashConstants from "../../constants/ProxiwashConstants"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; -const MACHINE_STATES = { - "TERMINE": "0", - "DISPONIBLE": "1", - "EN COURS": "2", - "HS": "3", - "ERREUR": "4" -}; - let stateStrings = {}; let modalStateStrings = {}; let stateIcons = {}; -let stateColors = {}; const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds @@ -63,30 +57,23 @@ export default class ProxiwashScreen extends React.Component { */ constructor() { super(); - let colors = ThemeManager.getCurrentThemeVariables(); - stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor; - stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor; - stateColors[MACHINE_STATES["EN COURS"]] = colors.proxiwashRunningColor; - stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor; - stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor; + stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished'); + stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); + stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); + stateStrings[ProxiwashConstants.machineStates.HS] = i18n.t('proxiwashScreen.states.broken'); + stateStrings[ProxiwashConstants.machineStates.ERREUR] = i18n.t('proxiwashScreen.states.error'); - stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished'); - stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); - stateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); - stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken'); - stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error'); + modalStateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.modal.finished'); + modalStateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready'); + modalStateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.modal.running'); + modalStateStrings[ProxiwashConstants.machineStates.HS] = i18n.t('proxiwashScreen.modal.broken'); + modalStateStrings[ProxiwashConstants.machineStates.ERREUR] = i18n.t('proxiwashScreen.modal.error'); - modalStateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.modal.finished'); - modalStateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready'); - modalStateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.modal.running'); - modalStateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.modal.broken'); - modalStateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.modal.error'); - - stateIcons[MACHINE_STATES.TERMINE] = 'check-circle'; - stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank'; - stateIcons[MACHINE_STATES["EN COURS"]] = 'progress-check'; - stateIcons[MACHINE_STATES.HS] = 'alert-octagram-outline'; - stateIcons[MACHINE_STATES.ERREUR] = 'alert'; + stateIcons[ProxiwashConstants.machineStates.TERMINE] = 'check-circle'; + stateIcons[ProxiwashConstants.machineStates.DISPONIBLE] = 'radiobox-blank'; + stateIcons[ProxiwashConstants.machineStates["EN COURS"]] = 'progress-check'; + stateIcons[ProxiwashConstants.machineStates.HS] = 'alert-octagram-outline'; + stateIcons[ProxiwashConstants.machineStates.ERREUR] = 'alert'; // let dataString = AsyncStorageManager.getInstance().preferences.proxiwashWatchedMachines.current; this.onAboutPress = this.onAboutPress.bind(this); @@ -247,9 +234,9 @@ export default class ProxiwashScreen extends React.Component { */ showAlert(title: string, item: Object, isDryer: boolean) { let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}]; - let message = modalStateStrings[MACHINE_STATES[item.state]]; + let message = modalStateStrings[ProxiwashConstants.machineStates[item.state]]; const onPress = this.setupNotifications.bind(this, item.number); - if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) { + if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]) { buttons = [ { text: this.isMachineWatched(item.number) ? @@ -267,7 +254,7 @@ export default class ProxiwashScreen extends React.Component { end: item.endTime, remaining: item.remainingTime }); - } else if (MACHINE_STATES[item.state] === MACHINE_STATES.DISPONIBLE) { + } else if (ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates.DISPONIBLE) { if (isDryer) message += '\n' + i18n.t('proxiwashScreen.dryersTariff'); else @@ -286,12 +273,7 @@ export default class ProxiwashScreen extends React.Component { getRightButton() { return ( - + ); } @@ -327,56 +309,25 @@ export default class ProxiwashScreen extends React.Component { * @returns {React.Node} */ getRenderItem({item, section}: Object) { - let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]; - let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; - let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); + const isMachineRunning = ProxiwashConstants.machineStates[item.state] === ProxiwashConstants.machineStates["EN COURS"]; + const machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; + const isDryer = section.title === i18n.t('proxiwashScreen.dryers'); const onPress = this.showAlert.bind(this, machineName, item, isDryer); let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0; - if (MACHINE_STATES[item.state] === '0') + if (ProxiwashConstants.machineStates[item.state] === '0') width = '100%'; return ( - - - this.isMachineWatched(item.number) ? - : - } - right={props => ( - - - - {stateStrings[MACHINE_STATES[item.state]]} - - - - - )} - /> - - + ); } } diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 1de1a6e..614d71a 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {ScrollView, View} from "react-native"; +import {ScrollView} from "react-native"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; -import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper'; +import {Card, List, Switch, ToggleButton} from 'react-native-paper'; type Props = { navigation: Object, @@ -39,39 +39,6 @@ export default class SettingsScreen extends React.Component { this.onToggleNightMode = this.onToggleNightMode.bind(this); } - /** - * Get a list item using the specified control - * - * @param control The custom control to use - * @param icon The icon name to display on the list item - * @param title The text to display as this list item title - * @param subtitle The text to display as this list item subtitle - * @returns {React.Node} - */ - static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) { - return ( - } - right={props => control} - /> - ); - } - - getRadioButton(onPress: Function, value: string, label: string) { - return ( - - - {label} - - - - ); - } - /** * Save the value for the proxiwash reminder notification time * @@ -95,11 +62,13 @@ export default class SettingsScreen extends React.Component { * @param value The value to store */ onStartScreenPickerValueChange(value: string) { - let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key; - AsyncStorageManager.getInstance().savePref(key, value); - this.setState({ - startScreenPickerSelected: value - }); + if (value != null) { + let key = AsyncStorageManager.getInstance().preferences.defaultStartScreen.key; + AsyncStorageManager.getInstance().savePref(key, value); + this.setState({ + startScreenPickerSelected: value + }); + } } /** @@ -109,16 +78,14 @@ export default class SettingsScreen extends React.Component { */ getProxiwashNotifPicker() { return ( - - - - - - - + + + + ); } @@ -129,16 +96,16 @@ export default class SettingsScreen extends React.Component { */ getStartScreenPicker() { return ( - - - - - - - + + + + + + ); } @@ -180,11 +147,18 @@ export default class SettingsScreen extends React.Component { - {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} + {this.getToggleItem( + this.onToggleNightMode, + 'theme-light-dark', + i18n.t('settingsScreen.nightMode'), + this.state.nightMode ? + i18n.t('settingsScreen.nightModeSubOn') : + i18n.t('settingsScreen.nightModeSubOff') + )} } + left={props => } > {this.getStartScreenPicker()} @@ -192,13 +166,15 @@ export default class SettingsScreen extends React.Component { - } - > - {this.getProxiwashNotifPicker()} - + + } + > + {this.getProxiwashNotifPicker()} + + diff --git a/translations/en.json b/translations/en.json index 852f257..0e3e36f 100644 --- a/translations/en.json +++ b/translations/en.json @@ -60,21 +60,12 @@ "settingsScreen": { "generalCard": "General", "nightMode": "Night Mode", - "nightModeSub": "Switch the app to a dark or light theme", + "nightModeSubOn": "Your eyes are at peace", + "nightModeSubOff": "Your eyes are burning", "startScreen": "Start Screen", "startScreenSub": "Select which screen to start the app on", "proxiwashNotifReminder": "Machine running reminder", - "proxiwashNotifReminderSub": "Choose when to send a notification to remind you a machine is running with your laundry", - "proxiwashNotifReminderPicker": { - "never": "Never", - "1": "1 min", - "2": "2 min", - "3": "3 min", - "5": "5 min", - "10": "10 min", - "20": "20 min", - "30": "30 min" - } + "proxiwashNotifReminderSub": "How many minutes before", }, "homeScreen": { "listUpdated": "List updated!", diff --git a/translations/fr.json b/translations/fr.json index 8d506a8..e9807dc 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -60,21 +60,12 @@ "settingsScreen": { "generalCard": "Général", "nightMode": "Mode Nuit", - "nightModeSub": "Passer l'application dans un thème sombre ou clair", + "nightModeSubOn": "Vos yeux brulent", + "nightModeSubOff": "Vos yeux vous remercient", "startScreen": "Écran de démarrage", "startScreenSub": "Choisissez l'écran utilisé au démarrage", "proxiwashNotifReminder": "Rappel de machine en cours", - "proxiwashNotifReminderSub": "Choississez quand envoyer une notification pour vous rappeler qu'une machine avec votre linge est en cours", - "proxiwashNotifReminderPicker": { - "never": "Jamais", - "1": "1 min", - "2": "2 min", - "3": "3 min", - "5": "5 min", - "10": "10 min", - "20": "20 min", - "30": "30 min" - } + "proxiwashNotifReminderSub": "Combien de minutes avant", }, "homeScreen": { "listUpdated": "List mise à jour!", diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 207ffcd..134e7f6 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -38,6 +38,7 @@ export default class ThemeManager { proxiwashFinishedColor: "rgba(54,165,22,0.31)", proxiwashReadyColor: "transparent", proxiwashRunningColor: "rgba(94,104,241,0.3)", + proxiwashRunningBgColor: "rgba(99,109,255,0.14)", proxiwashBrokenColor: "rgba(162,162,162,0.31)", proxiwashErrorColor: "rgba(204,7,0,0.31)", @@ -74,6 +75,7 @@ export default class ThemeManager { proxiwashFinishedColor: "rgba(17,149,32,0.53)", proxiwashReadyColor: "transparent", proxiwashRunningColor: "rgba(29,59,175,0.65)", + proxiwashRunningBgColor: "rgba(99,109,255,0.14)", proxiwashBrokenColor: "#000000", proxiwashErrorColor: "rgba(213,8,0,0.57)", diff --git a/utils/WebDataManager.js b/utils/WebDataManager.js index 251c299..2ee84cc 100644 --- a/utils/WebDataManager.js +++ b/utils/WebDataManager.js @@ -24,38 +24,10 @@ export default class WebDataManager { let response = await fetch(this.FETCH_URL); fetchedData = await response.json(); } catch (error) { - // console.log('Could not read FetchedData from server'); - // console.log(error); throw new Error('Could not read FetchedData from server'); } this.lastDataFetched = fetchedData; return fetchedData; } - /** - * Detects if the fetched data is not an empty object - * - * @return - */ - isDataObjectValid(): boolean { - return Object.keys(this.lastDataFetched).length > 0; - } - - /** - * Show a toast message depending on the validity of the fetched data - * - * @param errorString - */ - showUpdateToast(errorString) { - // let isSuccess = this.isDataObjectValid(); - // if (!isSuccess) { - // Toast.show({ - // text: errorString, - // buttonText: 'OK', - // type: isSuccess ? "success" : "danger", - // duration: 2000 - // }); - // } - } - }