made it look prettier. working on fixing product editor.
This commit is contained in:
parent
7c2289098e
commit
de0167e9e5
@ -1,12 +1,13 @@
|
||||
import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData } from 'react-native';
|
||||
import { Image, StyleSheet, Platform, ImageBackground, View, Text, Button, TextInputKeyPressEventData, TextInput, FlatList } from 'react-native';
|
||||
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { useAppSelector } from '../store';
|
||||
import { selectProducts } from '@/features/product/productSlice';
|
||||
import { Product, dimensions_t } from '@/lib/product';
|
||||
import { ProductTile } from '@/components/ProductTile';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { TextInput, TouchableHighlight } from 'react-native-gesture-handler';
|
||||
import { TouchableHighlight } from 'react-native-gesture-handler';
|
||||
|
||||
const fallbackImage = require("@/assets/images/board-stock-lightened-blurred.png");
|
||||
|
||||
export default function HomeScreen() {
|
||||
|
||||
@ -17,11 +18,9 @@ export default function HomeScreen() {
|
||||
const [width, setWidth] = useState("0");
|
||||
const [units, setUnits] = useState("in" as "ft" | "in");
|
||||
|
||||
function calculatePrice() {
|
||||
if (!activeProduct) {
|
||||
setPrice("0.00");
|
||||
return;
|
||||
}
|
||||
useEffect(function () {
|
||||
const iv = setInterval(function () {
|
||||
if (!activeProduct) return;
|
||||
const l = Number.parseInt(length);
|
||||
const w = Number.parseInt(width);
|
||||
console.log("l=%d, w=%d", l, w);
|
||||
@ -33,28 +32,12 @@ export default function HomeScreen() {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})
|
||||
setPrice(s);
|
||||
}
|
||||
|
||||
const onProductSelected = (product: Product) => {
|
||||
setActiveProduct(product);
|
||||
calculatePrice();
|
||||
}
|
||||
|
||||
const onUnitPressed = (u : "ft" | "in") => {
|
||||
setUnits(u);
|
||||
calculatePrice();
|
||||
}
|
||||
|
||||
const onLengthChanged = (value : string) => {
|
||||
setLength(value);
|
||||
calculatePrice();
|
||||
}
|
||||
|
||||
const onWidthChanged = (width : string) => {
|
||||
setWidth(width);
|
||||
calculatePrice();
|
||||
setPrice(s == "NaN" ? "0.00" : s);
|
||||
}, 10);
|
||||
return function () {
|
||||
clearInterval(iv);
|
||||
}
|
||||
}, [activeProduct, length, width]);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.wrapper}>
|
||||
@ -67,18 +50,16 @@ export default function HomeScreen() {
|
||||
<View>
|
||||
<TextInput
|
||||
clearTextOnFocus={true}
|
||||
defaultValue={length}
|
||||
onChangeText={onLengthChanged}
|
||||
onChangeText={setLength}
|
||||
inputMode='decimal'
|
||||
style={styles.lengthInput}
|
||||
/>
|
||||
<Text style={styles.unitHints}>{units}</Text>
|
||||
{activeProduct.area &&
|
||||
|
||||
(<View><TextInput
|
||||
{activeProduct.area && (
|
||||
<View>
|
||||
<TextInput
|
||||
clearTextOnFocus={true}
|
||||
defaultValue={width}
|
||||
onPressIn={() => calculatePrice()}
|
||||
onChangeText={setWidth}
|
||||
inputMode='decimal'
|
||||
style={styles.widthInput}
|
||||
@ -90,28 +71,30 @@ export default function HomeScreen() {
|
||||
) : (<Text>Please choose a product</Text>)}
|
||||
</View>
|
||||
<View style={styles.unitSelector}>
|
||||
<Button title="in" onPress={() => onUnitPressed("in")} color={units === "in" ? "gray" : "blue"} />
|
||||
<Button title="ft" onPress={() => onUnitPressed("ft")} color={units === "ft" ? "gray" : "blue"} />
|
||||
<Button title="in" onPress={() => setUnits("in")} color={units === "in" ? "gray" : "blue"} />
|
||||
<Button title="ft" onPress={() => setUnits("ft")} color={units === "ft" ? "gray" : "blue"} />
|
||||
</View>
|
||||
</View>
|
||||
{products.map((product) => {
|
||||
<FlatList
|
||||
data={products}
|
||||
style={styles.productSelectorFlatList}
|
||||
renderItem={({ item }) => {
|
||||
return (
|
||||
<TouchableHighlight onPress={() => setActiveProduct(product)} >
|
||||
<View
|
||||
style={product.id === activeProduct?.id ? styles.activeProduct : styles.inactiveProduct}>
|
||||
<ProductTile product={product} onProductSelected={onProductSelected} />
|
||||
</View>
|
||||
<TouchableHighlight
|
||||
style={item === activeProduct ? styles.productTileTouchableActive : styles.productTileTouchable}
|
||||
onPress={() => setActiveProduct(item)}>
|
||||
<Text style={item === activeProduct ? styles.productTileTextActive : styles.productTileText}>{item.attributes.name || `Product ${item.id}`}</Text>
|
||||
</TouchableHighlight>
|
||||
)
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {
|
||||
padding: 10,
|
||||
alignItems: "center",
|
||||
},
|
||||
bigPriceWrapper: {
|
||||
alignContent: "center",
|
||||
@ -124,11 +107,13 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
inputWrapper: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
unitSelector: {
|
||||
},
|
||||
inputAndUnitWrapper: {
|
||||
flexDirection: "row",
|
||||
alignSelf: "center",
|
||||
},
|
||||
unitHints: {
|
||||
fontSize: 30,
|
||||
@ -162,7 +147,6 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
stepContainer: {
|
||||
@ -174,6 +158,39 @@ const styles = StyleSheet.create({
|
||||
width: 290,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
},
|
||||
|
||||
productSelectorFlatList: {
|
||||
padding: 10,
|
||||
margin: 10,
|
||||
},
|
||||
|
||||
productTileTouchable: {
|
||||
margin: 10,
|
||||
padding: 20,
|
||||
backgroundColor: "grey",
|
||||
},
|
||||
|
||||
productTileTouchableActive: {
|
||||
borderWidth: 2,
|
||||
borderStyle: "solid",
|
||||
borderColor: "black",
|
||||
margin: 10,
|
||||
padding: 20,
|
||||
},
|
||||
|
||||
productTileText: {
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
},
|
||||
|
||||
productTileTextActive: {
|
||||
textAlign: "center",
|
||||
color: "black",
|
||||
},
|
||||
|
||||
productTileCover: {
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
});
|
||||
|
BIN
assets/images/board-stock-lightened-blurred.png
Normal file
BIN
assets/images/board-stock-lightened-blurred.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 72 KiB |
BIN
assets/images/board-stock.png
Normal file
BIN
assets/images/board-stock.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 292 KiB |
@ -20,30 +20,36 @@ export const ProductAttributeEditor = ({ product, attributeKey: key, attributeVa
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>{key}</Text>
|
||||
<View>
|
||||
<TouchableHighlight
|
||||
onPress={() => setDoEdit(!doEdit)}
|
||||
aria-label="Property Value"
|
||||
>
|
||||
{doEdit ?
|
||||
(<Text>{newValue}</Text>) :
|
||||
(<TextInput
|
||||
<View style={styles.productAttributeRow}>
|
||||
<Text style={styles.key}>{key}</Text>
|
||||
<TextInput
|
||||
value={newValue}
|
||||
onChangeText={doChange}
|
||||
aria-label="Edit Value" />)
|
||||
}
|
||||
</TouchableHighlight>
|
||||
style={styles.value}
|
||||
aria-label="Edit Value" />
|
||||
<TouchableHighlight
|
||||
onPress={() => onDelete && onDelete(product.id, key, value)}
|
||||
aria-label="Delete Attribute">
|
||||
<Ionicons name="trash-bin-outline" />
|
||||
aria-label="Delete Attribute"
|
||||
style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
|
||||
<Ionicons name="trash-bin-outline" size={30} color={"white"} />
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const style = StyleSheet.create({
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
productAttributeRow: {
|
||||
flexDirection: "row",
|
||||
},
|
||||
key: {
|
||||
flex: 1,
|
||||
},
|
||||
value: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: "grey",
|
||||
borderStyle: "solid",
|
||||
padding: 10
|
||||
}
|
||||
});
|
@ -20,6 +20,7 @@ export const ProductEditor = ({}) => {
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<h1 style={styles.h1}>Edit Products</h1>
|
||||
<FlatList
|
||||
data={products}
|
||||
renderItem={
|
||||
@ -39,6 +40,10 @@ export const ProductEditor = ({}) => {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
h1: {
|
||||
textAlign: "center",
|
||||
fontFamily: "sans-serif"
|
||||
},
|
||||
product: {
|
||||
|
||||
}
|
||||
|
@ -41,12 +41,14 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
|
||||
<TouchableHighlight
|
||||
onPress={() => setShowAttributes(!showAttributes)}
|
||||
aria-label="Product Item"
|
||||
style={styles.productItemName}
|
||||
>
|
||||
<Text style={styles.product}>{newName}</Text>
|
||||
<Text style={styles.productNameText}>{newName}</Text>
|
||||
</TouchableHighlight>
|
||||
{showAttributes &&
|
||||
(
|
||||
<FlatList
|
||||
style={styles.productAttributesList}
|
||||
data={product.attributesAsList}
|
||||
renderItem={({ item }) => (
|
||||
<ProductAttributeEditor
|
||||
@ -66,5 +68,21 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
product: {},
|
||||
productNameText: {
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
},
|
||||
productItemName: {
|
||||
flex: 1,
|
||||
backgroundColor: "lightgrey",
|
||||
padding: 4,
|
||||
margin: 4,
|
||||
},
|
||||
productAttributesList: {
|
||||
margin: 10,
|
||||
padding: 10,
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: "black",
|
||||
},
|
||||
})
|
@ -45,6 +45,14 @@ export const selectProducts = (state : RootState) => {
|
||||
return state.products;
|
||||
}
|
||||
|
||||
export const productIds = (state : RootState) => {
|
||||
return state.products.map(p => p.id);
|
||||
}
|
||||
|
||||
export const getProductById = (state : RootState, id : Id) => {
|
||||
return state.products.find(x => x.id === id);
|
||||
}
|
||||
|
||||
|
||||
export const actions = {
|
||||
...productsState.actions
|
||||
|
@ -7,7 +7,7 @@
|
||||
"reset-project": "node ./scripts/reset-project.js",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web",
|
||||
"web": "expo start --web --offline",
|
||||
"test": "jest --watchAll",
|
||||
"lint": "expo lint"
|
||||
},
|
||||
@ -37,6 +37,7 @@
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-native": "0.74.2",
|
||||
"react-native-flex-grid": "^1.0.4",
|
||||
"react-native-gesture-handler": "~2.16.2",
|
||||
"react-native-reanimated": "~3.10.1",
|
||||
"react-native-safe-area-context": "4.10.1",
|
||||
|
@ -80,6 +80,9 @@ dependencies:
|
||||
react-native:
|
||||
specifier: 0.74.2
|
||||
version: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0)
|
||||
react-native-flex-grid:
|
||||
specifier: ^1.0.4
|
||||
version: 1.0.4(react-native@0.74.2)(react@18.2.0)
|
||||
react-native-gesture-handler:
|
||||
specifier: ~2.16.2
|
||||
version: 2.16.2(react-native@0.74.2)(react@18.2.0)
|
||||
@ -8755,6 +8758,16 @@ packages:
|
||||
/react-is@18.3.1:
|
||||
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
|
||||
|
||||
/react-native-flex-grid@1.0.4(react-native@0.74.2)(react@18.2.0):
|
||||
resolution: {integrity: sha512-VFadQy3JpgBM2fNsn7W/TdebZ0JNeZgedxPJ0Xi6o+HQJU8j43YGUsGot72rEMWlzaAJCGQnMQXkW9vX+E2n5w==}
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
react-native: 0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7)(@types/react@18.2.79)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-native-gesture-handler@2.16.2(react-native@0.74.2)(react@18.2.0):
|
||||
resolution: {integrity: sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==}
|
||||
peerDependencies:
|
||||
|
Loading…
Reference in New Issue
Block a user