const basicCard = document.createElement('basic-card'); const configStatus = document.createElement('status'); const style = ` <style> .column { float: left; width: 24%; height: 100%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137); border-radius: 3%; transition: 0.3s; margin: 15px 3.33%; padding: 12px 16px; background-color: #282c34; color: #FFFFFF; } .column:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795); } /* Clear floats after the columns */ .row { content: ""; clear: both; display: flex; flex-wrap: wrap; } 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; } label{ display: inline; float: left; clear: left; width: 250px; text-align: left; } input { display: inline; float: right; } </style> `; basicCard.innerHTML = ` ${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> `; configStatus.innerHTML = ` ${style} <div class="row"> <div class="column"> <h4><p>Status</p></h4> <p>Uptime: <slot name="uptime" /></p> <p>Last Bump was <slot name="lastbump" /></p> <p>by <slot id="lastbumper" name="lastbumper" /></p> </div> <br> <div class="column"> <h4><p>Config</p></h4> <form> <label for="Guild">Guild: </label> <input type="text" id="Guild" name="Guild" readonly/> <label for="AdminChannel">Admin Channel: </label> <input type="select" id="AdminChannel" name="AdminChannel"/> <label for="AdminRole">Admin Role: </label> <input type="select" id="AdminRole" name="AdminRole"/> <label for="MonitorChannel">Monitor Channel: </label> <input type="select" id="MonitorChannel" name="MonitorChannel"/> <label for="MonitorRole">Monitor Role: </label> <input type="select" id="MonitorRole" name="MonitorRole"/> <label for="IntroChannel">Intro Channel: </label> <input type="select" id="IntroChannel" name="IntroChannel"/> <label for="VerifiedRole">Verified Role: </label> <input type="select" id="VerifiedRole" name="VerifiedRole"/> <label for="OutFile">Logging OutFile: </label> <input type="text" id="OutFile" name="OutFile" /> <label for="KBTeam">KB Team: </label> <input type="text" id="KBTeam" name="KBTeam" /> <label for="KBChann">KB Channel: </label> <input type="text" id="KBChann" name="KBChann" /> <label for="level">Logging Level: </label> <input type="number" id="Level" name="Level" /> <label for="ProgName">Program Name: </label> <input type="text" id="ProgName" name="ProgName" /> <label for="UseStdout">Use stdout: </label> <input type="checkbox" id="UseStdout" name="UseStdout"/> <label for="submitchanges"></label> <input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')"> </form> </div> <br> <div id="admin-stats" class="column"> <h4><p>Admin Stats</p></h4> </div> </div> `; class ConfigStatusClass extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.appendChild(configStatus.cloneNode(true)); } async setData(data) { this.shadowRoot.querySelector("#submitchanges").addEventListener('submit', handleForm); this.shadowRoot.querySelector("#Guild").value = data.GuildID; this.shadowRoot.querySelector("#AdminChannel").value = data.AdminChannel; this.shadowRoot.querySelector("#AdminRole").value = data.AdminRole; this.shadowRoot.querySelector("#MonitorChannel").value = data.MonitorChann; this.shadowRoot.querySelector("#MonitorRole").value = data.MonitorRole; this.shadowRoot.querySelector("#IntroChannel").value = data.IntroChann; this.shadowRoot.querySelector("#VerifiedRole").value = data.VerifiedRole; this.shadowRoot.querySelector("#OutFile").value = data.LogOpts.OutFile; this.shadowRoot.querySelector("#KBTeam").value = data.LogOpts.KBTeam; this.shadowRoot.querySelector("#KBChann").value = data.LogOpts.KBChann; this.shadowRoot.querySelector("#Level").value = data.LogOpts.Level; this.shadowRoot.querySelector("#ProgName").value = data.LogOpts.ProgName; this.shadowRoot.querySelector("#UseStdout").checked = data.LogOpts.UseStdout == "true"; fetch('https://thanos.nightmare.haus/api/user?userID=' + data.LastBumper) .then(response => response.json()) .then(userData => { this.shadowRoot.querySelector("#lastbumper").innerHTML = userData.user.username; }); this.loadStats(data.Stats) } async loadStats(data) { var shadowRoot = this.shadowRoot; Object.keys(data).forEach(function(uid) { var score = data[uid]; fetch('https://thanos.nightmare.haus/api/user?userID=' + uid) .then(response => response.json()) .then(userData => { var stats = shadowRoot.querySelector("#admin-stats"); var userName = document.createElement("p"); userName.innerText = userData.user.username + ": " + score; stats.appendChild(userName); }); }) } } 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); window.customElements.define('config-status', ConfigStatusClass);