Skip to content

Commit

Permalink
update of frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@chralp
chralp committed Jan 24, 2020
1 parent f2761ca commit 0dd6e11
Show file tree
Hide file tree
Showing 5 changed files with 444 additions and 41 deletions.
Binary file added www/themes/default/favicon.ico
View file
Binary file not shown.
Binary file added www/themes/default/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
194 changes: 157 additions & 37 deletions www/themes/default/fun.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,62 @@
const users = document.getElementById('users');
const filter = document.getElementById('filter');

let store = [];

hey.on('open', function () {
hey.get('getReceivedList', { type: 'burrito', sort: 'points', order: 'asc', take: 5, skip: 0 });
let listType = 'to';
let scoreType = 'inc';

async function fetcher (type, {username,listType, scoreType}) {
switch (type) {
case 'scoreboard':
const res = await fetch(`http://localhost:3333/api/scoreboard/${listType}/${scoreType}`);
const json = await res.json();
console.log(listType, scoreType,JSON);
return json.data;
break;
case 'userStats':
const res1 = await fetch(`http://localhost:3333/api/userstats/${username}`);
const json1 = await res1.json();
return json1.data;
break;
}

};

const getScoreBoard = async() => {
store = await fetcher('scoreboard',{listType, scoreType});
sortUsers();
render();
};

getScoreBoard();


const filterA = document.getElementById('switchToFrom');
const filterb = document.getElementById('switchType');

filterA.querySelector('.c-switch__input').addEventListener('click', async (ev) => {
const list = (listType === 'to') ? 'from' : 'to';
listType = list;
store = await fetcher('scoreboard',{listType, scoreType});
sortUsers();
render();
});

hey.on('receivedList', (data) => {
store = data;
filterb.querySelector('.c-switch__input').addEventListener('click', async (ev) => {

const score = (scoreType === 'inc') ? 'dec' : 'inc';
scoreType = score;
store = await fetcher('scoreboard',{listType, scoreType});
sortUsers();
render();
});

hey.on('userStats', addStats);


function sortUsers() {
store.sort((a, b) => Math.sign(b.score - a.score));
console.log(store)

store = store.map((item, i) => {
const mappedItem = Object.assign({}, item);
Expand All @@ -26,6 +67,7 @@ function sortUsers() {

return mappedItem;
});
console.log(store)
}

function displayItem(element, wait, rerender) {
Expand All @@ -45,46 +87,98 @@ function displayItem(element, wait, rerender) {
}, wait);
}

function displayStats(data, element) {
async function displayStats(data, element) {
const statsEl = element.querySelector('.scoreboard__user__stats');

if (statsEl.classList.contains('display')) {
statsEl.style.cssText = 'height: 0px';
statsEl.classList.remove('display');
} else {
hey.get('getUserStats', data.username);
const res = await fetcher("userStats", {username: data.username});
addStats(res);
}
}

function addStatsRow(user, container) {
const html = `
<li>
<img width="30" height="30" src="${user.avatar}">
<img class="avatar" width="30" height="30" src="${user.avatar}">
<strong>${user.name}</strong>
<span class="score">${user.score}</span>
<span class="score mini good">${user.scoreinc}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="score mini bad">${user.scoredec}</span>
</li>
`;

container.appendChild(document.createRange().createContextualFragment(html));
}

function addUserInfo(user, container) {

const html = `
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">Total</strong>
<ol class="scoreboard__user__stats__list">
<li>
<strong>Received</strong>
<span class="score mini">${user.received}</span>
</li>
<li>
<strong>Given</strong>
<span class="score mini">${user.given}</span>
</li>
</ol>
</div>
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">Today</strong>
<ol class="scoreboard__user__stats__list">
<li>
<strong>Received</strong>
<span class="score mini">${user.receivedToday}</span>
</li>
<li>
<strong>Given</strong>
<span class="score mini">${user.givenToday}</span>
</li>
</ol>
</div>`;

container.innerHTML = html;
}
function addStats(data) {
console.log("addStatsaa", data)
const element = document.getElementById(`user:${data.user.username}`);
const statsEl = element.querySelector('[data-stats]');
const infoEl = element.querySelector('[data-info]');
const todayFromEl = element.querySelector('[data-today-from]');
const todayToEl = element.querySelector('[data-today-to]');

const fromEl = element.querySelector('[data-from]');
const toEl = element.querySelector('[data-to]');

fromEl.innerHTML = '';
toEl.innerHTML = '';
todayFromEl.innerHTML = '';
todayToEl.innerHTML = '';

if (data.gived) {
data.gived.sort((a, b) => Math.sign(b.score - a.score));
data.gived.forEach((user) => addStatsRow(user, toEl));
addUserInfo(data.user,infoEl);
if(data.givenToday){
data.givenToday.forEach((user) => addStatsRow(user,todayToEl));
}

if (data.givers) {
data.givers.sort((a, b) => Math.sign(b.score - a.score));
data.givers.forEach((user) => addStatsRow(user, fromEl));
if(data.receivedToday){
data.receivedToday.forEach((user) => addStatsRow(user,todayFromEl));
}


if (data.given) {
data.given.forEach((user) => addStatsRow(user, toEl));
}

if (data.received) {
data.received.forEach((user) => addStatsRow(user, fromEl));
}

requestAnimationFrame(() => {
Expand Down Expand Up @@ -123,27 +217,52 @@ function createElement(data, display) {
element.setAttribute('data-score', data.score);

element.innerHTML = `
<div class="scoreboard__user__row scoreboard__user__summary">
<div>
<img width="48" height="48" src="${data.avatar}" alt="">
</div>
<div>${data.name}</div>
<div><span data-element="score" class="score">${data.score}</span></div>
</div>
<div class="scoreboard__user__stats" data-stats>
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">From</strong>
<ol class="scoreboard__user__stats__list" data-from>
</ol>
</div>
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">To</strong>
<ol class="scoreboard__user__stats__list" data-to>
</ol>
</div>
</div>
<div class="scoreboard__user__row scoreboard__user__summary">
<div>
<img class="avatar" width="48" height="48" src="${data.avatar}" alt="">
</div>
<div>${data.name}</div>
<div><span data-element="score" class="score">${data.score}</span></div>
</div>
<div class="scoreboard__user__stats" data-stats>
<div class="scoreboard__user__stats__info" data-info>
</div>
<div class="scoreboard__user__stats__today">
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">From</strong>
<ol class="scoreboard__user__stats__list" data-today-from>
</ol>
</div>
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">To</strong>
<ol class="scoreboard__user__stats__list" data-today-to>
</ol>
</div>
</div>
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">From</strong>
<ol class="scoreboard__user__stats__list" data-from>
</ol>
</div>
<div class="scoreboard__user__stats__column">
<strong class="scoreboard__user__stats__title">To</strong>
<ol class="scoreboard__user__stats__list" data-to>
</ol>
</div>
</div>
`;

element.querySelector('.scoreboard__user__summary').addEventListener('click', () => displayStats(data, element), false);
Expand All @@ -165,7 +284,7 @@ function render(refresh) {
let currentWait = 0;

users.innerHTML = '';
const top20 = store.slice(0,20)
const top20 = store.slice(0,20);
store.forEach((item) => {
currentWait += wait;

Expand Down Expand Up @@ -232,6 +351,7 @@ function updateScore(data, direction) {
}

hey.on('GIVE', (data) => {
console.log("HEJHEJ",data)
updateScore(data, 'up');
rainBurritos();
});
Expand Down
Loading

0 comments on commit 0dd6e11

Please sign in to comment.