progress update 2023-11-29
backend code complete, to be uploaded to deta
This commit is contained in:
ak
parent
f73bc71489
commit
9a9e6ac209
26 changed files with 25338 additions and 0 deletions
5
flask/.gitignore
vendored
Normal file
5
flask/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
__pycache__
|
||||
.env
|
||||
.venv
|
||||
.space
|
||||
Spacefile
|
||||
253
flask/backend.py
Normal file
253
flask/backend.py
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
from os import environ
|
||||
from dotenv import load_dotenv
|
||||
from flask import Flask, request, abort
|
||||
from datetime import datetime
|
||||
from deta import Deta
|
||||
|
||||
load_dotenv()
|
||||
app = Flask(__name__)
|
||||
deta = Deta()
|
||||
|
||||
### connect to dbs and drive
|
||||
itemsDB = deta.Base('items')
|
||||
storesDB = deta.Base('stores')
|
||||
drive = deta.Drive('beerbuddy')
|
||||
|
||||
### reusable functions
|
||||
|
||||
# fetch requested store from store database based on request arguments
|
||||
# arguments are assumed checked beforehand
|
||||
def fetchStores():
|
||||
# fetch store from deta Base
|
||||
fetch = storesDB.fetch({
|
||||
'easting': request.args['easting'],
|
||||
'northing': request.args['northing'],
|
||||
'zone': request.args['zone'],
|
||||
})
|
||||
data = fetch.items
|
||||
# if we didn't find the record on the first go around, try again
|
||||
if not data:
|
||||
### inb4 infinite loop
|
||||
while (fetch.last is not None):
|
||||
fetch = storesDB.fetch({
|
||||
'easting': request.args['easting'],
|
||||
'northing': request.args['northing'],
|
||||
'zone': request.args['zone'],
|
||||
last: fetch.last
|
||||
})
|
||||
# check with each loop iteration if we've found it
|
||||
if fetch.items:
|
||||
data.append(fetch.items)
|
||||
# if so, break loop
|
||||
break
|
||||
return data
|
||||
|
||||
# fetch requested item from item database based on request arguments and passed store
|
||||
def fetchItems(store):
|
||||
# fetch item from deta Base
|
||||
fetch = itemsDB.fetch({
|
||||
'name': request.args['itemName'],
|
||||
'store': store['key'],
|
||||
})
|
||||
data = fetch.items
|
||||
# if we didn't find the record on the first go around, try again
|
||||
if not data:
|
||||
### inb4 infinite loop
|
||||
while (fetch.last is not None):
|
||||
fetch = itemsDB.fetch({
|
||||
'name': request.args['itemName'],
|
||||
'store': store['key'],
|
||||
last: fetch.last
|
||||
})
|
||||
# check with each loop iteration if we've found it
|
||||
if fetch.items:
|
||||
data.append(fetch.items)
|
||||
# if so, break loop
|
||||
break
|
||||
return data
|
||||
|
||||
# fetches all items from item database
|
||||
def fetchAllItems(store):
|
||||
# fetch item from deta Base
|
||||
fetch = itemsDB.fetch({
|
||||
'store': store['key'],
|
||||
})
|
||||
data = fetch.items
|
||||
# if we didn't find the record on the first go around, try again
|
||||
if not data:
|
||||
### inb4 infinite loop
|
||||
while (fetch.last is not None):
|
||||
fetch = itemsDB.fetch({
|
||||
'store': store['key'],
|
||||
last: fetch.last
|
||||
})
|
||||
data.append(fetch.items)
|
||||
return data
|
||||
|
||||
# compares this item to other items from its store to determine if it is the cheapest then updates store accordingly
|
||||
def updateCheapest(item, store):
|
||||
cheapest = true
|
||||
storeItems = fetchAllItems(store)
|
||||
for storeItem in storeItems:
|
||||
if storeItem['perFloz'] < item['perFloz']: cheapest = false
|
||||
if cheapest:
|
||||
store['cheapestItem'] = item['name']
|
||||
store['cheapestFloz'] = item['perFloz']
|
||||
storesDB.put(store)
|
||||
|
||||
### routes
|
||||
|
||||
@app.route('/', methods=['GET'])
|
||||
def get():
|
||||
# if there are no arguments on the request
|
||||
if not request.args:
|
||||
# get all stores
|
||||
fetch = storesDB.fetch({})
|
||||
data = fetch.items
|
||||
### inb4 infinite loop
|
||||
while (fetch.last is not None):
|
||||
fetch = storesDB.fetch({
|
||||
last: fetch.last
|
||||
})
|
||||
data.append(fetch.items)
|
||||
else:
|
||||
# get store location details from URL arguments
|
||||
if request.args['easting'] and request.args['northing'] and request.args['zone']:
|
||||
stores = fetchStores()
|
||||
if not stores: abort(404)
|
||||
store = stores[0]
|
||||
# if an item GET request
|
||||
if request.args['itemName']:
|
||||
# passing through the store at position [0] in the fetched stores array
|
||||
items = fetchItems(store)
|
||||
if not items: abort(404)
|
||||
data = items[0]
|
||||
# otherwise is a store GET request
|
||||
else: data = store
|
||||
# if wrong arguments, malformed request
|
||||
else: abort(400)
|
||||
# otherwise return data
|
||||
return data
|
||||
|
||||
@app.route('/', methods=['POST'])
|
||||
def post():
|
||||
# checks for arguments
|
||||
if request.args:
|
||||
if request.args['easting'] and request.args['northing'] and request.args['zone'] and request.args['itemName'] and request.args['itemPrice'] and request.args['itemVolume']:
|
||||
# checks if this is posting a new store
|
||||
if request.args['name']:
|
||||
# test for presence of stores in close vicinity with similar names
|
||||
nameSubstrings = request.args['name'].split()
|
||||
for nameSubstring in nameSubstrings:
|
||||
fetch = storesDB.fetch({
|
||||
'easting?r': [request.args['easting'] - 10, request.args['easting'] + 10],
|
||||
'northing?r': [request.args['northing'] - 10, request.args['northing'] + 10],
|
||||
'zone': request.args['zone'],
|
||||
'name?contains': nameSubstring,
|
||||
})
|
||||
stores = fetch.items
|
||||
# if we didn't find the record on the first go around, try again
|
||||
if not stores:
|
||||
### inb4 infinite loop
|
||||
while (fetch.last is not None):
|
||||
fetch = storesDB.fetch({
|
||||
'easting?r': [request.args['easting'] - 10, request.args['easting'] + 10],
|
||||
'northing?r': [request.args['northing'] - 10, request.args['northing'] + 10],
|
||||
'zone': request.args['zone'],
|
||||
'name?contains': 'nameSubstring',
|
||||
last: fetch.last
|
||||
})
|
||||
# check with each loop iteration if we've found it
|
||||
if fetch.items:
|
||||
stores.append(fetch.items)
|
||||
# if so, break loop
|
||||
break
|
||||
# if found a store within +/-10 meters named similarly to one of the substrings, abort
|
||||
if stores: abort(409)
|
||||
# by this point, app would have aborted if there were a problem
|
||||
# let's create the records
|
||||
# first the item dict
|
||||
item = {
|
||||
'name': request.args['itemName'],
|
||||
'volumeFloz': request.args['itemVolume'],
|
||||
'price': request.args['itemPrice'],
|
||||
'perFloz': request.args['itemPrice'] / request.args['itemVolume'],
|
||||
'lastUpdated': datetime.now().strftime('%m-%d-%Y %H:%M:%S'),
|
||||
}
|
||||
# upload store to DB
|
||||
store = storesDB.put({
|
||||
'easting': request.args['easting'],
|
||||
'northing': request.args['northing'],
|
||||
'zone': request.args['zone'],
|
||||
'name': request.args['name'],
|
||||
'cheapestItem': item['name'],
|
||||
'cheapestFloz': item['perFloz'],
|
||||
'lastUpdated': datetime.now().strftime('%m-%d-%Y %H:%M:%S'),
|
||||
})
|
||||
# upload item to DB
|
||||
item['store'] = store['key']
|
||||
itemsDB.put(item)
|
||||
# if there is an image upload
|
||||
if request.args['image']:
|
||||
drive.put(store.key, data=request.args['image'])
|
||||
# finish successfully
|
||||
return {}
|
||||
# or if it's posting a new item in the store
|
||||
else:
|
||||
stores = fetchStores()
|
||||
if not stores: abort(404)
|
||||
store = stores[0]
|
||||
###
|
||||
### HERE WE NEED TO CHECK IF ITEM ALREADY EXISTS
|
||||
###
|
||||
# let's create the record
|
||||
item = {
|
||||
'name': request.args['itemName'],
|
||||
'volumeFloz': request.args['itemVolume'],
|
||||
'price': request.args['itemPrice'],
|
||||
'perFloz': request.args['itemPrice'] / request.args['itemVolume'],
|
||||
'lastUpdated': datetime.now().strftime('%m-%d-%Y %H:%M:%S'),
|
||||
'store': store['key']
|
||||
}
|
||||
updateCheapest(item, store)
|
||||
# beam it up
|
||||
itemsDB.put(item)
|
||||
# finish successfully
|
||||
return {}
|
||||
# aborts if conditional chains not met
|
||||
abort(400)
|
||||
|
||||
@app.route('/', methods=['PUT'])
|
||||
def put():
|
||||
# checks for arguments
|
||||
if request.args:
|
||||
if request.args['easting'] and request.args['northing'] and request.args['zone']:
|
||||
# find store
|
||||
stores = fetchStores()
|
||||
if not stores: abort(404)
|
||||
store = stores[0]
|
||||
# updating item price
|
||||
if request.args['itemName'] and request.args['price']:
|
||||
# find item
|
||||
items = fetchItems(store)
|
||||
if not items: abort (404)
|
||||
item = items[0]
|
||||
# change price
|
||||
item['price'] = request.args['itemPrice']
|
||||
item['perFloz'] = item['price'] / item['volumeFloz']
|
||||
item['lastUpdated'] = datetime.now().strftime('%m-%d-%Y %H:%M:%S')
|
||||
updateCheapest(item, store)
|
||||
# beam it up
|
||||
itemsDB.put(item)
|
||||
# finish successfully
|
||||
return {}
|
||||
# updating store image
|
||||
if request.args['image']:
|
||||
store['lastUpdated'] = datetime.now().strftime('%m-%d-%Y %H:%M:%S')
|
||||
storesDB.put(store)
|
||||
drive.put(store.key, data=request.args['image'])
|
||||
return {}
|
||||
# aborts if conditional chains not met
|
||||
abort(400)
|
||||
|
||||
# no deletion planned (for now)
|
||||
3
openlayers/.gitignore
vendored
Normal file
3
openlayers/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
node_modules
|
||||
dist
|
||||
.env
|
||||
46
openlayers/index.html
Normal file
46
openlayers/index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
|
||||
/>
|
||||
<title>Using OpenLayers with Vite</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map">
|
||||
<div id="centerPin">
|
||||
<svg
|
||||
width="32px"
|
||||
height="32px"
|
||||
viewBox="-0.12 -0.12 12.24 12.24"
|
||||
enable-background="new 0 0 12 12"
|
||||
id="Слой_1"
|
||||
version="1.1"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="#000000"
|
||||
stroke="#000000"
|
||||
stroke-width="0.12000000000000002"
|
||||
>
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
d="M6,0C3.2385864,0,1,2.2385864,1,5s2.5,5,5,7c2.5-2,5-4.2385864,5-7S8.7614136,0,6,0z M6,7 C4.8954468,7,4,6.1045532,4,5s0.8954468-2,2-2s2,0.8954468,2,2S7.1045532,7,6,7z"
|
||||
fill="#ed333b"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="popup"></div>
|
||||
</div>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
225
openlayers/main.js
Normal file
225
openlayers/main.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
import "./style.css";
|
||||
|
||||
import { Map, View, Overlay, Feature } from "ol";
|
||||
import { Icon, Style } from "ol/style";
|
||||
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
|
||||
import { TileJSON, Vector as VectorSource } from "ol/source";
|
||||
import { useGeographic } from "ol/proj.js";
|
||||
import { Control, defaults as defaultControls } from "ol/control.js";
|
||||
import Point from "ol/geom/Point.js";
|
||||
import { Popover } from "bootstrap";
|
||||
|
||||
// specify to use real lon/lat coordinates
|
||||
useGeographic();
|
||||
|
||||
// state bool for locking pin overlay while adding pin
|
||||
let pinning = false;
|
||||
|
||||
// creates pins
|
||||
const makePin = (lon, lat, storeName, cheapest, flozPrice) => {
|
||||
// define pin graphics (since this is all inline)
|
||||
const pinSVG = `<svg width="32px" height="32px" viewBox="-0.12 -0.12 12.24 12.24" enable-background="new 0 0 12 12" id="Слой_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000" stroke-width="0.12000000000000002"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M6,0C3.2385864,0,1,2.2385864,1,5s2.5,5,5,7c2.5-2,5-4.2385864,5-7S8.7614136,0,6,0z M6,7 C4.8954468,7,4,6.1045532,4,5s0.8954468-2,2-2s2,0.8954468,2,2S7.1045532,7,6,7z" fill="#ed333b"></path></g></svg>`;
|
||||
const pinSVGBlob = new Blob([pinSVG], {
|
||||
type: "image/svg+xml",
|
||||
});
|
||||
const pinImageURL = URL.createObjectURL(pinSVGBlob);
|
||||
|
||||
// define style for all pins
|
||||
const pinStyle = new Style({
|
||||
image: new Icon({
|
||||
src: pinImageURL,
|
||||
anchor: [0.5, 1],
|
||||
}),
|
||||
});
|
||||
|
||||
// create pin as feature
|
||||
const pin = new Feature({
|
||||
geometry: new Point([lon, lat]),
|
||||
store: storeName,
|
||||
cheapestItem: cheapest,
|
||||
pricePerOz: flozPrice,
|
||||
});
|
||||
|
||||
// set style for pin
|
||||
pin.setStyle(pinStyle);
|
||||
|
||||
return pin;
|
||||
};
|
||||
|
||||
// create new VectorSource for pins
|
||||
const pinSource = new VectorSource();
|
||||
|
||||
// FLASK PULL LOOP
|
||||
|
||||
// test
|
||||
const pin = makePin(0, 0, "Null Store", "Modelo", "0.30");
|
||||
|
||||
// add pin
|
||||
pinSource.addFeature(pin);
|
||||
|
||||
// END FLASK PULL LOOP
|
||||
|
||||
// create vector layer for rendering pins and popups
|
||||
const pinLayer = new VectorLayer({
|
||||
source: pinSource,
|
||||
});
|
||||
|
||||
// create button
|
||||
// made in global scope so it can be modified
|
||||
const button = document.createElement("button");
|
||||
button.textContent = "New";
|
||||
button.addEventListener("click", newButtonHandler, false);
|
||||
function newButtonHandler() {
|
||||
window.ReactNativeWebView?.postMessage("new pin start");
|
||||
}
|
||||
|
||||
// add button to control
|
||||
class ButtonControl extends Control {
|
||||
constructor(opt_options) {
|
||||
const options = opt_options || {};
|
||||
|
||||
const element = document.createElement("div");
|
||||
element.className = "new-button ol-unselectable ol-control";
|
||||
element.appendChild(button);
|
||||
|
||||
super({
|
||||
element: element,
|
||||
target: options.target,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// create OSM map
|
||||
const map = new Map({
|
||||
controls: defaultControls().extend([new ButtonControl()]),
|
||||
target: document.getElementById("map"),
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new TileJSON({
|
||||
url: "https://api.maptiler.com/maps/hybrid/tiles.json?key=iE1hOruK6f8SDwxrEIir",
|
||||
tileSize: 512,
|
||||
crossOrigin: "anonymous",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
// initially view at Null Point, 2x zoom
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 2,
|
||||
maxZoom: 20,
|
||||
}),
|
||||
});
|
||||
|
||||
// popup element to display when pin clicked
|
||||
const element = document.getElementById("popup");
|
||||
const popup = new Overlay({
|
||||
element: element,
|
||||
positioning: "bottom-center",
|
||||
stopEvent: false,
|
||||
});
|
||||
|
||||
// add popup overlay to map
|
||||
map.addOverlay(popup);
|
||||
|
||||
// set state for popup visibility
|
||||
let popover;
|
||||
const disposePopover = () => {
|
||||
if (popover) {
|
||||
popover.dispose();
|
||||
popover = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
// on click events
|
||||
map.on("click", (event) => {
|
||||
console.log(event.coordinate);
|
||||
// get features at pixel
|
||||
const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => feature);
|
||||
// preemptively remove any previous popup overlays
|
||||
disposePopover();
|
||||
// if no pins at location, do nothing
|
||||
if (!feature) return;
|
||||
// set popup window position
|
||||
popup.setPosition(event.coordinate);
|
||||
// create popover at position
|
||||
popover = new Popover(element, {
|
||||
placement: "top",
|
||||
html: true,
|
||||
title: feature.get("store"),
|
||||
content: `Cheapest Item: ${feature.get(
|
||||
"cheapestItem"
|
||||
)}<br/>$ / oz.: $0.30<br/><a href=''>More...</a><br/>`,
|
||||
});
|
||||
// show popover
|
||||
popover.show();
|
||||
});
|
||||
|
||||
// set pointer to cursor when hovering over pin
|
||||
map.on("pointermove", (event) => {
|
||||
// if there is a pin at the pixel the user is hovering over
|
||||
if (map.hasFeatureAtPixel(map.getEventPixel(event.originalEvent))) {
|
||||
// set the cursor to pointer cursor
|
||||
map.getTarget().style.cursor = "pointer";
|
||||
}
|
||||
// otherwise make cursor normal again
|
||||
else map.getTarget().style.cursor = "";
|
||||
});
|
||||
|
||||
// close popup when map moved
|
||||
map.on("movestart", disposePopover);
|
||||
|
||||
// sets listener to listen for zoom changes
|
||||
map.getView().on("change:resolution", () => {
|
||||
map.getView().getZoom() < 5
|
||||
? map.getLayers().removeAt(1)
|
||||
: (() => {
|
||||
if (map.getLayers().getLength() === 1) {
|
||||
if (!pinning) map.getLayers().extend([pinLayer]);
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
// centers location on user based on location information passed in from expo-location
|
||||
window.passLocation = (lon, lat) => {
|
||||
const view = new View({
|
||||
center: [lon, lat],
|
||||
zoom: 18,
|
||||
maxZoom: 20,
|
||||
});
|
||||
|
||||
map.setView(view);
|
||||
|
||||
// sets NEW listener to listen for zoom changes
|
||||
view.on("change:resolution", () => {
|
||||
view.getZoom() < 5
|
||||
? map.getLayers().removeAt(1)
|
||||
: (() => {
|
||||
if (map.getLayers().getLength() === 1) {
|
||||
if (!pinning) map.getLayers().extend([pinLayer]);
|
||||
}
|
||||
})();
|
||||
});
|
||||
};
|
||||
|
||||
// place pin interaction
|
||||
window.placePin = () => {
|
||||
// removes listener on button in case someone wants to mash it
|
||||
button.removeEventListener("click", newButtonHandler, false);
|
||||
// removes pin layer
|
||||
pinning = true;
|
||||
map.getLayers().removeAt(1);
|
||||
// adds pin in center of view
|
||||
document.getElementById("centerPin").style.display = "block";
|
||||
// changes new button to OK button
|
||||
button.textContent = "OK";
|
||||
// OK button has event listener that on click
|
||||
function OKButtonHandler() {
|
||||
// removes listener on button in case someone wants to mash it
|
||||
button.removeEventListener("click", OKButtonHandler, false);
|
||||
// removes pin in center of view
|
||||
document.getElementById("centerPin").style.display = "none";
|
||||
// emits to RN
|
||||
window.ReactNativeWebView?.postMessage(`@${map.getView().getCenter()}`);
|
||||
}
|
||||
button.addEventListener("click", OKButtonHandler, false);
|
||||
};
|
||||
1452
openlayers/package-lock.json
generated
Normal file
1452
openlayers/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
18
openlayers/package.json
Normal file
18
openlayers/package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "beerbuddy",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.2",
|
||||
"dotenv": "^16.3.1",
|
||||
"ol": "latest",
|
||||
"vite-plugin-singlefile": "^0.13.5"
|
||||
}
|
||||
}
|
||||
4
openlayers/readme.md
Normal file
4
openlayers/readme.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# OpenLayers + Vite
|
||||
|
||||
First stage of the app is the creation of an OpenLayers app that is inlined into a single file by Vite.
|
||||
This is then an asset that can be interacted with from within React Native.
|
||||
44
openlayers/style.css
Normal file
44
openlayers/style.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
@import "node_modules/ol/ol.css";
|
||||
@import "node_modules/bootstrap/dist/css/bootstrap.min.css";
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.popover {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.new-button {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 1.25em;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.new-button > button {
|
||||
padding: 1.25em;
|
||||
width: fit-content;
|
||||
line-height: 0.2em;
|
||||
}
|
||||
|
||||
#centerPin {
|
||||
position: fixed;
|
||||
bottom: 50%;
|
||||
right: calc(50% - 16px);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#centerPin > svg {
|
||||
left: -25%;
|
||||
}
|
||||
5
openlayers/vite.config.js
Normal file
5
openlayers/vite.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { viteSingleFile } from "vite-plugin-singlefile";
|
||||
|
||||
export default {
|
||||
plugins: [viteSingleFile()],
|
||||
};
|
||||
35
react-native/.gitignore
vendored
Normal file
35
react-native/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# Expo
|
||||
.expo/
|
||||
dist/
|
||||
web-build/
|
||||
|
||||
# Native
|
||||
*.orig.*
|
||||
*.jks
|
||||
*.p8
|
||||
*.p12
|
||||
*.key
|
||||
*.mobileprovision
|
||||
|
||||
# Metro
|
||||
.metro-health-check*
|
||||
|
||||
# debug
|
||||
npm-debug.*
|
||||
yarn-debug.*
|
||||
yarn-error.*
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
22
react-native/App.tsx
Normal file
22
react-native/App.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { StyleSheet } from "react-native";
|
||||
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
|
||||
import Map from "./components/Map";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<SafeAreaView style={styles.container}>
|
||||
<Map />
|
||||
</SafeAreaView>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
258
react-native/UTM_converter.ts
Normal file
258
react-native/UTM_converter.ts
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
// taken from https://www.npmjs.com/package/utm-projection due to expo/npm glitch
|
||||
// all rights aliothor
|
||||
|
||||
var K0 = 0.9996;
|
||||
|
||||
var E = 0.00669438;
|
||||
var E2 = Math.pow(E, 2);
|
||||
var E3 = Math.pow(E, 3);
|
||||
var E_P2 = E / (1 - E);
|
||||
|
||||
var SQRT_E = Math.sqrt(1 - E);
|
||||
var _E = (1 - SQRT_E) / (1 + SQRT_E);
|
||||
var _E2 = Math.pow(_E, 2);
|
||||
var _E3 = Math.pow(_E, 3);
|
||||
var _E4 = Math.pow(_E, 4);
|
||||
var _E5 = Math.pow(_E, 5);
|
||||
|
||||
var M1 = 1 - E / 4 - (3 * E2) / 64 - (5 * E3) / 256;
|
||||
var M2 = (3 * E) / 8 + (3 * E2) / 32 + (45 * E3) / 1024;
|
||||
var M3 = (15 * E2) / 256 + (45 * E3) / 1024;
|
||||
var M4 = (35 * E3) / 3072;
|
||||
|
||||
var P2 = (3 / 2) * _E - (27 / 32) * _E3 + (269 / 512) * _E5;
|
||||
var P3 = (21 / 16) * _E2 - (55 / 32) * _E4;
|
||||
var P4 = (151 / 96) * _E3 - (417 / 128) * _E5;
|
||||
var P5 = (1097 / 512) * _E4;
|
||||
|
||||
var R = 6378137;
|
||||
|
||||
var ZONE_LETTERS = "CDEFGHJKLMNPQRSTUVWXX";
|
||||
|
||||
/**
|
||||
* UTM坐标转WGS84坐标
|
||||
* @param easting
|
||||
* @param northing
|
||||
* @param zoneNum utm带号
|
||||
* @param zoneLetter
|
||||
* @param northern
|
||||
* @param strict
|
||||
* @returns
|
||||
*/
|
||||
export function toLatLon(
|
||||
easting: number,
|
||||
northing: number,
|
||||
zoneNum: number,
|
||||
zoneLetter: string | null = null,
|
||||
northern: boolean = true,
|
||||
strict?: boolean
|
||||
) {
|
||||
strict = strict !== undefined ? strict : true;
|
||||
|
||||
if (!zoneLetter && northern === undefined) {
|
||||
throw new Error("either zoneLetter or northern needs to be set");
|
||||
} else if (zoneLetter && northern !== undefined) {
|
||||
throw new Error("set either zoneLetter or northern, but not both");
|
||||
}
|
||||
|
||||
if (strict) {
|
||||
if (easting < 100000 || 1000000 <= easting) {
|
||||
throw new RangeError(
|
||||
"easting out of range (must be between 100 000 m and 999 999 m)"
|
||||
);
|
||||
}
|
||||
if (northing < 0 || northing > 10000000) {
|
||||
throw new RangeError(
|
||||
"northing out of range (must be between 0 m and 10 000 000 m)"
|
||||
);
|
||||
}
|
||||
}
|
||||
if (zoneNum < 1 || zoneNum > 60) {
|
||||
throw new RangeError("zone number out of range (must be between 1 and 60)");
|
||||
}
|
||||
if (zoneLetter) {
|
||||
zoneLetter = zoneLetter.toUpperCase();
|
||||
if (zoneLetter.length !== 1 || ZONE_LETTERS.indexOf(zoneLetter) === -1) {
|
||||
throw new RangeError(
|
||||
"zone letter out of range (must be between C and X)"
|
||||
);
|
||||
}
|
||||
northern = zoneLetter >= "N";
|
||||
}
|
||||
|
||||
var x = easting - 500000;
|
||||
var y = northing;
|
||||
|
||||
if (!northern) y -= 1e7;
|
||||
|
||||
var m = y / K0;
|
||||
var mu = m / (R * M1);
|
||||
|
||||
var pRad =
|
||||
mu +
|
||||
P2 * Math.sin(2 * mu) +
|
||||
P3 * Math.sin(4 * mu) +
|
||||
P4 * Math.sin(6 * mu) +
|
||||
P5 * Math.sin(8 * mu);
|
||||
|
||||
var pSin = Math.sin(pRad);
|
||||
var pSin2 = Math.pow(pSin, 2);
|
||||
|
||||
var pCos = Math.cos(pRad);
|
||||
|
||||
var pTan = Math.tan(pRad);
|
||||
var pTan2 = Math.pow(pTan, 2);
|
||||
var pTan4 = Math.pow(pTan, 4);
|
||||
|
||||
var epSin = 1 - E * pSin2;
|
||||
var epSinSqrt = Math.sqrt(epSin);
|
||||
|
||||
var n = R / epSinSqrt;
|
||||
var r = (1 - E) / epSin;
|
||||
|
||||
var c = _E * pCos * pCos;
|
||||
var c2 = c * c;
|
||||
|
||||
var d = x / (n * K0);
|
||||
var d2 = Math.pow(d, 2);
|
||||
var d3 = Math.pow(d, 3);
|
||||
var d4 = Math.pow(d, 4);
|
||||
var d5 = Math.pow(d, 5);
|
||||
var d6 = Math.pow(d, 6);
|
||||
|
||||
var latitude =
|
||||
pRad -
|
||||
(pTan / r) *
|
||||
(d2 / 2 - (d4 / 24) * (5 + 3 * pTan2 + 10 * c - 4 * c2 - 9 * E_P2)) +
|
||||
(d6 / 720) * (61 + 90 * pTan2 + 298 * c + 45 * pTan4 - 252 * E_P2 - 3 * c2);
|
||||
var longitude =
|
||||
(d -
|
||||
(d3 / 6) * (1 + 2 * pTan2 + c) +
|
||||
(d5 / 120) * (5 - 2 * c + 28 * pTan2 - 3 * c2 + 8 * E_P2 + 24 * pTan4)) /
|
||||
pCos;
|
||||
|
||||
return {
|
||||
latitude: toDegrees(latitude),
|
||||
longitude: toDegrees(longitude) + zoneNumberToCentralLongitude(zoneNum),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* WGS84坐标转UTM坐标
|
||||
* @param latitude
|
||||
* @param longitude
|
||||
* @param forceZoneNum
|
||||
* @returns
|
||||
*/
|
||||
export function fromLatLon(
|
||||
latitude: number,
|
||||
longitude: number,
|
||||
forceZoneNum?: number
|
||||
) {
|
||||
if (latitude > 84 || latitude < -80) {
|
||||
throw new RangeError(
|
||||
"latitude out of range (must be between 80 deg S and 84 deg N)"
|
||||
);
|
||||
}
|
||||
if (longitude > 180 || longitude < -180) {
|
||||
throw new RangeError(
|
||||
"longitude out of range (must be between 180 deg W and 180 deg E)"
|
||||
);
|
||||
}
|
||||
|
||||
var latRad = toRadians(latitude);
|
||||
var latSin = Math.sin(latRad);
|
||||
var latCos = Math.cos(latRad);
|
||||
|
||||
var latTan = Math.tan(latRad);
|
||||
var latTan2 = Math.pow(latTan, 2);
|
||||
var latTan4 = Math.pow(latTan, 4);
|
||||
|
||||
var zoneNum: number;
|
||||
|
||||
if (forceZoneNum === undefined) {
|
||||
zoneNum = latLonToZoneNumber(latitude, longitude);
|
||||
} else {
|
||||
zoneNum = forceZoneNum;
|
||||
}
|
||||
|
||||
var zoneLetter = latitudeToZoneLetter(latitude);
|
||||
|
||||
var lonRad = toRadians(longitude);
|
||||
var centralLon = zoneNumberToCentralLongitude(zoneNum);
|
||||
var centralLonRad = toRadians(centralLon);
|
||||
|
||||
var n = R / Math.sqrt(1 - E * latSin * latSin);
|
||||
var c = E_P2 * latCos * latCos;
|
||||
|
||||
var a = latCos * (lonRad - centralLonRad);
|
||||
var a2 = Math.pow(a, 2);
|
||||
var a3 = Math.pow(a, 3);
|
||||
var a4 = Math.pow(a, 4);
|
||||
var a5 = Math.pow(a, 5);
|
||||
var a6 = Math.pow(a, 6);
|
||||
|
||||
var m =
|
||||
R *
|
||||
(M1 * latRad -
|
||||
M2 * Math.sin(2 * latRad) +
|
||||
M3 * Math.sin(4 * latRad) -
|
||||
M4 * Math.sin(6 * latRad));
|
||||
var easting =
|
||||
K0 *
|
||||
n *
|
||||
(a +
|
||||
(a3 / 6) * (1 - latTan2 + c) +
|
||||
(a5 / 120) * (5 - 18 * latTan2 + latTan4 + 72 * c - 58 * E_P2)) +
|
||||
500000;
|
||||
var northing =
|
||||
K0 *
|
||||
(m +
|
||||
n *
|
||||
latTan *
|
||||
(a2 / 2 +
|
||||
(a4 / 24) * (5 - latTan2 + 9 * c + 4 * c * c) +
|
||||
(a6 / 720) * (61 - 58 * latTan2 + latTan4 + 600 * c - 330 * E_P2)));
|
||||
if (latitude < 0) northing += 1e7;
|
||||
|
||||
return {
|
||||
easting: easting,
|
||||
northing: northing,
|
||||
zoneNum: zoneNum,
|
||||
zoneLetter: zoneLetter,
|
||||
};
|
||||
}
|
||||
|
||||
function latitudeToZoneLetter(latitude: number) {
|
||||
if (-80 <= latitude && latitude <= 84) {
|
||||
return ZONE_LETTERS[Math.floor((latitude + 80) / 8)];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function latLonToZoneNumber(latitude: number, longitude: number) {
|
||||
if (56 <= latitude && latitude < 64 && 3 <= longitude && longitude < 12)
|
||||
return 32;
|
||||
|
||||
if (72 <= latitude && latitude <= 84 && longitude >= 0) {
|
||||
if (longitude < 9) return 31;
|
||||
if (longitude < 21) return 33;
|
||||
if (longitude < 33) return 35;
|
||||
if (longitude < 42) return 37;
|
||||
}
|
||||
|
||||
return Math.floor((longitude + 180) / 6) + 1;
|
||||
}
|
||||
|
||||
function zoneNumberToCentralLongitude(zoneNum: number) {
|
||||
return (zoneNum - 1) * 6 - 180 + 3;
|
||||
}
|
||||
|
||||
function toDegrees(rad: number) {
|
||||
return (rad / Math.PI) * 180;
|
||||
}
|
||||
|
||||
function toRadians(deg: number) {
|
||||
return (deg * Math.PI) / 180;
|
||||
}
|
||||
36
react-native/app.json
Normal file
36
react-native/app.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"expo": {
|
||||
"name": "beerbuddy",
|
||||
"slug": "beerbuddy",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"assetBundlePatterns": ["**/*"],
|
||||
"ios": {
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#000000"
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
"expo-location",
|
||||
{
|
||||
"locationAlwaysAndWhenInUsePermission": "Allow $(PRODUCT_NAME) to use your location."
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
react-native/assets/adaptive-icon.png
Normal file
BIN
react-native/assets/adaptive-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
react-native/assets/favicon.png
Normal file
BIN
react-native/assets/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
react-native/assets/icon.png
Normal file
BIN
react-native/assets/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
71
react-native/assets/index.html
Normal file
71
react-native/assets/index.html
Normal file
File diff suppressed because one or more lines are too long
BIN
react-native/assets/splash.png
Normal file
BIN
react-native/assets/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
6
react-native/babel.config.js
Normal file
6
react-native/babel.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = function(api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
};
|
||||
};
|
||||
104
react-native/components/Map.tsx
Normal file
104
react-native/components/Map.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { useAssets } from "expo-asset";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useWindowDimensions, Alert, Button } from "react-native";
|
||||
import WebView, { WebViewMessageEvent } from "react-native-webview";
|
||||
import * as Location from "expo-location";
|
||||
import { fromLatLon, toLatLon } from "../UTM_converter";
|
||||
|
||||
const Map = () => {
|
||||
const [assets] = useAssets([require("../assets/index.html")]);
|
||||
const [htmlString, setHtmlString] = useState<string>();
|
||||
|
||||
const dimensions = useWindowDimensions();
|
||||
const webViewRef = useRef<WebView | null>();
|
||||
|
||||
// gets location
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const { status } = await Location.requestForegroundPermissionsAsync();
|
||||
if (status !== "granted") return;
|
||||
const location = await Location.getCurrentPositionAsync({
|
||||
distanceInterval: 0, // for IOS
|
||||
accuracy: Location.Accuracy.High,
|
||||
timeInterval: 3000, // for Android
|
||||
});
|
||||
// makes injectable javascript string
|
||||
const str = `window.passLocation(${location.coords.longitude}, ${location.coords.latitude}); true()`;
|
||||
// passes string to webview - there it is handled by OpenLayers to change the current location
|
||||
webViewRef.current?.injectJavaScript(str);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// loads assets
|
||||
useEffect(() => {
|
||||
if (assets) {
|
||||
fetch(assets[0].localUri || "")
|
||||
.then((res) => res.text())
|
||||
.then((html) => setHtmlString(html));
|
||||
}
|
||||
}, [assets]);
|
||||
|
||||
// exits if no map passed in
|
||||
if (!htmlString) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const messageHandler = (event: WebViewMessageEvent) => {
|
||||
if (typeof event.nativeEvent.data == "string") {
|
||||
const message = event.nativeEvent.data;
|
||||
if (message === "new pin start") {
|
||||
Alert.alert(
|
||||
"New Pin",
|
||||
`Please select location for new pin then press "OK"`,
|
||||
[
|
||||
{
|
||||
text: "OK",
|
||||
onPress: () => {
|
||||
// makes injectable javascript string
|
||||
const str = `window.placePin(); true()`;
|
||||
// passes string to webview - there it is handled by OpenLayers to change the current location
|
||||
webViewRef.current?.injectJavaScript(str);
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
} else if (message.startsWith(`@`)) {
|
||||
const coords = message.slice(1).split(",");
|
||||
const lon = Number(coords[0]);
|
||||
const lat = Number(coords[1]);
|
||||
const UTM = fromLatLon(lat, lon);
|
||||
Alert.alert(
|
||||
"Coords",
|
||||
`${UTM.easting}, ${UTM.northing}, ${UTM.zoneNum}`
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<WebView
|
||||
ref={(currentRef) => (webViewRef.current = currentRef)}
|
||||
injectedJavascript=""
|
||||
source={{
|
||||
html: htmlString,
|
||||
}}
|
||||
javaScriptEnabled
|
||||
style={{
|
||||
width: dimensions.width,
|
||||
height: dimensions.height,
|
||||
}}
|
||||
scrollEnabled={false}
|
||||
overScrollMode="never"
|
||||
showsVerticalScrollIndicator={false}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
scalesPageToFit={false}
|
||||
containerStyle={{
|
||||
flex: 1,
|
||||
}}
|
||||
onMessage={messageHandler}
|
||||
webviewDebuggingEnabled={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Map;
|
||||
35
react-native/index.html
Normal file
35
react-native/index.html
Normal file
File diff suppressed because one or more lines are too long
22666
react-native/package-lock.json
generated
Normal file
22666
react-native/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
37
react-native/package.json
Normal file
37
react-native/package.json
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "beerbuddy",
|
||||
"version": "1.0.0",
|
||||
"main": "node_modules/expo/AppEntry.js",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/webpack-config": "^19.0.0",
|
||||
"expo": "~49.0.15",
|
||||
"expo-asset": "^8.10.1",
|
||||
"expo-constants": "^14.4.2",
|
||||
"expo-linking": "^6.0.0",
|
||||
"expo-location": "~16.1.0",
|
||||
"expo-router": "^2.0.14",
|
||||
"expo-status-bar": "~1.6.0",
|
||||
"install": "^0.13.0",
|
||||
"npx": "^10.2.2",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-native": "0.72.6",
|
||||
"react-native-gesture-handler": "^2.14.0",
|
||||
"react-native-safe-area-context": "^4.7.4",
|
||||
"react-native-screens": "^3.27.0",
|
||||
"react-native-web": "~0.19.6",
|
||||
"react-native-webview": "^13.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
"@types/react": "~18.2.14",
|
||||
"typescript": "^5.1.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
6
react-native/tsconfig.json
Normal file
6
react-native/tsconfig.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
7
react-native/webpack.config.js
Normal file
7
react-native/webpack.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
|
||||
|
||||
module.exports = async function (env, argv) {
|
||||
const config = await createExpoWebpackConfigAsync(env, argv);
|
||||
// Customize the config before returning it.
|
||||
return config;
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue