favorites beta

2022-01-01 02:17:31 +01:00 · 2022-01-01 02:17:31 +01:00 · e1bc2c269a
commit e1bc2c269a
parent e2411aeec0
8 changed files with 109 additions and 10 deletions
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@ -294,7 +294,7 @@ html[theme="atmos"] {

 html[theme="term"] {
  --accent: #00DF00;
-  --bg: #040404;
+  --bg: #000;
  --black: #000;
  --white: #fff;
  --gray: #262626;
@ -333,6 +333,11 @@ html[theme="term"] .metadata {
  text-shadow: 0px 0px 1px var(--accent), 1px 0px 2px var(--accent), 0px 0px 5px var(--black);
 }

+html[theme="term"] .metadata > .badge-dark, #themeselector {
+  box-shadow: var(--pagination-anchor-box-shadow);
+  background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
+}
+
 html[theme="iced"] {
  --accent: #0084ff;
  --bg: #031c35;
@ -359,7 +364,7 @@ html[theme="iced"] {
  --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
  --pagination-background-hover: #0a3f53;
  --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
-  --metadata-bg: #111d37;
+  --metadata-bg: #000e1a;
  --badge-bg: #091f39;
  --posts-meta-bg: #000000b8;
  --badge-sfw: #07866e;
@ -1035,6 +1040,7 @@ span#tags:empty {
  padding-left: 5px;
  padding-top: 1.5px;
  padding-bottom: 1.5px;
+  box-shadow: var(--pagination-anchor-box-shadow);
 }
 .badge-greentext {
  color: #789922;
@ -1307,6 +1313,7 @@ div#footbar {
  margin-top: -30px;
  transition: .2s ease-in-out;
  user-select: none;
+  color: transparent;
 }

 /* avatar */
@ -1469,5 +1476,21 @@ table.table tbody tr:nth-of-type(even) {
 }

 .timeago:hover {
+  cursor: pointer; /* absoluter shit */
+}
+
+/* buttons */
+svg.iconset {
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  vertical-align: sub;
  cursor: pointer;
 }
+
+/* favorites */
+span#favs {
+  text-align: left;
+  margin-left: 10px;
+  grid-column: 1/4;
+}
--- a/public/s/img/iconset.svg
+++ b/public/s/img/iconset.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
+  <defs>
+    <symbol style="fill: var(--accent)" id="heart_regular" viewBox="0 0 512 512"><path d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"/></symbol>
+    <symbol style="fill: var(--accent)" id="heart_solid" viewBox="0 0 512 512"><path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></symbol>
+    <symbol id="cross" viewBox="0 0 512 512"><path d="M53.6,62.3 L458.4,458.4 M458.4,62.3 L53.6,458.4" style="stroke-linecap: round;stroke-width: 60;stroke: var(--accent);"/></symbol>
+  </defs>
+</svg>
--- a/public/s/js/admin.js
+++ b/public/s/js/admin.js
@ -199,10 +199,26 @@ const flash = ({ type, 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 = "favorites:" + JSON.stringify(Object.values(res.favs));
+      }
+      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("a#a_delete").addEventListener("click", deleteButtonEvent);
+    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")
--- a/src/inc/routes/apiv2.mjs
+++ b/src/inc/routes/apiv2.mjs
@ -190,6 +190,32 @@ export default (router, tpl) => {
      })});
    });

+    group.get(/\/admin\/togglefav\/\d+$/, auth, async (req, res) => {
+      const itemid = +req.url.split[4];
+      
+      let favs = await sql('favorites').select('user_id').where('item_id', itemid);
+
+      if(Object.values(favs).filter(u => u.user_id === req.session.id)[0]) {
+        // del fav
+        await sql('favorites').where('user_id', req.session.id).andWhere('item_id', itemid).del();
+      }
+      else {
+        // add fav
+        await sql('favorites').insert({
+          item_id: itemid,
+          user_id: req.session.id
+        });
+      }
+
+      favs = await sql('favorites').select('user_id').where('item_id', itemid);
+
+      res.reply({ body: JSON.stringify({
+        success: true,
+        itemid: itemid,
+        favs: favs
+      })});
+    });
+
  });

  return router;
--- a/src/inc/routes/inc/f0cklib.mjs
+++ b/src/inc/routes/inc/f0cklib.mjs
@ -136,7 +136,10 @@ export default {
      };
    }
  
-    let items = sql("items").select("*").orderBy("items.id", "desc").whereRaw(modequery);
+    let items = sql("items")
+      .select("*")
+      .orderBy("items.id", "desc")
+      .whereRaw(modequery);

    if(tag) {
      items = items.innerJoin(
@ -169,6 +172,11 @@ export default {
    const tags = await lib.getTags(itemid);
    const cheat = items.slice(Math.max(0, item - 3), item + 4).map(i => i.id);
    const link = lib.genLink({ user, tag, mime, act_page: itemid });
+    const favorites = await sql('favorites')
+      .select('user.user', 'user_options.avatar')
+      .leftJoin('user', 'user.id', 'favorites.user_id')
+      .leftJoin('user_options', 'user_options.user_id', 'favorites.user_id')
+      .where('favorites.item_id', itemid);
  
    const data = {
      success: true,
@ -192,6 +200,7 @@ export default {
          timeago: lib.timeAgo(new Date(actitem.stamp * 1e3).toISOString()),
          timefull: new Date(actitem.stamp * 1e3).toISOString()
        },
+        favorites: favorites,
        tags: tags
      },
      title: `${actitem.id} - f0ck.me`,
@ -204,8 +213,8 @@ export default {
        cheat: cheat,
        uff: true
      },
-      link: link,
      phrase: cfg.websrv.phrases[~~(Math.random() * cfg.websrv.phrases.length)],
+      link: link,
      tmp: tmp
    };
    return data;
--- a/src/index.mjs
+++ b/src/index.mjs
@ -65,7 +65,7 @@ import flummpress from "flummpress";

    if(req.cookies.session) {
      const user = await sql("user_sessions") // get user
-        .select("user.id", "user.login", "user.user", "user.level", "user_sessions.id as sess_id", "user_options.mode", "user_options.theme")
+        .select("user.id", "user.login", "user.user", "user.level", "user_sessions.id as sess_id", "user_options.mode", "user_options.theme", "user_options.avatar")
        .where("user_sessions.session", lib.md5(req.cookies.session))
        .leftJoin("user", "user.id", "user_sessions.user_id")
        .leftJoin("user_options", "user_options.user_id", "user_sessions.user_id")
--- a/views/item.html
+++ b/views/item.html
@ -45,7 +45,12 @@
    </div>
    <div class="metadata">
      <span class="badge badge-dark">
-        <a href="/{{ item.id }}" style="--hover-image: url('/t/{{ item.id }}.png');" class="id-link">{{ item.id }}</a>@if(session) (<a id="a_username" href="/user/{{ user.name.toLowerCase() }}/f0cks@if(tmp.mime)/{{ tmp.mime }}@endif">{{ user.name }}</a>) <a title="delete" href="#" id="a_delete">&#10006;</a>@endif
+        <a href="/{{ item.id }}" style="--hover-image: url('/t/{{ item.id }}.png');" class="id-link">{{ item.id }}</a>
+        @if(session)
+        (<a id="a_username" href="/user/{{ user.name.toLowerCase() }}/f0cks@if(tmp.mime)/{{ tmp.mime }}@endif">{{ user.name }}</a>) 
+        <svg class="iconset" id="a_delete"><use href="/s/img/iconset.svg#cross"></use></svg> 
+        <svg class="iconset" id="a_favo"><use href="/s/img/iconset.svg#heart_{{ Object.values(item.favorites).filter(u => u.user == session.user)[0] ? 'solid' : 'regular' }}"></use></svg>
+        @endif
      </span>
      <span class="badge badge-dark">{{ user.network }} / {{ user.channel }}</span>
      <span class="badge badge-dark image-source">
@ -62,7 +67,7 @@
      @if(typeof item.tags !== "undefined")
        @each(item.tags as tag)
        <span @if(session)tooltip="{{ tag.user }}" data-tagid="{{ tag.id }}"@endif class="badge {{ tag.badge }} mr-2">
-          <a href="/tag/{{ tag.tag.replace(/\s/g, "%20") }}">{!! tag.tag !!}</a>@if(session)&nbsp;<a href="#">&#215;</a>@endif
+          <a href="/tag/{!! tag.tag !!}">{!! tag.tag !!}</a>@if(session)&nbsp;<a href="#">&#215;</a>@endif
        </span>
        @endeach
      @endif
@ -70,6 +75,15 @@
      <a href="#" id="a_addtag">add tag</a>&nbsp;-&nbsp;<a href="#" id="a_toggle">toggle</a>
      @endif
      </span>
+      <span class="badge" id="favs">
+      @if(item.favorites.length && session)
+      favorites:
+      @each(item.favorites as fav)
+      <a href="/user/{{ fav.user.toLowerCase() }}/f0cks" title="{{ fav.user }}"><img src="@if(fav.avatar)/t/{{ fav.avatar }}@else/s/img/default@endif.png" style="height: 32px; width: 32px" /></a>
+      @endeach
+      <small>bimde designe mich</small>
+      @endif
+      </span>
    </div>
  </div>
@include(snippets/footer)
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@ -5,11 +5,12 @@
      <li class="nav-item dropdown">
        @if(session)
        <a class="nav-link" href="#" content="{{ session.user }}" data-toggle="dropdown">
-          <img src="/s/img/ava/@if(session.id == 2)nixc.png@elsedefault.png@endif" class="avatar" />&nbsp;{{ session.user }}
+          <img src="@if(session.avatar)/t/{{ session.avatar }}.png@else/s/img/ava/default.png@endif" class="avatar" />&nbsp;{{ session.user }}
        </a>
        <ul class="dropdown-menu">
          <li><a href="/admin">adminpanel</a></li>
          <li><a href="/user/{{ session.user.toLowerCase() }}/f0cks">my f0cks</a></li>
+          <li><a href="#">my favs</a></li>
          <li><a href="/settings">settings</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/ranking">Ranking</a></li>