Skip to content

Commit 73d1c28

Browse files
davidsklar99davidsklar99
authored
Merge pull request #38 from UW-Macrostrat/checkin-style
New API and Styling Updates
2 parents ab2615e + 7bba79f commit 73d1c28

File tree

19 files changed

+622
-521
lines changed

19 files changed

+622
-521
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import h from "@macrostrat/hyper";
2+
import { usePageContext } from 'vike-react/usePageContext';
3+
import { Checkins } from "../index";
4+
5+
export function Page() {
6+
const pageContext = usePageContext();
7+
const checkinID = parseInt(pageContext.urlParsed.pathname.split("/")[2]);
8+
return h(Checkins, { checkinID });
9+
}

pages/checkin/+Page.client.ts renamed to pages/checkin/index.ts

Lines changed: 78 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import h from "@macrostrat/hyper";
22
import { LngLatCoords } from "@macrostrat/map-interface";
33
import { useEffect, useState, useRef } from 'react';
4-
import { usePageContext } from 'vike-react/usePageContext';
54
import 'mapbox-gl/dist/mapbox-gl.css';
6-
import { BlankImage, Image, Footer, apiURL, apiURLOld, useRockdAPI } from "../index";
5+
import { BlankImage, Image, Footer, apiURL, useRockdAPI, imageExists } from "../index";
6+
import { Icon } from "@blueprintjs/core";
77
import "../main.sass";
88
import { SETTINGS } from "@macrostrat-web/settings";
99
import { DarkModeButton } from "@macrostrat/ui-components";
@@ -13,19 +13,7 @@ import { MapAreaContainer, MapView, MapMarker } from "@macrostrat/map-interface"
1313
import 'mapbox-gl/dist/mapbox-gl.css';
1414
import { MapPosition } from "@macrostrat/mapbox-utils";
1515

16-
17-
function imageExists(image_url){
18-
var http = new XMLHttpRequest();
19-
20-
http.open('HEAD', image_url, false);
21-
http.send();
22-
23-
return http.status != 404;
24-
}
25-
26-
export function Page() {
27-
const pageContext = usePageContext();
28-
const checkinID = pageContext.urlParsed ? parseInt(pageContext.urlParsed.search.checkin) : null;
16+
export function Checkins({checkinID}) {
2917
const checkinData = useRockdAPI("protected/checkins?checkin_id=" + checkinID);
3018
const [overlayOpen, setOverlayOpen] = useState(false);
3119
const [overlayImage, setOverlayImage] = useState(null);
@@ -50,82 +38,58 @@ export function Page() {
5038
lng: checkin.lng
5139
}
5240

53-
let profile_pic = h(BlankImage, {src: apiURLOld + "protected/gravatar/" + checkin.person_id, className: "profile-pic"});
41+
let profile_pic = h(BlankImage, {src: apiURL + "protected/gravatar/" + checkin.person_id, className: "profile-pic"});
5442

5543
// format rating
5644
let ratingArr = [];
5745
for(var i = 0; i < checkin.rating; i++) {
58-
ratingArr.push(h(Image, {className: "star", src: "blackstar.png"}));
46+
ratingArr.push(h(Icon, {className: "star", icon: "star", style: {color: 'white'}}));
47+
}
48+
for(var i = 0; i < 5 - checkin.rating; i++) {
49+
ratingArr.push(h(Icon, {className: "star", icon: "star-empty", style: {color: 'white'}}));
5950
}
6051

6152
// get observations
6253
let observations = [];
6354

6455
// add checkin photo and notes
65-
let headerImgUrl = imageExists(apiURLOld + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo) && checkin.photo != null ? apiURLOld + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
66-
let headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
56+
const showImage = checkin.photo;
57+
const headerImgUrl = showImage ? apiURL + "protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
58+
const headerBody = h('h4', {className: 'observation-header'}, checkin.notes);
6759

6860
observations.push(
6961
h('div', {className: 'observation'}, [
70-
h(BlankImage, { className: 'observation-img', src: headerImgUrl, onClick: () => {
62+
showImage ? h(BlankImage, { className: 'observation-img', src: headerImgUrl, onClick: () => {
7163
setOverlayBody(h('div.observation-body',headerBody));
7264
setOverlayImage(headerImgUrl);
7365
setOverlayOpen(!overlayOpen);
7466
}
75-
}),
76-
headerBody,
67+
}) : null,
68+
h("div.observation-body", headerBody),
7769
])
7870
);
7971

8072
// add observations
81-
for(var i = 0; i < checkin.observations.length; i++) {
82-
let observation = checkin.observations[i];
83-
73+
checkin.observations.forEach(observation => {
74+
console.log("obs", observation.photo, observation);
8475
if(Object.keys(observation.rocks).length != 0) {
85-
// get liths
86-
let liths = [];
87-
for(var j = 0; j < observation.rocks.liths.length; j++) {
88-
liths.push(h('p', observation.rocks.liths[j].name));
89-
}
90-
91-
92-
let LngLatProps = {
93-
position: {
94-
lat: observation.lat,
95-
lng: observation.lng
96-
},
97-
precision: 3,
98-
zoom: 10
99-
};
100-
10176
// if photo exists
102-
let imageSrc;
103-
imageSrc = imageExists(apiURLOld + "/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo) ? apiURLOld + "/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
104-
let obsAge = observation.age_est ? observation.age_est.name + " (" + observation.age_est.b_age + " - " + observation?.age_est?.t_age + ")" : null;
105-
let observationBody = h('div', {className: 'observation-body'}, [
106-
h('h4', {className: 'observation-header'}, observation.rocks.strat_name?.strat_name_long),
107-
h('div', {className: 'observation-details'}, [
108-
h('p', {className: 'observation-detail'}, observation.rocks.strat_name?.strat_name_long),
109-
h('p', {className: 'observation-detail'}, observation.rocks.map_unit?.unit_name),
110-
h('p', {className: 'observation-detail'}, obsAge),
111-
h('p', {className: 'observation-detail'}, liths),
112-
h('p', {className: 'observation-detail'}, observation.orientation.feature?.name),
113-
LngLatCoords(LngLatProps)
114-
]),
115-
]);
77+
const showImage = observation.photo;
78+
const imageSrc = showImage ? apiURL + "/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo : "https://storage.macrostrat.org/assets/rockd/rockd.jpg";
79+
let observationBody = observationFooter(observation);
11680

11781
observations.push(
11882
h('div', {className: 'observation'}, [
119-
h(BlankImage, { className: 'observation-img', src: imageSrc, onClick: () => {
83+
showImage ? h(BlankImage, { className: 'observation-img', src: imageSrc, onClick: () => {
12084
setOverlayImage(imageSrc);
12185
setOverlayBody(observationBody);
12286
setOverlayOpen(!overlayOpen);
123-
}}),
87+
}}) : null,
12488
observationBody,
12589
])
12690
);
12791
}
128-
}
92+
});
12993

13094
const newMapPosition: MapPosition = {
13195
camera: {
@@ -135,18 +99,20 @@ export function Page() {
13599
},
136100
};
137101

138-
let map = h(MapAreaContainer,
102+
let map = h("div.map", [
103+
h(MapAreaContainer, { style: {height: "93vh", top: "7vh"} },
139104
[
140105
h(MapView, { style: 'mapbox://styles/jczaplewski/cje04mr9l3mo82spihpralr4i', mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }, [
141106
h(MapMarker, {
142107
position: center,
143108
}),
144109
]),
145-
h('div', {className: 'banner', onClick: () => {
146-
setShowMap(!showMap);
147-
}}, h(Image, { className: 'left-arrow', src: "checkins/left-arrow.png"})),
148110
]
149-
);
111+
),
112+
h('div', {className: 'banner', onClick: () => {
113+
setShowMap(!showMap);
114+
}}, h(Icon, {className: "left-arrow banner-arrow", icon: "arrow-left", iconSize: "4vh", style: {color: 'black'}})),
115+
])
150116

151117
let LngLatProps = {
152118
position: {
@@ -159,19 +125,25 @@ export function Page() {
159125

160126
// overlay
161127
let overlay = h('div', {className: 'overlay'}, [
162-
h('div', {className: 'banner', onClick: () => {
163-
setOverlayOpen(!overlayOpen);
164-
}}, h(Image, { className: 'left-arrow', src: "checkins/left-arrow.png"})),
165-
128+
h('div.overlay-header', [
129+
h(Icon, {className: "left-arrow back-arrow", icon: "arrow-left", iconSize: "5vh", style: {color: 'black'},
130+
onClick: () => {
131+
setOverlayOpen(!overlayOpen);
132+
}
133+
}),
134+
]),
166135
h('div.overlay-body', [
167136
h(BlankImage, { className: 'observation-img', src: overlayImage }),
168137
overlayBody,
169138
])
170139
]);
171140

172-
let main = h('div', [
141+
let main = h('div', { className: "container" }, [
173142
h('div', { className: showMap ? 'hide' : 'main'}, [
174-
h('h1', { className: "checkin-header" }, checkin.description),
143+
h('div', { className: "checkin-header" }, [
144+
h('h1', checkin.notes),
145+
h(DarkModeButton, { className: 'dark-mode-button', showText: true }),
146+
]),
175147
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 }),
176148
h('div', { className: 'stop-header', onClick: () => { setShowMap(true); console.log("center", center) } }, [
177149
profile_pic,
@@ -189,11 +161,47 @@ export function Page() {
189161
]),
190162
h('div', { className: showMap ? 'hide' : 'bottom' }, [
191163
h(Footer),
192-
h(DarkModeButton, { className: 'dark-mode-button', showText: true }),
193164
]),
194165
h('div', { className: !showMap ? 'hide' : 'map'}, map)
195166
])
196167

197168

198169
return overlayOpen ? overlay : main;
170+
}
171+
172+
function observationFooter(observation) {
173+
const LngLatProps = {
174+
position: {
175+
lat: observation.lat,
176+
lng: observation.lng
177+
},
178+
precision: 3,
179+
zoom: 10
180+
};
181+
182+
const rocks = observation.rocks;
183+
184+
// get liths
185+
let liths = [];
186+
for(var j = 0; j < rocks.liths.length; j++) {
187+
liths.push(h('p', { className: "observation-detail liths"}, rocks.liths[j].name));
188+
}
189+
190+
// observation body
191+
let obsAge = observation.age_est ? observation.age_est.name + " (" + observation.age_est.b_age + " - " + observation?.age_est?.t_age + ")" : null;
192+
return h('div', {className: 'observation-body'}, [
193+
observation.lat && rocks.strat_name?.strat_name_long ? h('h4', {className: 'observation-header'}, [
194+
rocks.strat_name?.strat_name_long,
195+
observation.lat ? LngLatCoords(LngLatProps) : null,
196+
]) : null,
197+
h('div', {className: 'observation-details'}, [
198+
rocks.strat_name?.strat_name_long ? h('p', {className: 'observation-detail'}, rocks.strat_name?.strat_name_long) : null,
199+
rocks.map_unit?.unit_name ? h('p', {className: 'observation-detail'}, rocks.map_unit?.unit_name) : null,
200+
obsAge ? h('p', {className: 'observation-detail'}, obsAge) : null,
201+
rocks.interval.name ? h('p', {className: 'observation-detail interval'}, rocks.interval.name) : null,
202+
liths,
203+
observation.orientation.feature?.name ? h('p', {className: 'observation-detail'}, observation.orientation.feature?.name) : null,
204+
h('p', {className: "notes"}, rocks.notes),
205+
]),
206+
]);
199207
}

0 commit comments

Comments
 (0)