Skip to content

Commit bff9454

Browse files
davidsklar99davidsklar99
authored
Merge pull request #35 from UW-Macrostrat/checkins
Updated checkins page to resemble the original
2 parents 5ad98d8 + 7a64c68 commit bff9454

File tree

5 files changed

+156
-36
lines changed

5 files changed

+156
-36
lines changed

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

Lines changed: 91 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import h from "@macrostrat/hyper";
22
import { LngLatCoords } from "@macrostrat/map-interface";
3-
import { useEffect, useState } from 'react';
3+
import { useEffect, useState, useRef } from 'react';
44
import { usePageContext } from 'vike-react/usePageContext';
55
import 'mapbox-gl/dist/mapbox-gl.css';
66
import { BlankImage, Image, Footer } from "../index";
@@ -9,6 +9,12 @@ import { SETTINGS } from "@macrostrat-web/settings";
99
import { DarkModeButton } from "@macrostrat/ui-components";
1010
import "./main.sass";
1111
import "@macrostrat/style-system";
12+
import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface";
13+
import 'mapbox-gl/dist/mapbox-gl.css';
14+
import { checkIfClientRouting } from "vike/dist/esm/utils/assertRoutingType";
15+
import { MapPosition } from "@macrostrat/mapbox-utils";
16+
import { set } from "react-datepicker/dist/date_utils";
17+
1218

1319
function imageExists(image_url){
1420
var http = new XMLHttpRequest();
@@ -25,6 +31,14 @@ export function Page() {
2531
const [loading, setLoading] = useState(true);
2632
const [error, setError] = useState(null);
2733
const [checkinNum, setCheckin] = useState(null);
34+
const [overlayOpen, setOverlayOpen] = useState(false);
35+
const [overlayImage, setOverlayImage] = useState(null);
36+
const [overlayBody, setOverlayBody] = useState(null);
37+
const [showMap, setShowMap] = useState(false);
38+
const [center, setCenter] = useState({
39+
lat: 0,
40+
lng: 0
41+
});
2842

2943
let stop;
3044

@@ -35,7 +49,6 @@ export function Page() {
3549
} else {
3650
setCheckin(0);
3751
}
38-
console.log(`Fetching data for checkin ID: ` + stop);
3952

4053
// Ensure trip ID is valid
4154
if (isNaN(stop)) {
@@ -52,9 +65,13 @@ export function Page() {
5265
return response.json();
5366
})
5467
.then(data => {
55-
console.log('Fetched data:', data); // Log fetched data for debugging
5668
if (data.success && data.success.data.length > 0) {
5769
setUserData(data.success.data[0]);
70+
setCenter({
71+
lat: data.success.data[0].lat,
72+
lng: data.success.data[0].lng
73+
});
74+
console.log("Center: ", center);
5875
} else {
5976
setUserData(null);
6077
}
@@ -95,7 +112,6 @@ export function Page() {
95112
}
96113

97114
let checkin = userData;
98-
console.log(checkin)
99115

100116
let profile_pic = h(BlankImage, {src: "https://rockd.org/api/v2/protected/gravatar/" + checkin.person_id, className: "profile-pic"});
101117

@@ -109,26 +125,24 @@ export function Page() {
109125
let observations = [];
110126

111127
// add checkin photo and notes
112-
console.log("Checkin photo: ", checkin.photo != null);
113-
let headerImg;
114-
if(imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo) && checkin.photo != null) {
115-
headerImg = h(BlankImage, {className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo})
116-
} else {
117-
headerImg = h(BlankImage, { className: 'observation-img', src: "https://storage.macrostrat.org/assets/rockd/rockd.jpg"})
118-
}
128+
let headerImgUrl = imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo) && checkin.photo != null ? "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
129+
let headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
119130

120131
observations.push(
121132
h('div', {className: 'observation'}, [
122-
headerImg,
123-
h('h4', {className: 'observation-header'}, checkin.notes),
133+
h(BlankImage, { className: 'observation-img', src: headerImgUrl, onClick: () => {
134+
setOverlayBody(h('div.observation-body',headerBody));
135+
setOverlayImage(headerImgUrl);
136+
setOverlayOpen(!overlayOpen);
137+
}
138+
}),
139+
headerBody,
124140
])
125141
);
126142

127143
// add observations
128144
for(var i = 0; i < checkin.observations.length; i++) {
129145
let observation = checkin.observations[i];
130-
console.log("Observation " + i);
131-
console.log(observation);
132146

133147
if(Object.keys(observation.rocks).length != 0) {
134148
// get liths
@@ -151,25 +165,52 @@ export function Page() {
151165
let imageSrc;
152166
imageSrc = imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo) ? "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
153167
let obsAge = observation.age_est ? observation.age_est.name + " (" + observation.age_est.b_age + " - " + observation?.age_est?.t_age + ")" : null;
168+
let observationBody = h('div', {className: 'observation-body'}, [
169+
h('h4', {className: 'observation-header'}, observation.rocks.strat_name?.strat_name_long),
170+
h('div', {className: 'observation-details'}, [
171+
h('p', {className: 'observation-detail'}, observation.rocks.strat_name?.strat_name_long),
172+
h('p', {className: 'observation-detail'}, observation.rocks.map_unit?.unit_name),
173+
h('p', {className: 'observation-detail'}, obsAge),
174+
h('p', {className: 'observation-detail'}, liths),
175+
h('p', {className: 'observation-detail'}, observation.orientation.feature?.name),
176+
LngLatCoords(LngLatProps)
177+
]),
178+
]);
154179

155-
console.log("PRINTING" , observation.age_est);
156180
observations.push(
157181
h('div', {className: 'observation'}, [
158-
h(BlankImage, { className: 'observation-img', src: imageSrc}),
159-
h('h4', {className: 'observation-header'}, observation.rocks.strat_name?.strat_name_long),
160-
h('div', {className: 'observation-details'}, [
161-
h('p', {className: 'observation-detail'}, observation.rocks.strat_name?.strat_name_long),
162-
h('p', {className: 'observation-detail'}, observation.rocks.map_unit?.unit_name),
163-
h('p', {className: 'observation-detail'}, obsAge),
164-
h('p', {className: 'observation-detail'}, liths),
165-
h('p', {className: 'observation-detail'}, observation.orientation.feature?.name),
166-
LngLatCoords(LngLatProps)
167-
]),
182+
h(BlankImage, { className: 'observation-img', src: imageSrc, onClick: () => {
183+
setOverlayImage(imageSrc);
184+
setOverlayBody(observationBody);
185+
setOverlayOpen(!overlayOpen);
186+
}}),
187+
observationBody,
168188
])
169189
);
170190
}
171191
}
172192

193+
const newMapPosition: MapPosition = {
194+
camera: {
195+
lat: center.lat, // Latitude
196+
lng: center.lng, // Longitude
197+
altitude: 300000, // Altitude (height from the Earth's surface)
198+
},
199+
};
200+
201+
let map = h(MapAreaContainer,
202+
[
203+
h(MapView, { style: 'mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i', mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }, [
204+
h(MapMarker, {
205+
position: center,
206+
}),
207+
]),
208+
h('div', {className: 'banner', onClick: () => {
209+
setShowMap(!showMap);
210+
}}, h(Image, { className: 'left-arrow', src: "checkins/left-arrow.png"})),
211+
]
212+
);
213+
173214
let LngLatProps = {
174215
position: {
175216
lat: checkin.lat,
@@ -179,11 +220,23 @@ export function Page() {
179220
zoom: 10
180221
};
181222

182-
return h('div', [
183-
h('div', { className: 'main'}, [
223+
// overlay
224+
let overlay = h('div', {className: 'overlay'}, [
225+
h('div', {className: 'banner', onClick: () => {
226+
setOverlayOpen(!overlayOpen);
227+
}}, h(Image, { className: 'left-arrow', src: "checkins/left-arrow.png"})),
228+
229+
h('div.overlay-body', [
230+
h(BlankImage, { className: 'observation-img', src: overlayImage }),
231+
overlayBody,
232+
])
233+
]);
234+
235+
let main = h('div', [
236+
h('div', { className: showMap ? 'hide' : 'main'}, [
184237
h('h1', { className: "checkin-header" }, checkin.description),
185238
h(BlankImage, { className: "location-img", src: "https://api.mapbox.com/styles/v1/jczaplewski/cje04mr9l3mo82spihpralr4i/static/geojson(%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B" + checkin.lng + "%2C" + checkin.lat + "%5D%7D)/" + checkin.lng + "," + checkin.lat + ",5,0/1200x400?access_token=" + SETTINGS.mapboxAccessToken }),
186-
h('div', { className: 'stop-header' }, [
239+
h('div', { className: 'stop-header', onClick: () => { setShowMap(true); console.log("center", center) } }, [
187240
profile_pic,
188241
h('div', {className: 'stop-main-info'}, [
189242
h('h3', {className: 'name'}, checkin.first_name + " " + checkin.last_name),
@@ -197,7 +250,13 @@ export function Page() {
197250
]),
198251
h('div', { className: 'observations' }, observations),
199252
]),
200-
h(Footer),
201-
h(DarkModeButton, { className: 'dark-mode-button', showText: true }),
253+
h('div', { className: showMap ? 'hide' : 'bottom' }, [
254+
h(Footer),
255+
h(DarkModeButton, { className: 'dark-mode-button', showText: true }),
256+
]),
257+
h('div', { className: !showMap ? 'hide' : 'map'}, map)
202258
])
203-
}
259+
260+
261+
return overlayOpen ? overlay : main;
262+
}

‎pages/checkin/main.sass‎

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ h1, p
7979
width: 60%
8080
height: 25vh
8181
align-items: center
82+
cursor: pointer
8283

8384
.profile-pic
8485
height: 100px
@@ -135,8 +136,67 @@ h4
135136
.observation-img
136137
width: 100%
137138
border-radius: 2% 2% 0 0
139+
cursor: pointer
138140

139141
.dark-mode-button
140142
position: absolute
141143
top: 10px
142-
left: 10px
144+
left: 10px
145+
146+
.overlay
147+
background-color: var(--panel-background-color)
148+
height: 100vh
149+
width: 100%
150+
top: 0
151+
left: 0
152+
153+
.overlay-body
154+
display: grid
155+
img
156+
margin: auto
157+
width: 40%
158+
margin-top: 20px
159+
160+
.observation-body
161+
margin: auto
162+
padding: 3px
163+
color: var(--text)
164+
text-align: center
165+
padding-top: 10px
166+
box-shadow: 0 0 0 1px var(--card-shadow-color)
167+
width: 40%
168+
169+
.close
170+
position: absolute
171+
top: 10px
172+
left: 10px
173+
z-index: 100
174+
175+
background-color: white
176+
177+
&:hover
178+
background-color: grey
179+
180+
.banner
181+
position: absolute
182+
top: 0
183+
left: 0
184+
z-index: 100
185+
width: 100%
186+
background-color: var(--panel-text)
187+
height: 50px
188+
189+
.map-container
190+
height: 95vh
191+
192+
.hide
193+
display: none
194+
195+
.left-arrow
196+
height: 50px
197+
padding: 10px
198+
filter: var(--anti-img-color)
199+
200+
.overlay
201+
.banner
202+
position: sticky

‎pages/colors.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
$colors: (
55
img-color: invert(0),
6+
anti-img-color: invert(1),
67
background: #fff,
78
text: #333,
89
scrollbar-track: rgba(200, 200, 200, 0.3),
@@ -20,6 +21,7 @@ $dark-text: $gray4;
2021

2122
$dark-colors: (
2223
img-color: invert(1),
24+
anti-img-color: invert(0),
2325
background: #141a1e,
2426
text: #fff,
2527
scrollbar-track: rgba(60, 60, 60, 0.4),

‎pages/explore/main.sass‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,4 +365,3 @@ body
365365

366366
&:hover
367367
background-color: var(--accent-secondary-hover-color)
368-

‎pages/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export function Image({ src, className, width, height, onClick }) {
77
return h("img", {src: srcWithAddedPrefix, className, width, height, onClick})
88
}
99

10-
export function BlankImage({ src, className, width, height }) {
11-
return h("img", {src: src, className, width, height})
10+
export function BlankImage({ src, className, width, height, onClick }) {
11+
return h("img", {src: src, className, width, height, onClick})
1212
}
1313

1414
export function Footer() {

0 commit comments

Comments
 (0)