Skip to content

S
safetcut-app
Commit 897d2eda by Tonk
Options

get connected device from firebase, add modal, ...update

parent 5d90726b
Showing with 176 additions and 31 deletions
reduxStore/actions/timersAction.js
......@@ -12,6 +12,7 @@ export const GET_EXISTED_MCBLINKS_DATA = 'GET_EXISTED_MCBLINKS_DATA';
export const GET_EXISTED_SUBBREAKERS_DATA = 'GET_EXISTED_SUBBREAKERS_DATA';
export const GET_SELECTED_TIMER_DATA = 'GET_SELECTED_TIMER_DATA';
export const SET_EDIT_MODAL_VISIBLE = 'SET_EDIT_MODAL_VISIBLE';
export const GET_EXISTED_CONNECTED_DEVICE = 'GET_EXISTED_CONNECTED_DEVICE';
export const getTimersAction = allTimers => ({
type: GET_TIMERS,
......@@ -28,6 +29,11 @@ export const getExistedSubBreakersDataAction = existedSubBreakersData => ({
existedSubBreakersData,
});
export const getExistedConnectedDeviceAction = existedConnectedDevice => ({
type: GET_EXISTED_CONNECTED_DEVICE,
existedConnectedDevice,
});
export const getSelectedTimerDataAction = selectedTimerData => ({
type: GET_SELECTED_TIMER_DATA,
selectedTimerData,
......@@ -59,6 +65,7 @@ export const getTimers = () => async (dispatch, getState) => {
let subBreakersTimers = [];
let existedMcbLinks = [];
let existedSubBreakers = [];
let existedConnectedDevice = [];
//main device section
/*-------------------------------------*/
......@@ -126,6 +133,31 @@ export const getTimers = () => async (dispatch, getState) => {
})
)
);
await Promise.all(
selectedDeviceSubBreakersDetails.docs.map(async subBreaker => {
if (subBreaker.exists) {
//Electronic device section
/*-------------------------------------*/
const connectedDevices = await fireStore
.collection('device')
.doc(selectedDeviceId)
.collection('mcbLinks')
.doc(mcbLink.id)
.collection('subBreakers')
.doc(subBreaker.id)
.collection('electronicDevices')
.get();
existedConnectedDevice.push(
connectedDevices.docs.map(connectedDevice =>
Object.assign(connectedDevice.data(), {
connectedDeviceId: connectedDevice.id,
})
)
);
}
})
);
await Promise.all(
selectedDeviceSubBreakersDetails.docs.map(async subBreaker => {
......@@ -163,6 +195,7 @@ export const getTimers = () => async (dispatch, getState) => {
dispatch(getExistedMcbLinksDataAction(existedMcbLinks));
dispatch(getExistedSubBreakersDataAction(existedSubBreakers));
dispatch(getExistedConnectedDeviceAction(existedConnectedDevice));
allTimersData = [...mainDeviceTimers, ...subBreakersTimers];
dispatch(getTimersAction(allTimersData));
......
reduxStore/reducers/timersReducer.js
......@@ -6,12 +6,14 @@ import {
GET_EXISTED_SUBBREAKERS_DATA,
GET_SELECTED_TIMER_DATA,
SET_EDIT_MODAL_VISIBLE,
GET_EXISTED_CONNECTED_DEVICE,
} from '../actions/timersAction';
const initState = {
allTimers: [],
existedMcbLinksData: [],
existedSubBreakersData: [],
existedConnectedDevice: [],
selectedTimerData: null,
isEditVisible: false,
isLoading: true,
......@@ -34,7 +36,8 @@ const timersReducer = (state = initState, action) => {
return { ...state, isLoading: action.isLoading };
case GET_TIMERS_ERROR:
return { ...state, error: action.error };
case GET_EXISTED_CONNECTED_DEVICE:
return { ...state, existedConnectedDevice: action.existedConnectedDevice };
default:
return state;
}
......
screens/Private/SmartMeterScreen/McbLinkScreen.js
......@@ -6,17 +6,18 @@ 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 { width } from '../../../constants/Layout';
import { width, height } from '../../../constants/Layout';
import { getCurrentSelectedShadow, setSubBreakerStatus } 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: '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: '' } },
];
......@@ -35,6 +36,7 @@ class McbLinkScreen extends React.Component {
/>
</HeaderButtons>
),
// remove line between header and tab bar
headerStyle: {
backgroundColor: color.primary,
borderColor: 'transparent',
......@@ -50,33 +52,51 @@ class McbLinkScreen extends React.Component {
subBreakerStatus: [],
toggleDel: false,
isWaiting: false,
isAddElectronicVisible: false,
currentTab: this.props.navigation.getParam('subIndex'),
};
componentDidMount = () => {
this.setSubBreakersState();
};
componentDidUpdate = (prevProps, prevState) => {
if (prevProps.existedSubBreakersData !== this.props.existedSubBreakersData) {
if (
prevProps.existedSubBreakersData !== this.props.existedSubBreakersData ||
prevProps.existedConnectedDevice !== this.props.existedConnectedDevice ||
prevProps.shadow !== this.props.shadow
) {
this.setSubBreakersState();
}
console.log('mcb screen props', this.props);
};
setSubBreakersState = () => {
const { existedSubBreakersData, shadow } = this.props;
const { existedSubBreakersData, shadow, existedConnectedDevice } = this.props;
const mcbIndex = this.props.navigation.getParam('mcbIndex');
const status = shadow[`ML${mcbIndex + 1}`];
let subBreakersInfo = [];
existedSubBreakersData.map(mcbLink => {
subBreakersInfo.push(
mcbLink.map(subBreaker =>
Object.assign(subBreaker, {
connectedDevice: existedConnectedDevice[subBreaker.mcbLinkId * subBreaker.subBreakerId - 1],
})
)
);
});
this.setState({ subBreakersInfo: existedSubBreakersData[mcbIndex], subBreakerStatus: status });
console.log('set sb state', this.state, this.props);
};
formatData(start, end) {
let data = mockElec; //Electronic devices data
data.push({ name: 'add', icon: { type: 'Ionicons', name: 'ios-add-circle' } });
const numberOfFullRows = Math.floor(data.length / 4);
let numberOfElementsLastRow = data.length - numberOfFullRows * 4;
while (numberOfElementsLastRow !== 4 && numberOfElementsLastRow !== 0) {
if (!data.find(x => x.name === 'add')) {
data.push({ name: 'add', icon: { type: 'Ionicons', name: 'ios-add-circle' } });
} else {
data.push({ name: 'empty', icon: { type: '', name: '' } });
}
numberOfElementsLastRow = numberOfElementsLastRow + 1;
}
return data.slice(start, end);
......@@ -84,6 +104,7 @@ 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);
......@@ -126,6 +147,7 @@ class McbLinkScreen extends React.Component {
</View>
<Text style={[theme.smDescription, theme.mt1]}>{item.description}</Text>
</Card>
{this.renderElectronic()}
</View>
);
......@@ -154,11 +176,19 @@ class McbLinkScreen extends React.Component {
} else if (item.name === 'add') {
return (
<Card style={[styles.electronicCard, { backgroundColor: color.lightGrey }]}>
<TouchableOpacity
style={theme.centerContainer}
onPress={() => this.setState({ isAddElectronicVisible: true })}
disabled={toggleDel}
>
<Icon
style={[styles.electronicIcon, { color: color.white }]}
name={item.icon.name}
/>
<Text style={[styles.electronictext, { color: color.white }]}>{item.name}</Text>
<Text style={[styles.electronictext, { color: color.white }]}>
{item.name}
</Text>
</TouchableOpacity>
</Card>
);
} else {
......@@ -172,7 +202,7 @@ class McbLinkScreen extends React.Component {
<Icon
style={[styles.electronicIcon]}
type={item.icon.type || 'Ionicons'}
name={item.icon.name}
name={item.icon.name || 'md-help'}
/>
<Text style={styles.electronictext}>{item.name}</Text>
</TouchableOpacity>
......@@ -180,12 +210,7 @@ class McbLinkScreen extends React.Component {
<Icon
name="cancel"
type="MaterialIcons"
style={{
position: 'absolute',
top: -10,
left: -10,
color: color.lightGrey,
}}
style={styles.delBtn}
onPress={() => console.log('delete electronic device')}
/>
)}
......@@ -206,12 +231,7 @@ class McbLinkScreen extends React.Component {
<Text style={[theme.normalText, theme.textDark]}>Electronics</Text>
{toggleDel ? (
<TouchableOpacity
style={{
backgroundColor: color.lightGrey,
borderRadius: 100,
paddingVertical: 2,
paddingHorizontal: 10,
}}
style={styles.doneDeleteBtn}
onPress={() => this.setState({ toggleDel: false })}
>
<Text style={[theme.smDescription, { color: color.white }]}>Done</Text>
......@@ -220,10 +240,42 @@ class McbLinkScreen extends React.Component {
<Text style={theme.smDescription}>Edit</Text>
)}
</View>
<ScrollView horizontal pagingEnabled>
<View>
<ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
{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 = () => {
return (
<>
<View style={styles.dragIndicator} />
<View style={{ marginTop: 20, paddingHorizontal: 30, paddingBottom: 20 }}>
<View style={styles.filterHeaderContainer}>
<Text
style={[theme.smallTitle, theme.textDark]}
onPress={() => this.setState({ isAddElectronicVisible: false })}
>
Cancel
</Text>
<Text style={[theme.smallTitle, theme.textDark]}>Add device</Text>
<Text
style={[theme.smallTitle, theme.textDanger]}
onPress={() => {
this.setState({ isAddElectronicVisible: false });
}}
>
Save
</Text>
</View>
</View>
</>
);
};
......@@ -249,10 +301,16 @@ class McbLinkScreen extends React.Component {
style: { backgroundColor: color.defaultBg },
};
return (
<>
<Tabs
tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
renderTabBar={() => <ScrollableTab style={styles.scrollTab} />}
initialPage={subIndex}
locked
// onChangeTab={({ i }) => {
// this.setState({ currentTab: i });
// console.log(i);
// }}
>
{subBreakersInfo.map((item, index) => (
<Tab heading={item.name} {...TabStyle} key={`tab${index}`}>
......@@ -260,6 +318,24 @@ class McbLinkScreen extends React.Component {
</Tab>
))}
</Tabs>
<Modal
coverScreen
swipeArea={45}
swipeThreshold={65}
backdropPressToClose={false}
animationDuration={360}
style={[styles.addModal]}
position={'bottom'}
isOpen={this.state.isAddElectronicVisible}
onClosed={() =>
this.setState({
isAddElectronicVisible: false,
})
}
>
{this.renderAddModal()}
</Modal>
</>
);
}
}
......@@ -287,16 +363,49 @@ const styles = StyleSheet.create({
fontSize: 10,
fontFamily: 'Avenir-Roman',
color: color.grey,
// position: 'absolute',
// bottom: 5,
},
doneDeleteBtn: {
backgroundColor: color.lightGrey,
borderRadius: 100,
paddingVertical: 2,
paddingHorizontal: 10,
},
delBtn: {
position: 'absolute',
top: -10,
left: -10,
color: color.lightGrey,
},
addModal: {
height: height * 0.7,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
},
dragIndicator: {
marginTop: 14,
width: 50,
height: 5,
borderRadius: 3,
backgroundColor: color.lightGrey,
display: 'flex',
alignSelf: 'center',
},
filterHeaderContainer: {
...theme.rowContainer,
justifyContent: 'space-between',
paddingBottom: 10,
borderBottomColor: 'rgba(189, 192, 200, 0.3)',
borderBottomWidth: 1,
},
});
const mapStateToProps = state => ({
existedSubBreakersData: state.timersReducer.existedSubBreakersData,
existedConnectedDevice: state.timersReducer.existedConnectedDevice,
shadow: state.currentSelectedDeviceReducer.shadow,
breakerStatus: state.currentSelectedDeviceReducer.breakerStatus,
desiredBreakerStatus: state.currentSelectedDeviceReducer.desiredBreakerStatus,
breakerStatus: state.currentSelectedDeviceReducer.breakerStatus,
});
const mapDispatchToProps = {
......
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