galerie/web/www/settings.html.tsx

/*
Copyright 2023 0xf8.dev@proton.me

This file is part of Galerie

Galerie is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
Galerie is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with Galerie. If not, see <https://www.gnu.org/licenses/>.
*/

import App from "./app";
import React from "react";

import jQuery from "jquery";
const $ = jQuery;

import Settings from "./settings";
const settings = new Settings();


let status = (msg) => {
  let s = $(`<div class="status"><span>${msg}</span></div>`);

  $("div#container").prepend(s);

  setTimeout(() => {
    s.remove();
  }, 2500);
}

// Loads on DOM ready
$(() => {
  console.log("ready");

  $("li.configValue input").on("blur", (e) => {
    e.preventDefault();

    let t = $(e.currentTarget);

    let name = t.attr("x-config");
    let type = t.attr("type");
    let val = t.val();

    if (type == "button")
      return;

    settings.config.set(name, val);
    settings.config.sync();
  });

  $("li.configValue select").on("change", (e) => {
    e.preventDefault();

    let t = $(e.currentTarget);

    let name = t.attr("x-config");
    let val = t.val();

    settings.config.set(name, val);
    settings.config.sync();
  });

  // Hacky, terrible, downright awful way to prevent events from double-firing
  let _ = false;
  let preventDouble = () => {
    if (!_) {
      _ = true;
      setTimeout(() => {
        _ = false;
      }, 200);
      return false;
    }
    else return true;
  }

  $("li.configValue i").on("click touchstart", (e) => {
    if (preventDouble())
      return;

    let t = $(e.currentTarget);

    let name = t.attr("x-config");
    let val = t.hasClass("fa-toggle-on");

    t.removeClass(val ? "fa-toggle-on" : "fa-toggle-off");
    t.addClass(val ? "fa-toggle-off" : "fa-toggle-on");

    settings.config.set(name, !val);
    settings.config.sync();

  });

  // Buttons
  // Clear favorites
  $("ul.settings.reset input:button").eq(0).on("click touchstart", (e) => {
    if (preventDouble())
      return;

    settings.favorites.clear();

    status("Cleared favorites");
  });

  // Clear blacklist
  $("ul.settings.reset input:button").eq(1).on("click touchstart", (e) => {
    if (preventDouble())
      return;

    settings.blacklist.clear();

    status("Cleared blacklist")
  });

  // Clear everything
  $("ul.settings.reset input:button").eq(2).on("click touchstart", (e) => {
    if (preventDouble())
      return;

    localStorage.clear();

    window.location.reload();
  });
})

/*

*/
function si(name: string, displayName: string, icon: string, type: "string" | "number" | "boolean" | "toggle" | "button", title: string) {
  return <>
  <li title={ title }>
    { displayName }
    <i className={ "fa-solid " + icon }></i>
  </li>
  <li className="configValue" x-type={ type }>
    {(() => {
        switch(type) {
          case "number":
          case "string":
            return <input x-config={ name } type={ type } defaultValue={ settings.config.get(name) }></input>
          case "button":
            return <input type={ type } value={ name }></input>;
          case "toggle":
            return <i className={ settings.config.get(name) ? "fa-solid fa-2xl fa-toggle-on" : "fa-solid fa-2xl fa-toggle-off" } x-config={ name }></i>
          case "boolean": {
            return <select x-config={ name } defaultValue={ settings.config.get(name) }>
              <option value="true">true</option>
              <option value="false">false</option>
            </select>;
          }
        }
      })()}
  </li>
</>;
}

App(() => {
  return <>
    <div id="container">
      <h2>Settings</h2>
      <ul className="settings top">
        { si("ignoreBlacklist", "Blacklist toggle mode",  "fa-eye",   "toggle", "Allows you to toggle which images are blacklisted (eye means visible, slashed eye means invisible)") }
        { si("onlyFavorites",   "Favorites only mode",    "fa-heart-circle-check", "toggle", "Shows only images that have been favorited") }
        { si("deterministic",   "Deterministic order",    "fa-shuffle", "toggle", "Toggle whether every image is shown in the same order every time") }
      </ul>
      {/* <h3>Favorites</h3>
      <ul className="settings fav">
      </ul>
      <h3>Blacklist</h3>
      <ul className="settings blk">
      </ul> */}
      <h3>Reset</h3>
      <ul className="settings reset">
        { si("Reset",  "Reset favorites",  "fa-heart-circle-xmark", "button", "Reset favorited images") }
        { si("Reset",  "Reset blacklist",  "fa-file-circle-xmark",  "button", "Reset blacklisted images") }
        { si("Reset",  "Reset everything", "fa-trash",              "button", "Reset everything (settings, favorites, blacklist, etc.)") }
      </ul>
    </div>
  </>;
});