Adjusting pluviometerRegister screen

3 years ago · 340612efef
8 changed files with 230 additions and 224 deletions
--- a/src/app/components/DatePicker.js
+++ b/src/app/components/DatePicker.js
@ -98,13 +98,13 @@ export default function DatePicker(props) {
        locale={"pt-br"}
        minimumDate={new Date(moment().subtract(1, "month"))}
        maximumDate={new Date(moment())}
-        // formatChosenDate={(selectedDate) => {
-        //   if (mode == "date") {
-        //     return moment(selectedDate).format("DD/mm/YYYY");
-        //   } else {
-        //     return moment(selectedDate).format("HH:mm");
-        //   }
-        // }} //formatar a data e hora do selected date
+        formatChosenDate={(selectedDate) => {
+          if (mode == "date") {
+            return moment(selectedDate).format("DD/mm/YYYY");
+          } else {
+            return moment(selectedDate).format("HH:mm");
+          }
+        }} //formatar a data e hora do selected date
        display={Platform.OS === "ios" ? "spinner" : "default"}
        onChange={Platform.OS === "ios" ? onChange : androidOnChange}
      />
--- a/src/app/components/PickEventDateLocation.js
+++ b/src/app/components/PickEventDateLocation.js
@ -23,7 +23,7 @@ export default function PickEventDateLocation({
        paddingBottom:24
      }}
    >
-      <View>
+      {/* <View> */}
      <FormDatePicker
        textStyle={{
          borderColor: colors.gray,
@ -35,7 +35,7 @@ export default function PickEventDateLocation({
        onTimeChange={(value) => setTime(value)}
        time={time}
      />
-      </View>
+      {/* </View> */}
      {location && (
        <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
          <FormLocationPicker />
--- a/src/app/components/SchoolPicker.js
+++ b/src/app/components/SchoolPicker.js
@ -1,140 +1,131 @@
-import React, { useState,  Fragment } from "react";
+import React, { useState, Fragment } from "react";
 import { StyleSheet, View } from "react-native";

-import { FontAwesome5 } from '@expo/vector-icons';
+import { FontAwesome5 } from "@expo/vector-icons";
 import colors from "../config/colors";
-import SearchableDropdown from 'react-native-searchable-dropdown';
+import SearchableDropdown from "react-native-searchable-dropdown";

 const items = [
-    //substituir posteriormente pelas escolas
-    {
-        id: 1,
-        name: 'JavaScript',
-    },
-    {
-        id: 2,
-        name: 'Java',
-    },
-    {
-        id: 3,
-        name: 'Ruby',
-    },
-    {
-        id: 4,
-        name: 'React Native',
-    },
-    {
-        id: 5,
-        name: 'PHP',
-    },
-    {
-        id: 6,
-        name: 'Python',
-    },
+  //substituir posteriormente pelas escolas
+  {
+    id: 1,
+    name: "JavaScript",
+  },
+  {
+    id: 2,
+    name: "Java",
+  },
+  {
+    id: 3,
+    name: "Ruby",
+  },
+  {
+    id: 4,
+    name: "React Native",
+  },
+  {
+    id: 5,
+    name: "PHP",
+  },
+  {
+    id: 6,
+    name: "Python",
+  }, 
+  {
+    id: 7,
+    name: "Python",
+  },
+  {
+    id: 8,
+    name: "Python",
+  },
+
+  {
+    id: 9,
+    name: "Python",
+  },
 ];

 function SchoolPicker(props) {
-    const [selectedItems, setSelectedItems] = useState(null);
-
-    const selected = ( i ) => {
-        setSelectedItems(i);
-        props.itemSelected(i);
-        //console.log(i.name);
-    };
-
-
-    return (
-        <View style={{ flex: 1, width: "100%", marginTop: 10 }}>
-            <View style={styles.location}>
-                <View style={styles.mapIcon}>
-                    <FontAwesome5
-                        name="university"
-                        size={28}
-                        color="white"
-                        alignItems="center"
-                        alignContent="center"
-                    />
-                </View>
-                <View style={styles.adressText}>
-                    <Fragment>
-                        <SearchableDropdown
-                            multi={false}
-                            selectedItems={selectedItems}
-                            onItemSelect={(item) => {
-                                selected(item)
-                            }}
-                            containerStyle={{ padding: 5 }}
-                            itemStyle={{
-                                padding: 10,
-                                marginTop: 2,
-                                backgroundColor: '#ddd',
-                                borderColor: '#bbb',
-                                borderWidth: 1,
-                                borderRadius: 6,
-                                width: "100%",                                
-                            }} itemTextStyle={{ color: '#222' }}
-                            itemsContainerStyle={{ maxHeight: "100%" }}
-                            items={items}
-                            chip={true}
-                            resetValue={false}
-                            textInputProps={
-                                {
-                                    placeholder: "Escola onde você estuda...",
-                                    underlineColorAndroid: "transparent",
-                                    style: {
-                                        padding: 12,
-                                        borderWidth: 1,
-                                        borderColor: '#ccc',
-                                        borderRadius: 5,
-                                        alignItems:"flex-start",
-                                        alignContent:"flex-start",
-                                    },
-                                    onTextChange: text => console.log(text)
-                                }
+  const [selectedItems, setSelectedItems] = useState(null);

-                            }
-                            listProps={
-                                {
-                                    nestedScrollEnabled: true,
+  const selected = (i) => {
+    setSelectedItems(i);
+    props.itemSelected(i);
+    //console.log(i.name);
+  };

-                                }
-                            }
-                        />
-                    </Fragment>
-
-                </View>
-            </View>
+  return (
+    <View style={{ width: "100%" }}>
+      <View style={styles.location}>
+        <View style={styles.mapIcon}>
+          <FontAwesome5
+            name="university"
+            size={30}
+            color={colors.primary}
+          />
+        </View>
+        <View style={styles.adressText}>
+          <Fragment>
+            <SearchableDropdown
+              multi={false}
+              selectedItems={selectedItems}
+              onItemSelect={(item) => {
+                selected(item);
+              }}
+              itemStyle={{
+                padding: 10,
+                marginTop: 2,
+                backgroundColor: "#fff",
+                borderColor: "#bbb",
+                borderWidth: 1,
+                borderRadius: 6,
+                width: "100%",
+              }}
+              itemTextStyle={{ color: "#222" }}
+              itemsContainerStyle={{ maxHeight: "100%" }}
+              items={items}
+              chip={true}
+              resetValue={false}
+              textInputProps={{
+                placeholder: "Escola onde você estuda...",
+                underlineColorAndroid: "transparent",
+                style: {
+                  padding: 12,
+                  borderWidth: 1,
+                  borderColor: "#ccc",
+                  borderRadius: 5,
+                  alignItems: "flex-start",
+                  backgroundColor: colors.white,
+                  alignContent: "flex-start",
+                },
+                onTextChange: (text) => console.log(text),
+              }}
+            />
+          </Fragment>
        </View>
-    );
+      </View>
+    </View>
+  );
 }

 SchoolPicker.defaultProps = {
-    itemSelected: () =>{ },
+  itemSelected: () => {},
 };

 const styles = StyleSheet.create({
-    location: {
-        //flex: 1,
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        zIndex: 10,
-        position: "absolute",
-        backgroundColor: colors.white,
-    },
-    adressText: {
-        flex: 0.90,
-    },
-    mapIcon: {
-        backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
-        alignItems: "center",
-        borderRadius: 5,
-        flex: 0.10,
-        marginTop: 8,
-    },
+  location: {
+    flexDirection: "row",
+  },
+  adressText: {
+    flex: 1
+  },
+  mapIcon: {
+    paddingTop: 10,
+    alignSelf: "flex-start",
+    paddingRight: 12,
+
+  },
 });

 export default SchoolPicker;
--- a/src/app/components/forms/FormDatePicker.js
+++ b/src/app/components/forms/FormDatePicker.js
@ -1,71 +1,79 @@
-import React, { useState } from "react";
-import {
-  Modal,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-  Platform,
-  TouchableOpacity,
-  Alert,
-} from "react-native";
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import DateTimePicker from "@react-native-community/datetimepicker";

-import moment from "moment";
 import colors from "../../config/colors";
 import { dimensions } from "../../config/dimensions";
-import { showMessage } from "react-native-flash-message";
 import DatePicker from "../../components/DatePicker";

-const FormDatePicker = (props) => {
-  console.log("date " + props.date + " time " + props.time)
+function EventsDatePicker(props) {
  return (
-    <DatePicker
-      textStyle={{
-        borderColor: colors.gray,
-        borderWidth: 3,
+    <View
+      style={{
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
      }}
-      defaultDate={new Date()}
-      onDateChange={props.onDateChange}
-      onTimeChange={props.onTimeChange}
    >
-      <View
-        style={{
-          width: "100%",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "flex-start",
-        }}
-      >
-        <View style={styles.dateIcon}>
-          <MaterialCommunityIcons
-            name="calendar-today"
-            size={20}
-            color="white"
-          />
-        </View>
-        <View style={styles.dateInput}>
-          <Text style={{ fontSize: dimensions.text.default }}>
-            {" "}
-            {props.date.format("DD/MM/YYYY")} {" | "}{" "}
-            {props.time.format("HH:mm")}
+      <View style={styles.dateIcon}>
+        <MaterialCommunityIcons name="calendar-today" size={20} color="white" />
+      </View>
+      <View style={styles.dateInput}>
+        <Text style={{ fontSize: dimensions.text.default }}>
+          {" "}
+          {props.date.format("DD/MM/YYYY")} {" | "} {props.time.format("HH:mm")}
+        </Text>
+        <View>
+          <Text style={{ color: colors.primary }}>
+            {props.subtitle ? props.subtitle : " Defina a data do evento"}
          </Text>
-          <View>
-            <Text style={{ color: colors.primary }}>
-              {props.subtitle ? props.subtitle : " Defina a data do evento"}
-            </Text>
-          </View>
        </View>
      </View>
-    </DatePicker>
+    </View>
+  );
+}
+
+function PluvRegisterPicker(props) {
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+      }}
+    >
+        <MaterialCommunityIcons name="calendar-today" size={30} color={colors.primary} />
+      <View style={styles.dateInput}>
+        <Text style={{ fontSize: dimensions.text.default }}>
+          {props.date.format("DD/MM/YYYY")} {" | "} {props.time.format("HH:mm")}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default function FormDatePicker({ formTypeFace = "events", ...props }) {
+  return (
+      <DatePicker
+        textStyle={{
+          borderColor: colors.gray,
+          borderWidth: 3,
+        }}
+        defaultDate={new Date()}
+        onDateChange={props.onDateChange}
+        onTimeChange={props.onTimeChange}
+      >
+        {formTypeFace == "events"
+          ? EventsDatePicker(props)
+          : PluvRegisterPicker(props)}
+      </DatePicker>
  );
-};
+}

 const styles = StyleSheet.create({
  dateInput: {
-    paddingLeft: 16,
-    height: "100%",
+    paddingLeft: 12,
    flexDirection: "column",
    justifyContent: "center",
  },
@ -78,5 +86,3 @@ const styles = StyleSheet.create({
    borderRadius: 5,
  },
 });
-
-export default FormDatePicker;
--- a/src/app/components/forms/FormLocationPicker.js
+++ b/src/app/components/forms/FormLocationPicker.js
@ -12,12 +12,11 @@ function FormLocationPicker({ subtitle }) {

  return (
      <View style={styles.location}>
-
        <View style={styles.mapIcon}>
          <MaterialIcons
            name="location-on"
-            size={20}
-            color="white"
+            size={30}
+            color={colors.primary}
          />
        </View>

@ -33,15 +32,12 @@ function FormLocationPicker({ subtitle }) {
            {subtitle ? subtitle : "Defina o local no mapa"}
          </Text>
        </View>
-
      </View>
  );
 }

 const styles = StyleSheet.create({
  location: {
-    flex: 1,
-    width: "100%",
    flexDirection: "row",
    alignContent: "space-around",
    justifyContent: "flex-start",
@ -49,13 +45,10 @@ const styles = StyleSheet.create({

  adressText: {
    height: "100%",
-    paddingLeft: 24,
+    paddingLeft: 12,
  },

  mapIcon: {
-    backgroundColor: colors.primary,
-    width: 40,
-    height: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 5,
--- a/src/app/components/forms/SubmitButton.js
+++ b/src/app/components/forms/SubmitButton.js
@ -4,12 +4,13 @@ import { useFormikContext } from "formik";
 import Button from "../Button";
 import {View} from "react-native";

-function SubmitButton({ title }) {
+function SubmitButton({ title, paddingHorizontal = 16 }) {
  const { handleSubmit } = useFormikContext();

  return (
  <View
-    style={{paddingHorizontal: 16}}>
+    style={{paddingHorizontal: paddingHorizontal}}
+  >
      <Button  title={title} onPress={handleSubmit} />
    </View>
  );
--- a/src/app/config/colors.js
+++ b/src/app/config/colors.js
@ -1,6 +1,6 @@
 export default {
  primary: "#006493",
-  secondary: "rgba(74, 141, 183, 0.87)",
+  secondary: "#4A8DB7",
  black: "#000",
  white: "#fff",
  medium: "#6e6969",
--- a/src/app/screens/PluviometerRegisterScreen.js
+++ b/src/app/screens/PluviometerRegisterScreen.js
@ -13,6 +13,7 @@ import { EventLocationContext } from "../context/EventLocationContext";
 import SchoolPicker from "../components/SchoolPicker";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import DatePicker from "../components/DatePicker";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

 const dims = scaleDimsFromWidth(85, 85, 25);

@ -30,7 +31,11 @@ function PluviometerRegisterScreen(props) {
  const [school, setSchool] = useState();

  return (
-    <View style={styles.container}>
+    <View
+      style={{
+        padding: 16,
+      }}
+    >
      <Form
        initialValues={{}}
        onSubmit={() => {
@ -43,9 +48,12 @@ function PluviometerRegisterScreen(props) {
          });
        }}
      >
+        {/* <KeyboardAwareScrollView */}
+        {/* keyboardShouldPersistTaps={"handled"} */}
+        {/* > */}
        <View
          style={{
-            alignContent: "flex-start",
+            height: "100%",
          }}
        >
          <Text style={styles.title}>Cadastro do Pluviômetro</Text>
@ -54,38 +62,47 @@ function PluviometerRegisterScreen(props) {
            <Text
              style={{
                marginTop: 24,
+                marginBottom: 12,
                fontSize: dimensions.text.secondary,
                fontWeight: "bold",
                textAlign: "left",
-                color: colors.primary,
+                color: colors.secondary,
              }}
            >
              Data do cadastro:{" "}
            </Text>

-            <FormDatePicker
-              onDateChange={(value) => setDate(value)}
-              onTimeChange={(value) => setTime(value)}
-              date={date}
-              time={time}
-            />
-          </View>
+            <View
+              style={{
+                marginBottom: 24
+              }}
+            >
+              <FormDatePicker
+                onDateChange={(value) => setDate(value)}
+                onTimeChange={(value) => setTime(value)}
+                date={date}
+                time={time}
+                formTypeFace={"pluviometerRegister"}
+              />
+            </View>

-          {/* <View style={{ marginTop: 5 }}> */}
-          {/*   <Text style={styles.label}>Escola: </Text> */}
-          {/*   <SchoolPicker itemSelected={(value) => setSchool(value)} /> */}
-          {/* </View> */}
+            <TouchableOpacity
+              onPress={() => props.navigation.navigate("FormMap")}
+            >
+              <View>
+                <Text style={styles.label}>Endereço do pluviômetro*: </Text>
+                <FormLocationPicker subtitle="Defina o endereço do pluviômetro" />
+              </View>
+            </TouchableOpacity>

-          {/* <TouchableOpacity */}
-          {/*   onPress={() => props.navigation.navigate("FormMap")} */}
-          {/* > */}
-          {/*   <View> */}
-          {/*     <Text style={styles.label}>Endereço do pluviômetro: </Text> */}
-          {/*     <FormLocationPicker subtitle="Defina o endereço do pluviômetro" /> */}
-          {/*   </View> */}
-          {/* </TouchableOpacity> */}
+            <View style={{ marginTop: 24, marginBottom: 12 }}>
+              <Text style={styles.label}>Instituição: </Text>
+              <SchoolPicker itemSelected={(value) => setSchool(value)} />
+            </View>

-          <SubmitButton title="Cadastrar" alignContent="flex-end" />
+            <SubmitButton title="Cadastrar" paddingHorizontal={0} />
+          </View>
+          {/* </KeyboardAwareScrollView> */}
        </View>
      </Form>
    </View>
@ -93,9 +110,6 @@ function PluviometerRegisterScreen(props) {
 }

 const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-  },
  image: {
    width: dims.width * 0.8,
    height: dims.height * 0.8,
@ -104,16 +118,17 @@ const styles = StyleSheet.create({
  },
  label: {
    fontSize: dimensions.text.secondary,
+    marginBottom: 12,
    fontWeight: "bold",
    textAlign: "left",
-    color: colors.lightBlue,
+    color: colors.secondary,
  },
  title: {
-    fontSize: 16,
+    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    color: colors.primary,
-  }, 
+  },
 });

 export default PluviometerRegisterScreen;