Webapp for API interaction. #1100

t-e-s-tweb · 2023-08-08T21:04:51Z

t-e-s-tweb
Aug 8, 2023

Hey man, I made a go app last time but it wasn't useful much. Now presenting a simple webapp for interacting with the api. Its a single html page which can be hosted if someone wants to or just save it locally and use.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blocky Frontend WebApp</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5f5;
        }

        h1, h2 {
            font-weight: bold;
        }

        #container {
            width: 100%;
            max-width: 400px;
            margin: 1rem;
            padding: 1rem;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

        input, select {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            width: 100%;
            padding: 0.5rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #output {
            width: 100%;
            padding: 1rem;
            background-color: #f0f0f0;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
         #optionsContainer {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 1rem;
        }

        .option {
            margin: 0 1rem;
        }

        .option select {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 3px;
        }			
		.dropdown {
    position: relative;
    display: inline-block;
}

.action-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 16px;
}
        
    </style>
</head>
<body>
    <div id="container">
        <h1>API Interaction WebApp</h1>
        <div id="baseURLContainer">
            <label for="baseURL">Base URL:</label>
            <input type="text" id="baseURL" placeholder="Enter base URL (e.g., https://address)">
            <button onclick="setBaseURL()">Set Base URL</button>
        </div>
<div id="optionsContainer">
    <h2>Choose an option:</h2>
    <div class="option">
        <label for="selectOption">Select an option:</label>
        <div class="dropdown">
            <select id="selectOption">
                <option value="getBlockingStatus">Get Blocking Status</option>
                <option value="enableBlocking">Enable Blocking</option>
                <option value="disableBlocking">Disable Blocking</option>
                <option value="refreshLists">Refresh Lists</option>
            </select>
            <button class="action-button" onclick="performSelectedAction()">➜</button>
        </div>
    </div>
</div>

        <div id="queryContainer">
            <label for="query">Query:</label>
            <input type="text" id="query" placeholder="Enter DNS query">
            <label for="queryType">Query Type:</label>
            <select id="queryType">
                <option value="A">A (Host address)</option>
                <option value="AAAA">AAAA (IPv6 host address)</option>
                <option value="CNAME">CNAME (Canonical name for an alias)</option>
                <option value="MX">MX (Mail eXchange)</option>
                <option value="NS">NS (Name Server)</option>
                <option value="PTR">PTR (Pointer)</option>
                <option value="SOA">SOA (Start Of Authority)</option>
                <option value="SRV">SRV (location of service)</option>
                <option value="TXT">TXT (Descriptive text)</option>
            </select>
            <button onclick="performDNSQuery()">Perform Query</button>
        </div>
        <div id="output"></div>
    </div>


    <script>
        const outputElement = document.getElementById("output");
        const baseURLInput = document.getElementById("baseURL");
        let baseURL = getStoredBaseURL() || "";

        function getStoredBaseURL() {
            return localStorage.getItem("baseURL");
        }

        function setStoredBaseURL(baseURL) {
            localStorage.setItem("baseURL", baseURL);
        }

        if (baseURL) {
            baseURLInput.value = baseURL;
        }

        function setBaseURL() {
            baseURL = baseURLInput.value;
            setStoredBaseURL(baseURL);
            outputElement.innerHTML = `<p>Base URL set to: ${baseURL}</p>`;
        }
function performSelectedAction() {
    const selectOption = document.getElementById("selectOption");
    const selectedValue = selectOption.value;

    // Call the appropriate function based on the selected option
    switch (selectedValue) {
        case "getBlockingStatus":
            getBlockingStatus();
            break;
        case "enableBlocking":
            enableBlocking();
            break;
        case "disableBlocking":
            disableBlocking();
            break;
        case "refreshLists":
            refreshLists();
            break;
        case "openQueryContainer":
            openQueryContainer();
            break;
        default:
            // Handle any other cases
            break;
    }
}
        function sendRequest(endpoint, method, data = null, onSuccess = null) {
            const options = {
                method: method,
                headers: {
                    "Content-Type": "application/json"
                }
            };

            if (method !== "GET" && data !== null) {
                options.body = JSON.stringify(data);
            }

            fetch(`${baseURL}${endpoint}`, options)
                .then(response => response.text())
                .then(responseText => {
                    if (onSuccess) {
                        onSuccess(responseText);
                    }
                })
                .catch(error => {
                    outputElement.innerHTML = `<p>Error: ${error}</p>`;
                });
        }

        function openQueryContainer() {
            document.getElementById("queryContainer").style.display = "block";
        }

        function performDNSQuery() {
            const query = document.getElementById("query").value;
            const queryType = document.getElementById("queryType").value;
            const requestData = {
                query: query,
                type: queryType
            };
            sendRequest("/api/query", "POST", requestData, showResponse);
        }

        function showResponse(responseText) {
            outputElement.innerHTML = `<pre>${responseText}</pre>`;
        }

        function showBlockingStatus(responseText) {
            const statusData = JSON.parse(responseText);
            const status = statusData.enabled ? "Enabled" : "Disabled";
            const groups = statusData.disabledGroups.join(", ") || "None";
            const autoEnableInSec = statusData.autoEnableInSec;

            const formattedStatus = `
                <p><strong>Status:</strong> ${status}</p>
                <p><strong>Groups:</strong> ${groups}</p>
                <p><strong>Auto Enable in seconds:</strong> ${autoEnableInSec}</p>
            `;

            outputElement.innerHTML = formattedStatus;
        }

        function getBlockingStatus() {
            sendRequest("/api/blocking/status", "GET", null, showBlockingStatus);
        }

        function enableBlocking() {
            sendRequest("/api/blocking/enable", "GET", null, showEnableStatus);
        }

        function disableBlocking() {
            const duration = prompt("Enter the duration (e.g., 300s, 5m, 1h, 5m30s):");
            const groups = prompt("Enter the groups to disable (comma separated), or leave empty to disable all groups:");

            const queryParams = new URLSearchParams();
            if (duration) {
                queryParams.append("duration", duration);
            }
            if (groups) {
                queryParams.append("groups", groups);
            }

            sendRequest(`/api/blocking/disable?${queryParams.toString()}`, "GET", null, showDisableStatus);
        }

        function showEnableStatus() {
            outputElement.innerHTML = "<p>Blocking Enabled</p>";
        }

        function showDisableStatus() {
            outputElement.innerHTML = "<p>Blocky Disabled</p>";
        }

        function refreshLists() {
            outputElement.innerHTML = "<p>List Refresh Started</p>";
            sendRequest("/api/lists/refresh", "POST", null, () => {
                outputElement.innerHTML = "<p>Lists Refreshed</p>";
            });
        }
    </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webapp for API interaction. #1100

{{title}}

Replies: 0 comments

Select a reply

Webapp for API interaction. #1100

t-e-s-tweb Aug 8, 2023

Replies: 0 comments

t-e-s-tweb
Aug 8, 2023