Skip to content

Commit 5563e76

Browse files
davidsklar99davidsklar99
authored
Merge pull request #49 from UW-Macrostrat/updates
Styling and Getting Production Ready
2 parents b7408e1 + b4cbd45 commit 5563e76

File tree

11 files changed

+360
-44
lines changed

11 files changed

+360
-44
lines changed

‎.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
VITE_MAPBOX_API_TOKEN='<your-api-key>'
33
VITE_MACROSTRAT_TILESERVER_DOMAIN='https://tileserver.staging.svc.macrostrat.org'
44
VITE_MACROSTRAT_API_DOMAIN='https://macrostrat.org'
5+
ROCKD_API_URL = 'https://dev.rockd.org/api/v2/'
56

67
# Needed for map ingestion system
78
# VITE_MACROSTRAT_INGEST_API=https://dev.macrostrat.org/api/ingest

‎pages/checkin/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
22
import { LngLatCoords } from "@macrostrat/map-interface";
33
import { useEffect, useState, useRef } from 'react';
44
import 'mapbox-gl/dist/mapbox-gl.css';
5-
import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../index";
5+
import { BlankImage, imageExists, Footer, getProfilePicUrl, useRockdAPI, getImageUrl } from "../index";
66
import { Icon } from "@blueprintjs/core";
77
import styles from "../main.module.sass";
88
import { SETTINGS } from "@macrostrat-web/settings";
@@ -43,7 +43,7 @@ export function Checkins({checkinID}) {
4343
lng: checkin.lng
4444
}
4545

46-
let profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-picture"});
46+
let profile_pic = h(BlankImage, {src: getProfilePicUrl(checkin.person_id), className: "profile-picture"});
4747

4848
// format rating
4949
let ratingArr = [];
@@ -58,7 +58,7 @@ export function Checkins({checkinID}) {
5858
let observations = [];
5959

6060
// add checkin photo and notes
61-
const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
61+
const imageSrc = getImageUrl(checkin.person_id, checkin.photo);
6262
const headerImgUrl = checkin.photo && imageExists(imageSrc) ? imageSrc : null;
6363
const headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
6464

@@ -75,7 +75,7 @@ export function Checkins({checkinID}) {
7575
checkin.observations.forEach(observation => {
7676
if(Object.keys(observation.rocks).length != 0) {
7777
// if photo exists
78-
const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo;
78+
const imageSrc = getImageUrl(checkin.person_id, observation.photo);
7979
const observationURL = observation.photo && imageExists(imageSrc) ? imageSrc : null;
8080
let observationBody = observationFooter(observation);
8181

@@ -102,7 +102,7 @@ export function Checkins({checkinID}) {
102102
// overlay
103103
let overlay = h('div', {className: 'overlay'}, [
104104
h('div.overlay-header', [
105-
h(Icon, {className: "left-arrow back-arrow", icon: "arrow-left", iconSize: "5vh", style: {color: 'black'},
105+
h(Icon, {className: "back-arrow", icon: "arrow-left", iconSize: "5vh", style: {color: 'black'},
106106
onClick: () => {
107107
setOverlayOpen(!overlayOpen);
108108
}
@@ -264,7 +264,7 @@ function Map({center, showMap, setShowMap}) {
264264
]
265265
),
266266
h('div', {className: 'banner'}, [
267-
h(Icon, {className: "left-arrow banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}, onClick: () => {
267+
h(Icon, {className: "banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}, onClick: () => {
268268
setShowMap(!showMap);
269269
}}),
270270
h(PanelCard, {className: "banner-button", onClick: () => {

‎pages/explore/+Page.client.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import { createCheckins, useRockdAPI, Image } from "../index";
2020
import "./main.sass";
2121
import "@macrostrat/style-system";
2222
import { MapPosition } from "@macrostrat/mapbox-utils";
23+
import { configDefinitionsBuiltInGlobal } from "vike/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn";
24+
import { CONTEXTMENU_WARN_DECORATOR_NEEDS_REACT_ELEMENT } from "@blueprintjs/core/lib/esm/legacy/contextMenuTargetLegacy";
2325

2426
const h = hyper.styled(styles);
2527

@@ -106,7 +108,9 @@ function weaverStyle(type: object) {
106108
filter: ['has', 'n'],
107109
layout: {
108110
'text-field': ['get', 'n'],
109-
'text-size': 10
111+
'text-size': 10,
112+
'text-allow-overlap': true,
113+
'text-ignore-placement': false,
110114
},
111115
paint: {
112116
"text-color": "#fff"
@@ -145,6 +149,7 @@ function WeaverMap({
145149
const [showFilter, setFilter] = useState(false);
146150
const [filteredCheckins, setFilteredCheckins] = useState(false);
147151
const [filteredData, setFilteredData] = useState(null);
152+
const [autocompleteOpen, setAutocompleteOpen] = useState(false);
148153

149154
// overlay
150155
const [inspectPosition, setInspectPosition] = useState<mapboxgl.LngLat | null>(null);
@@ -176,7 +181,7 @@ function WeaverMap({
176181

177182
const toolbar = h(Toolbar, {showSettings, setSettings, showFilter, setFilter});
178183
const contextPanel = h(ContextPanel, {showSettings, showSatelite, setSatelite, showOverlay, setOverlay});
179-
const autoComplete = h(AutoComplete, {showFilter, setFilteredCheckins, setFilteredData});
184+
const autoComplete = h(AutoComplete, {showFilter, setFilteredCheckins, setFilteredData, autocompleteOpen, setAutocompleteOpen});
180185

181186
const filteredCheckinsComplete = h(createFilteredCheckins, {filteredData, setInspectPosition});
182187

@@ -205,7 +210,7 @@ function WeaverMap({
205210
h("div.overlay-div", [
206211
h('div.autocomplete-container', [
207212
autoComplete,
208-
filteredData ? h("div.filtered-checkins",filteredCheckinsComplete) : null,
213+
filteredData && !autocompleteOpen ? h("div.filtered-checkins",filteredCheckinsComplete) : null,
209214
])
210215
]),
211216
])
@@ -376,7 +381,7 @@ function FeatureDetails({setInspectPosition}) {
376381
}
377382
}, [bounds]);
378383

379-
if (result == null) return h(Spinner);
384+
if (result == null) return h(Spinner, { className: "loading-spinner" });
380385
result = result.success.data;
381386

382387
checkins = createCheckins(result, mapRef, setInspectPosition);
@@ -494,15 +499,14 @@ function createFilteredCheckins(filteredData, setInspectPosition) {
494499
return createCheckins(filteredData?.filteredData, mapRef, setInspectPosition);
495500
}
496501

497-
function AutoComplete({showFilter, setFilteredCheckins, setFilteredData}) {
502+
function AutoComplete({showFilter, setFilteredCheckins, setFilteredData, autocompleteOpen, setAutocompleteOpen}) {
498503
const mapRef = useMapRef();
499504
const map = mapRef.current;
500505
const [filters, setFilters] = useState([]);
501-
const [autocompleteOpen, setAutocompleteOpen] = useState(true);
502506
const [input, setInput] = useState('');
503507
const [close, setClose] = useState(false);
504508

505-
const person_data = getPersonCheckins(filters.length > 0 ? filters[0].id : 0)?.success.data;
509+
const person_data = getPersonCheckins(filters.length > 0 ? filters.map(item => item.id).join(',') : 0)?.success.data;
506510
const foundData = person_data && person_data.length > 0;
507511

508512
console.log("person_data", person_data);
@@ -602,7 +606,7 @@ function AutoComplete({showFilter, setFilteredCheckins, setFilteredData}) {
602606
h('ul', filters.map((item) => {
603607
return h("div.filter-item", [
604608
h('li', item.name),
605-
h(Icon, { icon: "cross", style: {color: "red"}, onClick: () => {
609+
h(Icon, { className: 'red-cross', icon: "cross", style: {color: "red"}, onClick: () => {
606610
setFilters(filters.filter((filter) => filter != item));
607611
if(filters.length == 1) {
608612
setClose(true);

‎pages/explore/main.sass‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -316,15 +316,12 @@ body
316316
&:hover
317317
background-color: var(--panel-background-color)
318318

319-
.red-bar
320-
width: 15%
321-
height: 7px
322-
border-radius: 15px
323-
margin: auto
324-
background-color: red
325-
margin-right: 10px
319+
.red-cross
326320
cursor: pointer
327321

322+
.loading-spinner
323+
margin-top: 50px
324+
328325

329326
.autocomplete-wrapper
330327
background-color: var(--panel-background-color)

‎pages/index.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export function createCheckins(result, mapRef, setInspectPosition) {
8989
}
9090

9191
let image;
92-
const imgSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
92+
const imgSrc = getImageUrl(checkin.person_id, checkin.photo);
9393
const showImage = checkin.photo
9494

9595
if (showImage) {
@@ -139,7 +139,7 @@ export function createCheckins(result, mapRef, setInspectPosition) {
139139
}, [
140140
h('h1', {className: 'stop-name'}, stop_name),
141141
h('div', {className: 'checkin-header'}, [
142-
!stop_name ? h('h3', {className: 'profile-pic'}, h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-pic"})) : null,
142+
!stop_name ? h('h3', {className: 'profile-pic'}, h(BlankImage, {src: getProfilePicUrl(checkin.person_id), className: "profile-pic"})) : null,
143143
h('div', {className: 'checkin-info'}, [
144144
!stop_name ? h('h3', {className: 'name'}, checkin.first_name + " " + checkin.last_name) : null,
145145
h('h4', {className: 'edited'}, checkin.created),
@@ -179,7 +179,7 @@ export function createCheckins(result, mapRef, setInspectPosition) {
179179
return checkins;
180180
}
181181
export const apiURLOld = "https://rockd.org/api/v2/"; // old route
182-
export const apiURL = "https://rockd.dev.svc.macrostrat.org/api/v2/"; // new route
182+
const apiURL = import.meta.env.ROCKD_API_URL; // new route
183183

184184
export function useRockdAPI(src) {
185185
console.log("API CALLED")
@@ -195,4 +195,12 @@ export function imageExists(url) {
195195
return true;
196196
}
197197
return false
198+
}
199+
200+
export function getImageUrl(person_id, photo_id) {
201+
return apiURL + "protected/image/" + person_id + "/thumb_large/" + photo_id;
202+
}
203+
204+
export function getProfilePicUrl(person_id) {
205+
return apiURL + "protected/gravatar/" + person_id;
198206
}

‎pages/main.module.sass‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -230,34 +230,28 @@ body
230230
display: flex
231231
justify-content: center
232232

233+
svg
234+
filter: var(--anti-img-color)
235+
233236
.likes-container
234237
display: grid
235238
grid-template-columns: 50% 50%
236239
width: 25%
237240
justify-content: end
238241
place-items: center
239242

240-
.likes-image
241-
width: 40px
242-
243243
.comments-container
244244
display: grid
245245
grid-template-columns: 50% 50%
246246
width: 25%
247247
place-items: center
248248

249-
.comments-image
250-
width: 40px
251-
252249
.observations-container
253250
display: grid
254251
grid-template-columns: 50% 50%
255252
width: 25%
256253
place-items: center
257254

258-
.observations-image
259-
width: 40px
260-
261255
.marker
262256
height: 7vh
263257
display: grid

‎pages/photo/@id/+Page.client.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import h from "@macrostrat/hyper";
22
import { usePageContext } from 'vike-react/usePageContext';
33
import { Photos } from "../index";
4-
import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../../index";
5-
64

75
export function Page() {
86
const pageContext = usePageContext();

‎pages/photo/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
22
import { LngLatCoords } from "@macrostrat/map-interface";
33
import { useState, useEffect } from 'react';
44
import 'mapbox-gl/dist/mapbox-gl.css';
5-
import { BlankImage, imageExists, Image, apiURL, useRockdAPI } from "../index";
5+
import { BlankImage, imageExists, Image, getImageUrl, useRockdAPI } from "../index";
66
import { Icon } from "@blueprintjs/core";
77
import styles from "../main.module.sass";
88
import "./main.sass";
@@ -47,7 +47,7 @@ export function Photos({photoID}) {
4747
let observations = [];
4848

4949
// add checkin photo and notes
50-
const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo;
50+
const imageSrc = getImageUrl(checkin.person_id, checkin.photo);
5151
const headerImgUrl = checkin.photo && imageExists(imageSrc) ? imageSrc : null;
5252
const headerBody = h('div', {className: 'observation-body-container'}, [
5353
h(Icon, {className: "close-body", icon: "ban-circle", onClick: () => {
@@ -71,7 +71,7 @@ export function Photos({photoID}) {
7171
if(Object.keys(observation.rocks).length != 0) {
7272
photoIDArr.push(observation.photo);
7373
// if photo exists
74-
const imageSrc = apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo;
74+
const imageSrc = getImageUrl(checkin.person_id, observation.photo);
7575
const observationURL = observation.photo && imageExists(imageSrc) ? imageSrc : null;
7676
let observationBody = h(observationFooter, {observation, setBody});
7777

‎pages/test/@id/+Page.client.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import h from "@macrostrat/hyper";
22
import { usePageContext } from 'vike-react/usePageContext';
33
import { Photos } from "../index";
4-
import { BlankImage, imageExists, Footer, apiURL, apiURLOld, useRockdAPI } from "../../index";
54

65

76
export function Page() {

‎pages/trip/index.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
22
import { useEffect, useState, useRef } from 'react';
33
import mapboxgl from 'mapbox-gl';
44
import 'mapbox-gl/dist/mapbox-gl.css';
5-
import { BlankImage, createCheckins, apiURL, useRockdAPI, Image } from "../index";
5+
import { BlankImage, createCheckins, getProfilePicUrl, useRockdAPI, Image } from "../index";
66
import styles from "../main.module.sass";
77
import "@macrostrat/style-system";
88
import { SETTINGS } from "@macrostrat-web/settings";
@@ -16,8 +16,6 @@ import {
1616
PanelCard,
1717
} from "@macrostrat/map-interface";
1818
import { useMapRef } from "@macrostrat/mapbox-react";
19-
import { set } from "react-datepicker/dist/date_utils";
20-
import { s } from "vite/dist/node/types.d-aGj9QkWt";
2119

2220
const h = hyper.styled(styles);
2321

@@ -127,7 +125,7 @@ function useMapStyle({showSatelite}) {
127125
function SideBar({data}) {
128126
const mapRef = useMapRef();
129127
const map = mapRef.current;
130-
const profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + data.person_id, className: "profile-pic-header"});
128+
const profile_pic = h(BlankImage, {src: getProfilePicUrl(data.person_id), className: "profile-pic-header"});
131129
const stops = data.stops;
132130

133131
if(!map) return h("div", {className: "stop-container loading2"}, [
@@ -195,7 +193,7 @@ function SideBar({data}) {
195193
h('h4', {className: 'edited'}, "Edited " + data.updated),
196194
]),
197195
h('div', {className: 'download-button'}, [
198-
h('a', {className: 'kmz', href: apiURL + "/trips/" + data.trip_id + "?format=kmz"}, "DOWNLOAD KMZ"),
196+
h('a', {className: 'kmz', href: import.meta.env.ROCKD_API_URL + "/trips/" + data.trip_id + "?format=kmz"}, "DOWNLOAD KMZ"),
199197
]),
200198
]),
201199
h("div.details", [

0 commit comments

Comments
 (0)