From c3a0c32d991156a8c045a59a3f6458b6e3cbd910 Mon Sep 17 00:00:00 2001
From: Egor Aristov <ef@efprojects.com>
Date: Wed, 5 Feb 2025 23:03:16 +0300
Subject: [PATCH] screenshots; apiBase

---
 frontend/wizard-vue/.env.development         |  1 +
 frontend/wizard-vue/.env.production          |  1 +
 frontend/wizard-vue/src/pages/WizardPage.vue |  8 ++++++--
 frontend/wizard-vue/src/urlmaker/index.ts    | 14 +++++++++++---
 4 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 frontend/wizard-vue/.env.development
 create mode 100644 frontend/wizard-vue/.env.production

diff --git a/frontend/wizard-vue/.env.development b/frontend/wizard-vue/.env.development
new file mode 100644
index 0000000..21f3aca
--- /dev/null
+++ b/frontend/wizard-vue/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE=http://localhost:5000
diff --git a/frontend/wizard-vue/.env.production b/frontend/wizard-vue/.env.production
new file mode 100644
index 0000000..a41b3e9
--- /dev/null
+++ b/frontend/wizard-vue/.env.production
@@ -0,0 +1 @@
+VITE_API_BASE=
diff --git a/frontend/wizard-vue/src/pages/WizardPage.vue b/frontend/wizard-vue/src/pages/WizardPage.vue
index 46c0a6a..9309705 100644
--- a/frontend/wizard-vue/src/pages/WizardPage.vue
+++ b/frontend/wizard-vue/src/pages/WizardPage.vue
@@ -5,7 +5,7 @@ import {type Field, fields, type Specs} from "@/urlmaker/specs.ts";
 import Btn from "@/components/Btn.vue";
 import Copyable from "@/components/Copyable.vue";
 import EditUrlModal from "@/components/EditUrlModal.vue";
-import {decodeUrl, encodeUrl} from "@/urlmaker";
+import {decodeUrl, encodeUrl, getScreenshotUrl} from "@/urlmaker";
 
 const emptySpecs = fields.reduce((o, f) => {
   o[f.name] = f.default;
@@ -45,13 +45,17 @@ async function generateLink() {
   }
 }
 
+function screenshot() {
+  window.open(getScreenshotUrl(specs.url));
+}
+
 </script>
 
 <template>
   <div class="wrapper">
     <SpecsForm v-model="specs" class="specs-form"></SpecsForm>
     <Btn :active="formValid" @click="generateLink">Generate link</Btn>
-    <Btn :active="formValid">Screenshot</Btn>
+    <Btn :active="formValid" @click="screenshot">Screenshot</Btn>
     <Btn @click="editModalVisible = true">Edit existing task</Btn>
     <Copyable v-if="link" :contents="link" class="link-view"></Copyable>
     <EditUrlModal :visible="editModalVisible" @close="editModalVisible = false"
diff --git a/frontend/wizard-vue/src/urlmaker/index.ts b/frontend/wizard-vue/src/urlmaker/index.ts
index 626863e..678f462 100644
--- a/frontend/wizard-vue/src/urlmaker/index.ts
+++ b/frontend/wizard-vue/src/urlmaker/index.ts
@@ -1,9 +1,11 @@
 import type {Specs} from "@/urlmaker/specs.ts";
 
-const apiEndpoint = '/api/v1/render/';
+const apiBase = import.meta.env.VITE_API_BASE || document.location.origin;
+const renderEndpoint = '/api/v1/render/';
+const screenshotEndpoint = `/api/v1/screenshot/`;
 
 export async function decodeUrl(url: string): Promise<Specs> {
-  const splitUrl = url.split(apiEndpoint);
+  const splitUrl = url.split(renderEndpoint);
   if(splitUrl.length !== 2) {
     throw 'Split failed';
   }
@@ -31,11 +33,17 @@ export async function encodeUrl(specs: Specs): Promise<string> {
   const encodedData = b64encode(buf);
   console.log('Data len=' + encodedData.length);
   const version = 0;
-  return `${document.location.origin}${apiEndpoint}${version}:${encodedData}`
+  return `${apiBase}${renderEndpoint}${version}:${encodedData}`
+}
+
+export function getScreenshotUrl(url: string): string {
+  return `${apiBase}${screenshotEndpoint}?url=${url}`;
 }
 
 function b64encode(buf: Uint8Array): string {
+  // @ts-ignore
   const b64str = btoa(String.fromCharCode.apply(null, buf));
+  // @ts-ignore
   return b64str.replaceAll('=', '');
 }