From 89bea80ba18c9b95b41474641dfce5af3cd0f65b Mon Sep 17 00:00:00 2001 From: davidsklar99 Date: Wed, 11 Dec 2024 20:23:02 -0600 Subject: [PATCH] error handling of images --- pages/dev/test-site/checkin/index.ts | 22 +++++++-- pages/dev/test-site/explore/+Page.client.ts | 49 ++++++++++++--------- pages/dev/test-site/explore/main.styl | 23 +++++++++- 3 files changed, 68 insertions(+), 26 deletions(-) diff --git a/pages/dev/test-site/checkin/index.ts b/pages/dev/test-site/checkin/index.ts index cd396178..20b32e2c 100644 --- a/pages/dev/test-site/checkin/index.ts +++ b/pages/dev/test-site/checkin/index.ts @@ -5,6 +5,15 @@ import { usePageContext } from 'vike-react/usePageContext'; import 'mapbox-gl/dist/mapbox-gl.css'; import { BlankImage, Image } from "../index"; +function imageExists(image_url){ + var http = new XMLHttpRequest(); + + http.open('HEAD', image_url, false); + http.send(); + + return http.status != 404; +} + export function App() { const pageContext = usePageContext(); const [userData, setUserData] = useState(null); @@ -95,10 +104,17 @@ export function App() { let observations = []; // add checkin photo and notes - console.log(checkin.photo); + console.log("Checkin photo: ", checkin.photo != null); + let headerImg; + if(imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo) && checkin.photo != null) { + headerImg = h(BlankImage, {className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo}) + } else { + headerImg = h(BlankImage, { className: 'observation-img', src: "https://storage.macrostrat.org/assets/rockd/rockd.jpg"}) + } + observations.push( h('div', {className: 'observation'}, [ - h(BlankImage, {className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo}), + headerImg, h('h4', {className: 'observation-header'}, checkin.notes), ]) ); @@ -130,7 +146,7 @@ export function App() { // if photo exists - if (observation.photo) { + if (imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo)) { observations.push( h('div', {className: 'observation'}, [ h(BlankImage, { className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + observation.photo}), diff --git a/pages/dev/test-site/explore/+Page.client.ts b/pages/dev/test-site/explore/+Page.client.ts index 43105f25..84f90b0e 100644 --- a/pages/dev/test-site/explore/+Page.client.ts +++ b/pages/dev/test-site/explore/+Page.client.ts @@ -100,6 +100,15 @@ function weaverStyle(type: object) { }; } +function imageExists(image_url){ + var http = new XMLHttpRequest(); + + http.open('HEAD', image_url, false); + http.send(); + + return http.status != 404; +} + function FeatureDetails() { const mapRef = useMapRef(); let checkins = []; @@ -120,36 +129,34 @@ function FeatureDetails() { if (result == null) return h(Spinner); result = result.success.data; - let count = 0; result.forEach((checkin) => { - // format rating let ratingArr = []; for(var i = 0; i < checkin.rating; i++) { ratingArr.push(h(Image, {className: "star", src: "blackstar.png"})); } + let image; + + if (imageExists("https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo)) { + image = h(BlankImage, {className: 'observation-img', src: "https://rockd.org/api/v1/protected/image/" + checkin.person_id + "/thumb_large/" + checkin.photo}); + } + - count++; let temp = h('a', {className: 'checkin-link', href: "/dev/test-site/checkin?checkin=" + checkin.checkin_id}, [ - h('div', {className: 'checkin'}, [ - h('h2', {className: 'checkin-title'}, (count + ". " + checkin.near)), - h('p', {className: 'checkin-text'}, checkin.notes), - h('div', {className: 'checkin-box'},[ - h('div', {className: 'box-header'},[ - h(BlankImage, {src: "https://rockd.org/api/v2/protected/gravatar/" + checkin.person_id, className: "profile-pic"}), - h('div', {className: 'name-rating'}, [ - h('h4', {className: 'name'}, checkin.first_name + " " + checkin.last_name), - h('div', {className: 'rating'}, ratingArr), - ]), - ]), - /* - h('a', {className: 'stop-link', href: "/dev/test-site/checkin?checkin=" + checkin.checkin_id}, [ - h(BlankImage, {src: "https://rockd.org/api/v2/protected/image/"+ checkin.person_id + "/banner/" + checkin.photo, className: "checkin-card-img"}), - ]), - */ + h('div', { className: 'checkin' }, [ + h('div', {className: 'checkin-header'}, [ + h('h3', {className: 'profile-pic'}, h(BlankImage, {src: "https://rockd.org/api/v2/protected/gravatar/" + checkin.person_id, className: "profile-pic"})), + h('div', {className: 'checkin-info'}, [ + h('h3', {className: 'name'}, checkin.first_name + " " + checkin.last_name), + h('h4', {className: 'edited'}, checkin.created), + h('p', "Near " + checkin.near), + h('h3', {className: 'rating'}, ratingArr), ]), - ]) - ]); + ]), + h('p', {className: 'description'}, checkin.notes), + image + ]), + ]); checkins.push(temp); }); diff --git a/pages/dev/test-site/explore/main.styl b/pages/dev/test-site/explore/main.styl index 52937e9f..faf0e7dc 100644 --- a/pages/dev/test-site/explore/main.styl +++ b/pages/dev/test-site/explore/main.styl @@ -8,6 +8,9 @@ color #666 margin-top 10px + h3 + color black + a color: black text-decoration none @@ -18,6 +21,9 @@ .star height 15px +.checkin-header + display flex + .checkin-name font-size 20px font-weight 500 @@ -37,7 +43,7 @@ .name margin 0 -.name-rating +.checkin-info display grid margin auto margin-left 0 @@ -54,4 +60,17 @@ background-color green .checkin - background-color white \ No newline at end of file + background-color white + +h3,h4,p + margin 0 + +.observation-img + margin-top 10px + width 100% + height 250px + object-fit cover + border-radius 2% + +.description + margin-top 10px \ No newline at end of file