summaryrefslogtreecommitdiffstats
path: root/client/js/app/src/app/pages/querybuilder/query-builder.jsx
blob: 8598cbda54e1cdada4f02063ce9087678470a42a (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React from 'react';
import SimpleButton from './Components/Buttons/SimpleButton';
import QueryInput from './Components/Text/QueryInput';
import SimpleDropDownForm from './Components/Text/SimpleDropDownForm';
import SimpleForm from './Components/Text/SimpleForm';
import TextBox from './Components/Text/TextBox';
import ImageButton from './Components/Buttons/ImageButton';
import OverlayImageButton from './Components/Buttons/OverlayImageButton';
import AddQueryInput from './Components/Buttons/AddQueryInputButton';
import { QueryInputProvider } from './Components/Contexts/QueryInputContext';
import pasteImage from './assets/img/paste.svg';
import copyImage from './assets/img/copy.svg';
import refreshImage from './assets/img/reload.svg';

import '../../styles/agency.css';
import '../../styles/vespa.css';
import SendQuery from './Components/Text/SendQuery';
//import 'bootstrap/dist/css/bootstrap.min.css'; //TODO: Find out how to get this css

export function QueryBuilder() {
  const messageMethodArray = ['POST', 'GET'];

  return (
    <>
      <header>
        <div className="intro container">
          <TextBox className={'intro-lead-in'}>Vespa Search Engine</TextBox>
          <TextBox className={'intro-long'}>
            Select the method for sending a request and construct a query.
          </TextBox>
          <SendQuery />
          <br />
          <QueryInputProvider>
            <div id="request">
              <QueryInput />
            </div>
            <br />
            <AddQueryInput />
          </QueryInputProvider>
          <br />
          <ImageButton
            id="pasteJSON"
            className="pasteJSON"
            showImage={true}
            image={pasteImage}
            style={{ marginTop: '-2px', marginRight: '3px' }}
          >
            Paste JSON
          </ImageButton>
          <SimpleButton className="showJSON">Show query JSON</SimpleButton>
          <TextBox className="response">Response</TextBox>
          <textarea
            className="responsebox"
            readOnly
            cols="70"
            rows="25"
          ></textarea>
          <OverlayImageButton
            className="intro-copy"
            image={copyImage}
            height="30"
            width="30"
            tooltip="Copy"
          >
            Copy
          </OverlayImageButton>
          <br />
          <br />
        </div>
      </header>
    </>
  );
}