Update screenshot handling

backend/server.js

@@ -11,7 +11,7 @@ const mongoUri = process.env.MONGO_URI || 'mongodb://127.0.0.1:27017/default?rep
 const minioURI = new URL(process.env.MINIO_URI || 'http://kspace-mugshot:2mSI6HdbJ8@127.0.0.1:9000/kspace-mugshot');
 const minioBucket = minioURI.pathname.substring(1);
 console.info("Using bucket:", minioBucket);
-const historyNumber = parseInt(process.env.HISTORY_AMOUNT) || 1000;
+const historyNumber = parseInt(process.env.HISTORY_AMOUNT) || 10;
 
 // Stream set-up variables
 let changeStream;
@@ -46,18 +46,32 @@ async function run() {
     });
 
     async function wrapEvent(doc) {
-      let screenShotArray = [];
+      let arr = [];
       let blob;
       if (doc && doc.screenshot_count) {
         for (let i = 1; i <= doc.screenshot_count ; i++) {
-          let presignedUrl = await minioClient.presignedUrl('GET', minioBucket, `${doc.camera}/${doc._id}/${i}.jpg`, 60 * 60);
+          arr.push({
-          screenShotArray.push({ url: presignedUrl });
+            url: await minioClient.presignedUrl('GET', minioBucket,
+              `${doc.camera}/${doc._id}/${i}.jpg`, 60 * 60)
+          });
+        }
+      } else if (doc && doc.screenshots) {
+        for (let j = 0; j < doc.screenshots.length; j++) {
+          let path = doc.screenshots[j];
+          arr.push({
+            url: await minioClient.presignedUrl('GET', minioBucket,
+              `thumb/${path}`, 60 * 60),
+            orig: await minioClient.presignedUrl('GET', minioBucket,
+              `${path}`, 60 * 60)
+          });
         }
-        blob = JSON.stringify({...doc, screenshots: [...screenShotArray]});
-      } else {
-        blob = JSON.stringify({...doc})
       };
-      
+
+      if (arr.length > 0) {
+        blob = JSON.stringify({...doc, screenshots: [...arr]});
+      } else {
+        blob = JSON.stringify({...doc});
+      }
       return `event: log-entry\ndata: ${blob}\n\n`
     }
 

frontend/src/components/app/App.js

@@ -14,7 +14,19 @@ const Component = () => {
   useEffect(() =>{
     console.info(event);
     if (event) {
-      setEvents([event, ...events]);
+        for (var j = 0; j < events.length; j++) {
+            if (events[j].timestamp <= event.timestamp) {
+                if (events[j]._id == event._id) {
+                    setEvents([...events.slice(0, j), event, ...events.slice(j+1)]);
+                    return;
+                } else {
+                    setEvents([...events.slice(0, j), event, ...events.slice(j)]);
+                    return;
+                }
+            }
+        }
+
+        setEvents([event, ...events]);
     }
   }, [event])
   return <EventList data={events} />

frontend/src/components/event/Event.js

@@ -7,13 +7,13 @@ function Event(props) {
 
     if (props.data.hasOwnProperty('screenshots')) {
         props.data.screenshots.forEach(element => {
-            imgArray = [(<img src={element.url} className="eventPic"></img>), ...imgArray]
+            imgArray = [...imgArray, (<a href={element.orig} target="_blank"><img src={element.url} className="eventPic"></img></a>)]
         });
     }
 
     return (
         <div className="eventDiv">
-            {JSON.stringify(props.data)}
+            {JSON.stringify(props.data.source)}
             <br></br>
             {[...imgArray]}
         </div>