Compare commits
12 Commits
312809f34f
...
1c97262ee3
Author | SHA1 | Date | |
---|---|---|---|
1c97262ee3 | |||
bf791db47f | |||
fa25015472 | |||
4d02572d0c | |||
d418a53144 | |||
9b850ba88f | |||
41f52e67d3 | |||
2d06e0fb12 | |||
114ab257b2 | |||
f382150da3 | |||
630da41536 | |||
674ee65c29 |
@ -1,30 +1,43 @@
|
|||||||
{
|
{
|
||||||
"expo": {
|
"expo": {
|
||||||
"name": "deguapp",
|
"name": "deguapp",
|
||||||
"slug": "deguapp",
|
"slug": "deguapp",
|
||||||
"scheme": "deguapp",
|
"scheme": "deguapp",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"orientation": "portrait",
|
"orientation": "portrait",
|
||||||
"icon": "./assets/icon.png",
|
"icon": "./assets/icon.png",
|
||||||
"userInterfaceStyle": "light",
|
"userInterfaceStyle": "light",
|
||||||
"splash": {
|
"splash": {
|
||||||
"image": "./assets/splash.png",
|
"image": "./assets/splash.png",
|
||||||
"resizeMode": "contain",
|
"resizeMode": "contain",
|
||||||
"backgroundColor": "#ffffff"
|
"backgroundColor": "#ffffff"
|
||||||
},
|
},
|
||||||
"assetBundlePatterns": ["**/*"],
|
"assetBundlePatterns": [
|
||||||
"ios": {
|
"**/*"
|
||||||
"supportsTablet": true
|
],
|
||||||
},
|
"ios": {
|
||||||
"android": {
|
"supportsTablet": true
|
||||||
"adaptiveIcon": {
|
},
|
||||||
"foregroundImage": "./assets/adaptive-icon.png",
|
"android": {
|
||||||
"backgroundColor": "#ffffff"
|
"adaptiveIcon": {
|
||||||
}
|
"foregroundImage": "./assets/adaptive-icon.png",
|
||||||
},
|
"backgroundColor": "#ffffff"
|
||||||
"web": {
|
}
|
||||||
"favicon": "./assets/favicon.png"
|
},
|
||||||
},
|
"web": {
|
||||||
"plugins": ["expo-router"]
|
"favicon": "./assets/favicon.png"
|
||||||
}
|
},
|
||||||
|
"plugins": [
|
||||||
|
"expo-router",
|
||||||
|
[
|
||||||
|
"expo-image-picker",
|
||||||
|
{
|
||||||
|
"photosPermission": "The app accesses your photos to let you share them with your friends.",
|
||||||
|
"cameraPermission": "The app accesses your camera to let you take photos of your beer and share them with your friends.",
|
||||||
|
"microphonePermission": "The app accesses your microphone to let you record audio and share it with your friends."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"expo-secure-store"
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,78 @@
|
|||||||
import { StyleSheet, TextInput, View } from "react-native";
|
import { StyleSheet, TextInput, View, Image } from "react-native";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import Button from "@components/Button";
|
import Button from "@components/Button";
|
||||||
|
import Text from "@components/Text";
|
||||||
import { colors } from "@components/style";
|
import { colors } from "@components/style";
|
||||||
|
import * as ImagePicker from "expo-image-picker";
|
||||||
|
import DropDownPicker from "react-native-dropdown-picker";
|
||||||
|
/* import DropdownTheme from "@components/DropdownTheme"; */
|
||||||
|
const DropdownTheme = require("@components/DropdownTheme");
|
||||||
|
|
||||||
export default function BeerAdd() {
|
export default function BeerAdd() {
|
||||||
const [b_name, setBName] = useState("");
|
const [b_name, setBName] = useState("");
|
||||||
const [b_degree, setBDegree] = useState("");
|
const [b_degree, setBDegree] = useState("");
|
||||||
const [b_packaging, setBPackaging] = useState("");
|
const [b_packaging, setBPackaging] = useState("");
|
||||||
const [b_brand, setBBrand] = useState("");
|
const [b_brand, setBBrand] = useState("");
|
||||||
|
const [image, setImage] = useState(null);
|
||||||
|
const [selectPackaging, setSelectedPackaging] = useState();
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [value, setValue] = useState(null);
|
||||||
|
const [items, setItems] = useState([
|
||||||
|
{ label: "Tank beer", value: "tank" },
|
||||||
|
{ label: "Cask beer", value: "cask" },
|
||||||
|
{ label: "Glass bottle", value: "glass" },
|
||||||
|
{ label: "Can", value: "can" },
|
||||||
|
{ label: "PET bottle", value: "pet" },
|
||||||
|
]);
|
||||||
|
|
||||||
|
DropDownPicker.addTheme("DropdownTheme", DropdownTheme);
|
||||||
|
DropDownPicker.setTheme("DropdownTheme");
|
||||||
|
|
||||||
|
ImagePicker.getCameraPermissionsAsync(); //check if the user has granted permission to access the camera
|
||||||
|
const pickImage = async () => {
|
||||||
|
const permissionResult =
|
||||||
|
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||||
|
|
||||||
|
if (permissionResult.granted === false) {
|
||||||
|
alert("You've refused to allow this appp to access your photos!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// No permissions request is necessary for launching the image library
|
||||||
|
const result = await ImagePicker.launchImageLibraryAsync({
|
||||||
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||||
|
allowsEditing: true,
|
||||||
|
aspect: [3, 4],
|
||||||
|
// quality: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Explore the result
|
||||||
|
console.log(result);
|
||||||
|
|
||||||
|
if (!result.canceled) {
|
||||||
|
setImage(result.assets[0].uri);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openCamera = async () => {
|
||||||
|
// Ask the user for the permission to access the camera
|
||||||
|
const permissionResult = await ImagePicker.requestCameraPermissionsAsync();
|
||||||
|
|
||||||
|
if (permissionResult.granted === false) {
|
||||||
|
alert("You've refused to allow this app to access your camera!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await ImagePicker.launchCameraAsync();
|
||||||
|
|
||||||
|
// Explore the result
|
||||||
|
console.log(result);
|
||||||
|
|
||||||
|
if (!result.canceled) {
|
||||||
|
setImage(result.assets[0].uri);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
async function addBeer() {
|
async function addBeer() {
|
||||||
// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
|
// TODO: after the request - redirect to /beer/{new_beer_id}?; plus some modal about successful state
|
||||||
@ -24,11 +89,22 @@ export default function BeerAdd() {
|
|||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
const res = await req.json();
|
const res = await req.json();
|
||||||
|
|
||||||
|
if (res.code == 201 && res.data._id) {
|
||||||
|
window.location.href = `/beer/${res.data._id}`;
|
||||||
|
} else {
|
||||||
|
alert(
|
||||||
|
"Beer was not added successfully. Please check your data and try again.",
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.form}>
|
<View style={styles.form}>
|
||||||
|
<Text style={styles.text}>
|
||||||
|
Spill your thoughts about the beer you just sipped!
|
||||||
|
</Text>
|
||||||
<TextInput
|
<TextInput
|
||||||
style={styles.input}
|
style={styles.input}
|
||||||
placeholder="Name"
|
placeholder="Name"
|
||||||
@ -57,7 +133,33 @@ export default function BeerAdd() {
|
|||||||
onChangeText={(text) => setBPackaging(text)}
|
onChangeText={(text) => setBPackaging(text)}
|
||||||
placeholderTextColor="#aaaaaa"
|
placeholderTextColor="#aaaaaa"
|
||||||
/>
|
/>
|
||||||
<Button title="Add beer" color={colors.green} onPress={addBeer} />
|
<DropDownPicker
|
||||||
|
open={open}
|
||||||
|
value={value}
|
||||||
|
items={items}
|
||||||
|
setOpen={setOpen}
|
||||||
|
setValue={setValue}
|
||||||
|
setItems={setItems}
|
||||||
|
placeholder={"What are you drinking from?"}
|
||||||
|
theme="DropdownTheme"
|
||||||
|
/>
|
||||||
|
<View style={styles.imageContainer}>
|
||||||
|
<Button
|
||||||
|
title="Open gallery"
|
||||||
|
onPress={pickImage}
|
||||||
|
buttonStyle={styles.imageButton}
|
||||||
|
textStyle={styles.imageTextButton}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onPress={openCamera}
|
||||||
|
title="Open camera"
|
||||||
|
buttonStyle={styles.imageButton}
|
||||||
|
textStyle={styles.imageTextButton}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
{image && <Image source={{ uri: image }} style={styles.image} />}
|
||||||
|
<Button title="Add beer" color={colors.gold} onPress={addBeer} />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
@ -65,22 +167,50 @@ export default function BeerAdd() {
|
|||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
flex: 1,
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
alignItems: "center",
|
||||||
|
display: "flex",
|
||||||
},
|
},
|
||||||
form: {
|
form: {
|
||||||
flex: 1,
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
paddingTop: "10%",
|
|
||||||
gap: 15,
|
gap: 15,
|
||||||
|
width: "80%",
|
||||||
},
|
},
|
||||||
input: {},
|
|
||||||
input: {
|
input: {
|
||||||
height: "auto",
|
height: "auto",
|
||||||
width: "60%",
|
width: "100%",
|
||||||
borderColor: "gray",
|
borderColor: "gray",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderRadius: 5,
|
borderRadius: 10,
|
||||||
padding: 10,
|
padding: 13,
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
},
|
},
|
||||||
|
imageContainer: {
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 10,
|
||||||
|
},
|
||||||
|
imageButton: {
|
||||||
|
backgroundColor: colors.dark,
|
||||||
|
borderColor: "gray",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
imageTextButton: {
|
||||||
|
color: colors.white,
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
width: 150,
|
||||||
|
height: 150,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 24,
|
||||||
|
textAlign: "center",
|
||||||
|
paddingBottom: "3%",
|
||||||
|
paddingTop: "10%",
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
BIN
frontend/assets/DropdownIcons/arrow-down.png
Normal file
BIN
frontend/assets/DropdownIcons/arrow-down.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 522 B |
BIN
frontend/assets/DropdownIcons/arrow-up.png
Normal file
BIN
frontend/assets/DropdownIcons/arrow-up.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 807 B |
BIN
frontend/assets/DropdownIcons/close.png
Normal file
BIN
frontend/assets/DropdownIcons/close.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 338 B |
BIN
frontend/assets/DropdownIcons/tick.png
Normal file
BIN
frontend/assets/DropdownIcons/tick.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
@ -7,6 +7,8 @@ export default function Button(props) {
|
|||||||
title = "Button",
|
title = "Button",
|
||||||
color = "black",
|
color = "black",
|
||||||
textColor = "white",
|
textColor = "white",
|
||||||
|
buttonStyle,
|
||||||
|
textStyle,
|
||||||
} = props;
|
} = props;
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
@ -19,10 +21,13 @@ export default function Button(props) {
|
|||||||
: "black",
|
: "black",
|
||||||
},
|
},
|
||||||
styles.button,
|
styles.button,
|
||||||
|
buttonStyle,
|
||||||
]}
|
]}
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
>
|
>
|
||||||
<Text style={[styles.text, { color: textColor }]}>{title}</Text>
|
<Text style={[styles.text, { color: textColor }, textStyle]}>
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
170
frontend/components/DropdownTheme.js
Normal file
170
frontend/components/DropdownTheme.js
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
import { StyleSheet } from "react-native";
|
||||||
|
|
||||||
|
import { colors } from "@components/style";
|
||||||
|
|
||||||
|
export const ICONS = {
|
||||||
|
ARROW_DOWN: require("@assets/DropdownIcons/arrow-down.png"),
|
||||||
|
ARROW_UP: require("@assets/DropdownIcons/arrow-up.png"),
|
||||||
|
TICK: require("@assets/DropdownIcons/tick.png"),
|
||||||
|
CLOSE: require("../assets/DropdownIcons/close.png"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
width: "100%",
|
||||||
|
minHeight: 50,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "gray",
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 3,
|
||||||
|
backgroundColor: colors.dark,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
flex: 1,
|
||||||
|
color: colors.placeholder,
|
||||||
|
},
|
||||||
|
labelContainer: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
},
|
||||||
|
arrowIcon: {
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
},
|
||||||
|
tickIcon: {
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
},
|
||||||
|
badgeStyle: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
borderRadius: 15,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 5,
|
||||||
|
},
|
||||||
|
badgeDotStyle: {
|
||||||
|
width: 10,
|
||||||
|
height: 10,
|
||||||
|
borderRadius: 10 / 2,
|
||||||
|
marginRight: 8,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
},
|
||||||
|
badgeSeparator: {
|
||||||
|
width: 5,
|
||||||
|
},
|
||||||
|
listBody: {
|
||||||
|
height: "100%",
|
||||||
|
},
|
||||||
|
listBodyContainer: {
|
||||||
|
flexGrow: 1,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
dropDownContainer: {
|
||||||
|
position: "absolute",
|
||||||
|
backgroundColor: colors.darkSecondary,
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: colors.black,
|
||||||
|
borderWidth: 1,
|
||||||
|
width: "100%",
|
||||||
|
overflow: "hidden",
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
|
modalContentContainer: {
|
||||||
|
flexGrow: 1,
|
||||||
|
backgroundColor: colors.white,
|
||||||
|
},
|
||||||
|
listItemContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
height: 40,
|
||||||
|
},
|
||||||
|
listItemLabel: {
|
||||||
|
flex: 1,
|
||||||
|
color: colors.placeholder,
|
||||||
|
},
|
||||||
|
iconContainer: {
|
||||||
|
marginRight: 10,
|
||||||
|
},
|
||||||
|
arrowIconContainer: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
tickIconContainer: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
closeIconContainer: {
|
||||||
|
marginLeft: 10,
|
||||||
|
},
|
||||||
|
listParentLabel: {},
|
||||||
|
listChildLabel: {},
|
||||||
|
listParentContainer: {},
|
||||||
|
listChildContainer: {
|
||||||
|
paddingLeft: 40,
|
||||||
|
},
|
||||||
|
searchContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: 10,
|
||||||
|
borderBottomColor: colors.darkSecondary,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
},
|
||||||
|
searchTextInput: {
|
||||||
|
flexGrow: 1,
|
||||||
|
flexShrink: 1,
|
||||||
|
margin: 0,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 5,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderColor: colors.darkSecondary,
|
||||||
|
borderWidth: 1,
|
||||||
|
color: colors.white,
|
||||||
|
},
|
||||||
|
itemSeparator: {
|
||||||
|
height: 1,
|
||||||
|
backgroundColor: colors.darkSecondary,
|
||||||
|
},
|
||||||
|
flatListContentContainer: {
|
||||||
|
flexGrow: 1,
|
||||||
|
},
|
||||||
|
customItemContainer: {},
|
||||||
|
customItemLabel: {
|
||||||
|
fontStyle: "italic",
|
||||||
|
},
|
||||||
|
listMessageContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
listMessageText: {
|
||||||
|
color: colors.gold,
|
||||||
|
},
|
||||||
|
selectedItemContainer: {},
|
||||||
|
selectedItemLabel: {},
|
||||||
|
modalTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
color: colors.gold,
|
||||||
|
},
|
||||||
|
extendableBadgeContainer: {
|
||||||
|
flexDirection: "row",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
extendableBadgeItemContainer: {
|
||||||
|
marginVertical: 3,
|
||||||
|
marginEnd: 7,
|
||||||
|
},
|
||||||
|
});
|
@ -8,4 +8,5 @@ export const colors = {
|
|||||||
dark: "#010409",
|
dark: "#010409",
|
||||||
darkSecondary: "#0D1117",
|
darkSecondary: "#0D1117",
|
||||||
white: "#FFFFFF",
|
white: "#FFFFFF",
|
||||||
|
placeholder: "#aaaaaa",
|
||||||
};
|
};
|
||||||
|
1850
frontend/package-lock.json
generated
1850
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,24 +9,26 @@
|
|||||||
"web": "expo start --web"
|
"web": "expo start --web"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/metro-runtime": "~3.1.3",
|
"@expo/metro-runtime": "~3.2.1",
|
||||||
"@react-native-async-storage/async-storage": "^1.23.1",
|
"@react-native-async-storage/async-storage": "^1.23.1",
|
||||||
"@types/react": "~18.2.45",
|
"@types/react": "~18.2.45",
|
||||||
"axios": "^1.6.8",
|
"axios": "^1.6.8",
|
||||||
"expo": "~50.0.17",
|
"expo": "^51.0.2",
|
||||||
"expo-constants": "~15.4.6",
|
"expo-constants": "~16.0.1",
|
||||||
"expo-linear-gradient": "~12.7.2",
|
"expo-image-picker": "~15.0.4",
|
||||||
"expo-linking": "~6.2.2",
|
"expo-linear-gradient": "~13.0.2",
|
||||||
"expo-router": "~3.4.10",
|
"expo-linking": "~6.3.1",
|
||||||
"expo-secure-store": "^12.8.1",
|
"expo-router": "~3.5.11",
|
||||||
"expo-status-bar": "~1.11.1",
|
"expo-secure-store": "~13.0.1",
|
||||||
|
"expo-status-bar": "~1.12.1",
|
||||||
|
"expo-system-ui": "~3.0.4",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"react-native": "0.73.6",
|
"react-native": "0.74.1",
|
||||||
"react-native-safe-area-context": "4.8.2",
|
"react-native-dropdown-picker": "^5.4.6",
|
||||||
"react-native-screens": "~3.29.0",
|
"react-native-safe-area-context": "4.10.1",
|
||||||
"react-native-web": "~0.19.6",
|
"react-native-screens": "3.31.1",
|
||||||
"expo-system-ui": "~2.9.4"
|
"react-native-web": "~0.19.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.20.0",
|
"@babel/core": "^7.20.0",
|
||||||
|
Loading…
Reference in New Issue
Block a user