Commit 6f2060ac authored by Paul Colin Hennig's avatar Paul Colin Hennig
Browse files

add location chooser

parent ffbc4755
......@@ -53,6 +53,10 @@ button.wideButton {
border-radius: 0;
}
button:disabled {
opacity: 50%;
}
html,
body,
#root,
......
......@@ -30,6 +30,7 @@ export default class App extends Component {
db: null,
listType: "single",
chatScrollState: [],
settings: [],
events: [],
templateEvents: [],
loactions: [],
......@@ -247,6 +248,23 @@ export default class App extends Component {
}
};
savePlace = (place, history) => {
this.setState(({ settings }) => {
settings.places.push(place);
this.state.db.settings.update("places", { value: settings.places });
return { settings };
});
history.goBack();
};
removePlace = index => {
this.setState(({ settings }) => {
settings.places = settings.places.filter((e, i) => index !== i);
console.log(settings.places, index);
this.state.db.settings.update("places", { value: settings.places });
return { settings };
});
};
render() {
/*
document.addEventListener("contextmenu", (event) => {
......@@ -280,7 +298,7 @@ export default class App extends Component {
exact
path="/map"
component={routeProps => {
return <Map {...routeProps} defaultTheme={themes[0]} theme={theme} />;
return <Map {...routeProps} savePlace={this.savePlace} defaultTheme={themes[0]} theme={theme} />;
}}
></Route>
<Route
......@@ -442,7 +460,7 @@ export default class App extends Component {
component={routeProps => {
return (
<div>
<Settings {...routeProps}></Settings>
<Settings settings={this.state.settings} removePlace={this.removePlace} {...routeProps}></Settings>
<Menu></Menu>
</div>
);
......
......@@ -8,13 +8,13 @@ const defaultReactions = ["🖤", "🤘", "👍", "👎", "😂"];
const defaultTheme = 0;
db.version(7).stores({
events: `id, public.timeStart`,
templateEvents: `id`,
messages: `id`,
settings: `id`,
locations: `id`,
templateLocations: `id`,
libsignalStore: `key`,
events: `id, public.timeStart`,
templateEvents: `id`,
messages: `id`,
settings: `id`,
locations: `id`,
templateLocations: `id`,
libsignalStore: `key`
});
//only add default theme if the key is not present as it might have been changed
......@@ -23,19 +23,20 @@ db.settings.add({ id: "theme", value: defaultTheme }).catch(() => {});
//only add the default reactions if the key is not present as it might have been changed
db.settings.add({ id: "reactions", value: defaultReactions }).catch(() => {});
events.map((event) => {
db.events.update(event.id, { public: event }).then((updated) => {
if (!updated) db.events.put({ id: event.id, public: event, private: {} });
});
return null;
db.settings.add({ id: "places", value: [] }).catch(() => {});
events.map(event => {
db.events.update(event.id, { public: event }).then(updated => {
if (!updated) db.events.put({ id: event.id, public: event, private: {} });
});
return null;
});
locations.map((location) => {
db.locations.update(location.id, { public: location }).then((updated) => {
if (!updated)
db.locations.put({ id: location.id, public: location, private: {} });
});
return null;
locations.map(location => {
db.locations.update(location.id, { public: location }).then(updated => {
if (!updated) db.locations.put({ id: location.id, public: location, private: {} });
});
return null;
});
export default db;
......@@ -72,14 +72,15 @@
.Interface .bottomWrapper {
position: absolute;
bottom: 30px;
height: 160px;
bottom: 0px;
height: 200px;
left: 0px;
right: 0px;
text-align: center;
background: var(--background);
}
.Interface .chooseLocation input {
.Interface .choosePlace input {
max-width: 90vw;
box-sizing: border-box;
position: relative;
......@@ -90,11 +91,13 @@
display: inline;
}
.Interface .chooseLocation .centerCords {
.Interface .choosePlace .centerCords {
margin-top: 5px;
font-size: 20px;
margin-bottom: 5px;
}
.Interface .chooseLocation svg {
.Interface .choosePlace svg {
position: absolute;
top: 50%;
left: 50%;
......@@ -103,7 +106,7 @@
pointer-events: none;
filter: drop-shadow(0px 0px 5px black);
}
.Interface .chooseLocation button {
.Interface .choosePlace button {
position: relative;
}
......
......@@ -8,7 +8,9 @@ config.autoAddCss = false;
export default class Interface extends Component {
state = {
search: false
search: false,
cords: this.props.centerCords?.lng + ", " + this.props.centerCords?.lat,
placeName: ""
};
openSearch = () => {
......@@ -35,16 +37,25 @@ export default class Interface extends Component {
<button title={!this.props.showLabels ? "Show Labels" : "Hide Labels"} onClick={this.props.switchLabels} className="switchLabels mapButton">
{textIcon(28, !this.props.showLabels)}
</button>
{this.props?.location?.hash === "#chooseLocations" ? (
<div className="chooseLocation">
{this.props?.location?.hash === "#choosePlace" ? (
<div className="choosePlace">
<div className="crosshair">
<FontAwesomeIcon icon={faCrosshairs}></FontAwesomeIcon>
</div>
<div className="bottomWrapper">
<input placeholder="Name this place" />
<input value={this.props.centerCords?.lng + ", " + this.props.centerCords?.lat} className="centerCords" />
<br />
<input onChange={e => this.setState({ placeName: e.target.value })} placeholder="Name this place" value={this.state.placeName} />
<div className="centerCords">{this.props.centerCords?.lng + ", " + this.props.centerCords?.lat}</div>
<button className="wideButton">Save</button>
<button
disabled={this.state.placeName ? false : true}
onClick={() => {
this.props.savePlace({ name: this.state.placeName, lng: this.props.centerCords?.lng, lat: this.props.centerCords?.lat }, this.props.history);
}}
className="wideButton"
>
Save
</button>
</div>
</div>
) : (
......
......@@ -9,7 +9,7 @@ export default class Map extends Component {
constructor(props) {
super(props);
this.state = {
centerCords: { longitude: 0, latitude: 0 },
centerCords: { lng: 48.389265, lat: 10.887816 },
locations: null,
height: window.innerHeight,
selected: 0,
......@@ -145,6 +145,7 @@ export default class Map extends Component {
<Attribution></Attribution>
<div style={{ height: window.innerHeight }} ref={el => (this.mapContainer = el)} className="mapContainer" />
<Interface
savePlace={this.props.savePlace}
centerCords={this.state.centerCords}
history={this.props.history}
location={this.props.location}
......
......@@ -4,6 +4,12 @@ import ThankYou from "../thankYou/ThankYou";
import Faq from "./Faq";
import Help from "./Help";
import MetaTags from "../metaTags/MetaTags";
import { config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMinusCircle } from "@fortawesome/free-solid-svg-icons";
config.autoAddCss = false;
export default class Settings extends Component {
render() {
return (
......@@ -16,9 +22,21 @@ export default class Settings extends Component {
<label htmlFor="nickname">nickname (public / required / length 2-15)</label>
<input placeholder="Till Lindefrau" name="nickname" type="text" />
<br />
<label htmlFor="location">locations (private / required)</label>
<button name="location" onClick={() => this.props.history.push({ hash: "#chooseLocations", pathname: "/map" })}>
Choose on map
<label htmlFor="place">places (private / required)</label>
<ol>
{this.props.settings.places?.map((place, i) => {
return (
<li key={i}>
<span>{place.name}</span>
<span onClick={() => this.props.removePlace(i)}>
<FontAwesomeIcon icon={faMinusCircle}></FontAwesomeIcon>
</span>
</li>
);
})}
</ol>
<button name="place" onClick={() => this.props.history.push({ hash: "#choosePlace", pathname: "/map" })}>
Add Place
</button>
<br />
<label htmlFor="tags">tags (public / optional / length 2-15)</label>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment