Skip to content
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

Refactor: 친구 목록에 친구가 없을 시 특정 문구 띄우기 #113

Merged
merged 4 commits into from
Jun 28, 2024
Merged

Refactor: 친구 목록에 친구가 없을 시 특정 문구 띄우기 #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c4b7803
Bug: 친구삭제 버튼의 div를 눌렀을 때 attribute를 찾지 못하는 버그 수정
mixsung Jun 28, 2024
9ffc469
Bug: 친구추가 버튼의 div를 눌렀을 때 attribute를 찾지 못하는 버그 수정
mixsung Jun 28, 2024
95ea3f2
Refactor: 친구 목록에 친구가 없을 때 문구 띄우기
mixsung Jun 28, 2024
c665df0
Refactor: 출력문 제거
mixsung Jun 28, 2024
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
18 changes: 18 additions & 0 deletions frontend/static/css/profile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,24 @@

/* friends */

.no_friend {
display: flex;
align-items: center;
justify-content: center;
color: var(--profile-color);
flex-direction: column;
}

.no_friend_title {
font-size: calc(1vw + 1vh + 0.5vmin);
font-weight: bold;
}

.no_friend_subtitle {
font-size: calc(0.5vw + 1vh + 0.5vmin);
font-weight: lighter;
}

.friends_result_container {
padding: 0.5rem;
max-height: 27vw;
Expand Down
6 changes: 6 additions & 0 deletions frontend/static/js/state/Registry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ export const words = {
table_opponent: 'Opponent',
table_score: 'Match Score',
table_result: 'Result',
no_friend_title: 'No Friends Yet',
no_friend_subtitle: 'Go ahead and find some!',
friend_delete_button: 'DELETE',
friend_search_placeholder: 'Search for a friend...',
friend_add_button: 'ADD',
Expand Down Expand Up @@ -96,6 +98,8 @@ export const words = {
table_opponent: '상대',
table_score: '점수',
table_result: '결과',
no_friend_title: '아직 친구가 없습니다',
no_friend_subtitle: '친구 검색에서 친구를 찾아보세요!',
friend_delete_button: '삭제',
friend_search_placeholder: '추가할 친구를 검색하세요',
friend_add_button: '친구추가',
Expand Down Expand Up @@ -145,6 +149,8 @@ export const words = {
table_opponent: '相手',
table_score: 'スコア',
table_result: '競技結果',
no_friend_title: 'まだ友達がいません',
no_friend_subtitle: '友達を見つけに行きましょう！',
friend_delete_button: '削除',
friend_search_placeholder: 'IDを検索',
friend_add_button: 'しんせいする',
Expand Down
19 changes: 12 additions & 7 deletions frontend/static/js/view/Profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export default class extends AbstractView {
}
}
if (target) {
target = target.querySelector('button');
const userId = target.getAttribute('data-user-id');
deleteFriend(userId).then(() => {
target.classList.add('disabled_button');
Expand All @@ -108,6 +109,16 @@ export default class extends AbstractView {
friendResultBox.innerHTML = '';
const data = await getFriendsData();
if (data) {
if (data.length === 0) {
const friendHTML = `
<div class="no_friend_title">${words[registry.lang].no_friend_title}</div>
<div class="no_friend_subtitle">${words[registry.lang].no_friend_subtitle}</div>
`;
const friendDiv = document.createElement('div');
friendDiv.classList.add('no_friend');
friendDiv.innerHTML = friendHTML;
friendResultBox.appendChild(friendDiv);
}
data.forEach((friend) => {
const friendDiv = document.createElement('div');
friendDiv.classList.add('friend');
Expand Down Expand Up @@ -198,6 +209,7 @@ export default class extends AbstractView {
}
}
if (target) {
target = target.querySelector('button');
const userId = target.getAttribute('data-user-id');
const user = matchFriends.users.find((u) => u.id === parseInt(userId));
if (user && user.is_friend === false) {
Expand Down Expand Up @@ -414,11 +426,6 @@ export default class extends AbstractView {
saveButton.querySelector('button').style.color = 'var(--profile-background)';
saveButton.querySelector('button').disabled = false;
}
// if (input.value.length > 20) {
// input.disabled = true;
// } else {
// input.disabled = false;
// }
});
});

Expand Down Expand Up @@ -455,7 +462,6 @@ export default class extends AbstractView {
});

saveButton.addEventListener('click', async () => {
console.log("save button with CLICK");
if (input.value !== message.textContent) {
const data = await patchStatusMessage(input.value);
}
Expand All @@ -468,7 +474,6 @@ export default class extends AbstractView {
});
saveButton.addEventListener('keydown', async (e) => {
if (e.key === 'Enter') {
console.log("save button with ENTER");
if (input.value !== message.textContent) {
const data = await patchStatusMessage(input.value);
}
Expand Down