Skip to content

S
safetcut-app
Commit 8ff86ee3 by Tonk
Options

add delete connected device function, update get connected device

parent 897d2eda
Showing with 172 additions and 109 deletions
components/Form/Input.js
......@@ -63,10 +63,10 @@ class Input extends Component {
</View>
{touched &&
((error && (
<Text style={[theme.smDescription, theme.textDanger, styles.errPosition]}>{error}</Text>
<Text style={[theme.description, theme.textDanger, styles.errPosition]}>{error}</Text>
)) ||
(warning && (
<Text style={[theme.smDescription, theme.textWarning, styles.errPosition]}>{warning}</Text>
<Text style={[theme.description, theme.textWarning, styles.errPosition]}>{warning}</Text>
)))}
</View>
);
......
components/InputField.js
......@@ -63,7 +63,7 @@ const InputField = ({
item.field === name && item.error ? (
<Text
key={`${index}`}
style={[theme.smDescription, theme.textDanger, { bottom: -15, position: 'absolute' }]}
style={[theme.description, theme.textDanger, { bottom: -15, position: 'absolute' }]}
>
{item.error}
</Text>
......
components/MeterCard.js
......@@ -43,7 +43,7 @@ class MeterCard extends Component {
{ backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]}
>
<Text style={[theme.smDescription, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
<Text style={[theme.description, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
{item.img ? (
......@@ -63,7 +63,7 @@ class MeterCard extends Component {
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name || 'Untitled'}</Text>
</Row>
<Text style={[theme.smDescription]} numberOfLines={2}>
<Text style={[theme.description]} numberOfLines={2}>
{item.description}
</Text>
<Row style={{ marginTop: 10 }}>
......@@ -89,7 +89,7 @@ class MeterCard extends Component {
{ backgroundColor: isPowerOn === 1 ? 'rgba(65, 204, 0, 0.59)' : 'rgba(223, 0, 0, 0.59)' },
]}
>
<Text style={[theme.smDescription, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
<Text style={[theme.description, theme.textWhite]}>{isPowerOn === 1 ? 'ON' : 'OFF'}</Text>
</View>
<View style={[theme.centerContainer]}>
{item.img ? (
......@@ -109,7 +109,7 @@ class MeterCard extends Component {
<Row style={{ alignItems: 'center' }}>
<Text style={[theme.smallTitle, { marginRight: 15 }]}>{item.name}</Text>
</Row>
<Text style={[theme.smDescription]} numberOfLines={2}>
<Text style={[theme.description]} numberOfLines={2}>
{item.description}
</Text>
<Row style={{ marginTop: 10 }}>
......
constants/Styles.js
......@@ -74,11 +74,6 @@ export const theme = StyleSheet.create({
fontFamily: 'Avenir-Roman',
color: color.grey,
},
smDescription: {
fontSize: 12,
fontFamily: 'Avenir-Roman',
color: color.grey,
},
input: {
fontSize: 16,
paddingTop: 20,
......
reduxStore/actions/currentSelectedAction.js
import app, { fireStore } from '../../firebase';
import axios from 'axios';
import _ from 'lodash';
import { getExistedConnectedDeviceAction } from './timersAction';
const baseURL = 'https://us-central1-safetcut-20cdf.cloudfunctions.net';
......@@ -240,6 +241,66 @@ export const setSubBreakerStatus = (value, MainIndex, SubIndex) => async (dispat
console.log(error);
}
};
export const addConnectedDevice = (mcbLinkId, subBreakerId, deviceData) => async (dispatch, getState) => {
const { currentSelectedDeviceReducer, timersReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const { existedConnectedDevice } = timersReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const getDocRef = () => {
const docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId)
.collection('subBreakers')
.doc(subBreakerId);
return docRef;
};
const newConnectedDevice = existedConnectedDevice.map(
x => x.index + 1 === subBreakerId && [...x[index], deviceData]
);
try {
const docRef = getDocRef();
await docRef.add(deviceData);
dispatch(getExistedConnectedDeviceAction(newConnectedDevice));
} catch (error) {}
};
export const deleteConnectedDevice = data => async (dispatch, getState) => {
const { currentSelectedDeviceReducer, timersReducer } = getState();
const { currentSelectedData } = currentSelectedDeviceReducer;
const { existedConnectedDevice } = timersReducer;
const selectedDeviceId = currentSelectedData.deviceId;
const { mcbLinkId, subBreakerId, connectedDeviceId } = data;
console.log('action connected device', existedConnectedDevice);
const getDocRef = () => {
const docRef = fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLinkId)
.collection('subBreakers')
.doc(subBreakerId)
.collection('electronicDevices')
.doc(connectedDeviceId);
return docRef;
};
const newConnectedDevice = existedConnectedDevice.map(x =>
x.filter(device => device.connectedDeviceId !== connectedDeviceId)
);
try {
dispatch(getExistedConnectedDeviceAction(newConnectedDevice));
const docRef = getDocRef();
await docRef.delete();
} catch (error) {
console.log(error);
}
};
// export const getCurrentSelectedData = (deviceId, mcbLinkId, subBreakerId) => (dispatch, getState) => {
// const { currentSelectedDeviceReducer } = getState();
......
reduxStore/actions/timersAction.js
......@@ -151,6 +151,8 @@ export const getTimers = () => async (dispatch, getState) => {
existedConnectedDevice.push(
connectedDevices.docs.map(connectedDevice =>
Object.assign(connectedDevice.data(), {
mcbLinkId: mcbLink.id,
subBreakerId: subBreaker.id,
connectedDeviceId: connectedDevice.id,
})
)
......
screens/Private/NotificationScreen/NotificationScreen.js
......@@ -192,7 +192,7 @@ class NotificationScreen extends React.Component {
)}
<View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
<View style={[theme.rowContainer, { justifyContent: 'space-between', marginBottom: 10 }]}>
<Text style={[theme.smDescription, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text>
<Text style={[theme.description, { color: '#b9babc' }]}>{data.user || 'unknown'}</Text>
{!data.read && (
<View
......@@ -207,7 +207,7 @@ class NotificationScreen extends React.Component {
},
]}
>
<Text style={[theme.smDescription, theme.textWhite]}>New</Text>
<Text style={[theme.description, theme.textWhite]}>New</Text>
</View>
)}
</View>
......@@ -215,7 +215,7 @@ class NotificationScreen extends React.Component {
<Text style={[theme.normalText, theme.textDark]}>
{data.action} {data.device}
</Text>
<Text style={[theme.smDescription, { color: '#b9babc' }]}>
<Text style={[theme.description, { color: '#b9babc' }]}>
{format(data.time * 1000, 'hh:mm A')}
</Text>
</View>
......
screens/Private/SmartMeterScreen/McbLinkScreen.js
import React from 'react';
import { Text, Tab, Tabs, ScrollableTab, View, Card, Icon } from 'native-base';
import { connect } from 'react-redux';
import { StyleSheet } from 'react-native';
import { StyleSheet, TextInput } from 'react-native';
import { theme, color } from '../../../constants/Styles';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { Switch, FlatList, ScrollView, TouchableWithoutFeedback, TouchableOpacity } from 'react-native-gesture-handler';
import { Switch, FlatList, ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { width, height } from '../../../constants/Layout';
import { getCurrentSelectedShadow, setSubBreakerStatus } from '../../../reduxStore/actions/currentSelectedAction';
import {
getCurrentSelectedShadow,
setSubBreakerStatus,
deleteConnectedDevice,
addConnectedDevice,
} from '../../../reduxStore/actions/currentSelectedAction';
import Modal from 'react-native-modalbox';
const mockElec = [
{ name: 'elec1', icon: { type: 'Entypo', name: 'laptop' } },
{ name: 'elec2', icon: { type: '', name: '' } },
// { name: 'elec3', icon: { type: '', name: '' } },
// { name: 'elec4', icon: { type: '', name: '' } },
// { name: 'elec5', icon: { type: '', name: '' } },
// { name: 'elec1', icon: { type: '', name: '' } },
// { name: 'elec2', icon: { type: '', name: '' } },
{ name: 'elec1', icon: { type: 'Entypo', name: 'laptop' } },
{ name: 'elec2', icon: { type: '', name: '' } },
];
let checkedTimes = 0;
class McbLinkScreen extends React.Component {
......@@ -53,7 +47,9 @@ class McbLinkScreen extends React.Component {
toggleDel: false,
isWaiting: false,
isAddElectronicVisible: false,
currentTab: this.props.navigation.getParam('subIndex'),
mcbIndex: this.props.navigation.getParam('mcbIndex'),
subBreakerIndex: this.props.navigation.getParam('subIndex'),
deviceName: '',
};
componentDidMount = () => {
this.setSubBreakersState();
......@@ -66,7 +62,6 @@ class McbLinkScreen extends React.Component {
) {
this.setSubBreakersState();
}
console.log('mcb screen props', this.props);
};
setSubBreakersState = () => {
......@@ -78,25 +73,34 @@ class McbLinkScreen extends React.Component {
existedSubBreakersData.map(mcbLink => {
subBreakersInfo.push(
mcbLink.map(subBreaker =>
mcbLink.map((subBreaker, index) =>
Object.assign(subBreaker, {
connectedDevice: existedConnectedDevice[subBreaker.mcbLinkId * subBreaker.subBreakerId - 1],
connectedDevice: existedConnectedDevice[mcbIndex * 8 + index],
})
)
);
});
this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
console.log('set sb state', this.state, this.props);
};
addDevice = async () => {
const { deviceName, mcbIndex, subIndex } = this.state;
let deviceData = { name: deviceName };
const mcbId = mcbIndex + 1;
const subId = subIndex + 1;
await this.props.addConnectedDevice(mcbId, subId, deviceData);
this.setState({ deviceName: '', isAddElectronicVisible: false });
};
formatData(start, end) {
let data = mockElec; //Electronic devices data
data.push({ name: 'add', icon: { type: 'Ionicons', name: 'ios-add-circle' } });
formatData(item, start, end) {
let data = [];
data.push(...item); //Electronic devices data
data.push({ name: 'add' });
const numberOfFullRows = Math.floor(data.length / 4);
let numberOfElementsLastRow = data.length - numberOfFullRows * 4;
while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) {
data.push({ name: 'empty', icon: { type: '', name: '' } });
data.push({ name: 'empty' });
numberOfElementsLastRow = numberOfElementsLastRow + 1;
}
return data.slice(start, end);
......@@ -104,18 +108,14 @@ class McbLinkScreen extends React.Component {
renderSubbreaker = (item, index) => {
const mcbIndex = this.props.navigation.getParam('mcbIndex');
console.log('sub breaker item', item);
const handleOnPressSubBreakerSwitch = async value => {
this.setState({ isWaiting: true });
await this.props.setSubBreakerStatus(value, mcbIndex, index);
await this.props.getCurrentSelectedShadow();
const getShadowInterval = setInterval(async () => {
console.log('getShadow');
this.setState(() => {
if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval HandletoggleSubBreaker');
clearInterval(getShadowInterval);
return { isWaiting: false };
} else {
......@@ -126,7 +126,6 @@ class McbLinkScreen extends React.Component {
return { isWaiting: false };
}
});
console.log('checkedTimes', checkedTimes);
++checkedTimes;
await this.props.getCurrentSelectedShadow();
this.setSubBreakersState();
......@@ -145,34 +144,35 @@ class McbLinkScreen extends React.Component {
onValueChange={value => handleOnPressSubBreakerSwitch(value)}
/>
</View>
<Text style={[theme.smDescription, theme.mt1]}>{item.description}</Text>
<Text style={[theme.description, theme.mt1]}>{item.description}</Text>
</Card>
{this.renderElectronic()}
{this.renderElectronic(item)}
<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
<Icon name="md-funnel" style={theme.normalText}></Icon>
</View>
</View>
);
};
renderElectronic = () => {
renderElectronic = item => {
const { toggleDel } = this.state;
const data = item.connectedDevice;
const renderScroll = () => {
const maxPage = Math.ceil(mockElec.length / 8);
const item = [];
const maxPage = data.length ? Math.ceil(data.length / 8) : 1;
const scrollPage = [];
for (let index = 0; index < maxPage; index++) {
let start = index * 8;
let end = (index + 1) * 8;
item.push(
scrollPage.push(
<FlatList
style={[theme.mt1, { width: width - 30, paddingTop: 5 }]}
data={this.formatData(start, end)}
data={this.formatData(data, start, end)}
numColumns={4}
renderItem={({ item, index }) => {
if (item.name == 'empty') {
return (
<Card
transparent
style={[styles.electronicCard]} //(index + 1) % 4 ? 20 : 0
/>
);
return <Card transparent style={[styles.electronicCard]} />;
} else if (item.name === 'add') {
return (
<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
......@@ -183,7 +183,7 @@ class McbLinkScreen extends React.Component {
>
<Icon
style={[styles.electronicIcon, { color: color.white }]}
name={item.icon.name}
name={'ios-add-circle'}
/>
<Text style={[styles.electronictext, { color: color.white }]}>
{item.name}
......@@ -193,37 +193,35 @@ class McbLinkScreen extends React.Component {
);
} else {
return (
<>
<Card style={[styles.electronicCard]}>
<TouchableOpacity
onLongPress={() => this.setState({ toggleDel: true })}
style={theme.centerContainer}
>
<Icon
style={[styles.electronicIcon]}
type={item.icon.type || 'Ionicons'}
name={item.icon.name || 'md-help'}
/>
<Text style={styles.electronictext}>{item.name}</Text>
</TouchableOpacity>
{toggleDel && (
<Icon
name="cancel"
type="MaterialIcons"
style={styles.delBtn}
onPress={() => console.log('delete electronic device')}
/>
)}
</Card>
</>
<Card style={[styles.electronicCard]}>
<TouchableOpacity
onLongPress={() => this.setState({ toggleDel: true })}
style={theme.centerContainer}
>
<Icon style={[styles.electronicIcon]} name={'md-help'} />
<Text style={styles.electronictext}>{item.name}</Text>
</TouchableOpacity>
{toggleDel && (
<Icon
name="cancel"
type="MaterialIcons"
style={styles.delBtn}
onPress={() => this.props.deleteConnectedDevice(data[index])}
/>
)}
</Card>
);
}
}}
ItemSeparatorComponent={() => <View style={{ margin: 5 }}></View>}
keyExtractor={({ item, index }) => {
`elec${index}`;
}}
key={`scrollPage${index}`}
/>
);
}
return <>{item}</>;
return <>{scrollPage}</>;
};
return (
<>
......@@ -234,10 +232,10 @@ class McbLinkScreen extends React.Component {
style={styles.doneDeleteBtn}
onPress={() => this.setState({ toggleDel: false })}
>
<Text style={[theme.smDescription, { color: color.white }]}>Done</Text>
<Text style={[theme.description, { color: color.white }]}>Done</Text>
</TouchableOpacity>
) : (
<Text style={theme.smDescription}>Edit</Text>
<Text style={theme.description}>Edit</Text>
)}
</View>
<View>
......@@ -245,15 +243,11 @@ class McbLinkScreen extends React.Component {
{renderScroll()}
</ScrollView>
</View>
<View style={[theme.rowContainer, theme.mt2, { justifyContent: 'space-between' }]}>
<Text style={[theme.normalText, theme.textDark]}>Logging</Text>
<Icon name="md-funnel" style={theme.normalText}></Icon>
</View>
</>
);
};
renderAddModal = () => {
const { deviceName } = this.state;
return (
<>
<View style={styles.dragIndicator} />
......@@ -266,15 +260,25 @@ class McbLinkScreen extends React.Component {
Cancel
</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Add device</Text>
<Text
style={[theme.smallTitle, theme.textDanger]}
onPress={() => {
this.setState({ isAddElectronicVisible: false });
}}
>
<Text style={[theme.smallTitle, theme.textDanger]} onPress={this.addDevice}>
Save
</Text>
</View>
<View style={theme.mt2}>
<Text style={[theme.normalText]}>Enter Device’s name</Text>
<View style={styles.inputDeviceNameContainer}>
<TextInput
placeholder="Device name"
style={[theme.normalText, { width: '100%' }]}
onChangeText={text =>
this.setState({
deviceName: text,
})
}
value={deviceName}
/>
</View>
</View>
</View>
</>
);
......@@ -307,10 +311,10 @@ class McbLinkScreen extends React.Component {
renderTabBar={() => <ScrollableTab style={styles.scrollTab} />}
initialPage={subIndex}
locked
// onChangeTab={({ i }) => {
// this.setState({ currentTab: i });
// console.log(i);
// }}
onChangeTab={tab => {
this.setState({ subIndex: tab.i });
console.log(tab.i);
}}
>
{subBreakersInfo.map((item, index) => (
<Tab heading={item.name} {...TabStyle} key={`tab${index}`}>
......@@ -397,6 +401,14 @@ const styles = StyleSheet.create({
borderBottomColor: 'rgba(189, 192, 200, 0.3)',
borderBottomWidth: 1,
},
inputDeviceNameContainer: {
...theme.mt1,
borderWidth: 1,
borderRadius: 10,
borderColor: '#f2f2f2',
paddingHorizontal: 15,
paddingVertical: 10,
},
});
const mapStateToProps = state => ({
......@@ -411,6 +423,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = {
setSubBreakerStatus,
getCurrentSelectedShadow,
deleteConnectedDevice,
addConnectedDevice,
};
export default connect(
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -82,8 +82,6 @@ class SmartMeterDetailScreen extends Component {
) {
this.setSubBreakersState();
}
console.log('S', this.state);
console.log('PROPS', this.props);
};
handleToggle = async value => {
this.setState({ isWaiting: true });
......@@ -92,12 +90,9 @@ class SmartMeterDetailScreen extends Component {
await this.props.setMainStatus(value);
const getShadowInterval = setInterval(async () => {
console.log('getShadow');
this.setState(() => {
const { currentSelectedData, breakerStatus } = this.props;
if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval Handletoggle');
clearInterval(getShadowInterval);
return {
......@@ -226,7 +221,7 @@ class SmartMeterDetailScreen extends Component {
index % 3 === 0 ? { marginRight: 0 } : { marginLeft: 10 },
]}
>
<Text style={[theme.smDescription, { color: item.value > item.limit ? color.white : color.grey }]}>
<Text style={[theme.description, { color: item.value > item.limit ? color.white : color.grey }]}>
{item.name}
</Text>
<Text
......@@ -245,7 +240,7 @@ class SmartMeterDetailScreen extends Component {
<Text
style={[
theme.smDescription,
theme.description,
theme.textDark,
{
color: item.value > item.limit ? color.white : color.darkGrey,
......@@ -296,11 +291,8 @@ class SmartMeterDetailScreen extends Component {
await this.props.getCurrentSelectedShadow();
const getShadowInterval = setInterval(async () => {
console.log('getShadow');
this.setState(() => {
if (this.props.desiredBreakerStatus === this.props.breakerStatus) {
console.log('Interval HandletoggleSubBreaker');
clearInterval(getShadowInterval);
return { isWaiting: false };
} else {
......@@ -314,7 +306,6 @@ class SmartMeterDetailScreen extends Component {
return { isWaiting: false };
}
});
console.log('checkedTimes', checkedTimes);
++checkedTimes;
await this.props.getCurrentSelectedShadow();
this.setSubBreakersState();
......
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