[#74] initial refactoring of create work order

heyhellomila · Nov 28, 2019 · c2fd41d · c2fd41d
1 parent 08a0f65
commit c2fd41d
Show file tree

Hide file tree

Showing 22 changed files with 379 additions and 85 deletions.
diff --git a/frontend/assets/Appliance.png b/frontend/assets/Appliance.png
diff --git a/frontend/assets/Balcony.png b/frontend/assets/Balcony.png
diff --git a/frontend/assets/Bathroom.png b/frontend/assets/Bathroom.png
diff --git a/frontend/assets/Bedroom.png b/frontend/assets/Bedroom.png
diff --git a/frontend/assets/Electrical.png b/frontend/assets/Electrical.png
diff --git a/frontend/assets/Envelope.png b/frontend/assets/Envelope.png
diff --git a/frontend/assets/Garage.png b/frontend/assets/Garage.png
diff --git a/frontend/assets/HVAC.png b/frontend/assets/HVAC.png
diff --git a/frontend/assets/Information.png b/frontend/assets/Information.png
diff --git a/frontend/assets/Kitchen.png b/frontend/assets/Kitchen.png
diff --git a/frontend/assets/Living_room.png b/frontend/assets/Living_room.png
diff --git a/frontend/assets/Roof.png b/frontend/assets/Roof.png
diff --git a/frontend/assets/Utilities.png b/frontend/assets/Utilities.png
diff --git a/frontend/assets/X.png b/frontend/assets/X.png
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,11 +17,13 @@
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-button-group": "^1.0.0",
     "react-native-datepicker": "^1.7.2",
     "react-native-dotenv": "^0.2.0",
     "react-native-elements": "^1.2.7",
     "react-native-fontawesome": "^7.0.0",
     "react-native-gesture-handler": "1.3.0",
+    "react-native-multistep-forms": "0.0.1",
     "react-native-picker-select": "^6.3.3",
     "react-native-reanimated": "^1.4.0",
     "react-native-router-flux": "^4.0.6",

diff --git a/frontend/src/components/workOrderForm/ChooseSector.js b/frontend/src/components/workOrderForm/ChooseSector.js
@@ -0,0 +1,129 @@
+import { createWorkOrderComponent } from '../../stylesheets/CreateWorkOrderPageStyleSheet';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import React from 'react';
+roof = require('../../../assets/Roof.png');
+kitchen = require('../../../assets/Kitchen.png');
+utilities = require('../../../assets/Utilities.png');
+livingRoom = require('../../../assets/Living_room.png');
+bathroom = require('../../../assets/Bathroom.png');
+appliances = require('../../../assets/Appliance.png');
+bedroom = require('../../../assets/Bedroom.png');
+balcony = require('../../../assets/Balcony.png');
+garage = require('../../../assets/Garage.png');
+envelope = require('../../../assets/Envelope.png');
+electrical = require('../../../assets/Electrical.png');
+hvac = require('../../../assets/HVAC.png');
+info = require('../../../assets/Information.png');
+
+const ChooseSector = (props) => {
+    return (
+        <View style={{flex: 1, marginTop: '-5%'}}>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ROOF' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('ROOF')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={roof}></Image>
+                    <Text style={{alignSelf: 'center'}}>Roof</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'KITCHEN' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('KITCHEN')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={kitchen}></Image>
+                    <Text style={{alignSelf: 'center'}}>Kitchen</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'UTILITIES' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('UTILITIES')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={utilities}></Image>
+                    <Text style={{alignSelf: 'center'}}>Utilities</Text>
+                </TouchableOpacity>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'LIVING_ROOM' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]}
+                onPress={()=> props.handleSector('LIVING_ROOM')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={livingRoom}></Image>
+                    <Text style={{alignSelf: 'center'}}>Living room</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BATHROOM' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('BATHROOM')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={bathroom}></Image>
+                    <Text style={{alignSelf: 'center'}}>Bathroom</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'APPLIANCES' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('APPLIANCES')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={appliances}></Image>
+                    <Text style={{alignSelf: 'center'}}>Appliances</Text>
+                </TouchableOpacity>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BEDROOM' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('BEDROOM')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={bedroom}></Image>
+                    <Text style={{alignSelf: 'center'}}>Bedroom</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'BALCONY' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('BALCONY')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={balcony}></Image>
+                    <Text style={{alignSelf: 'center'}}>Balcony</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'GARAGE' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('GARAGE')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={garage}></Image>
+                    <Text style={{alignSelf: 'center'}}>Garage</Text>
+                </TouchableOpacity>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ENVELOPE' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('ENVELOPE')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={envelope}></Image>
+                    <Text style={{alignSelf: 'center'}}>Envelope</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'ELECTRICAL' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('ELECTRICAL')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={electrical}></Image>
+                    <Text style={{alignSelf: 'center'}}>Electrical</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={[createWorkOrderComponent.colContainer, props.sector == 'HVAC' 
+                    ? createWorkOrderComponent.selectedSectorContainer
+                    : createWorkOrderComponent.sectorContainer]} 
+                onPress={()=> props.handleSector('HVAC')}>
+                    <Image style={createWorkOrderComponent.sectorIcon} source={hvac}></Image>
+                    <Text style={{alignSelf: 'center'}}>HVAC</Text>
+                </TouchableOpacity>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <TouchableOpacity style={{alignSelf:'flex-start'}}>
+                        <Image style={{width: 30, height: 30}} source={info}></Image>
+                    </TouchableOpacity>
+                </View>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() => props.nextStep()}>
+                        <Text>Next</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default ChooseSector;
diff --git a/frontend/src/components/workOrderForm/GeneralInfo.js b/frontend/src/components/workOrderForm/GeneralInfo.js
@@ -0,0 +1,65 @@
+import { createWorkOrderComponent } from '../../stylesheets/CreateWorkOrderPageStyleSheet';
+import { View, Text, TextInput, TouchableOpacity } from 'react-native';
+import React from 'react';
+
+const GeneralInfo = (props) => {
+    return (
+        <View style={{flex: 1, marginTop: '-5%'}}>
+            <View style={createWorkOrderComponent.typesContainer}>
+                <TouchableOpacity
+                    style = {props.type == 'CM' ? createWorkOrderComponent.selectedGray : createWorkOrderComponent.unselectedGray}
+                    onPress={() => props.handleType('CM')}>
+                    <Text style={createWorkOrderComponent.typeText}>
+                        Corrective
+                    </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                   style = {props.type == 'PM' ? createWorkOrderComponent.selectedGray : createWorkOrderComponent.unselectedGray}
+                    onPress={() => props.handleType('PM')}>
+                    <Text style={createWorkOrderComponent.typeText}>
+                        Preventive
+                    </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                    style = {props.type == 'IMP' ? createWorkOrderComponent.selectedGray : createWorkOrderComponent.unselectedGray}
+                    onPress={() => props.handleType('IMP')}>
+                    <Text style={createWorkOrderComponent.typeText}>
+                        Improvement
+                    </Text>
+                </TouchableOpacity>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <TouchableOpacity disabled={true} style={[createWorkOrderComponent.textBackground, createWorkOrderComponent.colContainer]}>
+                    <Text style={createWorkOrderComponent.infoHeader}>Title</Text>
+                </TouchableOpacity>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <TextInput style = {createWorkOrderComponent.generalTextInput}
+                        onChangeText = {(value) => props.handleTitle(value)}/>
+                </View>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <TouchableOpacity disabled={true} style={[createWorkOrderComponent.textBackground, createWorkOrderComponent.colContainer]}>
+                    <Text style={createWorkOrderComponent.infoHeader}>Cause</Text>
+                </TouchableOpacity>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <TextInput style={createWorkOrderComponent.generalTextInput}
+                        onChangeText = {(value) => props.handleCause(value)}/>
+                </View>
+            </View>
+            <View style={createWorkOrderComponent.rowContainer}>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <TouchableOpacity style={{alignSelf:'flex-start'}} onPress={() => props.prevStep()}>
+                        <Text>Previous</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() => props.nextStep()}>
+                        <Text>Next</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default GeneralInfo;
diff --git a/frontend/src/components/workOrderForm/Header.js b/frontend/src/components/workOrderForm/Header.js
@@ -0,0 +1,24 @@
+import { createWorkOrderComponent } from '../../stylesheets/CreateWorkOrderPageStyleSheet';
+import { View, Text, Image, TouchableOpacity, SafeAreaView, Platform, StatusBar } from 'react-native';
+import React from 'react';
+x = require('../../../assets/X.png');
+
+const Header = (props) => {
+    return (
+        <SafeAreaView style={{paddingTop: (Platform.OS === "android" || Platform.OS === "ios") ? StatusBar.currentHeight : 0 }}>
+            <View>
+                <View style={createWorkOrderComponent.colContainer}>
+                    <Text style={createWorkOrderComponent.headerStyle}>{props.headerText}</Text>
+                    <Text style={createWorkOrderComponent.subHeaderStyle}>{props.property.name} ({props.property.address})</Text>
+                </View>
+                <View style={createWorkOrderComponent.closeButton}>
+                    <TouchableOpacity style={createWorkOrderComponent.closeButton} onPress={() => props.navigation.goBack(null)}>
+                        <Image style={createWorkOrderComponent.closeButtonImage} source={x}></Image>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </SafeAreaView>
+    );
+};
+
+export default Header;