You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.3 KiB
73 lines
2.3 KiB
4 years ago
|
const basicCard = document.createElement('basic-card');
|
||
|
|
basicCard.innerHTML = `
|
||
|
|
<style>
|
||
|
|
p {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
|
||
|
|
border-radius: 3%;
|
||
|
|
transition: 0.3s;
|
||
|
|
position: relative;
|
||
|
|
width: 250px;
|
||
|
|
height: 200px;
|
||
|
|
padding: 5px;
|
||
|
|
background-color: #282c34;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.card:hover {
|
||
|
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
padding: 6px 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="card-container" class="container">
|
||
|
|
<div class="card">
|
||
|
|
<h4><p><slot name="username" /></p></h4>
|
||
|
|
<div>
|
||
|
|
<p><slot name="join-date" /></p>
|
||
|
|
<p><slot id="discord-id" name="discord-id" /></p>
|
||
|
|
<p><slot id="pic-link" name="pic-link" /></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
|
||
|
|
class UserCard extends HTMLElement {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.attachShadow({ mode: 'open' });
|
||
|
|
this.shadowRoot.appendChild(basicCard.cloneNode(true));
|
||
|
|
}
|
||
|
|
connectedCallback() {
|
||
|
|
this.shadowRoot.querySelector('#card-container').addEventListener('click', () => this.showModal());
|
||
|
|
}
|
||
|
|
|
||
|
|
showModal() {
|
||
|
|
const userID = this.shadowRoot.querySelector('#discord-id').assignedNodes()[0].textContent;
|
||
|
|
const userPic = this.shadowRoot.querySelector("#pic-link").assignedNodes()[0].querySelector("a").getAttribute("href");
|
||
|
|
fetch('https://thanos.nightmare.haus/api/user?userID=' + userID)
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data === undefined || data === null) {
|
||
|
|
alert("User not found.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
document.querySelector("#myModal").style.display = "block";
|
||
|
|
document.querySelector('#modal-join').textContent = new Date(data.joined_at).toLocaleString();
|
||
|
|
document.querySelector('#modal-userID').textContent = data.user.username;
|
||
|
|
document.querySelector('#modal-avatar').src = `https://cdn.discordapp.com/avatars/${data.user.id}/${data.user.avatar}.png?size=256`;
|
||
|
|
document.querySelector('#modal-verification').src = userPic;
|
||
|
|
document.querySelector('#modal-verification').style = "max-height: 500px;";
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
window.customElements.define('user-card', UserCard);
|