favorites beta

This commit is contained in:
Flummi 2022-01-01 02:17:31 +01:00
parent e2411aeec0
commit e1bc2c269a
8 changed files with 109 additions and 10 deletions

View File

@ -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;
}

10
public/s/img/iconset.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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")

View File

@ -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;

View File

@ -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;

View File

@ -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")

View File

@ -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)

View File

@ -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>