From b082433757ece04912d1e0831d7345a35f892910 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 28 Jun 2022 17:37:09 +0200
Subject: [PATCH] Web: show last-rendered image in job details

It doesn't update automatically yet (still needs SocketIO notifications),
and there is no check yet for whether there is actually any last-rendered
image at all, but at least there is a component that shows the image.
---
 web/app/src/components/jobs/JobDetails.vue    |  6 +++
 .../src/components/jobs/LastRenderedImage.vue | 48 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 web/app/src/components/jobs/LastRenderedImage.vue

diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 778d5a4b..ad919cfd 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -2,6 +2,8 @@
   <h2 class="column-title">Job Details</h2>
 
   <template v-if="hasJobData">
+    <last-rendered-image :jobID="jobData.id" />
+
     <dl>
       <dt class="field-id">ID</dt>
       <dd :title="jobData.id">{{ jobData.id }}</dd>
@@ -54,6 +56,7 @@
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
+import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
 
 export default {
   props: [
@@ -62,6 +65,9 @@ export default {
   emits: [
     "reshuffled", // Emitted when the size of this component may have changed. Used to resize other components in response.
   ],
+  components: {
+    LastRenderedImage,
+  },
   data() {
     return {
       datetime: datetime, // So that the template can access it.
diff --git a/web/app/src/components/jobs/LastRenderedImage.vue b/web/app/src/components/jobs/LastRenderedImage.vue
new file mode 100644
index 00000000..5e4ef241
--- /dev/null
+++ b/web/app/src/components/jobs/LastRenderedImage.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { api } from '@/urls';
+import { JobsApi } from '@/manager-api';
+import { apiClient } from '@/stores/api-query-count';
+
+const props = defineProps(['jobID']);
+const imageURL = ref('');
+
+const jobsApi = new JobsApi(apiClient);
+
+function fetchImageURL(jobID) {
+  jobsApi.fetchJobLastRenderedInfo(jobID)
+    .then((info) => {
+      // info is an api.JobLastRenderedImageInfo object.
+      for (let suffix of info.suffixes) {
+        if (!suffix.includes("-tiny")) continue;
+
+        let url = new URL(api());
+        url.pathname = info.base + "/" + suffix
+        imageURL.value = url.toString();
+        break;
+      }
+    })
+    .catch((error) => { console.warn("error fetching last-rendered image info:", error) });
+}
+
+watch(() => props.jobID, (newJobID) => {
+  console.log("Last-Rendered Image: new job ID: ", newJobID);
+  fetchImageURL(newJobID);
+});
+fetchImageURL(props.jobID);
+
+</script>
+
+<template>
+  <div v-if="imageURL != ''" class="lastRendered">
+    <img :src="imageURL" alt="Last-rendered image for this job">
+  </div>
+</template>
+
+<style scoped>
+.lastRendered {
+  width: 200px;
+  height: 112px;
+  float: right;
+}
+</style>