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,58 +1,68 @@
 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',
+    name: "JavaScript",
  },
  {
    id: 2,
-        name: 'Java',
+    name: "Java",
  },
  {
    id: 3,
-        name: 'Ruby',
+    name: "Ruby",
  },
  {
    id: 4,
-        name: 'React Native',
+    name: "React Native",
  },
  {
    id: 5,
-        name: 'PHP',
+    name: "PHP",
  },
  {
    id: 6,
-        name: 'Python',
+    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 ) => {
+  const selected = (i) => {
    setSelectedItems(i);
    props.itemSelected(i);
    //console.log(i.name);
  };

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

 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,
+    flex: 1
  },
  mapIcon: {
-        backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
-        alignItems: "center",
-        borderRadius: 5,
-        flex: 0.10,
-        marginTop: 8,
+    paddingTop: 10,
+    alignSelf: "flex-start",
+    paddingRight: 12,
+
  },
 });

--- a/src/app/components/forms/FormDatePicker.js
+++ b/src/app/components/forms/FormDatePicker.js
@ -1,35 +1,14 @@
-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,
-      }}
-      defaultDate={new Date()}
-      onDateChange={props.onDateChange}
-      onTimeChange={props.onTimeChange}
-    >
    <View
      style={{
        width: "100%",
@ -39,17 +18,12 @@ const FormDatePicker = (props) => {
      }}
    >
      <View style={styles.dateIcon}>
-          <MaterialCommunityIcons
-            name="calendar-today"
-            size={20}
-            color="white"
-          />
+        <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")}
+          {props.date.format("DD/MM/YYYY")} {" | "} {props.time.format("HH:mm")}
        </Text>
        <View>
          <Text style={{ color: colors.primary }}>
@ -58,14 +32,48 @@ const FormDatePicker = (props) => {
        </View>
      </View>
    </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>

+            <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,12 +118,13 @@ 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,