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

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

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

    .apitester h3 {
        margin: 0;
    }

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

    .apitester.apitester-editor {
        padding: 1rem;
    }

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

    .apitester-editor [data-ref=enable-http] {
        display: inline-block;
        margin-left: 1rem;
        text-decoration: none;
        color: #ccc;
    }

    .apitester-editor [data-ref=enable-http]:hover {
        color: blue#0000EE;
    text-decoration: none;
}

    .apitester-editor [data-ref=methodenable-http]:visited {
        displaycolor: inline-block#ccc;
    }

    .apitester-editor [data-ref=host]enable-http]:visited:hover {
    color: #0000EE;
    text-decoration: none;
}

.apitester [data-ref=method] {
    display: inline-block;
}

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

    .apitester-editor [data-ref=url] {
        display: inline-block;
        padding: 0;
        white-space: pre-wrap;
    }

    .apitester-editor [data-ref=body] {
        display: block;
        resize: vertical;
        width: 100%;
        min-height: 3rem;
        border: 1px solid #eaeaea;
        padding: 0padding: 0.5rem;
        white-space: pre-wrap;
    }

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

    .apitester [data-ref=outputclear] {
        backgrounddisplay: #eaeaeainline-block;
        padding: 0.5remmargin-left: 1rem;
        white-space: color: #0000EE;
}

.apitester [data-ref=clear]:hover {
    text-decoration: none;
}

.apitester [data-ref=clear]:visited {
    color: #0000EE;
}

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

    .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 =      objStr = obj.toString();
    }
    return objStrobj.toString();
    }
    return objStr;
}

function show(el) {
    el.style.display = "";
}

function hide(el) {
    el.style.display = "none";
}

class ApiTester {
    constructor(selector, httpMethod, apiMethod, body) {
        this.state = {
            host: localStorage.getItem("apitester.hostname") || DEFAULT_HOST,
            httpMethod: httpMethod,
            apiMethod: apiMethod,
            body: body,
            isExecuting: false,
            output: null,
        };
        this.el = this.initEl(selector);
        this.ui = this.initUi(this.el);
        this.listen();
        this.render();
    }

    get isMixedContent() {
        return (
            location.protocol == "https:" && this.state.host.startsWith("http:")
        );
    }

    initEl(selector) {
        const el = document.querySelector(selector);
        el.innerHTML = `
        <div class="apitester-editor">
            <h3>
                API-тестер
                <a data-ref="enable-http" href="##enable-http">включить HTTP</a>
            </h3>
            <div>
                <pre data-ref="method"></pre>
                <input data-ref="host">
                <pre data-ref="url"></pre>
            </div>
            <div>
                <textarea data-ref="body"></textarea>
            </div>
            <div>
     </div>
            <div><button data-ref="execute">Выполнить</button>
                <button<a data-ref="clear" href="execute#enable-http">Выполнить<>очистить</button>a>
            </div>
        </div>
        <pre data-ref="output">
        </pre>
        `;
        return el;
    }

    initUi(el) {
        return {
            enableHttp: el.querySelector("[data-ref=enable-http]"),
            method: el.querySelector("[data-ref=method]"),
            host: el.querySelector("[data-ref=host]"),
            url: el.querySelector("[data-ref=url]"),
            body: el.querySelector("[data-ref=urlbody]"),
            bodyexecute: el.querySelector("[data-ref=bodyexecute]"),
            executeclear: el.querySelector("[data-ref=executeclear]"),
            output: this.el.querySelector("[data-ref=output]"),
        };
    }

    listen() {
        this.el.addEventListener("keydown", (event) => {
            this.onKeydown(event);
        });
        this.ui.enableHttp.addEventListener("click", (event) => {
            this.onEnableHttp(event);
        });
        this.ui.host.addEventListener("blurchange", (event) => {
            this.onEdit(event);
        });
        this.ui.body.addEventListener("blurchange", (event) => {
            this.onEdit(event);
        });
        this.ui.execute.addEventListener("click", (event) => {
            this.onExecute(event);
        });
    }

    onKeydown(event) {
        if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
this.ui.clear.addEventListener("click", (event) => {
             // Ctrl + Enter
this.onClear(event);
        });
    }

    onKeydown(event.preventDefault(); {
            this.onEdit();
        if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) {
    this.onExecute();
        }
// Ctrl +  }
Enter
    onEnableHttp(event) {
        event.preventDefault();
        window.location.protocol = "http:";
    }
this.onEdit();
    onEdit() {
        try {this.onExecute();
        }
    this.state.host = this.ui.host.value;}

    onEnableHttp(event) {
       this.state.body = this.ui.body.value event.preventDefault();
            localStorage.setItem("apitester.hostname", this.state.host)window.location.protocol = "http:";
    }

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

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

    onClear()  {
        this.showResponse(err).state.output = null;
            }this.render();
    }

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

    showResponse(response) {
        this.state.output = stringify(response);
        this.state.isExecuting = false;
        this.render();
    }

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

    render() {
        if (this.isMixedContent) {
            show(this.ui.enableHttp.style.display = "");
        } else {
            hide(this.ui.enableHttp.style.display = "none".enableHttp);
        }
        this.ui.method.innerHTML = this.state.httpMethod;
        this.ui.host.value = this.state.host;
        this.ui.url.innerHTML = this.state.apiMethod;
        this.ui.body.value = this.state.body;
        if (this.state.isExecuting) {
            this.ui.execute.innerHTML = "Выполняю...";
            this.ui.execute.setAttribute("disabled", "disabled");
        } else {
            this.ui.execute.innerHTML = "Выполнить";
            this.ui.execute.removeAttribute("disabled");
        }
        this.ui.output.innerHTML = this.state.output;
        if (this.state.output) {
            show(this.ui.output.style.display = "block");
            show(this.ui.clear);
        } else {
            hide(this.ui.output.style.display = "none");
            hide(this.ui.clear);
        }
    }
}
</script>