Skip to content

S
safetcut-app
Commit b6a4e84f by Tonk
Options

update add device type and device icon

parent 519c4f0a
Showing with 262 additions and 7 deletions
components/deviceIcon.js 0 → 100644
export const listDeviceIcon = [
{
type: 'Air Conditioner',
},
{
type: 'Air Purifier',
},
{
type: 'Battery Charger',
},
{
type: 'BBQ',
},
{
type: 'Bench',
},
{
type: 'Blender',
},
{
type: 'CCTV',
},
{
type: 'Ceiling Fan',
},
{
type: 'Coffee Grinder',
},
{
type: 'Coffee Maker',
},
{
type: 'Computer',
},
{
type: 'Electric Frying Pan',
},
{
type: 'Electric Plug',
},
{
type: 'Fan',
},
{
type: 'Fish Bowl',
},
{
type: 'Freezer',
},
{
type: 'Gaming Console',
},
{
type: 'Iron',
},
{
type: 'Lamp',
},
{
type: 'Light',
},
{
type: 'Machinery',
},
{
type: 'Massage Chair',
},
{
type: 'Meat Grinder',
},
{
type: 'Microwave',
},
{
type: 'Oven',
},
{
type: 'Projector',
},
{
type: 'Refrigerator',
},
{
type: 'Rice Cooker',
},
{
type: 'Sewing Machine',
},
{
type: 'Speakers',
},
{
type: 'Stove',
},
{
type: 'Television',
},
{
type: 'Toaster',
},
{
type: 'Vacuum Bottle',
},
{
type: 'Vacuum Cleaner',
},
{
type: 'Washing Machine',
},
{
type: 'Water Dispenser',
},
{
type: 'Water Heater',
},
{
type: 'Water Pump',
},
];
export const getDeviceIcon = type => {
switch (type) {
case 'Air Conditioner':
return require('../assets/images/device-icon/AirConditioner.png');
case 'Air Purifier':
return require('../assets/images/device-icon/AirPurifier.png');
case 'Battery Charger':
return require('../assets/images/device-icon/BatteryCharger.png');
case 'BBQ':
return require('../assets/images/device-icon/BBQ.png');
case 'Bench':
return require('../assets/images/device-icon/Bench.png');
case 'Blender':
return require('../assets/images/device-icon/Blender.png');
case 'CCTV':
return require('../assets/images/device-icon/CCTV.png');
case 'Ceiling Fan':
return require('../assets/images/device-icon/CeilingFan.png');
case 'Coffee Grinder':
return require('../assets/images/device-icon/CoffeeGrinder.png');
case 'Coffee Maker':
return require('../assets/images/device-icon/CoffeeMaker.png');
case 'Computer':
return require('../assets/images/device-icon/Computer.png');
case 'Electric Frying Pan':
return require('../assets/images/device-icon/ElectricFryingPan.png');
case 'Electric Plug':
return require('../assets/images/device-icon/ElectricPlug.png');
case 'Fan':
return require('../assets/images/device-icon/Fan.png');
case 'Fish Bowl':
return require('../assets/images/device-icon/FishBowl.png');
case 'Freezer':
return require('../assets/images/device-icon/Freezer.png');
case 'Gaming Console':
return require('../assets/images/device-icon/GamingConsole.png');
case 'Iron':
return require('../assets/images/device-icon/Iron.png');
case 'Lamp':
return require('../assets/images/device-icon/Lamp.png');
case 'Light':
return require('../assets/images/device-icon/Light.png');
case 'Machinery':
return require('../assets/images/device-icon/Machinery.png');
case 'Massage Chair':
return require('../assets/images/device-icon/MassageChair.png');
case 'Meat Grinder':
return require('../assets/images/device-icon/MeatGrinder.png');
case 'Microwave':
return require('../assets/images/device-icon/Microwave.png');
case 'Oven':
return require('../assets/images/device-icon/Oven.png');
case 'Projector':
return require('../assets/images/device-icon/Projector.png');
case 'Refrigerator':
return require('../assets/images/device-icon/Refrigerator.png');
case 'Rice Cooker':
return require('../assets/images/device-icon/RiceCooker.png');
case 'Sewing Machine':
return require('../assets/images/device-icon/SewingMachine.png');
case 'Speakers':
return require('../assets/images/device-icon/Speakers.png');
case 'Stove':
return require('../assets/images/device-icon/Stove.png');
case 'Television':
return require('../assets/images/device-icon/Television.png');
case 'Toaster':
return require('../assets/images/device-icon/Toaster.png');
case 'Vacuum Bottle':
return require('../assets/images/device-icon/VacuumBottle.png');
case 'Vacuum Cleaner':
return require('../assets/images/device-icon/VacuumCleaner.png');
case 'Washing Machine':
return require('../assets/images/device-icon/WashingMachine.png');
case 'Water Dispenser':
return require('../assets/images/device-icon/WaterDispenser.png');
case 'Water Heater':
return require('../assets/images/device-icon/WaterHeater.png');
case 'Water Pump':
return require('../assets/images/device-icon/WaterPump.png');
default:
}
};
screens/Private/SmartMeterScreen/McbLinkScreen.js
import React from 'react'; import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base'; import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { StyleSheet, TextInput } from 'react-native'; import { StyleSheet, TextInput, Image } from 'react-native';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
...@@ -14,6 +14,8 @@ import { ...@@ -14,6 +14,8 @@ import {
addConnectedDevice, addConnectedDevice,
} from '../../../reduxStore/actions/currentSelectedAction'; } from '../../../reduxStore/actions/currentSelectedAction';
import Modal from 'react-native-modalbox'; import Modal from 'react-native-modalbox';
import { getDeviceIcon, listDeviceIcon } from '../../../components/deviceIcon';
import { isIphoneX } from '../../../utils/isPhoneX';
let checkedTimes = 0; let checkedTimes = 0;
...@@ -50,6 +52,7 @@ class McbLinkScreen extends React.Component { ...@@ -50,6 +52,7 @@ class McbLinkScreen extends React.Component {
mcbIndex: this.props.navigation.getParam('mcbIndex'), mcbIndex: this.props.navigation.getParam('mcbIndex'),
subBreakerIndex: this.props.navigation.getParam('subIndex'), subBreakerIndex: this.props.navigation.getParam('subIndex'),
deviceName: '', deviceName: '',
deviceType: '',
}; };
componentDidMount = () => { componentDidMount = () => {
this.setSubBreakersState(); this.setSubBreakersState();
...@@ -84,13 +87,13 @@ class McbLinkScreen extends React.Component { ...@@ -84,13 +87,13 @@ class McbLinkScreen extends React.Component {
this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status }); this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
}; };
addDevice = async () => { addDevice = async () => {
const { deviceName, mcbIndex, subBreakerIndex } = this.state; const { deviceName, deviceType, mcbIndex, subBreakerIndex } = this.state;
let deviceData = { name: deviceName }; let deviceData = { name: deviceName, type: deviceType };
const mcbId = mcbIndex + 1; const mcbId = mcbIndex + 1;
const subId = subBreakerIndex + 1; const subId = subBreakerIndex + 1;
await this.props.addConnectedDevice(mcbId, subId, deviceData); await this.props.addConnectedDevice(mcbId, subId, deviceData);
this.setState({ deviceName: '', isAddElectronicVisible: false }); this.setState({ deviceName: '', deviceType: '', isAddElectronicVisible: false });
}; };
formatData(item, start, end) { formatData(item, start, end) {
...@@ -201,7 +204,14 @@ class McbLinkScreen extends React.Component { ...@@ -201,7 +204,14 @@ class McbLinkScreen extends React.Component {
onLongPress={() => this.setState({ toggleDel: true })} onLongPress={() => this.setState({ toggleDel: true })}
style={theme.centerContainer} style={theme.centerContainer}
> >
<Icon style={[styles.electronicIcon]} name={'md-help'} /> {item.type ? (
<Image
style={styles.electronicIcon}
source={getDeviceIcon(item.type)}
/>
) : (
<Icon style={{ color: color.primary }} name={'md-help'} />
)}
<Text style={styles.electronictext}>{item.name}</Text> <Text style={styles.electronictext}>{item.name}</Text>
</TouchableOpacity> </TouchableOpacity>
{toggleDel && ( {toggleDel && (
...@@ -250,7 +260,7 @@ class McbLinkScreen extends React.Component { ...@@ -250,7 +260,7 @@ class McbLinkScreen extends React.Component {
); );
}; };
renderAddModal = () => { renderAddModal = () => {
const { deviceName } = this.state; const { deviceName, deviceType } = this.state;
return ( return (
<> <>
<View style={styles.dragIndicator} /> <View style={styles.dragIndicator} />
...@@ -267,6 +277,7 @@ class McbLinkScreen extends React.Component { ...@@ -267,6 +277,7 @@ class McbLinkScreen extends React.Component {
Save Save
</Text> </Text>
</View> </View>
<ScrollView>
<View style={theme.mt2}> <View style={theme.mt2}>
<Text style={[theme.normalText]}>Enter Device’s name</Text> <Text style={[theme.normalText]}>Enter Device’s name</Text>
<View style={styles.inputDeviceNameContainer}> <View style={styles.inputDeviceNameContainer}>
...@@ -282,6 +293,41 @@ class McbLinkScreen extends React.Component { ...@@ -282,6 +293,41 @@ class McbLinkScreen extends React.Component {
/> />
</View> </View>
</View> </View>
<View style={theme.mt2}>
<Text style={[theme.normalText]}>Select Device’s icon</Text>
<FlatList
data={listDeviceIcon}
style={[theme.mt1, { paddingBottom: isIphoneX() ? 80 : 45 }]}
numColumns={4}
renderItem={({ item, index }) => (
<Card
style={[
styles.electronicCard,
{
backgroundColor: item.type === deviceType ? color.primary : color.white,
},
]}
>
<TouchableOpacity
style={theme.centerContainer}
onPress={() => this.setState({ deviceType: item.type })}
>
<Image style={styles.electronicIcon} source={getDeviceIcon(item.type)} />
<Text
style={[
styles.electronictext,
{ color: item.type === deviceType ? color.white : color.grey },
]}
>
{item.type}
</Text>
</TouchableOpacity>
</Card>
)}
keyExtractor={({ item, index }) => `device${index}`}
/>
</View>
</ScrollView>
</View> </View>
</> </>
); );
...@@ -364,12 +410,19 @@ const styles = StyleSheet.create({ ...@@ -364,12 +410,19 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
electronicIcon: { electronicIcon: {
color: color.primary, tintColor: color.primary,
width: 24,
height: 24,
resizeMode: 'contain',
marginBottom: 10,
}, },
electronictext: { electronictext: {
position: 'absolute',
bottom: 5,
fontSize: 10, fontSize: 10,
fontFamily: 'Avenir-Roman', fontFamily: 'Avenir-Roman',
color: color.grey, color: color.grey,
width: '100%',
}, },
doneDeleteBtn: { doneDeleteBtn: {
backgroundColor: color.lightGrey, backgroundColor: color.lightGrey,
......
Markdown is supported
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