diff --git a/components/report-window/email-content.scss b/components/report-window/email-content.scss index 3cb0a2c..009f679 100644 --- a/components/report-window/email-content.scss +++ b/components/report-window/email-content.scss @@ -5,12 +5,6 @@ h1 { margin-bottom: calc(24 / 16 * 1rem); } -.generator-container { - max-width: 100ex; - margin: 0 auto; - font-size: calc(14 / 16 * 1rem); -} - .mail-container { box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px; background-color: #fff; @@ -53,3 +47,28 @@ h1 { font-weight: 700; } } + +.buttons-email-container { + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr 1fr 1fr 1fr; + margin: 2rem 0; + padding: 1em 0; + + &--single { + grid-template-columns: 1fr 1fr 1fr; + } + + .sv_prev_btn, + .sv_next_btn { + margin: 0 !important; + } + + .sv_prev_btn { + grid-column: 2/3; + } + + .sv_next_btn--single { + grid-column: 2; + } +} diff --git a/components/report-window/email-content.tsx b/components/report-window/email-content.tsx index 9d50ff3..8c01005 100644 --- a/components/report-window/email-content.tsx +++ b/components/report-window/email-content.tsx @@ -8,14 +8,20 @@ import { Fragment, useState } from 'react'; import emailIntro from './email-intro'; import { reportIntro } from './report-intro'; +const SS_URL = 'http://65.108.60.135:3000'; + export default function EmailContent({ answers, visited_url, clusters, + scrRequestPath, + downloadFiles, }: { answers: ParsedAnswers; visited_url: string; clusters: Record; + scrRequestPath: string; + downloadFiles: Function; }) { console.log('rendering email!', answers); const _ = (key: string) => v(key, answers.zaimek); @@ -88,9 +94,28 @@ export default function EmailContent({ )} -
- + ) : null} +
{copied ? ( diff --git a/components/report-window/report-window.scss b/components/report-window/report-window.scss index a9f9e61..ddae071 100644 --- a/components/report-window/report-window.scss +++ b/components/report-window/report-window.scss @@ -274,3 +274,14 @@ h1 { font-weight: 600; font-size: calc(14 / 16 * 1rem); } + +.generator-container { + max-width: 100ex; + margin: 0 auto; + font-size: calc(14 / 16 * 1rem); + margin-top: 3rem; + + a { + color: $ultra-black-color; + } +} diff --git a/components/report-window/report-window.tsx b/components/report-window/report-window.tsx index 9b1ee82..3f47dbd 100644 --- a/components/report-window/report-window.tsx +++ b/components/report-window/report-window.tsx @@ -9,6 +9,14 @@ import EmailContent from './email-content'; import { parseAnswers, ParsedAnswers } from './parse-answers'; import ScreenshotGenerator from './screenshot-generator'; +function downloadFiles(link: string) { + let a = document.createElement('a'); + a.setAttribute('href', link); + a.setAttribute('download', ''); + a.setAttribute('target', '_blank'); + a.click(); +} + function Report() { try { const url = new URL(document.location.toString()); @@ -18,6 +26,8 @@ function Report() { url.searchParams.get('answers') ? JSON.parse(url.searchParams.get('answers')) : null ); const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey'); + const [scrRequestPath, setScrRequestPath] = React.useState(''); + const clusters = getMemory().getClustersForOrigin(origin); React.useEffect(() => { @@ -48,13 +58,30 @@ function Report() { )} {mode === 'screenshots' ? ( + ) : ( + '' + )} + {mode === 'preview' ? ( + ) : ( '' )} - {mode === 'preview' ? : ''} - {/* */} ); return ( diff --git a/components/report-window/screenshot-generator.scss b/components/report-window/screenshot-generator.scss index e9eb0c9..28e239c 100644 --- a/components/report-window/screenshot-generator.scss +++ b/components/report-window/screenshot-generator.scss @@ -23,16 +23,6 @@ h2 { position: relative; } -.generator-container { - max-width: 100ex; - margin: 0 auto; - font-size: calc(14 / 16 * 1rem); - - a { - color: $ultra-black-color; - } -} - .buttons-container { display: flex; justify-content: center; diff --git a/components/report-window/screenshot-generator.tsx b/components/report-window/screenshot-generator.tsx index c3b4b31..5cc237b 100644 --- a/components/report-window/screenshot-generator.tsx +++ b/components/report-window/screenshot-generator.tsx @@ -13,16 +13,25 @@ enum taskState { type Screenshot = { url: string; domain: string; + filename: string; found_headers: string[]; }; interface screenshotTask { - url: string; domains: string[]; + elapsed_time_s: number; + finished_time: number; id: string; - status: taskState; - output: string; images: Screenshot[]; + jobs_ahead: number; + output: string; + processing_took: number; + request_time: number; + started_time: number; + status: taskState; + url: string; + waiting_took: number; + zip_url: string; } function createTaskEndpoint(visited_url: string, domains: string[]) { @@ -44,14 +53,19 @@ export default function ScreenshotGenerator({ visited_url, clusters, setReportWindowMode, + setRequestPath, + downloadFiles, }: { visited_url: string; clusters: Record; setReportWindowMode: Function; + setRequestPath: Function; + downloadFiles: Function; }) { const [mode, setMode] = React.useState('idle'); const [images, setImages] = React.useState([]); const [taskId, setTaskId] = React.useState(null); + const [output, setOutput] = React.useState({}); async function subscribeTask(path: string): Promise { let response = { status: taskState.WAITING }; @@ -71,19 +85,6 @@ export default function ScreenshotGenerator({ return response as screenshotTask; } - function downloadFiles() { - const urls = images.map((el) => `${SS_URL}${el}`); - - for (const url of urls) { - let a = document.createElement('a'); - a.setAttribute('href', url); - a.setAttribute('download', ''); - a.setAttribute('target', '_blank'); - a.click(); - } - setReportWindowMode('preview'); - } - return (
{mode === 'idle' ? ( @@ -108,6 +109,7 @@ export default function ScreenshotGenerator({ className="sv_prev_btn" onClick={() => { setReportWindowMode('preview'); + setRequestPath(null); }} > Pomiń @@ -123,6 +125,9 @@ export default function ScreenshotGenerator({ setImages(response.images); console.log('response.images', response.images); console.log('output', response); + + setOutput(response); + setRequestPath(response.zip_url); }} > Wygeneruj @@ -186,7 +191,13 @@ export default function ScreenshotGenerator({
{mode === 'finished' ? ( -