error handling of images

davidsklar99 · Dec 12, 2024 · 89bea80 · 89bea80
1 parent 5beb7d8
commit 89bea80
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
+    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