working on location form

This commit is contained in:
2022-04-03 22:04:23 -04:00
parent 03dd723c57
commit 5a71db469a
8 changed files with 181 additions and 29 deletions

View File

@@ -78,3 +78,37 @@
{"logtype":"webserver", "pid":"11448", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
{"level":"debug","time":"2022-04-02T23:14:39-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Paint: Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:2 Name:Location6 Description: CoverPhoto:Location6_cover.png Photos:[Location6_0.png Location6_1.png] Rooms:[] Notes:Notes for my location!6 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:3 Name:Location10 Description: CoverPhoto:Location10_cover.png Photos:[] Rooms:[] Notes:Notes for my location!10 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
{"logtype":"webserver", "pid":"11448", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
{"level":"info","time":"2022-04-03T16:13:11-04:00","message":"Configuration loaded successfully..."}
{"level":"debug","time":"2022-04-03T16:13:11-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
{"level":"info","time":"2022-04-03T16:13:11-04:00","message":"Database and Config loaded, starting webserver..."}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"level":"debug","time":"2022-04-03T16:17:29-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Paint: Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:2 Name:Location6 Description: CoverPhoto:Location6_cover.png Photos:[Location6_0.png Location6_1.png] Rooms:[] Notes:Notes for my location!6 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:3 Name:Location10 Description: CoverPhoto:Location10_cover.png Photos:[] Rooms:[] Notes:Notes for my location!10 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"304", "method":"GET", "path":"/photos/locations/Location6/Location6_cover.png"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"304", "method":"GET", "path":"/photos/locations/Location10/Location10_cover.png"}
{"level":"debug","time":"2022-04-03T16:17:44-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Paint: Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:2 Name:Location6 Description: CoverPhoto:Location6_cover.png Photos:[Location6_0.png Location6_1.png] Rooms:[] Notes:Notes for my location!6 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:3 Name:Location10 Description: CoverPhoto:Location10_cover.png Photos:[] Rooms:[] Notes:Notes for my location!10 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
{"level":"info","time":"2022-04-03T16:18:06-04:00","message":"Getting all Rooms"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/rooms"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"304", "method":"GET", "path":"/photos/locations/Location4/Kitchen/Kitchen_cover.png"}
{"level":"debug","time":"2022-04-03T16:18:08-04:00","message":"Returning Locations: [{ID:1 Name:Location4 Description: CoverPhoto:Location4_cover.png Photos:[Location4_0.png Location4_1.png] Rooms:[{ID:0 Name:Kitchen Description: CoverPhoto:Location4/Kitchen/Kitchen_cover.png Photos:[Location4/Kitchen/Kitchen_0.png] Paint: Notes:Notes For My Room! Cabinets:[] Items:[] SquareFeet:0 LocationID:1 LocationName:Location4}] Notes:Notes for my location! Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:2 Name:Location6 Description: CoverPhoto:Location6_cover.png Photos:[Location6_0.png Location6_1.png] Rooms:[] Notes:Notes for my location!6 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:} {ID:3 Name:Location10 Description: CoverPhoto:Location10_cover.png Photos:[] Rooms:[] Notes:Notes for my location!10 Address: SquareFeet:0 Latitude: Longitude: DatePurchased: PurchasePrice: CurrentValue:}]"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/locations"}
{"logtype":"webserver", "pid":"8168", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"level":"info","time":"2022-04-03T20:46:19-04:00","message":"Configuration loaded successfully..."}
{"level":"debug","time":"2022-04-03T20:46:19-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
{"level":"info","time":"2022-04-03T20:46:19-04:00","message":"Database and Config loaded, starting webserver..."}
{"level":"info","time":"2022-04-03T20:46:20-04:00","message":"Configuration loaded successfully..."}
{"level":"debug","time":"2022-04-03T20:46:20-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
{"level":"info","time":"2022-04-03T20:46:20-04:00","message":"Database and Config loaded, starting webserver..."}
{"logtype":"webserver", "pid":"16808", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"level":"info","time":"2022-04-03T20:52:11-04:00","message":"Configuration loaded successfully..."}
{"level":"debug","time":"2022-04-03T20:52:11-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
{"level":"info","time":"2022-04-03T20:52:11-04:00","message":"Database and Config loaded, starting webserver..."}
{"logtype":"webserver", "pid":"19608", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"logtype":"webserver", "pid":"19608", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"level":"info","time":"2022-04-03T21:44:35-04:00","message":"Configuration loaded successfully..."}
{"level":"debug","time":"2022-04-03T21:44:35-04:00","message":"{Timezone:America/New_York Server:{Port:3500 LocationPhotoDir:./app/photos/locations/} Logger:{Level:debug LoggingFile:./app/log/goInventorize.log} Authentication:{BasicAuth:false UserName:admin Password:password} Development:false}"}
{"level":"info","time":"2022-04-03T21:44:35-04:00","message":"Database and Config loaded, starting webserver..."}
{"logtype":"webserver", "pid":"1812", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}
{"logtype":"webserver", "pid":"1812", "requestid":"", "status":"200", "method":"GET", "path":"/api/config"}

View File

@@ -5,9 +5,6 @@ type Location struct {
ID int `storm:"id,increment,index"`
Name string `storm:"unique"`
Description string
CoverPhoto string // A "cover photo" for the location
Photos []string // A list of additional photos for the location
Rooms []Room
Notes string
Address string
SquareFeet int
@@ -16,6 +13,10 @@ type Location struct {
DatePurchased string
PurchasePrice string
CurrentValue string
CoverPhoto string // A "cover photo" for the location
Photos []string // A list of additional photos for the location
Files []string
Rooms []Room
}
// Room is a containerized area at a location
@@ -23,13 +24,13 @@ type Room struct {
ID int `storm:"id,increment,index"`
Name string
Description string
Paint string // Details about the paint
Notes string
SquareFeet int
CoverPhoto string // A "cover photo" for the room
Photos []string // A list of additional photos for the room
Paint string // Details about the paint
Notes string
Cabinets []Cabinet
Items []Item
SquareFeet int
LocationID int //Which location room is assigned to
LocationName string // Location name room belongs to

View File

@@ -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",

View File

@@ -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",

View File

@@ -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>

View File

@@ -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: '/' },
],

View File

@@ -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>
</>
);

View File

@@ -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}