From 7f7ae68664fefc46b05584cc71694d40f2481704 Mon Sep 17 00:00:00 2001 From: keplyx Date: Sun, 8 Mar 2020 00:05:41 +0100 Subject: [PATCH] Improved proxiwash screen + show help banner on proxiwash and planex --- components/ProxiwashListItem.js | 58 +++++++++++++------ components/WebSectionList.js | 2 +- screens/Proxiwash/ProxiwashScreen.js | 72 +++++++++++++++++++----- screens/Websites/PlanexScreen.js | 84 +++++++++++++++++++++++----- translations/en.json | 6 +- translations/fr.json | 7 ++- utils/AsyncStorageManager.js | 12 +++- utils/ThemeManager.js | 20 +++---- 8 files changed, 197 insertions(+), 64 deletions(-) diff --git a/components/ProxiwashListItem.js b/components/ProxiwashListItem.js index cfb2c39..2accefa 100644 --- a/components/ProxiwashListItem.js +++ b/components/ProxiwashListItem.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Divider, List, Text, withTheme} from 'react-native-paper'; +import {Card, Avatar, List, Text, withTheme} from 'react-native-paper'; import {View} from "react-native"; import ProxiwashConstants from "../constants/ProxiwashConstants"; @@ -13,27 +13,48 @@ function ProxiwashListItem(props) { stateColors[ProxiwashConstants.machineStates.ERREUR] = colors.proxiwashErrorColor; const icon = ( props.isWatched ? - : - + : + ); return ( - - + {ProxiwashConstants.machineStates[props.state] === ProxiwashConstants.machineStates["EN COURS"] ? + : null + } + + - - )} /> - - + ); } diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 1f34617..ee305a6 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -187,7 +187,7 @@ export default class WebSectionList extends React.Component { render() { let dataset = this.props.createDataset(this.state.fetchedData); const isEmpty = dataset[0].data.length === 0; - const shouldRenderHeader = !isEmpty || (this.props.renderSectionHeader !== null); + const shouldRenderHeader = !isEmpty && (this.props.renderSectionHeader !== null); if (isEmpty) dataset = this.createEmptyDataset(); return ( diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index de461c0..6a834fa 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -2,13 +2,12 @@ import * as React from 'react'; import {Alert, Platform, View} from 'react-native'; -import ThemeManager from '../../utils/ThemeManager'; import i18n from "i18n-js"; import WebSectionList from "../../components/WebSectionList"; 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 {Card, Banner, Avatar} from 'react-native-paper'; import HeaderButton from "../../components/HeaderButton"; import ProxiwashListItem from "../../components/ProxiwashListItem"; import ProxiwashConstants from "../../constants/ProxiwashConstants"; @@ -30,6 +29,7 @@ type State = { firstLoading: boolean, fetchedData: Object, machinesWatched: Array, + bannerVisible: boolean, }; @@ -43,6 +43,7 @@ export default class ProxiwashScreen extends React.Component { getRenderItem: Function; getRenderSectionHeader: Function; createDataset: Function; + onHideBanner: Function; state = { refreshing: false, @@ -50,6 +51,7 @@ export default class ProxiwashScreen extends React.Component { fetchedData: {}, // machinesWatched: JSON.parse(dataString), machinesWatched: [], + bannerVisible: AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.current === '1', }; /** @@ -80,6 +82,15 @@ export default class ProxiwashScreen extends React.Component { this.getRenderItem = this.getRenderItem.bind(this); this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.createDataset = this.createDataset.bind(this); + this.onHideBanner = this.onHideBanner.bind(this); + } + + onHideBanner() { + this.setState({bannerVisible: false}); + AsyncStorageManager.getInstance().savePref( + AsyncStorageManager.getInstance().preferences.proxiwashShowBanner.key, + '0' + ); } /** @@ -280,24 +291,57 @@ export default class ProxiwashScreen extends React.Component { render() { const nav = this.props.navigation; return ( - + + } + > + {i18n.t('proxiwashScreen.enableNotificationsTip')} + + + + ); } getRenderSectionHeader({section}: Object) { return ( - - {section.title} - + + ); } diff --git a/screens/Websites/PlanexScreen.js b/screens/Websites/PlanexScreen.js index ccfd8f3..2228659 100644 --- a/screens/Websites/PlanexScreen.js +++ b/screens/Websites/PlanexScreen.js @@ -3,11 +3,19 @@ import * as React from 'react'; import ThemeManager from "../../utils/ThemeManager"; import WebViewScreen from "../../components/WebViewScreen"; +import {Avatar, Banner} from "react-native-paper"; +import i18n from "i18n-js"; +import {View} from "react-native"; +import AsyncStorageManager from "../../utils/AsyncStorageManager"; type Props = { navigation: Object, } +type State = { + bannerVisible: boolean, +} + const PLANEX_URL = 'http://planex.insa-toulouse.fr/'; @@ -75,9 +83,11 @@ const OBSERVE_MUTATIONS_INJECTED = * Class defining the app's planex screen. * This screen uses a webview to render the planex page */ -export default class PlanexScreen extends React.Component { +export default class PlanexScreen extends React.Component { customInjectedJS: string; + onHideBanner: Function; + onGoToSettings: Function; constructor() { super(); @@ -93,26 +103,70 @@ export default class PlanexScreen extends React.Component { this.customInjectedJS += 'removeAlpha();' + '});true;'; // Prevent crash on ios + this.onHideBanner = this.onHideBanner.bind(this); + this.onGoToSettings = this.onGoToSettings.bind(this); + } + state = { + bannerVisible: + AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' && + AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex', + }; + + onHideBanner() { + this.setState({bannerVisible: false}); + AsyncStorageManager.getInstance().savePref( + AsyncStorageManager.getInstance().preferences.planexShowBanner.key, + '0' + ); + } + + onGoToSettings() { + this.onHideBanner(); + this.props.navigation.navigate('SettingsScreen'); } render() { const nav = this.props.navigation; return ( - + + } + > + {i18n.t('planexScreen.enableStartScreen')} + + + ); } } diff --git a/translations/en.json b/translations/en.json index 6924f8c..64ed254 100644 --- a/translations/en.json +++ b/translations/en.json @@ -160,6 +160,7 @@ "dryerTips": "The advised dryer length is 35 minutes for 14 kg of laundry. You can choose a shorter length if the dryer is not fully charged.", "procedure": "Procedure", "tips": "Tips", + "enableNotificationsTip": "Click on a running machine to enable notifications", "modal": { "enableNotifications": "Notify me", "disableNotifications": "Stop notifications", @@ -188,8 +189,9 @@ } }, "planexScreen": { - "rotateToLandscape": "Turn your screen to see the whole week", - "rotateToPortrait": "Turn your screen to see only 2 days" + "enableStartScreen": "Come here often? Set it as default screen!", + "enableStartOK": "Yes please!", + "enableStartCancel": "Later" }, "availableRoomScreen": { "normalRoom": "Work", diff --git a/translations/fr.json b/translations/fr.json index 92c880c..aa5e7ea 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -160,7 +160,7 @@ "dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.", "procedure": "Procédure", "tips": "Conseils", - + "enableNotificationsTip": "Cliquez sur une machine en cours pour activer les notifications", "modal": { "enableNotifications": "Me Notifier", "disableNotifications": "Désactiver les notifications", @@ -190,8 +190,9 @@ } }, "planexScreen": { - "rotateToLandscape": "Tournez votre téléphone pour voir la semaine entière", - "rotateToPortrait": "Tournez votre téléphone pour voir seulement 2 jours" + "enableStartScreen": "Vous venez souvent ici ? Démarrez l'appli sur cette page!", + "enableStartOK": "Oui svp!", + "enableStartCancel": "Plus tard" }, "availableRoomScreen": { "normalRoom": "Travail", diff --git a/utils/AsyncStorageManager.js b/utils/AsyncStorageManager.js index 8a009dc..80d50e3 100644 --- a/utils/AsyncStorageManager.js +++ b/utils/AsyncStorageManager.js @@ -63,7 +63,17 @@ export default class AsyncStorageManager { key: 'defaultStartScreen', default: 'Home', current: '', - } + }, + proxiwashShowBanner: { + key: 'proxiwashShowBanner', + default: '1', + current: '', + }, + planexShowBanner: { + key: 'planexShowBanner', + default: '1', + current: '', + }, }; /** diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index 134e7f6..72105b9 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -35,12 +35,12 @@ export default class ThemeManager { agendaDayTextColor: '#636363', // PROXIWASH - proxiwashFinishedColor: "rgba(54,165,22,0.31)", + proxiwashFinishedColor: "#a5dc9d", 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)", + proxiwashRunningColor: "#a0ceff", + proxiwashRunningBgColor: "#c7e3ff", + proxiwashBrokenColor: "#8e8e8e", + proxiwashErrorColor: "rgba(204,7,0,0.31)#e35f57", // Screens planningColor: '#d9b10a', @@ -72,12 +72,12 @@ export default class ThemeManager { agendaDayTextColor: '#6d6d6d', // PROXIWASH - proxiwashFinishedColor: "rgba(17,149,32,0.53)", + proxiwashFinishedColor: "#31682c", 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)", + proxiwashRunningColor: "#213c79", + proxiwashRunningBgColor: "#1a2033", + proxiwashBrokenColor: "#656565", + proxiwashErrorColor: "#7e2e2f", // Screens planningColor: '#d99e09',