История страницы

<style>
    .apitester {
        box-sizing: border-box;
        border: 1px solid #eaeaea;
        font-family: sans-serif;
    }

    .apitester * {
        box-sizing: border-box;
    }

    .apitester h3 {
        margin: 0;
    }

    .apitester-hint {
        color: #ccc;
    }

    .apitester pre {
        margin: 0;
        font-family: monospace;
    }

    .apitester-editor {
        padding: 1rem;
    }

    .apitester-editor>div {
        margin-top: 0.5rem;
    }

    .apitester-editor [data-ref=methodenable-http] {
        display: inline-block;
    }

    .apitestermargin-editor [data-ref=host] {left: 1rem;
        displaytext-decoration: inline-blocknone;
        resizecolor: horizontal#ccc;
    }

     border: 1px solid #eaeaea;.apitester-editor [data-ref=enable-http]:hover {
        paddingcolor: 0.5remblue;
    }

    white.apitester-space:editor pre-wrap;[data-ref=method] {
        font-familydisplay: monospaceinline-block;
    }

    .apitester-editor [data-ref=urlhost] {
        display: inline-block;
        resize: horizontal;
        border: 1px solid #eaeaea;
        padding: 0.5rem;
        white-space: pre-wrap;
        font-family: monospace;
    }

    .apitester-editor [data-ref=bodyurl] {
        display: inline-block;
        resizepadding: vertical0;
        widthwhite-space: 100%pre-wrap;
    }

    min-height: 3rem;.apitester-editor [data-ref=body] {
        borderdisplay: 1px solid #eaeaeablock;
        paddingresize: 0.5remvertical;
        white-spacewidth: pre-wrap100%;
    }

    .apitester [data-ref=execute] {
        padding: 0.5rem 1remmin-height: 3rem;
    }

    .apitester [data-ref=output] {
        background: border: 1px solid #eaeaea;
        padding: 0.5rem 1rem;
        white-space: pre-wrap;
    }

    .apitester-error  [data-ref=execute] {
        border-color: redpadding: 0.5rem 1rem;
    }
</style>

<script>
"use strict";

const DEFAULT_HOST = "http://localhost:8080";
const API_KEY = "7fd18aaabd7d53ffa4846e4521c1f736c13490eb";

function stringify(obj) {    .apitester [data-ref=output] {
        background: #eaeaea;
        padding: 0.5rem 1rem;
    let objStr = JSON.stringify(obj, null, 4) white-space: pre-wrap;
    if (objStr == "{}") {
}

    .apitester-error {
        border-color: red;
    }
</style>

<script>
"use strict";

const DEFAULT_HOST = "http://localhost:8080";
const API_KEY = "7fd18aaabd7d53ffa4846e4521c1f736c13490eb";

function stringify(obj) {
    let objStr = JSON.stringify(obj, null, 4);
    if (objStr == "{}") {
        objStr = obj.toString();
    }
    return objStr;
}

class ApiTester {
    constructor(selector, httpMethod, apiMethod, body) {
        this.state = {
            host: localStorage.getItem("apitester.hostname") || DEFAULT_HOST,
            httpMethod: httpMethod,
            apiMethod: apiMethod,
            body: body,
           objStr = obj.toString();
isExecuting: false,
     }
     return objStr;
}

class ApiTester { output: null,
    constructor(selector, httpMethod, apiMethod, body) {};
        this.state = {
   el = this.initEl(selector);
        this.ui host:= localStoragethis.getIteminitUi("apitesterthis.hostname") || DEFAULT_HOST,el);
        this.listen();
    httpMethod: httpMethod,
   this.render();
    }

    get apiMethod: apiMethod,isMixedContent() {
        return (
   body: body,
        location.protocol == "https:"  isExecuting: false,&& this.state.host.startsWith("http:")
        );
    output: null,}

    initEl(selector) {
   };
       const this.el = thisdocument.initElquerySelector(selector);
        this.listen();
el.innerHTML = `
         this.render();
<div class="apitester-editor">
      }

    get txtMethod() {<h3>
        return this.el.querySelector("[data-ref=method]");
        }

API-тестер
      get txtHost() {
        return this.el.querySelector("[<a data-ref=host]");
"enable-http" href="#">включить HTTP</a>
      }

    get txtUrl() {
 </h3>
         return this.el.querySelector("[data-ref=url]");
  <div>
  }

    get txtBody() {
        return this.el.querySelector("[<pre data-ref=body]");"method"></pre>
    }

    get btnExecute() {
        return this.el.querySelector("[<input data-ref=execute]");"host">
    }

    get txtOutput() {
        return this.el.querySelector("[<pre data-ref=output]");
"url"></pre>
       }

    initEl(selector) {
 </div>
         const el = document.querySelector(selector); <div>
        el.innerHTML = `
        <div class<textarea data-ref="apitester-editor">body"></textarea>
            <h3></div>
            <div>
    API-тестер
              <button data-ref="execute">Выполнить</button>
        <span class="apitester-hint">работает только по HTTPS<</span>div>
        </div>
    </h3>
    <pre data-ref="output">
        <div></pre>
        `;
        <pre data-ref="method"></pre>return el;
      }

    initUi(el) {
     <input data-ref="host">
  return {
             <pre enableHttp: el.querySelector("[data-ref="url"></pre>
enable-http]"),
             </div>
method: el.querySelector("[data-ref=method]"),
             <div>host: el.querySelector("[data-ref=host]"),
                <textarea url: el.querySelector("[data-ref="body"></textarea>url]"),
            </div>
            <div>body: el.querySelector("[data-ref=body]"),
                <button execute: el.querySelector("[data-ref="execute]">Выполнить</button>),
             </div>output: this.el.querySelector("[data-ref=output]"),
        </div>};
    }

    <pre data-ref="output">listen() {
        </pre>
   this.el.addEventListener("keydown", (event) => {
     `;
        return elthis.onKeydown(event);
    }

    listen(}) {;
        this.ui.elenableHttp.addEventListener("keydownclick", (event) => {
            this.onKeydownonEnableHttp(event);
        });
        this.ui.txtHosthost.addEventListener("blur", (event) => {
            this.onEdit(event);
        });
        this.ui.txtBodybody.addEventListener("blur", (event) => {
            this.onEdit(event);
        });
        this.btnExecuteui.execute.addEventListener("click", (event) => {
            this.onExecute(event);
        });
    }

    onKeydown(event) {
        if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
            // Ctrl + Enter
            event.preventDefault();
            // Ctrl + Enterthis.onEdit();
            eventthis.preventDefaultonExecute();
        }
    this.onEdit();}

    onEnableHttp(event) {
        thisevent.onExecutepreventDefault();
        window.location.protocol = }"http:";
    }

    onEdit() {
        try {
            this.state.host = this.txtHostui.host.value;
            this.state.body = this.txtBodyui.body.value;
            localStorage.setItem("apitester.hostname", this.state.host);
        } catch (exc) {
            this.state.output = exc.toString();
        } finally {
            this.render();
        }
    }

    onExecute() {
        this.markAsExecuting();
        this.execute()
            .then((response) => {
                return response.json();
            })
            .then((response) => {
                this.showResponse(response);
            })
            .catch(((err) => {
err) => {
                this.showResponse(err);
            });
    }

    markAsExecuting() {
        this.state.output = null;
        this.showResponse(err)state.isExecuting = true;
            }this.render();
    }

    markAsExecutingshowResponse(response) {
        this.state.output = nullstringify(response);
        this.state.isExecuting = truefalse;
        this.render();
    }

    showResponseexecute(response) {
        const url = this.state.host + this.state.output = stringify(response)apiMethod;
        const this.state.isExecutingoptions = false;{
         this.render();
    }

method: this.state.httpMethod,
    execute() {
        const url = this.state.host + this.state.apiMethod;
mode: "cors",
          const options =headers: {
             method: this.state.httpMethod,
   "Content-Type": "application/json",
                modeAuthorization: "cors" `Token ${API_KEY}`,
            headers: {
},
        };
        if (this.state.httpMethod == "Content-TypePOST": "application/json",) {
            options.body = this.state.body;
    Authorization:   `Token ${API_KEY}`,
          return fetch(url, options);
    },

        };render() {
        if (this.state.httpMethod == "POST"isMixedContent) {
            options.bodythis.ui.enableHttp.style.display = this.state.body"";
        } else {
            return fetch(url, options)this.ui.enableHttp.style.display = "none";
    }

    render() {}
        this.ui.txtMethodmethod.innerHTML = this.state.httpMethod;
        this.ui.txtHosthost.value = this.state.host;
        this.ui.txtUrlurl.innerHTML = this.state.apiMethod;
        this.txtBodyui.body.value = this.state.body;
        if (this.state.isExecuting) {
            this.ui.btnExecuteexecute.innerHTML = "Выполняю...";
            this.ui.btnExecuteexecute.setAttribute("disabled", "disabled");
        } else {
            this.ui.btnExecuteexecute.innerHTML = "Выполнить";
            this.ui.btnExecuteexecute.removeAttribute("disabled");
        }
        this.ui.txtOutputoutput.innerHTML = this.state.output;
        if (this.state.output) {
            this.txtOutputui.output.style.display = "block";
        } else {
            this.txtOutputui.output.style.display = "none";
        }
    }
}
</script>