Add "reinstate" functionality, refactoring

eBay_Kleinanzeigen_Anzeige_duplizieren.js

// ==UserScript==
// @name          eBay Kleinanzeigen - Anzeige duplizieren / neu einstellen
// @namespace     https://github.com/J05HI
// @description   Bietet eine "Anzeige duplizieren / neu einstellen" Funktion beim Bearbeiten einer vorhandenen Anzeige in eBay Kleinanzeigen.
// @icon          http://www.google.com/s2/favicons?domain=www.kleinanzeigen.de
// @copyright     2024, J05HI (https://github.com/J05HI)
// @license       MIT
// @version       1.4.0
// @match         https://www.kleinanzeigen.de/p-anzeige-bearbeiten.html*
// @grant         none
// @updateURL     https://gist.githubusercontent.com/J05HI/9f3fc7a496e8baeff5a56e0c1a710bb5/raw/eBay_Kleinanzeigen_Anzeige_duplizieren.js
// @downloadURL   https://gist.githubusercontent.com/J05HI/9f3fc7a496e8baeff5a56e0c1a710bb5/raw/eBay_Kleinanzeigen_Anzeige_duplizieren.js
// ==/UserScript==

(function () {
    'use strict';

    function showLoading() {
        const spinnerContainer = document.createElement("div");

        Object.assign(spinnerContainer.style, {
            height: '100%',
            width: '100%',
            position: 'fixed',
            top: '0',
            backdropFilter: 'blur(3px)',
            zIndex: '9999',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        });

        const spinnerElement = document.createElement("i");
        spinnerElement.className = "spinner-big";

        spinnerContainer.appendChild(spinnerElement);
        document.body.appendChild(spinnerContainer);
    }

    async function deleteAd(id) {
        const csrfToken = document.querySelector('meta[name="_csrf"]').getAttribute("content");

        await fetch(`https://www.kleinanzeigen.de/m-anzeigen-loeschen.json?ids=${id}`, {
            headers: {
                accept: "application/json, text/plain, */*",
                "x-csrf-token": csrfToken,
            },
            method: "POST",
        });
    }

    function createButton(id, text, className, clickHandler) {
        const button = document.createElement('button');

        button.setAttribute('id', id);
        button.setAttribute('type', 'submit');
        button.classList.add('button-secondary');
        button.classList.add(className);
        Object.assign(button.style, {
            paddingLeft: '40px',
            backgroundPositionX: '10px',
        });
        button.innerText = text;
        button.addEventListener('click', clickHandler);

        return button;
    }

    const duplicateButton = createButton('pstad-duplicate', 'Anzeige duplizieren', 'featurelabel-bumpup', (event) => {
        event.preventDefault();
        showLoading();

        document.getElementById('postad-id').value = '';
        document.getElementById('adForm').submit();
    });

    const newButton = createButton('pstad-duplicate', 'Anzeige neu einstellen', 'featurelabel-highlight', async (event) => {
        event.preventDefault();
        showLoading();

        const adIdElement = document.getElementById('postad-id');
        await deleteAd(adIdElement.value);

        setTimeout(() => {
            adIdElement.value = '';
            document.getElementById('adForm').submit();
        }, 5000);
    });

    const submitButton = document.getElementById('pstad-submit');
    submitButton.after(duplicateButton, newButton);
})();