https://masdarcity.ae/Mvc/assets/js/votescript.js

1document.addEventListener('DOMContentLoaded', function () {
2    const likeButtons = document.querySelectorAll('.like');
3
4
5    likeButtons.forEach(button => button.addEventListener('click', handleLikeDislikeClick));
6
7    // load the current likes buttons
8    loadUserChoice();
9
10});
11
12function getOrCreateUID() {
13    let uid = localStorage.getItem('userUID');
14    if (!uid) {
15        // Generate a UID, e.g., using Date.now() and a random number for simplicity
16        uid = 'uid_' + Date.now().toString(36) + Math.random().toString(36).substr(2);
17        localStorage.setItem('userUID', uid);
18    }
19    return uid;
20}
21
22// Call this function when the application starts
23const userUID = getOrCreateUID();
24
25
26function handleLikeDislikeClick(event) {
27    const articleId = this.dataset.articleId;
28    let p = this.querySelector('p').textContent.toLowerCase().replace(/\s+/g, '');
29    let svg = this.querySelector('svg');
30    
31
32   
33
34    if (p === 'like') {
35        this.querySelector('p').textContent = "Liked";
36        svg.querySelector('path').setAttribute('fill', '#0000FF');
37        svg.style.transform = "rotate(0deg)";
38    }
39    else if (p === 'liked') {
40        this.querySelector('p').textContent = "Disliked";
41        svg.querySelector('path').setAttribute('fill', '#FF0000');
42        svg.style.transform = "rotate(180deg)";
43
44    }
45    else if (p === 'disliked') {
46        this.querySelector('p').textContent = "Like";
47        svg.querySelector('path').setAttribute('fill', '#00999A');
48        svg.style.transform = "rotate(0deg)";
49    }
50    setUserChoice(articleId, this.querySelector('p').textContent );
51    sendVoteToServer(articleId, this.querySelector('p').textContent );
52}
53
54function getAllUserChoices() {
55    let choices = [];
56    for (let i = 0; i < localStorage.length; i++) {
57        let key = localStorage.key(i);
58        if (key.startsWith('article_')) {
59            let articleId = key.split('_')[1]; // Assuming the key is in the format 'article_XYZ'
60            let userChoice = localStorage.getItem(key);
61            choices.push({ articleId: articleId, userChoice: userChoice });
62        }
63    }
64    return choices;
65}
66
67function setUserChoice(articleId, userChoice) {
68    // Retrieve the current array from localStorage, or initialize it as an empty array if it doesn't exist
69    var choices = JSON.parse(localStorage.getItem('choices')) || [];
70
71    // Find the index of the existing object by its `id`
72    const existingIndex = choices.findIndex(c => c.articleId === articleId);
73    if (existingIndex > -1) {
74        // Update the existing object
75        choices[existingIndex] = { "articleId": articleId, "userChoice": userChoice };
76    } else {
77        // Add the new object to the array
78        choices.push({ "articleId": articleId, "userChoice": userChoice });
79    }
80   
81    // Save the updated array back to localStorage
82    localStorage.setItem('choices', JSON.stringify(choices));
83   
84}
85
86function loadUserChoice(articleId, userChoice) {
87
88    var choices = JSON.parse(localStorage.getItem('choices')) || [];
89    console.log('choices', choices);
90    for (let i = 0; i < choices.length; i++) {
91        var button = document.querySelector('button[data-article-id="' + choices[i].articleId + '"]');
92        if (button) {
93            var svg = button.querySelector('svg');
94            if (choices[i].userChoice === 'liked') {
95                button.querySelector('p').textContent = "Liked";
96                svg.querySelector('path').setAttribute('fill', '#0000FF');
97                svg.style.transform = "rotate(0deg)";
98            }
99            else {
100                button.querySelector('p').textContent = "Disliked";
101                svg.querySelector('path').setAttribute('fill', '#FF0000');
102                svg.style.transform = "rotate(180deg)";
103            }
104        }
105    }
106}
107
108
109function sendVoteToServer(articleId, userChoice) {
110    // Example AJAX request with Fetch API
111    var myHeaders = new Headers();
112    myHeaders.append("Cookie", "ASP.NET_SessionId=gbht1ekibovzl2vm3xlycswj");
113
114    var formdata = new FormData();
115    formdata.append("UserId", userUID);
116    formdata.append("ArticleId", articleId);
117    formdata.append("UserChoice", userChoice);
118
119    var requestOptions = {
120        method: 'POST',
121        headers: myHeaders,
122        body: formdata,
123        redirect: 'follow'
124    };
125
126    fetch("/masdarfilter/vote/", requestOptions)
127        .then(response => response.text())
128        .then(result => console.log("result",result))
129        .catch(error => console.log('error', error));
130}