Plotaroute - Bookmarks manager

Greasy Fork is available in English.
Plotaroute - Bookmarks manager

Manage bookmarks directly on my routes page
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Plotaroute - Bookmarks manager
// @namespace    https://github.com/bogdal/userscripts
// @version      0.1
// @description  Manage bookmarks directly on my routes page
// @author       Adam Bogdał
// @match        https://www.plotaroute.com/myroutes*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  "use strict";

  const getBookmarkedRoutes = () => {
    return new Promise((resolve) => {
      const url = "https://www.plotaroute.com/get_bmroutes.asp";
      const xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.onload = (e) => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            resolve(JSON.parse(xhr.responseText));
          }
        }
      };
      xhr.send(null);
    });
  };

  const setBookmark = (routeId, isBookmarked) => {
    return new Promise((resolve) => {
      const url = "https://www.plotaroute.com/post_bookmarkroute.asp";
      const xhr = new XMLHttpRequest();
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhr.onload = (e) => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            resolve(JSON.parse(xhr.responseText));
          }
        }
      };
      xhr.send(`ID=${routeId}&Bookmark=${isBookmarked ? 1 : 0}`);
    });
  };

  const setIconSpinner = (icon) => {
    icon.classList.add("fa-spinner", "fa-spin");
  };

  const setIconBookmark = (icon, isBookmarked) => {
    icon.classList.remove("fa-spinner", "fa-spin");
    icon.classList.add("fa-bookmark");
    if (isBookmarked) {
      icon.classList.remove("fa-bookmark-o");
    } else {
      icon.classList.add("fa-bookmark-o");
    }
  };

  const loadBookmaredRoutes = async () => {
    const routes = await getBookmarkedRoutes();
    const routeIds = routes.Routes.map(({ id }) => id);

    document.querySelectorAll(".bm-route-icon").forEach((icon) => {
      const routeId = icon.getAttribute("data-route-id");
      const isBookmarked = routeIds.includes(parseInt(routeId));
      setIconBookmark(icon, isBookmarked);
    });
  };

  const toggleBookmark = async (event) => {
    const icon = event.target;
    if (!icon.classList.contains("fa-spinner")) {
      const routeId = icon.getAttribute("data-route-id");
      const isBookmarked = !icon.classList.contains("fa-bookmark-o");
      setIconSpinner(icon);
      await setBookmark(routeId, !isBookmarked);
      setIconBookmark(icon, !isBookmarked);
    }
  };

  document.querySelectorAll("#MyRoutesRows tr").forEach((tr) => {
    const regex = new RegExp("\\d+$");
    const routeId = regex.exec(tr.id)[0];
    const container = tr.childNodes[1];

    const icon = document.createElement("i");
    icon.className =
      "bm-route-icon fa fa-spinner fa-spin color_high right text20 pointer";
    icon.setAttribute("data-route-id", routeId);
    icon.addEventListener("click", toggleBookmark);

    const iconWrapper = document.createElement("div");
    iconWrapper.style.width = "20px";
    iconWrapper.classList.add("right");
    iconWrapper.appendChild(icon);

    container.appendChild(iconWrapper);
  });

  loadBookmaredRoutes();
})();