1 files changed, 83 insertions, 0 deletions
diff --git a/components/Settings.js b/components/Settings.js
new file mode 100644
index 0000000..813b7c5
--- /dev/null
+++ b/components/Settings.js
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import * as SecureStore from 'expo-secure-store';
+import Dialog from "react-native-dialog";
+import * as WebBrowser from 'expo-web-browser';
+
+// import * as ImageManipulator from "expo-image-manipulator";
+
+export default class Settings extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { ip: ":", dialogVisible: false }
+
+    this.toggleDialog = this.toggleDialog.bind(this)
+  }
+
+  async componentDidMount() {
+    this.setState({ ip: await getIp(true) })
+  }
+
+  toggleDialog() {
+    this.setState({ dialogVisible: !this.state.dialogVisible })
+  }
+
+  render() {
+    const [ip, port] = this.state.ip.split(":");
+    let [cip, cpo] = [ip, port]
+    const saveIP = async () => {
+      const ip = cip + ":" + cpo
+      await setIp(ip)
+      this.setState({ ip })
+      this.toggleDialog()
+    }
+    return (
+      <View style={styles.cont}>
+        <View><Text style={styles.h1}>Current IP: {ip}{"\n"}Current port: {port}</Text></View>
+        <TouchableOpacity onPress={this.toggleDialog}><Text style={styles.h1b}>New IP & PORT</Text></TouchableOpacity>
+        <TouchableOpacity onPress={() => WebBrowser.openBrowserAsync("http://" + this.state.ip)}><Text style={styles.h1b}>Open web app</Text></TouchableOpacity>
+        <Dialog.Container visible={this.state.dialogVisible}>
+          <Dialog.Title>New IP & PORT</Dialog.Title>
+          <Dialog.Input onChangeText={c => cip = c} label="IP" defaultValue={ip} />
+          <Dialog.Input onChangeText={c => cpo = c} label="PORT" defaultValue={port} />
+          <Dialog.Button label="Cancel" onPress={this.toggleDialog} />
+          <Dialog.Button label="Save" onPress={saveIP} />
+        </Dialog.Container>
+      </View >
+    )
+  }
+}
+
+export async function getIp(skipProtocol = false) {
+  return (skipProtocol ? "" : "http://") + (await SecureStore.getItemAsync("ip") ?? "192.168.0.118:8000")
+}
+export async function setIp(ip) {
+  await SecureStore.setItemAsync("ip", ip)
+}
+
+const styles = StyleSheet.create({
+  cont: {
+    flexDirection: "column",
+    backgroundColor: "black",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    height: "100%",
+  },
+  h1: {
+    color: "white",
+    fontSize: 23,
+    // height: 60,
+  },
+  h1b: {
+    color: "white",
+    fontSize: 25,
+    fontWeight: "bold",
+    // height: 32,
+  },
+  span: {
+    color: "white",
+    fontSize: 22,
+  },
+})
+
+