likes funktionieren

4 files changed, 95 insertions, 3 deletions

diff --git a/assets_src/css/list.css b/assets_src/css/list.css
index 51b2514..a3e6fcf 100644
--- a/assets_src/css/list.css
+++ b/assets_src/css/list.css
@@ -2,6 +2,10 @@
         color: rgb(166, 166, 166);
 }
 
+.liked {
+        background-color: green;
+}
+
 .list-entry {
         height: 80px;
         padding: 8px;
diff --git a/assets_src/js/lib/ajax.js b/assets_src/js/lib/ajax.js
index b189a92..71e3764 100644
--- a/assets_src/js/lib/ajax.js
+++ b/assets_src/js/lib/ajax.js
@@ -61,3 +61,6 @@ export async function post(url, body, options) {
 export async function del(url, body, options) {
         return request('DELETE', url, body, options);
 }
+export async function put(url, body, options) {
+        return request('PUT', url, body, options);
+}
diff --git a/assets_src/js/lib/dom.js b/assets_src/js/lib/dom.js
index 3c2f4d9..82f5dd2 100644
--- a/assets_src/js/lib/dom.js
+++ b/assets_src/js/lib/dom.js
@@ -27,6 +27,22 @@ export function withClass(className) {
         return arr;
 }
 
+export function firstChild(el, fn) {
+        if (!el) {
+                return null;
+        }
+
+        for (const child of el.childNodes) {
+                if (child.nodeName === '#text') {
+                        continue;
+                }
+                if (fn(child)) {
+                        return child;
+                }
+        }
+        return null;
+}
+
 export function next(el, fn) {
         if (!el) {
                 return null;
diff --git a/assets_src/js/like.js b/assets_src/js/like.js
index 03b15a1..feae345 100644
--- a/assets_src/js/like.js
+++ b/assets_src/js/like.js
@@ -11,12 +11,81 @@ async function updateLikeCount(el) {
 
         const count = await ajax.get(`/api/likes/count?id=${contentId}&type=${type}`, {});
 
-        el.textContent = count;
+        dom.firstChild(el, e => e.classList.contains('like-count')).textContent = count;
+}
+
+async function isLikedByCurrentUser(el) {
+        const type = parseInt(el.getAttribute('content-type'), 10);
+        const contentId = parseInt(el.getAttribute('content-id'), 10);
+        const userId = parseInt(el.getAttribute('update-with'), 10);
+
+        if (isNaN(type) || isNaN(contentId) || isNaN(userId)) {
+                return;
+        }
+
+        const b = await ajax.get(`/api/likes/liked_by?id=${contentId}&type=${type}&user=${userId}`, {});
+
+        console.log(b);
+        return b === 'true';
+}
+
+async function updateLikeByCurrentUser(el, to) {
+        const type = parseInt(el.getAttribute('content-type'), 10);
+        const contentId = parseInt(el.getAttribute('content-id'), 10);
+        const userId = parseInt(el.getAttribute('update-with'), 10);
+
+        if (isNaN(type) || isNaN(contentId) || isNaN(userId)) {
+                return;
+        }
+
+        updateLikeClass(el, to);
+        
+        if (to) {
+                await ajax.put('/api/likes', `id=${contentId}&type=${type}&user=${userId}`, {
+                        headers: {
+                                'Content-Type': 'application/x-www-form-urlencoded',
+                        }
+                }); 
+        } else {
+                await ajax.del('/api/likes', `id=${contentId}&type=${type}&user=${userId}`, { 
+                        headers: {
+                                'Content-Type': 'application/x-www-form-urlencoded',
+                        }
+                });
+        }
+        const cont = dom.firstChild(el, e => e.classList.contains('like-count'));
+
+        cont.textContent = parseInt(cont.textContent, 10) + (to ? 1 : -1);
+}
+
+function updateLikeClass(el, to) {
+        el.classList.toggle('liked', to);
 }
 
 dom.ready(() => {
-        dom.withClass('like-count')
-                .forEach(el => {
+        dom.withClass('like-div')
+                .forEach(async el => {
                         updateLikeCount(el);
+
+                        const userId = parseInt(el.getAttribute('update-with'), 10);
+                        
+                        let liked = await isLikedByCurrentUser(el);
+                        updateLikeClass(el, liked);
+                        if (!isNaN(userId)) {
+                                el.addEventListener('click', async () => {
+                                        liked = !liked;
+                                        await updateLikeByCurrentUser(el, liked);
+                                });
+                                const cap = dom.firstChild(el, e => e.classList.contains('like-caption'));
+                                if (cap) {
+                                        el.addEventListener('mouseover', () => {        
+                                                cap.textContent = `${liked ? 'nicht mehr ' : ''}geil finden`;
+                                        });
+                                        el.addEventListener('mouseout', () => cap.textContent = 'Finden das geil');
+                                }
+                        } else {
+                                el.classList.add('disabled');
+                        }
+
                 });
 });