screenshots; apiBase

This commit is contained in:
Egor Aristov 2025-02-05 23:03:16 +03:00
parent 81219ef26a
commit c3a0c32d99
4 changed files with 19 additions and 5 deletions

View File

@ -0,0 +1 @@
VITE_API_BASE=http://localhost:5000

View File

@ -0,0 +1 @@
VITE_API_BASE=

View File

@ -5,7 +5,7 @@ import {type Field, fields, type Specs} from "@/urlmaker/specs.ts";
import Btn from "@/components/Btn.vue"; import Btn from "@/components/Btn.vue";
import Copyable from "@/components/Copyable.vue"; import Copyable from "@/components/Copyable.vue";
import EditUrlModal from "@/components/EditUrlModal.vue"; import EditUrlModal from "@/components/EditUrlModal.vue";
import {decodeUrl, encodeUrl} from "@/urlmaker"; import {decodeUrl, encodeUrl, getScreenshotUrl} from "@/urlmaker";
const emptySpecs = fields.reduce((o, f) => { const emptySpecs = fields.reduce((o, f) => {
o[f.name] = f.default; o[f.name] = f.default;
@ -45,13 +45,17 @@ async function generateLink() {
} }
} }
function screenshot() {
window.open(getScreenshotUrl(specs.url));
}
</script> </script>
<template> <template>
<div class="wrapper"> <div class="wrapper">
<SpecsForm v-model="specs" class="specs-form"></SpecsForm> <SpecsForm v-model="specs" class="specs-form"></SpecsForm>
<Btn :active="formValid" @click="generateLink">Generate link</Btn> <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> <Btn @click="editModalVisible = true">Edit existing task</Btn>
<Copyable v-if="link" :contents="link" class="link-view"></Copyable> <Copyable v-if="link" :contents="link" class="link-view"></Copyable>
<EditUrlModal :visible="editModalVisible" @close="editModalVisible = false" <EditUrlModal :visible="editModalVisible" @close="editModalVisible = false"

View File

@ -1,9 +1,11 @@
import type {Specs} from "@/urlmaker/specs.ts"; 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> { export async function decodeUrl(url: string): Promise<Specs> {
const splitUrl = url.split(apiEndpoint); const splitUrl = url.split(renderEndpoint);
if(splitUrl.length !== 2) { if(splitUrl.length !== 2) {
throw 'Split failed'; throw 'Split failed';
} }
@ -31,11 +33,17 @@ export async function encodeUrl(specs: Specs): Promise<string> {
const encodedData = b64encode(buf); const encodedData = b64encode(buf);
console.log('Data len=' + encodedData.length); console.log('Data len=' + encodedData.length);
const version = 0; 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 { function b64encode(buf: Uint8Array): string {
// @ts-ignore
const b64str = btoa(String.fromCharCode.apply(null, buf)); const b64str = btoa(String.fromCharCode.apply(null, buf));
// @ts-ignore
return b64str.replaceAll('=', ''); return b64str.replaceAll('=', '');
} }