site update, show a drop down of available channels, roles, and emojis

public/css/dashboard.css

@@ -544,9 +544,13 @@ input
   background-color:#00000054;
   border:2px solid transparent;
   color:ivory;
-  text-align:right;
+  text-align:center;
   width: 37.5%;
 }
+option
+{
+  background:#087575;
+}
 .yt
 {
   right:10%;
@@ -607,3 +611,27 @@ input
   padding: 0rem clamp(1rem, 2vw, 3rem);
   border-radius: clamp(0.4rem, 0.75vw, 1rem);
 }
+/*Scrool Bar*/
+/* width */
+::-webkit-scrollbar
+{
+    width: 5px;
+}
+  
+  /* Track */
+::-webkit-scrollbar-track 
+{
+    box-shadow: inset 0 0 5px #0e2934;
+    border-radius: 5px;
+}
+  
+/* Handle */
+::-webkit-scrollbar-thumb 
+{
+    background: #010f14;
+    border-radius: 5px;
+}
+::-webkit-scrollbar-corner 
+{
+    background: rgba(0, 0, 0, 0.267);
+}

public/js/dashboard.js

@@ -8,7 +8,6 @@ window.onload = async () =>
     updateUser(accessToken, tokenType);
     updateGuildData(accessToken, tokenType);
     document.getElementById('RoleRules').onclick = handleToggleRules;
-    test();
 };
 
 function updateUser(accessToken, tokenType)
@@ -211,6 +210,17 @@ async function handleToggleRules(element)
     var guildID = element.target.parentNode.getElementsByTagName('h3')[0].id;
     var rulesElement=document.getElementById('rules');
     var rules = await getRules(guildID);
+    document.getElementById('roleID').innerHTML = '';
+    for(var role of guildsCache.get(guildID).roles)
+    {
+        document.getElementById('roleID').innerHTML += `<option value="${role.id}">${role.name}</option>`;
+    }
+    document.getElementById('emojiID').innerHTML = '';
+    for(var emoji of guildsCache.get(guildID).emojis)
+    {
+        document.getElementById('emojiID').innerHTML += `<option value="${emoji.id}">${emoji.name}</option>`;
+    }
+
     if(!rules) return
     var ruleArr = []
     for(var rule of rules)
@@ -436,12 +446,17 @@ async function  changeRule(element)
 }
 function addFeed(element)
 {
+    document.getElementById('DCchannelID').innerHTML = '';
+    for(var channel of guildsCache.get(element.parentNode.parentNode.childNodes[3].id).guildTextChannels)
+    {
+        document.getElementById('DCchannelID').innerHTML += `<option value="${channel.id}">${channel.name}</option>`;
+    }
     element.parentNode.classList.add('hidden');
     element.parentNode.parentNode.classList.add('hidden');
     var FeedWrapper = document.getElementById('FeedWrapper');
     FeedWrapper.classList.remove('hidden');
     document.getElementById('ChannelName').innerText = 'New Feed'
-    document.getElementById('DCchannelID').placeholder = '';
+    // document.getElementById('DCchannelID').placeholder = '';
     document.getElementById('YTchannelID').placeholder = '';
     document.getElementById('CostumMessageI').placeholder = '';
     document.getElementById('change2').innerText = 'Add';

views/dashboard.ejs

@@ -46,12 +46,14 @@
                     cancel
                 </i> 
             <h1 id="roleRule" class="roleRule"> New Rule </h1>
-            <p id="role" class="role"> Role ID:</p>
-            <p id='emoji' class="emoji"><img id='emojiImg'></img>Emoji ID:</p>
+            <p id="role" class="role"> Role:</p>
+            <p id='emoji' class="emoji"><img id='emojiImg'></img>Emoji:</p>
             <p id="message" class="message"> Message ID:</p>
             <input id ="messageID" class='message messageID'></input>
-            <input id ="roleID" class='role roleID'></input>
-            <input id = "emojiID" class ="emoji emojiID"></input>
+            <select id ="roleID" class='role roleID'>
+            </select>
+            <select id = "emojiID" class ="emoji emojiID">
+            </select>
             <button id="change" class="bt" onclick='updateRule(this)'>Change</button>
             <button id="delete" class="bt" onclick='deleteRule(this)'>Delete</button>
         </div>
@@ -60,10 +62,11 @@
             <i onclick="handleClose(this)" class="close material-symbols-outlined" id="close_bt2">
                 cancel
             </i> 
-            <p id='DCchannel' class="channel labeldc">Discord Channel ID:</p>
+            <p id='DCchannel' class="channel labeldc">Discord Channel:</p>
+            <select id ="DCchannelID" class='channel dc'>
+            </select>
             <p id="YTchannel" class="channel labelyt">Youtube Channel:</p>
             <p id="CostumMessage" class="message CostumMessage">Costum message:</p>
-            <input id ="DCchannelID" class='channel dc'></input>
             <input id ="YTchannelID" class='channel yt'></input>
             <textarea id="CostumMessageI"  class='message CostumMessageI' cols="40" rows="5"></textarea>
             <button id="delete" class="bt" onclick='deleteFeed(this)'>Delete</button>