f0ckv2/public/s/js/admin.js

let flashActive = false;
const flashTypes = [ "error", "success", "warn" ];

const flash = ({ type, msg }) => {
  let flashContainer;
  if(tmp = document.querySelector("div#flash"))
    flashContainer = tmp;
  else {
    flashContainer = document.createElement("div");
    flashContainer.id = "flash";
    document.body.insertAdjacentElement("afterbegin", flashContainer);
  }

  flashContainer.innerHTML = msg;
  if(flashTypes.includes(type)) {
    flashContainer.className = "";
    flashContainer.classList.add(type);
  }
  if(flashActive)
    return false;

  flashActive = true;
  flashContainer.animate(
    [ { bottom: "-28px" }, { bottom: 0 } ], {
      duration: 500,
      fill: "both"
    }
  ).onfinish = () => setTimeout(() => {
    flashContainer.animate(
      [ { bottom: 0 }, { bottom: "-28px" } ], {
        duration: 500,
        fill: "both"
      }
    ).onfinish = () => flashActive = false;
  }, 4 * 1e3);
  return true;
};

(async () => {
  if(_addtag = document.querySelector("a#a_addtag")) {
    const postid = +document.querySelector("a.id-link").innerText;
    const poster = document.querySelector("a#a_username").innerText;
    let tags = [...document.querySelectorAll("#tags > .badge")].map(t => t.innerText.slice(0, -2));

    const deleteEvent = async e => {
      e.preventDefault();
      if(!confirm("Do you really want to delete this tag?"))
        return;
      const tagid = +e.target.parentElement.dataset.tagid;
      const res = await deleteTag(postid, tagid);
      if(!res.success)
        return alert("uff");
      tags = res.tags.map(t => t.tag);
      renderTags(res.tags);
    };
  
    const post = async (url, data) => fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
  
    const getTags = async postid => await (await fetch("/api/v2/admin/tags/get/" + postid)).json();

    const deletePost = async postid => await (await fetch("/api/v2/admin/deletepost/" + postid)).json();
  
    const addTag = async (postid, tag) => await (await post("/api/v2/admin/tags/add", {
      postid: postid,
      tag: tag
    })).json();
  
    const deleteTag = async (postid, tagid) => await (await post("/api/v2/admin/tags/delete", {
      postid: postid,
      tagid: tagid
    })).json();
  
    const renderTags = _tags => {
      [...document.querySelectorAll("#tags > .badge")].forEach(tag => tag.parentElement.removeChild(tag));
      _tags.reverse().forEach(tag => {
        const a = document.createElement("a");
        a.href = `/tag/${tag.tag}`;
        a.style = "color: inherit !important";
        a.innerHTML = tag.tag;

        const span = document.createElement("span");
        span.classList.add("badge", "mr-2");
        span.setAttribute('tooltip', tag.user);
        span.dataset.tagid = tag.id;

        tag.badge.split(" ").forEach(b => span.classList.add(b));

        const delbutton = document.createElement("a");
        delbutton.innerHTML = " ×";
        delbutton.href = "#";
        delbutton.addEventListener("click", deleteEvent);
        span.insertAdjacentElement("beforeend", a);
        span.insertAdjacentElement("beforeend", delbutton);
  
        document.querySelector("#tags").insertAdjacentElement("afterbegin", span);
      });
    };

    const addtagClick = (ae = false) => {
      if(ae)
        ae.preventDefault();

      const insert = document.querySelector("a#a_addtag");
      const span = document.createElement("span");
      span.classList.add("badge", "badge-light", "mr-2");

      const input = document.createElement("input");
      input.size = "10";
      input.value = "";

      let tt;
      input.addEventListener("keydown", async e => {
        if(e.key === "Enter") {
          const tmptag = input.value?.trim();
          if(tags.includes(tmptag))
            return alert("tag already exists");
          const res = await addTag(postid, tmptag);
          if(!res.success) {
            return flash({
              type: "error",
              msg: res.msg
            });
          }
          tags = res.tags.map(t => t.tag);
          renderTags(res.tags);
          addtagClick();
        }
        else if(e.key === "Escape") {
          span.parentElement.removeChild(span);
        }
        return true;
      });

      span.insertAdjacentElement("afterbegin", input);
      insert.insertAdjacentElement("beforebegin", span);

      input.focus();

      input.addEventListener("focusout", ie => {
        if(input.value.length === 0)
          input.parentElement.parentElement.removeChild(input.parentElement);
      });
    };

    const toggleEvent = async (e = false) => {
      if(e)
        e.preventDefault();
      let res;
      if(tags.includes("sfw")) {
        await deleteTag(postid, 1);
        res = await addTag(postid, "nsfw");
      }
      else if(tags.includes("nsfw")) {
        await deleteTag(postid, 2);
        res = await addTag(postid, "sfw");
      }
      else
        res = await addTag(postid, "sfw");
      
      if(!res.success)
        return flash({
          type: "error",
          msg: res.msg
        });

      renderTags(res.tags);
      tags = res.tags.map(t => t.tag);

      flash({
        type: "success",
        msg: tags.join()
      });
    };

    const deleteButtonEvent = async e => {
      if(e)
        e.preventDefault();
      if(!confirm(`Reason for deleting f0ckpost ${postid} by ${poster} (Weihnachten™)`))
        return;
      const res = await deletePost(postid);
      if(res.success) {
        flash({
          type: "success",
          msg: "post was successfully deleted"
        });
      }
      else {
        flash({
          type: "error",
          msg: res.msg
        });
      }
    };

    const toggleFavEvent = async e => {
      const res = await (await fetch(`/api/v2/admin/togglefav/${postid}`)).json();
      if(res.success) {
        const fav = document.querySelector("svg#a_favo > use").href;
        fav.baseVal = '/s/img/iconset.svg#heart_' + (fav.baseVal.match(/heart_(regular|solid)$/)[1] == "solid" ? "regular" : "solid");

        // span#favs
        const favcontainer = document.querySelector('span#favs');
        favcontainer.innerHTML = "";

        favcontainer.hidden = !(favcontainer.hidden || res.favs.length > 0);

        res.favs.forEach(f => {
          const a = document.createElement('a');
          a.href = `/user/${f.user}/favs`;
          a.setAttribute('tooltip', f.user);
          a.setAttribute('flow', 'down');

          const img = document.createElement('img');
          img.src = `/t/${f.avatar}.png`;
          img.style.height = "32px";
          img.style.width = "32px";

          a.insertAdjacentElement('beforeend', img);
          favcontainer.insertAdjacentElement('beforeend', a);
          favcontainer.innerHTML += " ";
        });
      }
      else {
        // lul
      }
    };

    _addtag.addEventListener("click", addtagClick);
    document.querySelector("a#a_toggle").addEventListener("click", toggleEvent);
    [...document.querySelectorAll("#tags > .badge > a:last-child")].map(t => t.addEventListener("click", deleteEvent));
    document.querySelector("svg#a_delete").addEventListener("click", deleteButtonEvent);
    document.querySelector("svg#a_favo").addEventListener("click", toggleFavEvent);

    document.addEventListener("keyup", e => {
      if(e.target.tagName === "INPUT")
        return;
      if(e.key === "p")
        toggleEvent();
      else if(e.key === "i")
        addtagClick();
      else if(e.key === "x")
        deleteButtonEvent();
      else if(e.key === "f")
        toggleFavEvent();
    });
  }
})();