Skip to content

wip: render status podcast #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

wip: render status podcast #25

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 113 additions & 103 deletions assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
let state = {
defaultList: [],
list: [],
filter: {
status: 'all',
lang: 'all',
},
defaultList: [],
list: [],
filter: {
status: "all",
lang: "all",
},
};

function getPodcastList() {
return fetch('/podcasts.json')
.then((res) => res.json())
.then((response) => {
return response;
})
.catch((error) => {
console.log(error);
return [];
});
return fetch("/podcasts.json")
.then((res) => res.json())
.then((response) => {
return response;
})
.catch((error) => {
console.log(error);
return [];
});
}

function rendeTreinamento() {
const podcast = {
name: 'Procurando um mentor?',
website_link: 'https://github.com/training-center/mentoria',
};
const podcast = {
name: "Procurando um mentor?",
website_link: "https://github.com/training-center/mentoria",
};

return `
return `
<li class="list-item">
<img class="list-item_image" src="/assets/img/centro-de-treinamento.png" width="128" height="128">
<div class="list-item_container">
Expand All @@ -35,23 +35,23 @@ function rendeTreinamento() {
</div>
<ul class="list-item_links">
${
podcast.youtube_link
? `<a class="list-item_links-item" href="${podcast.youtube_link}"> Youtube
podcast.youtube_link
? `<a class="list-item_links-item" href="${podcast.youtube_link}"> Youtube
</a>`
: ''
}
: ""
}
${
podcast.website_link
? `<a class="list-item_links-item" href="${podcast.website_link}"> Site
podcast.website_link
? `<a class="list-item_links-item" href="${podcast.website_link}"> Site
</a>`
: ''
}
: ""
}
${
podcast.twitter_at
? `<a class="list-item_links-item" href="htts://twitter.com/${podcast.twitter_at}"> Twitter
podcast.twitter_at
? `<a class="list-item_links-item" href="htts://twitter.com/${podcast.twitter_at}"> Twitter
</a>`
: ''
}
: ""
}
</ul>
</div>
<p class="list-item_description">
Expand All @@ -62,38 +62,45 @@ function rendeTreinamento() {
`;
}

function renderStatusPodcast(podcst) {
return `
<span class="list-item_status ${
podcast.status
? "list-item_status--active"
: "list-item_status--inactive"
} "></span>`
}

function renderPodcast(podcast) {
const data = `
const data = `
<li class="list-item">
<img class="list-item_image" src="${
podcast.image ? podcast.image : '/assets/img/placeholder.png'
}" width="128" height="128">
podcast.image ? podcast.image : "/assets/img/placeholder.png"
}" width="128" height="128">
<div class="list-item_container">
<div class="list-item_section">
<span class="list-item_status ${
podcast.status ? 'list-item_status--active' : 'list-item_status--inactive'
} "></span>
${renderStatusPodcast(podcast)}
<h4 class="list-item_title">${podcast.name}</h4>
</div>
<ul class="list-item_links">
${
podcast.youtube_link
? `<a class="list-item_links-item" href="${podcast.youtube_link}"> Youtube
podcast.youtube_link
? `<a class="list-item_links-item" href="${podcast.youtube_link}"> Youtube
</a>`
: ''
}
: ""
}
${
podcast.website_link
? `<a class="list-item_links-item" href="${podcast.website_link}"> Site
podcast.website_link
? `<a class="list-item_links-item" href="${podcast.website_link}"> Site
</a>`
: ''
}
: ""
}
${
podcast.twitter_at
? `<a class="list-item_links-item" href="htts://twitter.com/${podcast.twitter_at}"> Twitter
podcast.twitter_at
? `<a class="list-item_links-item" href="htts://twitter.com/${podcast.twitter_at}"> Twitter
</a>`
: ''
}
: ""
}
</ul>
</div>
<div class="list-item_description">
Expand All @@ -102,23 +109,23 @@ function renderPodcast(podcast) {
</li>
`;

return data;
return data;
}

function clearList() {
const containerList = document.getElementById('list-podcast');
containerList.innerHTML = '';
const containerList = document.getElementById("list-podcast");
containerList.innerHTML = "";
}

function renderList(listPodcast) {
const containerList = document.getElementById('list-podcast');
const ulList = document.createElement('ul');
ulList.classList.add('list');
const listPodcastString = listPodcast.reduce((acc, value) => {
return acc + renderPodcast(value);
}, '');
ulList.innerHTML = rendeTreinamento() + listPodcastString;
containerList.appendChild(ulList);
const containerList = document.getElementById("list-podcast");
const ulList = document.createElement("ul");
ulList.classList.add("list");
const listPodcastString = listPodcast.reduce((acc, value) => {
return acc + renderPodcast(value);
}, "");
ulList.innerHTML = rendeTreinamento() + listPodcastString;
containerList.appendChild(ulList);
}

function searchList(word) {
Expand All @@ -134,67 +141,70 @@ function searchList(word) {
}

function changeState(podcast, status) {
if (status === 'all') {
return true;
}
if (status === 'active') {
return podcast.status === true;
}
if (status === 'inactive') {
return podcast.status === false;
}
return false;
if (status === "all") {
return true;
}
if (status === "active") {
return podcast.status === true;
}
if (status === "inactive") {
return podcast.status === false;
}
return false;
}

function filterState(status) {
const newList = state.defaultList.filter((podcast) => changeState(podcast, status));
state.filter.status = status
clearList();
state.list = newList;
renderList(state.list)
const newList = state.defaultList.filter((podcast) =>
changeState(podcast, status),
);
state.filter.status = status;
clearList();
state.list = newList;
renderList(state.list);
}

function changeLang(podcast, lang) {
if (lang === 'all') {
return true;
}
return podcast.language == lang;
if (lang === "all") {
return true;
}
return podcast.language == lang;
}

function filterLang(lang) {
const newList = state.defaultList.filter((podcast) => changeLang(podcast, lang));
state.filter.lang = lang
clearList();
state.list = newList;
renderList(state.list)
const newList = state.defaultList.filter((podcast) =>
changeLang(podcast, lang),
);
state.filter.lang = lang;
clearList();
state.list = newList;
renderList(state.list);
}

document.addEventListener('DOMContentLoaded', function (event) {
const input = document.getElementById('search-input');
if (input) {
input.addEventListener('input', function (e) {
searchList(e.target.value);
});
document.addEventListener("DOMContentLoaded", function (event) {
const input = document.getElementById("search-input");
if (input) {
input.addEventListener("input", function (e) {
searchList(e.target.value);
});
}

const selectStatus = document.getElementById('status')
const selectStatus = document.getElementById("status");
if (selectStatus) {
selectStatus.addEventListener('change', function (e) {
filterState(e.target.value)
selectStatus.addEventListener("change", function (e) {
filterState(e.target.value);
});
}


const selectLang = document.getElementById('idioma')
const selectLang = document.getElementById("idioma");
if (selectLang) {
selectLang.addEventListener('change', function (e) {
filterLang(e.target.value)
selectLang.addEventListener("change", function (e) {
filterLang(e.target.value);
});
}

getPodcastList().then((data) => {
state.list = data;
state.defaultList = data;
renderList(state.list);
});
getPodcastList().then((data) => {
state.list = data;
state.defaultList = data;
renderList(state.list);
});
});