working on location form

2022-04-03 22:04:23 -04:00
parent 03dd723c57
commit 5a71db469a
8 changed files with 181 additions and 29 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2030,14 +2030,13 @@
      }
    },
    "@mantine/core": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-4.1.1.tgz",
-      "integrity": "sha512-7eTv/vXKX863ri3c6zVbxozsAeA8B0iN31j3/dKs0K3y5Vd9+cgAy59WQk2RBGRlWdln7gtLnELePyQz+WlXLQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-4.1.2.tgz",
+      "integrity": "sha512-7P3dhcTkA6zod7L9kSlIpEr4IcHX31LqFetbmoD/q8TqxBVBS2ckNYTwQaH5o446j2ORKrPZ0r28xBCI+lib8Q==",
      "requires": {
-        "@mantine/styles": "4.1.1",
+        "@mantine/styles": "4.1.2",
        "@popperjs/core": "^2.9.3",
        "@radix-ui/react-scroll-area": "^0.1.1",
-        "clsx": "^1.1.1",
        "react-popper": "^2.2.5",
        "react-textarea-autosize": "^8.3.2"
      }
@@ -2053,9 +2052,9 @@
      }
    },
    "@mantine/dropzone": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-4.1.0.tgz",
-      "integrity": "sha512-ixu9VGg/dX5DO/BhyoSYH+9nwAmBTElBml7efClawMlvYaifhoOnNiEWykESwjGaGa6/tww0qxzd/ddsI9jEVQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@mantine/dropzone/-/dropzone-4.1.2.tgz",
+      "integrity": "sha512-MhDx5Rez2f35gqISfAcMvdCyZJ1+d8q4U7/KFUFk4/mc3K1T+e9rFhNNO+dmTxX7tzypwzHPEDIWHsqD7kb5Fg==",
      "requires": {
        "react-dropzone": "^11.4.2"
      }
@@ -2066,9 +2065,9 @@
      "integrity": "sha512-Kh7lJ+JcLynCxpqUDmc5zpj/Jd/ZLpHCKnGM4TnfhV45lRlGhDQQtteKJ99XneYu2s23EhsLXfBIhD4RadHZ8g=="
    },
    "@mantine/hooks": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-4.1.1.tgz",
-      "integrity": "sha512-uVLVT1Qc7rt3kXy25efUVc509Uv3HPNPMyJaPEGM+o9RWy0k3Mo5Zp3meVfUL7PmjY179RlHmrGtxprdpiDZaA=="
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-4.1.2.tgz",
+      "integrity": "sha512-ccTD4q7jViYisizjydRkCZdiMrtbC+uxEsZHHjyy/adcK8zOix178bag53OKn5TIFFMH6dXHZmto0IZsVCY1vw=="
    },
    "@mantine/notifications": {
      "version": "4.1.0",
@@ -2080,9 +2079,9 @@
      }
    },
    "@mantine/styles": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-4.1.1.tgz",
-      "integrity": "sha512-ZTfjqugTrqAQatgmdA0R+smUCIwPZCHykxKA5HwQzuJZh6/9TwaPozdTP7yOKAVyjBDnnAQda2PPZ1Gz1PrXqg==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-4.1.2.tgz",
+      "integrity": "sha512-HcBrmKzEV7jbBBxicnHUl/Ol/eS5hrZ4lt4hpoi/yD/VVx0BHolK4LkiHCvoh9vFHHN2o9gQo236LgHbqYMEGA==",
      "requires": {
        "@emotion/cache": "^11.7.1",
        "@emotion/react": "^11.7.1",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,11 +3,11 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@mantine/core": "^4.1.1",
+    "@mantine/core": "^4.1.2",
    "@mantine/dates": "^4.1.1",
-    "@mantine/dropzone": "^4.1.0",
+    "@mantine/dropzone": "^4.1.2",
    "@mantine/form": "^4.1.1",
-    "@mantine/hooks": "^4.1.1",
+    "@mantine/hooks": "^4.1.2",
    "@mantine/notifications": "^4.1.0",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -3,6 +3,7 @@ import { useAtom } from 'jotai';
 import HomePage from './components/pages/HomePage';
 import Locations from './components/pages/Locations';
 import RoomsPage from './components/pages/RoomsPage';
+import LocationForm from './components/forms/LocationForm'
 import { Routes, Route, useNavigate } from "react-router-dom";
 import { Modal, Button, Text, Group, TextInput, Loader, AppShell, MediaQuery } from '@mantine/core';
 import { useDebouncedValue, useLocalStorageValue } from '@mantine/hooks';
@@ -72,6 +73,7 @@ function App() {
              <Route path="/" element={<HomePage />} />
              <Route path="locations" element={<Locations />} />
              <Route path="rooms" element={<RoomsPage />} />
+              <Route path="locations/new" element={<LocationForm />} />
              
            </Routes>
        </AppShell>
--- a/frontend/src/components/SideBar.js
+++ b/frontend/src/components/SideBar.js
@@ -56,7 +56,7 @@ const useStyles = createStyles((theme) => ({
      initiallyOpened: true,
      links: [
        { label: 'View Locations', link: '/locations' },
-        { label: 'Forecasts', link: '/' },
+        { label: 'Add New Location', link: '/locations/new' },
        { label: 'Outlook', link: '/' },
        { label: 'Real time', link: '/' },
      ],
--- a/frontend/src/components/forms/LocationForm.js
+++ b/frontend/src/components/forms/LocationForm.js
@@ -1,9 +1,12 @@
 import React, {useState, useEffect} from 'react';
-import { Text, Title, TextInput, Button, NumberInput,  } from '@mantine/core'
+import { Text, Title, TextInput, Button, NumberInput, Textarea, Grid, Group, useMantineTheme, MantineTheme } from '@mantine/core'
 import { DatePicker } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { useAtom } from 'jotai';
 import { serverConfigAtom } from '../../state/main'
+import { backendAPI } from '../../services/backend-api';
+import { BsCardImage, BsCloudUpload, BsXLg } from 'react-icons/bs'
+import { Dropzone, DropzoneStatus, IMAGE_MIME_TYPE, PDF_MIME_TYPE } from '@mantine/dropzone';



@@ -11,13 +14,127 @@ function LocationForm(props) {
    const {location, modify: bool} = props
    const [opened, setOpened] = useState(false);
    const [serverConfig] = useAtom(serverConfigAtom)
+    const theme = useMantineTheme();


+    const form = useForm({
+        initialValues: {
+            Name: '',
+            Description: '',
+            Notes: '',
+            Address: '',
+            SquareFeet: 0,
+            Latitude: '',
+            Longitude: '',
+            DatePurchased: '',
+            PurchasePrice: '',
+            CurrentValue: '',
+            CoverPhoto: '',
+            AdditionalPhotos: [],
+        },
+
+        validate: {
+
+        },
+    });
+
+    // useEffect(() => {
+    //     console.log("FORM", form)
+    // }, [form])
+    
+
+    const submitNewLocation = (values) => {
+        console.log("VALUES: ", values)
+        const formData = new FormData(values)
+        backendAPI.post("/locations/new", formData).then((result) => {
+            console.log("result: ", result.data)
+        }).catch(err => {
+            console.log("Error adding new location!", err)
+        })
+    }
+
+    function ImageUploadIcon({status, ...props}) {
+        if (status.accepted) {
+          return <BsCloudUpload {...props} />;
+        }
+      
+        if (status.rejected) {
+          return <BsXLg {...props} />;
+        }
+      
+        return <BsCardImage {...props} />;
+      }
+
+    function getIconColor(status, theme) {
+        return status.accepted
+          ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
+          : status.rejected
+          ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
+          : theme.colorScheme === 'dark'
+          ? theme.colors.dark[0]
+          : theme.colors.gray[7];
+      }
+
+    const dropzoneChildren = (status, theme, multiple) => (
+        <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
+          <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
+      
+          <div>
+            <Text size="xl" inline>
+              Drag images here or click to select file{multiple ? "s" : ""}
+            </Text>
+            <Text size="sm" color="dimmed" inline mt={7}>
+              Attach as many files as you like, each file should not exceed 5mb
+            </Text>
+          </div>
+        </Group>
+      );
+

    return (
        <>
-        <Title>Location Form</Title> 
-        <Text>This is the homepage!</Text>
+            <Title>Location Form</Title> 
+            <form onSubmit={form.onSubmit((values) => submitNewLocation(values))}>
+                <Grid>
+
+                    <Grid.Col md={6} lg={4} sm={12} xs={12}>
+                        <TextInput label="Location Name" value={form.values.Name} required {...form.getInputProps('Name')}/>
+                        <TextInput label="Description" value={form.values.Description} {...form.getInputProps('Description')} />
+                        <Textarea label="Location Notes" value={form.values.Notes} {...form.getInputProps('Notes')}/>
+                        <TextInput label="Street Address" value={form.values.Address} {...form.getInputProps('Address')} />
+                        <NumberInput label="Square Feet" value={form.values.SquareFeet} {...form.getInputProps('SquareFeet')} />
+                        <TextInput label="Latitude" value={form.values.Latitude} {...form.getInputProps('Latitude')} />
+                        <TextInput label="Longitude" value={form.values.Longitude} {...form.getInputProps('Longitude')}/>
+                        <TextInput label="Date Purchased" value={form.values.DatePurchased} {...form.getInputProps('DatePurchased')} />
+                        <TextInput label="Purchase Price" value={form.values.PurchasePrice} {...form.getInputProps('PurchasePrice')}/>
+                        <TextInput label="Current Value" value={form.values.CurrentValue} {...form.getInputProps('CurrentValue')}/>
+                        <Title order={4}>Location Cover Photo</Title>
+                        <Dropzone
+                            onDrop={(files) => form.setFieldValue('CoverPhoto', files[0])}
+                            onReject={(files) => console.log('rejected files', files)}
+                            maxSize={3 * 1024 ** 2}
+                            multiple={false}
+                            accept={IMAGE_MIME_TYPE}  
+                        >
+                            {(status) => dropzoneChildren(status, theme, false)}
+                        </Dropzone>
+                        <Title order={4}>Additional Location Photos</Title>
+                        <Dropzone
+                            onDrop={(files) => form.setFieldValue('AdditionalPhotos', files)}
+                            onReject={(files) => console.log('rejected files', files)}
+                            maxSize={3 * 1024 ** 2}
+                            multiple={true}
+                            accept={PDF_MIME_TYPE}
+                            
+                        >
+                            {(status) => dropzoneChildren(status, theme, true)}
+                        </Dropzone>
+
+                    </Grid.Col>
+                 
+                </Grid>
+               
+            </form>
        </>

    );
--- a/frontend/src/components/pages/Locations.js
+++ b/frontend/src/components/pages/Locations.js
@@ -2,7 +2,7 @@ import React, {useState, useEffect } from 'react';
 import { useAtom } from 'jotai'
 import { serverConfigAtom } from '../../state/main';
 import { HiPlus } from 'react-icons/hi'
-import {  Loader, Center, SimpleGrid, Title, Group, Button, Divider } from '@mantine/core'
+import {  Loader, Center, SimpleGrid, Title, Group, Button } from '@mantine/core'

 import { useNotifications } from '@mantine/notifications';

@@ -52,7 +52,6 @@ function LocationsPage() {
        <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
        <Center><Title order={1}>Locations</Title></Center>
        <Button leftIcon={<HiPlus />}>Add New Location</Button>
-        <Divider />
        <SimpleGrid 
          spacing="md"
          cols={4}