diff --git a/.env.example b/.env.example index 407e2799e..41e45a62f 100644 --- a/.env.example +++ b/.env.example @@ -1,8 +1,9 @@ # Required variables VITE_MAPBOX_API_TOKEN='' VITE_MACROSTRAT_TILESERVER_DOMAIN='https://tileserver.staging.svc.macrostrat.org' +VITE_MACROSTRAT_INSTANCE='Development' VITE_MACROSTRAT_API_DOMAIN='https://macrostrat.org' -ROCKD_API_URL = 'https://dev.rockd.org/api/v2/' +VITE_ROCKD_API_URL='https://dev.rockd.org/api/v2/' # Needed for map ingestion system # VITE_MACROSTRAT_INGEST_API=https://dev.macrostrat.org/api/ingest @@ -12,9 +13,6 @@ ROCKD_API_URL = 'https://dev.rockd.org/api/v2/' # VITE_MACROSTRAT_TILESERVER_V2='https://dev.macrostrat.org/tiles' # VITE_MACROSTRAT_TILESERVER_V1='https://tiles.macrostrat.org' -# Needed for paleogeography -# VITE_CORELLE_API_DOMAIN='https://rotate.macrostrat.org' - # Needed for non-root installations (deprecated) # PUBLIC_URL='/' diff --git a/packages/settings/index.ts b/packages/settings/index.ts index 4bd7856db..b8bef822c 100644 --- a/packages/settings/index.ts +++ b/packages/settings/index.ts @@ -1,10 +1,13 @@ /* Client-side code to access configuration variables */ import { getRuntimeConfig } from "./utils"; +export const rockdApiURL = getRuntimeConfig("ROCKD_API_URL"); +export const rockdApiOldURL = "https://rockd.org/api/v2/"; + export const darkMapURL = "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true"; -export const baseMapURL = - "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true"; +export const whiteMapURL = + "mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i?optimize=true"; export const satelliteMapURL = "mapbox://styles/jczaplewski/cl51esfdm000e14mq51erype3?optimize=true"; @@ -14,49 +17,22 @@ export const burwellTileDomain = getRuntimeConfig( export const apiDomain = getRuntimeConfig("MACROSTRAT_API_DOMAIN"); export const tileserverDomain = burwellTileDomain; -export const gddDomain = "https://xdd.wisc.edu"; -export const pbdbDomain = "https://paleobiodb.org"; - export const mapboxAccessToken = getRuntimeConfig("MAPBOX_API_TOKEN"); export const baseURL = getRuntimeConfig("BASE_URL", "/"); -export const apiV2Prefix = getRuntimeConfig( - "MACROSTRAT_API_V2", - apiDomain + "/api/v2" -); - export const ingestPrefix = getRuntimeConfig( "MACROSTRAT_INGEST_API", apiDomain + "/api/ingest" ); -export const cdrPrefix = getRuntimeConfig("CDR_API"); - -export const mapPagePrefix = "/map"; -export const routerBasename = "/map"; - -export const postgrestPrefix = getRuntimeConfig( - "MACROSTRAT_POSTGREST_PREFIX", - apiDomain + "/api/pg" -); - -export const macrostratInstance = getRuntimeConfig("MACROSTRAT_INSTANCE"); - -export const elevationLayerURL = getRuntimeConfig("ELEVATION_LAYER_URL"); - /** Legacy settings object */ export const SETTINGS = { - cdrPrefix, + rockdApiURL, darkMapURL, - baseMapURL, + whiteMapURL, satelliteMapURL, burwellTileDomain, - apiDomain, - gddDomain, - pbdbDomain, mapboxAccessToken, - apiV2Prefix, - mapPagePrefix, - routerBasename, + rockdApiOldURL }; diff --git a/pages/checkin/index.ts b/pages/checkin/index.ts index 1a3afe424..2b22ee484 100644 --- a/pages/checkin/index.ts +++ b/pages/checkin/index.ts @@ -6,7 +6,6 @@ import { BlankImage, imageExists, Footer, getProfilePicUrl, useRockdAPI, getImag import { Icon } from "@blueprintjs/core"; import styles from "../main.module.sass"; import { SETTINGS } from "@macrostrat-web/settings"; -import { DarkModeButton } from "@macrostrat/ui-components"; import "./main.sass"; import "@macrostrat/style-system"; import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface"; @@ -18,10 +17,8 @@ import { LithologyList } from "@macrostrat/data-components"; const h = hyper.styled(styles); export function Checkins({checkinID}) { - const checkinData = useRockdAPI("protected/checkins?checkin_id=" + checkinID); + const checkinData = useRockdAPI("/protected/checkins?checkin_id=" + checkinID); const [overlayOpen, setOverlayOpen] = useState(false); - const [overlayImage, setOverlayImage] = useState(null); - const [overlayBody, setOverlayBody] = useState(null); const [showMap, setShowMap] = useState(false); if (!checkinData) { @@ -108,10 +105,6 @@ export function Checkins({checkinID}) { } }), ]), - h('div.overlay-body', [ - h(BlankImage, { className: 'observation-image', src: overlayImage }), - overlayBody, - ]) ]); const map = h(Map, {center, showMap, setShowMap}); diff --git a/pages/explore/+Page.client.ts b/pages/explore/+Page.client.ts index 3e478dbee..0bf40b6e9 100644 --- a/pages/explore/+Page.client.ts +++ b/pages/explore/+Page.client.ts @@ -20,8 +20,6 @@ import { createCheckins, useRockdAPI, Image } from "../index"; import "./main.sass"; import "@macrostrat/style-system"; import { MapPosition } from "@macrostrat/mapbox-utils"; -import { configDefinitionsBuiltInGlobal } from "vike/dist/esm/node/plugin/plugins/importUserCode/v1-design/getVikeConfig/configDefinitionsBuiltIn"; -import { CONTEXTMENU_WARN_DECORATOR_NEEDS_REACT_ELEMENT } from "@blueprintjs/core/lib/esm/legacy/contextMenuTargetLegacy"; const h = hyper.styled(styles); @@ -59,7 +57,7 @@ function weaverStyle(type: object) { sources: { weaver: { type: "vector", - tiles: [ "https://dev.rockd.org/api/v2/checkin-tile/{z}/{x}/{y}?cluster=true"], + tiles: [ SETTINGS.rockdApiURL + "/checkin-tile/{z}/{x}/{y}?cluster=true"], } }, layers: [ @@ -176,7 +174,7 @@ function WeaverMap({ // handle selected checkins const checkinData = useRockdAPI( - selectedCheckin ? `protected/checkins?checkin_id=${selectedCheckin}` : null + selectedCheckin ? `/protected/checkins?checkin_id=${selectedCheckin}` : null ); const toolbar = h(Toolbar, {showSettings, setSettings, showFilter, setFilter}); @@ -341,7 +339,7 @@ function getCheckins(lat1, lat2, lng1, lng2) { let maxLng = Math.floor(lng2 * 100) / 100; // change use map coords - return useRockdAPI("protected/checkins?minlat=" + minLat + + return useRockdAPI("/protected/checkins?minlat=" + minLat + "&maxlat=" + maxLat + "&minlng=" + minLng + "&maxlng=" + maxLng); @@ -384,6 +382,12 @@ function FeatureDetails({setInspectPosition}) { if (result == null) return h(Spinner, { className: "loading-spinner" }); result = result.success.data; + result.sort((a, b) => { + if (a.photo === null && b.photo !== null) return 1; + if (a.photo !== null && b.photo === null) return -1; + return 0; + }); + checkins = createCheckins(result, mapRef, setInspectPosition); return h("div", {className: 'checkin-container'}, [ @@ -576,7 +580,7 @@ function AutoComplete({showFilter, setFilteredCheckins, setFilteredData, autocom let result = null; try { - result = useRockdAPI("autocomplete/" + input); + result = useRockdAPI("/autocomplete/" + input); } catch (e) { return null; } @@ -674,5 +678,5 @@ function AutoComplete({showFilter, setFilteredCheckins, setFilteredData, autocom } function getPersonCheckins(personId) { - return useRockdAPI("protected/checkins?person_id=" + personId + "&all=100"); + return useRockdAPI("/protected/checkins?person_id=" + personId + "&all=100"); } \ No newline at end of file diff --git a/pages/explore2/+Page.client.ts b/pages/explore2/+Page.client.ts deleted file mode 100644 index 004a0554b..000000000 --- a/pages/explore2/+Page.client.ts +++ /dev/null @@ -1,356 +0,0 @@ -import hyper from "@macrostrat/hyper"; - -import { useMapRef } from "@macrostrat/mapbox-react"; -import { Spinner, Icon, Divider } from "@blueprintjs/core"; -import { SETTINGS } from "@macrostrat-web/settings"; -import { - MapAreaContainer, - MapMarker, - MapView, - PanelCard, - buildInspectorStyle, -} from "@macrostrat/map-interface"; -import { buildMacrostratStyle } from "@macrostrat/map-styles"; -import { mergeStyles } from "@macrostrat/mapbox-utils"; -import { useDarkMode, DarkModeButton } from "@macrostrat/ui-components"; -import mapboxgl from "mapbox-gl"; -import { useCallback, useEffect, useState } from "react"; -import styles from "../main.module.sass"; -import { createCheckins, useRockdAPI, Image } from "../index"; -import "./main.sass"; -import "@macrostrat/style-system"; -import { LngLatCoords } from "@macrostrat/map-interface"; - -const h = hyper.styled(styles); - -let count = 0; - -export function Page() { - return h( - "div.weaver-page", - h(WeaverMap, { mapboxToken: SETTINGS.mapboxAccessToken }) - ); -} - -mapboxgl.accessToken = SETTINGS.mapboxAccessToken; - -const _macrostratStyle = buildMacrostratStyle({ - tileserverDomain: SETTINGS.burwellTileDomain, - fillOpacity: 0.3, - strokeOpacity: 0.1, -}) as mapboxgl.Style; - -const type = - { - id: "Sample", - name: "Sample", - color: "purple", - }; - -function weaverStyle(type: object) { - const color = type?.color ?? "dodgerblue"; - return { - sources: { - weaver: { - type: "vector", - tiles: [ "https://dev.rockd.org/api/v2/checkin-tile/{z}/{x}/{y}?cluster=true"], - } - }, - layers: [ - { - id: "weaver", - type: "circle", - source: "weaver", - "source-layer": "default", - paint: { - "circle-radius": [ - "step", - ["get", "n"], - 2, - 1, - 2, - 5, - 4, - 10, - 8, - 50, - 12, - 100, - 16, - 200, - 20, - ], - "circle-color": color, - "circle-opacity": .8, - "circle-stroke-width": 0.5, - "circle-stroke-color": color, - }, - }, - ], - }; -} - -function WeaverMap({ - mapboxToken, -}: { - headerElement?: React.ReactElement; - title?: string; - children?: React.ReactNode; - mapboxToken?: string; -}) { - const [showSatelite, setSatelite] = useState(false); - const style = useMapStyle(type, mapboxToken, showSatelite); - - // overlay - const [inspectPosition, setInspectPosition] = - useState(null); - - const onSelectPosition = useCallback((position: mapboxgl.LngLat) => { - setInspectPosition(position); - let previousSelected = document.querySelectorAll('.selected_pin'); - previousSelected.forEach((marker) => { - marker.remove(); - }); - }, []); - - const selectedResult = getSelectedCheckins(inspectPosition?.lat - .05, inspectPosition?.lat + .05, inspectPosition?.lng - .05, inspectPosition?.lng + .05)?.success.data; - const featuredCheckin = h(FeatureDetails, {setInspectPosition}); - const selectedCheckin = h(SelectedCheckins, {selectedResult, inspectPosition, setInspectPosition}); - let overlay; - - const LngLatProps = { - position: { - lat: inspectPosition?.lat ?? 0, - lng: inspectPosition?.lng ?? 0 - }, - precision: 3, - zoom: 10 - }; - - if (inspectPosition && selectedResult.length > 0) { - overlay = h("div.sidebox", [ - h('div.title', [ - h('div', { className: "selected-center" }, [ - h("h1", "Selected Checkins"), - h('h3', { className: "coordinates" }, LngLatCoords(LngLatProps)) - ]), - // h(DarkModeButton, { className: "dark-btn", showText: true } ) - ]), - h("button", { - className: "close-btn", - onClick: () => { - setInspectPosition(null); - - let previousSelected = document.querySelectorAll('.selected_pin'); - previousSelected.forEach((marker) => { - marker.remove(); - }); - } - }, "X"), - h("div.overlay-div", selectedCheckin), - ]); - } else { - overlay = h("div.sidebox", [ - h('div.sidebox-header', [ - h('div.title', [ - h("h1", "Featured Checkins"), - // h(DarkModeButton, { className: "dark-btn", showText: true } ) - ]), - ]), - h("div.overlay-div", featuredCheckin), - ]); - } - - if(style == null) return null; - - return h( - "div.map-container", - [ - // The Map Area Container - h( - MapAreaContainer, - { - className: "map-area-container", - style: { width: "70%", right: "30%" }, - }, - [ - h(MapView, { style, mapboxToken }, [ - h(MapMarker, { - setPosition: onSelectPosition, - }), - ]), - - // The Overlay Div - overlay, - h(Toolbar, {showSatelite, setSatelite}) - ] - ), - ] - ); - -} - -function useMapStyle(type, mapboxToken, showSatelite) { - const dark = useDarkMode(); - const isEnabled = dark?.isEnabled; - - const baseStyle = isEnabled - ? "mapbox://styles/mapbox/dark-v10" - : "mapbox://styles/mapbox/light-v10"; - const sateliteStyle = 'mapbox://styles/mapbox/satellite-v9'; - const finalStyle = showSatelite ? sateliteStyle : baseStyle; - - const [actualStyle, setActualStyle] = useState(null); - - // Auto select sample type - useEffect(() => { - const overlayStyle = mergeStyles(_macrostratStyle, weaverStyle(type)); - buildInspectorStyle(finalStyle, overlayStyle, { - mapboxToken, - inDarkMode: isEnabled, - }).then((s) => { - setActualStyle(s); - }); - }, [isEnabled, showSatelite]); - - return actualStyle; -} - -function getCheckins(lat1, lat2, lng1, lng2) { - // abitrary bounds around click point - let minLat = Math.floor(lat1 * 100) / 100; - let maxLat = Math.floor(lat2 * 100) / 100; - let minLng = Math.floor(lng1 * 100) / 100; - let maxLng = Math.floor(lng2 * 100) / 100; - - // change use map coords - return useRockdAPI("protected/checkins?minlat=" + minLat + - "&maxlat=" + maxLat + - "&minlng=" + minLng + - "&maxlng=" + maxLng); -} - -function getSelectedCheckins(lat1, lat2, lng1, lng2) { - // abitrary bounds around click point - let minLat = Math.floor(lat1 * 100) / 100; - let maxLat = Math.floor(lat2 * 100) / 100; - let minLng = Math.floor(lng1 * 100) / 100; - let maxLng = Math.floor(lng2 * 100) / 100; - - // return 10 pages of results - return useRockdAPI("protected/checkins?minlat=" + minLat + - "&maxlat=" + maxLat + - "&minlng=" + minLng + - "&maxlng=" + maxLng + "&all=10"); -} - -function SelectedCheckins({selectedResult, inspectPosition, setInspectPosition}) { - const mapRef = useMapRef(); - const map = mapRef.current; - - // add selected checkin markers - useEffect(() => { - let selectedCords = []; - - let previousSelected = document.querySelectorAll('.selected_pin'); - previousSelected.forEach((marker) => { - marker.remove(); - }); - - // if selected checkins - if(selectedResult?.length > 0 && inspectPosition) { - selectedResult.forEach((checkin) => { - selectedCords.push([checkin.lng, checkin.lat]); - }); - - let selectedStop = 0; - selectedCords.forEach((coord) => { - selectedStop++; - // marker - const el = document.createElement('div'); - el.className = 'selected_pin'; - - // Create marker - new mapboxgl.Marker(el) - .setLngLat(coord) - .addTo(map); - }); - } - }, [selectedResult]); - - return h("div", {className: 'checkin-container'}, createCheckins(selectedResult, mapRef, setInspectPosition)); -} - -function FeatureDetails({setInspectPosition}) { - const mapRef = useMapRef(); - const map = mapRef.current; - const [bounds, setBounds] = useState(map?.getBounds()); - let checkins = []; - let result; - - if(!map) { - result = getCheckins(0, 0, 0, 0); - } else if (bounds) { - const distance = Math.abs(bounds.getEast() - bounds.getWest()); - const newWest = bounds.getWest() - distance * .2; - result = getCheckins(bounds.getSouth(), bounds.getNorth(), newWest, bounds.getEast()); - } else { - result = getCheckins(0, 0, 0, 0); - } - - if (!bounds && map) { - setBounds(map.getBounds()); - } - - count++; - - // Update bounds on move - useEffect(() => { - if(map) { - const listener = () => { - setBounds(map.getBounds()); - }; - map.on("moveend", listener); - return () => { - map.off("moveend", listener); - }; - } - }, [bounds]); - - if (result == null) return h(Spinner); - result = result.success.data; - - checkins = createCheckins(result, mapRef, setInspectPosition); - - return h("div", {className: 'checkin-container'}, [ - h('div', checkins) - ]); -} - -function Toolbar({showSatelite, setSatelite}) { - const [showSettings, setSettings] = useState(false); - - return h(PanelCard, { className: "toolbar", style: {padding: "0"} }, [ - h("div.toolbar-header", [ - h("a", { href: "/" }, - h(Image, { className: "home-icon", src: "favicon-32x32.png" }), - ), - h(Icon, { className: "settings-icon", icon: "settings", onClick: () => { - setSettings(!showSettings); - } - }), - ]), - h("div", { className: showSettings ? "settings-content" : "hide" }, [ - h(Divider, { className: "divider" }), - h("div", { className: "settings" }, [ - h(DarkModeButton, { className: "dark-btn", showText: true } ), - h(PanelCard, {className: "map-style", onClick: () => { - setSatelite(!showSatelite); - }}, [ - h(Icon, { className: "satellite-icon", icon: "satellite"}), - h("p", "Satellite"), - ]), - ]), - ]) - ]); -} \ No newline at end of file diff --git a/pages/explore2/main.sass b/pages/explore2/main.sass deleted file mode 100644 index b1c9d3f0d..000000000 --- a/pages/explore2/main.sass +++ /dev/null @@ -1,436 +0,0 @@ -@use "sass:color" -@use "../colors" as * -@use "@blueprintjs/colors/lib/scss/colors" as * - -* - box-sizing: border-box - -// Colors taken primarily from blueprintjs v4 -// See https://blueprintjs.com/docs/#core/colors -:root - @each $name, $color in $colors - --#{$name}: #{$color} - -html, body - height: 100vh - height: -webkit-fill-available - -.bp5-input - box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2) - -.bp5-button - color: var(--text-color) - -.bp5-control - color: var(--text-subtle-color) !important - -body - color: var(--text-color) - margin: 0 - padding: 0 - font-family: 'Source Sans Pro', sans-serif - - &.bp5-dark - color-scheme: dark - color: $dark-text - // each item in color map - @each $name, $color in $dark-colors - --#{$name}: #{$color} - - .bp5-input - &::placeholder - color: var(--secondary-color) - box-shadow: 0 0 0 0 color.change($light-gray3, $alpha: 0), 0 0 0 0 color.change($light-gray3, $alpha: 0), inset 0 0 0 1px color.change($light-gray1, $alpha: 0.15), inset 0 1px 1px color.change($light-gray1, $alpha: 0.2) - -.bp5-card, .bp5-navbar - border-radius: 4px - background-color: var(--panel-background-color) - box-shadow: 0 0 0 1px var(--card-shadow-color) - -.map-container - position: relative - padding: 0 - -.overlay-div - position: absolute - top: 7vh - left: 0 - z-index: 10 - border-radius: 0 4px 4px 0 - height: 93vh - overflow-y: auto - width: 100% - padding: 8px - padding-top: 0 - -._panel-subhead_z8iog_1 - padding: 10px 20px - background-color: #333 - color: white - border: none - cursor: pointer - border-radius: 4px - width: 100% - -.sidebox - position: absolute - z-index: 10 - height: 100vh - width: 30% - top: 0 - right: -30% - background: var(--panel-background-color) - - .title - display: flex - width: 100% - color: black - position: fixed - width: 30% - background: rgba(255, 255, 255, 0.85) - height: 7vh - background-color: var(--panel-background-color) - color: var(--text-emphasized-color) - padding: 0 - - h1 - margin: auto - font-size: 24px - margin-left: 10px - - .header-divider - position: absolute - width: 100% - top: 10vh - z-index: 100 - - - .close-btn - position: absolute - top: 10px - right: 10px - background-color: var(--panel-background) - color: var(--panel-text) - border: none - border-radius: 50% - width: 30px - height: 30px - display: flex - justify-content: center - align-items: center - font-size: 15px - cursor: pointer - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) - transition: background-color 0.3s, box-shadow 0.3s - - &:hover - background-color: var(--panel-hover) - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) - -.marker - height: 7vh - display: grid - margin: auto - margin-right: 0 - -.marker_pin, .filtered_pin - background-image: url(https://storage.macrostrat.org/assets/rockd/explore/red-circle.png) - width: 60px - height: 60px - background-size: 50% - cursor: pointer - background-repeat: no-repeat - background-position: center - - span - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - color: white - font-size: 12px - font-weight: bold - - - -.selected_pin - background-image: url('https://storage.macrostrat.org/assets/rockd/explore/blue-circle.png') - width: 60px - height: 60px - background-size: 50% - cursor: pointer - background-repeat: no-repeat - background-position: center - - span - position: absolute - top: 50% - left: 50% - transform: translate(-50%, -50%) - color: white - font-size: 12px - font-weight: bold - -.details-image - width: 40px - margin-left: 10px - margin-top: 4px - -.checkin-info - color: var(--text-emphasized-color) - - h3 - color: var(--text-emphasized-color) - -body - color: var(--text-emphasized-color) - -.observation-img - background-color: rgba(var(--text-emphasized-color), 0.5) - -.star - filter: var(--anti-img-color) - -.checkin-footer - img - filter: var(--img-color) - -.close-btn - background-color: var(--accent-secondary-color) - color: var(--text-emphasized-color) - - &:hover - background-color: var(--accent-secondary-hover-color) - -.sort-dropdown - height: 3vh - background-color: var(--accent-secondary-color) - -.sort-container - position: absolute - top: 15vh - background-color: var(--panel-background-color) - width: 100% - z-index: 11 - height: 8vh - display: grid - grid-template-columns: 30% 30% 40% - - h3 - margin: auto - margin-right: 5px - - select - margin: auto - margin-left: 5px - border: none - -.selected-center - margin: auto - text-align: center - -.dark-button - margin: 6px 15px - background-color: green - -.search-bar - height: 5vh - width: 100% - background-color: var(--panel-background-color) - - .search-icon - position: absolute - top: 0 - margin-left: 10% - width: 8% - height: 5vh - - Icon - height: 5vh - display: grid - margin: auto - filter: var(--img-color) - padding: 1vh 0 - - .x-icon - position: absolute - top: 0 - right: 0 - margin-right: 10% - width: 7% - height: 5vh - - img - height: 5vh - display: grid - margin: auto - width: 100% - filter: var(--img-color) - cursor: pointer - - input - width: 80% - margin: 0 10% - background-color: var(--accent-secondary-color) - color: var(--text-emphasized-color) - padding: 0 8% - height: 5vh - border: none - - -.autocomplete - width: 100% - position: absolute - top: 10vh - z-index: 12 - background-color: var(--panel-background-color) - color: var(--text-emphasized-color) - height: 5vh - - h2 - background-color: var(--accent-secondary-color) - padding: 10px - margin-bottom: 0 - - li - list-style-type: none - background-color: var(--panel-background-color) - padding: 3px 10px - - &:hover - background-color: var(--accent-secondary-hover-color) - - p - padding-left: 10px - - ul - margin-top: 0 - padding-left: 0 - - /* Scrollbar Styling */ - &::-webkit-scrollbar - width: 12px - - &::-webkit-scrollbar-track - background: rgba(200, 200, 200, 0.3) - - &::-webkit-scrollbar-thumb - background-color: rgba(150, 150, 150, 0.6) - border-radius: 4px - transition: background-color 0.2s ease - - &:hover - background-color: rgba(100, 100, 100, 0.8) - -._panel-subhead_z8iog_1 - padding: 10px 20px - background-color: #333 - color: white - border: none - cursor: pointer - border-radius: 4px - width: 100% - - -.results - padding-top: 10px - overflow-y: auto - height: 85vh - background-color: var(--panel-background-color) - /* Scrollbar Styling */ - &::-webkit-scrollbar - width: 12px - - &::-webkit-scrollbar-track - background: rgba(200, 200, 200, 0.3) - - &::-webkit-scrollbar-thumb - background-color: rgba(150, 150, 150, 0.6) - border-radius: 4px - transition: background-color 0.2s ease - - &:hover - background-color: rgba(100, 100, 100, 0.8) - - -.filter-item - display: grid - grid-template-columns: 50% 50% - - li - &:hover - background-color: var(--panel-background-color) - - .red-bar - width: 15% - height: 7px - border-radius: 15px - margin: auto - background-color: red - margin-right: 10px - cursor: pointer - - -.autocomplete-wrapper - background-color: var(--panel-background-color) - -.filtered-checkins-container - background-color: var(--panel-background-color) - -.filtered-checkins - padding: 8px - height: 75vh - overflow-y: auto - -.filtered_pin - background-image: url(https://storage.macrostrat.org/assets/rockd/explore/green-circle.png) - -.coordinates - margin: 0 - -.toolbar - position: absolute - top: 10px - left: calc(30% + 10px) - z-index: 100 - padding: 0 - - .home-icon - height: 16px - - .toolbar-header - display: flex - align-items: center - justify-conter: center - gap: 10px - padding: 10px - - a - display: flex - align-items: center - - .settings-content - width: 125px - - .divider - margin: 0 - - .settings - padding: 10px - - .dark-btn - margin-bottom: 10px - - .map-style - display: flex - gap: 5px - cursor: pointer - - .clicked - background-color: red - - .unclicked - background-color: green - -.hide - display: none \ No newline at end of file diff --git a/pages/index.ts b/pages/index.ts index 52fdfdb8f..4e8525ba4 100644 --- a/pages/index.ts +++ b/pages/index.ts @@ -4,6 +4,7 @@ import { DarkModeButton, useAPIResult } from "@macrostrat/ui-components"; import { Icon } from "@blueprintjs/core"; import mapboxgl from "mapbox-gl"; import styles from "./main.module.sass"; +import { SETTINGS } from "@macrostrat-web/settings"; const h = hyper.styled(styles); @@ -147,7 +148,6 @@ export function createCheckins(result, mapRef, setInspectPosition) { LngLatCoords(LngLatProps), h('h3', {className: 'rating'}, ratingArr), ]), - // pin, ]), h('p', {className: 'description'}, checkin.notes), h('a', {className: 'checkin-link', href: "/checkin/" + checkin.checkin_id, target: "_blank"}, [ @@ -178,11 +178,11 @@ export function createCheckins(result, mapRef, setInspectPosition) { return checkins; } -export const apiURLOld = "https://rockd.org/api/v2/"; // old route -const apiURL = import.meta.env.ROCKD_API_URL; // new route + +// remove when metrics works +const apiURL = SETTINGS.rockdApiURL; // new route export function useRockdAPI(src) { - console.log("API CALLED") return useAPIResult(apiURL + src); } @@ -198,9 +198,9 @@ export function imageExists(url) { } export function getImageUrl(person_id, photo_id) { - return apiURL + "protected/image/" + person_id + "/thumb_large/" + photo_id; + return apiURL + "/protected/image/" + person_id + "/thumb_large/" + photo_id; } export function getProfilePicUrl(person_id) { - return apiURL + "protected/gravatar/" + person_id; + return apiURL + "/protected/gravatar/" + person_id; } \ No newline at end of file diff --git a/pages/metrics/+Page.client.ts b/pages/metrics/+Page.client.ts index 8d1ecd6b5..c704e5abb 100644 --- a/pages/metrics/+Page.client.ts +++ b/pages/metrics/+Page.client.ts @@ -11,10 +11,11 @@ import { AreaChart, ResponsiveContainer, } from "recharts"; -import { apiURLOld, Footer, useRockdAPI } from "../index"; +import { Footer, useRockdAPI } from "../index"; import "./main.sass"; import styles from "../main.module.sass"; -import { DarkModeButton, useAPIResult } from "@macrostrat/ui-components"; +import { useAPIResult } from "@macrostrat/ui-components"; +import { SETTINGS } from "@macrostrat-web/settings"; const h = hyper.styled(styles); @@ -43,7 +44,7 @@ export function Page() { const [activeBound, setActive] = useState([lower, upper]); // new API doesn't return all data - const userData = useAPIResult(apiURLOld + "metrics"); + const userData = useAPIResult(SETTINGS.rockdApiOldURL + "metrics"); if (!userData) { return h("div", { className: 'loading' }, [ diff --git a/pages/photo/index.ts b/pages/photo/index.ts index 893b29ac7..c23d2b49e 100644 --- a/pages/photo/index.ts +++ b/pages/photo/index.ts @@ -15,7 +15,7 @@ const h = hyper.styled(styles); export function Photos({photoID}) { const [showBody, setBody] = useState(true); - const checkinData = useRockdAPI("protected/checkins?photo_id=" + photoID); + const checkinData = useRockdAPI("/protected/checkins?photo_id=" + photoID); if (!checkinData) { diff --git a/pages/test/index.ts b/pages/test/index.ts index 5db118267..5ee20ff20 100644 --- a/pages/test/index.ts +++ b/pages/test/index.ts @@ -19,7 +19,7 @@ export function Photos({ photoID }) { } function PhotoFetcher({ photoID, setPhotoIDArr, setCachedCheckin }) { - const checkinData = useRockdAPI("protected/checkins?photo_id=" + photoID); + const checkinData = useRockdAPI("/protected/checkins?photo_id=" + photoID); if (!checkinData) { return h("div.loading", [h("h1", "Loading photo " + photoID + "...")]); diff --git a/pages/trip/index.ts b/pages/trip/index.ts index 39a0d59c9..feaea4c5a 100644 --- a/pages/trip/index.ts +++ b/pages/trip/index.ts @@ -6,7 +6,7 @@ import { BlankImage, createCheckins, getProfilePicUrl, useRockdAPI, Image } from import styles from "../main.module.sass"; import "@macrostrat/style-system"; import { SETTINGS } from "@macrostrat-web/settings"; -import { DarkModeButton } from "@macrostrat/ui-components"; +import { DarkModeButton, useDarkMode } from "@macrostrat/ui-components"; import "./main.sass"; import { Divider, Icon, Spinner } from "@blueprintjs/core"; import { @@ -21,7 +21,7 @@ const h = hyper.styled(styles); export function Trips({trip}) { const [showSatelite, setSatelite] = useState(false); - const userData = useRockdAPI("trips/" + trip); + const userData = useRockdAPI("/trips/" + trip); const style = useMapStyle({showSatelite}); @@ -116,10 +116,7 @@ function Toolbar({showSatelite, setSatelite}) { } function useMapStyle({showSatelite}) { - const white = "mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i"; - const satellite = 'mapbox://styles/mapbox/satellite-v9'; - - return showSatelite ? satellite : white; + return showSatelite ? SETTINGS.satelliteMapURL : useDarkMode()?.isEnabled ? SETTINGS.darkMapURL : SETTINGS.whiteMapURL; } function SideBar({data}) {