HTML/dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selmer Bot Web Dashboard</title>

    <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico?raw=true?raw=true" type="image/x-icon">
    <script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Rajdhani:wght@300&family=Share+Tech+Mono&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/CSS/dashboard.css">
    <link rel="stylesheet" type="text/css" href="/CSS/submitBtn.css">

<!-- Calendar -->
    <script>

        async function openNewCalWindow(evjs, day) {
            const ev = JSON.parse(evjs);
            
            await new Promise((res, rej) => { res(window.open('https://selmerbot.com/calEvent','popUpWindow','loaction=no,width=600,height=300,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')); })
                .then((w) => {
                if (!w) { w.close(); return alert("Your browser has JavaScript Disabled!"); }

                w.sessionStorage.setItem("evlist", evjs);
                w.sessionStorage.setItem('day', day);
                w.sessionStorage.setItem('ref', 'guild');
                w.sessionStorage.setItem('serverInfo', window.sessionStorage.getItem('serverInfo'));

                w.location.reload();
                w.document.write('<title>Editing ${(new Date(Number(ev.time)))}</title>');
            })

            // w.location.reload();
        }


        async function createCalEvent(day) {
            await new Promise((res, rej) => { res(window.open('https://selmerbot.com/newCalEvent','popUpWindow','loaction=no,width=400,height=350,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')); })
                .then((w) => {
                if (!w) { w.close(); return alert("Your browser has JavaScript Disabled!"); }

                w.sessionStorage.setItem("day", day);
                w.sessionStorage.setItem('ref', 'guild');
                w.sessionStorage.setItem('serverInfo', window.sessionStorage.getItem('serverInfo'));

                w.location.reload();
                // w.document.write('<title>Editing ${(' + String(day) + ')}</title>');
            });
        }

        //Month + 1 because the 0 will set the date back a month
        function daysInMonth (d) {
            return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
        }

        function calSetup(calList) {
            const d = new Date((new Date()).getFullYear(), (new Date()).getMonth());

            const startDay = new Date(d.getFullYear(), d.getMonth(), 1).getDay() + 1;
            var cal = document.getElementById('calbody');
            var tr = document.createElement('tr');
            var dayint = 1;
            const ll = daysInMonth(d);

            for (let i = 1; i <= 42; i ++) {
                var td = document.createElement('td');

                if (i >= startDay && dayint <= ll) {
                    let btn = document.createElement('button');
                    btn.innerText = dayint.toString();
                    btn.classList.add('calbtn');


                    if (calList.has(Number(dayint.toString()))) { btn.classList.add('green'); }
                    else { btn.classList.add('red'); }

                    btn.onclick = function(event) {
                        const timestamp = new Date(new Date().getFullYear(), new Date().getMonth(), Number(this.innerText));
                        event.preventDefault();

                        if (calList.has(Number(this.innerText))) {
                            const ev = calList.get(Number(this.innerText));

                            openNewCalWindow(JSON.stringify(ev), Number(this.innerText));
                        } else {
                            // Check if the day has already passed
                            if (Number(this.innerText) >= (new Date()).getDate()) {
                                createCalEvent(Number(this.innerText));
                            } else {
                                alert("Please pick a future date!");
                            }
                        }
                    }

                    td.appendChild(btn);
                    dayint ++;
                }

                tr.appendChild(td);

                if (i % 7 == 0) {
                    let tr2 = document.createElement('tr');
                    cal.appendChild(tr);
                    cal.appendChild(tr2);

                    tr2 = document.createElement('tr');
                    tr = document.createElement('tr');
                }
            }

            cal.appendChild(tr);

            if (window.innerWidth < 1020) {
                //Calendar resize
                const calSpacing = document.getElementById("spaceId");
                calSpacing.cellSpacing = 1;
                calSpacing.cellPadding = 1;
            }
        }
    </script>

    <script>
        function getSessionData() {
            return new Promise((resolve, reject) => {
                var xhrsess = new XMLHttpRequest();
                xhrsess.open('post', 'https://selmerbot.com/getSessionInfo/', true);
                xhrsess.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                xhrsess.setRequestHeader('session', window.localStorage.getItem('sessionId'));

                //Reminder that this will return a map of strings (you'll have to use JSON.parse() again)
                xhrsess.onloadend = (e) => {
                    resolve(JSON.parse(xhrsess.response));
                }

                xhrsess.send();
            });
        }

        //Maybe pre-load the channels in the server into local storage for accessing when chosing the welcome/logging channels?
        window.onload = () => {
            const serverInfoPromise = getSessionData();
            serverInfoPromise.then((sessionInfo) => {
                const serverInfo = JSON.parse(sessionInfo.currentServer);
                var serverSettings = JSON.parse(serverInfo.serverSettings);

                if (!serverSettings) {
                    alert("Please log in to continue");
                    if (window.location.href.indexOf('localhost') != -1) {
                        window.location = 'https://discord.com/api/oauth2/authorize?client_id=926551095352901632&redirect_uri=http%3A%2F%2Flocalhost%3A53134%2F&response_type=token&scope=identify%20guilds';
                    } else {
                        window.location = 'https://discord.com/api/oauth2/authorize?client_id=944046902415093760&redirect_uri=https%3A%2F%2Fselmerbot.com%2F&response_type=code&scope=identify%20guilds';
                    }
                }

                //Get serverId instead of the userId
                const id = serverInfo.Id;

                //Check if the user has premium
                var xhrverify = new XMLHttpRequest();
                xhrverify.open('post', 'https://selmerbot.com/verifypremium/', true);
                xhrverify.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

                //Use the guild Id as the userId
                xhrverify.setRequestHeader('userId', id);
                xhrverify.onloadend = (e) => {

                    // //Load the channels
                    // var xhr = new XMLHttpRequest();
                    // xhr.open('get', `https://selmerbot.com/getChannels/`, true);
                    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                    // xhr.setRequestHeader('serverNumber', id);
                    // xhr.onloadend = (e) => {
                        
                        //Channel Section
                        const channels = JSON.parse(serverInfo.channels);
                        const roles = JSON.parse(serverInfo.roles);
                        // console.log(channels.text);
                        // window.localStorage.setItem('channels', (xhr.response));

                        for (let i = 0; i < channels.text.length; i ++) {
                            var channel = channels.text[i];
                            if (channel.name && channel.id) {
                                var optlog = document.createElement('option');
                                optlog.value = channel.id;
                                optlog.innerHTML = channel.name;

                                //I need two because if I try to append the same one, it only appends to one dorpdown
                                var optwelcome = document.createElement('option');
                                optwelcome.value = channel.id;
                                optwelcome.innerHTML = channel.name;

                                var optann = document.createElement('option');
                                optann.value = channel.id;
                                optann.innerHTML = channel.name;

                                if (serverSettings.WELCOME.welcomechannel == optwelcome.value) {
                                    optwelcome.setAttribute('selected', '');
                                }

                                if (serverSettings.LOG.logchannel == optlog.value) {
                                    optlog.setAttribute('selected', '');
                                    // optlog.selected = serverSettings.LOG.logchannel;
                                }

                                if (serverSettings.announcement.channel == optann.value) {
                                    optann.setAttribute('selected', '');
                                }
                                

                                document.getElementById('logchanneldropdown').appendChild(optlog);
                                document.getElementById('welcomechanneldropdown').appendChild(optwelcome);
                                document.getElementById('achanneldropdown').appendChild(optann);
                            }
                        }
                        
                        const ard = document.getElementById('aroledropdown');
                        roles.forEach((role) => {
                            var opt = document.createElement('option');
                            opt.value = role.Id;
                            opt.innerHTML = role.name;
                            // opt.style += `background-color: ${role.color + '33'};`;
                            
                            if (role.color == '#000000') { 
                                opt.style = 'color: white';
                            }
                            else { 
                                opt.style = `color: ${role.color}; background-color: ${role.color + '33'};`;
                            }

                            if (serverSettings.announcement.role == role.Id) {
                                opt.setAttribute('selected', '');
                            }
                            ard.appendChild(opt);
                        });

                        // document.getElementById('body').classList.replace('hide', 'show');
                        
                        //Welcome section
                        let wc = serverSettings.WELCOME.welcomechannel || '';
                        let wm = serverSettings.WELCOME.welcomemessage || '';
                        // document.getElementById('wc').setAttribute('value', wc);
                        document.getElementById('wm').setAttribute('value', wm);

                        //Logging section ,"LOG":{"_id":"LOG","keepLogs":false,"logchannel":null,"severity":0}}
                        let kl = serverSettings.LOG.keepLogs || false;
                        let lc = serverSettings.LOG.logchannel || '';
                        let ls = serverSettings.LOG.severity || 0;

                        document.getElementById('kl').checked = kl;
                        // document.getElementById('lc').setAttribute('value', lc);

                        // document.getElementById('ls').children[ls].checked = true; //Doesn't work
                    // }
                    // xhr.send();


                    //#region Calendar
                    if (xhrverify.response == "Unauthorized") {
                        document.getElementById("calForm").style.display = "none";
                        document.getElementById("unauth").style.display = "block";
                        return;
                    } else if (xhrverify.response == 'Internal Server Error') {
                        alert("Uh oh, an Internal Server Error has occured!\nPlease try again!");
                        return window.location.href = "/";
                    }


                    var xhr2 = new XMLHttpRequest();
                    xhr2.open('get', 'https://selmerbot.com/getCal/', true);
                    xhr2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

                    xhr2.setRequestHeader('guildId', id);

                    xhr2.onloadend = (e) => {
                        const calList = new Map();

                        const res = JSON.parse(xhr2.response); console.log(res, typeof res);
                        const times = res[0];
                        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                        document.getElementById('monthName').innerText = `Editing Reminders for the Month of ${monthNames[(new Date()).getMonth()]}`;

                        times.forEach((time, ind) => {
                            const fullDate = new Date(Number(time));
                            const month = fullDate.getMonth();
                            const day = fullDate.getDate();

                            //Make sure it's the right month (old ones should be removed, this is just a catch)
                            if (month == (new Date()).getMonth()) {
                                if (calList.has(day)) {
                                    var temp = calList.get(day);
                                    temp.push(res[1][ind]);
                                    calList.set(day, temp);
                                } else {
                                    calList.set(day, [res[1][ind]]);
                                }
                            }
                        });

                        calSetup(calList);
                    }

                    xhr2.send();

                    //#endregion
                }

                xhrverify.send();
            });
        }


        function logout() {
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'https://selmerbot.com/logout/', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
            xhr.setRequestHeader('sessionid', window.localStorage.getItem('sessionId'));

            xhr.onloadend = (e) => {
                window.localStorage.clear();
                window.sessionStorage.clear();
                window.location.href = '/';
            }
            xhr.send();
        }
    </script>

    <script>
        function loadWelcomePage() {
            document.getElementById('welcome').classList.replace('hide', 'show');
        }


        function loadLoggingPage() {
            document.getElementById('log').classList.replace('hide', 'show');
        }

        
        function divChange(c1) {
            // document.getElementById("mainDropdown").classList.toggle("show");
            var divchildren = document.getElementById('inputs').children;

            //Hide the divs we don't need
            for (let i = 0; i < divchildren.length; i++) {
                var d2 = document.getElementById(divchildren[i].id);
                if (!d2.classList.contains('hide')) { d2.classList.add('hide'); }
            }

            //Show the div we want
            var d1 = document.getElementById(c1);
            d1.classList.toggle("hide");
        }


        function sendData(event, inp) {
            event.preventDefault();

            //Change saving status
            var b = document.getElementById('savstat');
            b.classList.replace('saved', 'saving');
            b.innerText = 'SAVING';

            const sessionInfoPromise = getSessionData();
            sessionInfoPromise.then((sessionInfo) => {
                var serverInfo = JSON.parse(sessionInfo.currentServer);
                // var serverInfo = JSON.parse(window.sessionStorage.getItem('serverInfo'));
                var serverSettings = JSON.parse(serverInfo.serverSettings);

                if (inp.inp == 'logs') {
                    const ls = document.getElementsByName('ls');
                    var sevname = '';
                    for (i in ls) {
                        if (ls[i].checked) { sevname = ls[i].id.substring(3); }
                    }

                    const sevlist = ['none', 'low', 'meduim', 'high']
                    serverSettings.LOG.severity = sevlist.indexOf(sevname);
                    serverSettings.LOG.logchannel = document.getElementById('logchanneldropdown').value || null;

                    let kl = false;
                    if (document.getElementById('kl').checked) {
                        kl = true;
                    }
                    serverSettings.LOG.keepLogs = kl;
                } else if (inp.inp == 'announcement') {
                    serverSettings.announcement.channel = document.getElementById('achanneldropdown').value || null;
                    serverSettings.announcement.role = document.getElementById('aroledropdown').value || null;
                    console.log(serverSettings.announcement);
                } else {
                    serverSettings.WELCOME.welcomechannel =  document.getElementById('welcomechanneldropdown').value || null;
                    serverSettings.WELCOME.welcomemessage = document.getElementById('wm').value || null;
                }

                //Send the data to the server
                var xhr = new XMLHttpRequest();
                xhr.open('post', 'https://selmerbot.com/sendData/', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                xhr.setRequestHeader('serverSettings', JSON.stringify(serverSettings));

                xhr.onloadend = (e) => {
                    if (xhr.response == 'DONE') {
                        //Change the current server data
                        var xhrs = new XMLHttpRequest();
                        xhrs.open('post', 'https://selmerbot.com/setCurrentServer/', true);
                        xhrs.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                        xhrs.setRequestHeader('serverNumber', serverInfo.Id);
                        xhrs.setRequestHeader('sessionid', window.localStorage.getItem("sessionId"));
                        xhrs.onloadend = (e) => {
                            if (xhrs.response != 'OK') { alert("Uh Oh! There's been a problem!\nError Code: " + xhrs.response); }
                            b.classList.replace('saving', 'saved');
                            b.innerText = 'SAVED';
                            window.sessionStorage.setItem('serverInfo', JSON.stringify(serverSettings));
                            window.location.reload();
                        }
                        xhrs.send();
                    } else {
                        b.classList.replace('saving', 'failed');
                        b.innerText = 'FAILED';
                    }
                }
                
                xhr.send(JSON.stringify(serverSettings));
            });
        }


        function createDropDown(sect) {
            if (sect == 'welcome') {
                $("#alertWelcome").slideDown(500);
            } else if (sect == 'logs') {
                $("#alertLogs").slideDown(500);
            }
            console.log(sect);
        }
    </script>
</head>

<body>
    <nav class="navbar navbar-expand-sm navbar-fixed-top">
        <div class="container-fluid mx-auto">
            <a class="navbar-brand" href="/">
                <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
            </a>
            
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="myGuilds" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
                </li>
                
                <li class="nav-item">
                    <a href="calendar" id="callink" class="nav-link"><i class="fa-solid fa-calendar" alt="Calendar" style="scale: 2; color: lightgrey;"></i></a>
                </li>

                <li class="nav-item">
                    <a href="https://docs.selmerbot.com" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
                </li>
                
                <li class="nav-item">
                    <a href="premium" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
                </li>
                
                <li class="nav-item">
					<a href="team" class="nav-link"><i class="fa-solid fa-user-gear" style="scale: 2; color: rgb(12, 216, 5);" alt="AUTHOR"></i></a>
				</li>
            </ul>
        
        <!-- <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button> -->
            <div class="container" style="font-family: 'Rajdhani', sans-serif; color: white;"><h1>Selmer Bot Web Dashboard</h1></div>
            <span class="ms-auto" style="margin-right: 1%;">
                <button onclick="logout()" id="logoutbtn" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
            </span>
        </div>
    </nav>

    <div id="help_alerts">
        <div class="row custom-alert" style="display: none;" id="alertWelcome">
            <div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                <!--<strong class="mx-auto"></strong> -->Use {sn} to insert the server name, {ut} to insert the whole user tag, {un} to insert the user name, and {ud} to insert the user discriminator<br><i>Example: Welcome to {sn} Sir {un}#{ud}</i>
            </div>
        </div>

        <div class="row custom-alert" style="display: none;" id="alertLogs">
            <div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                <!-- <strong class="mx-auto">Logged In Successfully!</strong> -->When setting the log severity, setting the tier will also include all higher tiers<br><i>For example, using !setup log_severity none will log things from every severity</i>
            </div>
        </div>
    </div>

    <div class="statusdiv">
        <h2 style="color: white; margin-bottom: 10px; margin-top: 10px;">STATUS</h2>
        <div id="savstat" class="box saved">SAVED</div>
    </div>

    <div class="sidebar">
      <div id="buttons" class="buttonsmainbar">
        <button onclick="divChange('welcome')" class="btnside">Welcome</button>
        <button onclick="divChange('log')" class="btnside">Logging</button>
        <button onclick="divChange('cal')" class="btnside">Calendar</button>
      </div>
    </div>

      <!-- EVERYTHING NOT SIDEBAR -->
      <div style="margin-left:15%">

        <div id="inputs">
            <div id="welcome", class="hide wc" style="margin-top: 20px;">
                <button id="whbtn" class="helpbtn" onclick="createDropDown('welcome')"><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.downloadclipart.net%2Flarge%2F45627-icon-with-question-mark-clipart.png&f=1&nofb=1" style="width: 50px; border-radius: 50%; border-style: solid;"></button>
                <form>
                    <label for="wc">Welcome Channel Name:</label>

                    <select id="welcomechanneldropdown" class="form-select mb-5" aria-label="Default select example">
                        <option selected=""></option>
                    </select>

                    <label for="wm">Welcome Message:</label>
                    <input type="text" id="wm" name="wm"><br><br>

                    <input type="submit" value="Submit", class="submitButton" onclick="sendData(event, { 'inp': 'welcome' })">
                </form>
            </div>


            <div id="log", class="hide lg">
                <button class="helpbtn" onclick="createDropDown('logs')"><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.downloadclipart.net%2Flarge%2F45627-icon-with-question-mark-clipart.png&f=1&nofb=1" style="width: 50px; border-radius: 50%; border-style: solid;"></button>
                <form>
                    <label for="kl">Keep Logs?</label>
                    <input type="checkbox" id="kl" name="kl"><br><br>
        
                    <label class="ps-1" for="lc">Log Channel Name:</label>
                    <select id="logchanneldropdown" class="form-select mb-5" aria-label="Default select example">
                        <option selected=""></option>
                    </select>

                    <div id="sevradio">
                        <p style="margin-bottom: 0px; text-underline-offset: 2px;"><u>Log Severity</u></p>

                        <label for="ls-none" style="margin-top: 0px;">None</label>
                        <input type="radio" id="ls-none" name="ls"><br>
            
                        <label for="ls-low">Low</label>
                        <input type="radio" id="ls-low" name="ls"><br>
            
                        <label for="ls-meduim">Medium</label>
                        <input type="radio" id="ls-meduim" name="ls"><br>
            
                        <label for="ls-high">High</label>
                        <input type="radio" id="ls-high" name="ls"><br><br>
                    </div>
        
                    <input type="submit" value="Submit", class="submitButton" onclick="sendData(event, { 'inp': 'logs' })">
                </form>
            </div>


            <div id="cal", class="hide wc" style="margin-top: 20px;">
                <div id="unauth" class="text-center" style="display: none;">
                    <h1 style="margin-bottom: 20px;">You have to be a premium subscriber to use this feature!</h1>
                    <h3 style="margin-bottom: 50px;">vvv GET PREMIUM NOW vvv</h3>
                    <a href="premium"><i class="fa-solid fa-crown" style="scale: 4; color: gold;" alt="PREMIUM"></i></a>
                </div>

                <h1 id="monthName", style="text-align: center; margin-top: 50px; margin-bottom: 25px;"></h1>
                <form id="calForm">
                    <table id="spaceId" style="background-color: lightgrey;"
                        cellspacing="15" cellpadding="15" class="mx-auto">
                
                        <!-- The tr tag is used to enter 
                            rows in the table -->
                
                        <!-- It is used to give the heading to the
                            table. We can give the heading to the 
                            top and bottom of the table -->
                
                        <caption align="top">
                            <!-- Here we have used the attribute 
                                that is style and we have colored 
                                the sentence to make it better 
                                depending on the web page-->
                        </caption>
                
                        <!-- Here th stands for the heading of the
                            table that comes in the first row-->
                
                        <!-- The text in this table header tag will 
                            appear as bold and is center aligned-->
                
                        <thead>
                            <tr>
                                <!-- Here we have applied inline style 
                                    to make it more attractive-->
                                <th style="color: white; background: purple;">
                                    Sun</th>
                                <th style="color: white; background: purple;">
                                    Mon</th>
                                <th style="color: white; background: purple;">
                                    Tue</th>
                                <th style="color: white; background: purple;">
                                    Wed</th>
                                <th style="color: white; background: purple;">
                                    Thu</th>
                                <th style="color: white; background: purple;">
                                    Fri</th>
                                <th style="color: white; background: purple;">
                                    Sat</th>
                            </tr>
                        </thead>
                
                        <tbody id="calbody" style="color: black;">

                        </tbody>
                    </table><br><br>

                    <label for="ardpd" style="margin-top: 30px;">Select your event ping role</label>
                    <select id="aroledropdown" name="ardpd" class="form-select mb-5 ardpd" aria-label="Default select example">
                        <option selected=""></option>
                    </select>

                    <label class="ps-1" for="acd">Event Channel Name:</label>
                    <select id="achanneldropdown" name="acd" class="form-select mb-5">
                        <option selected=""></option>
                    </select>
                    
                    <input type="submit" value="Submit", class="submitButton" onclick="sendData(event, { 'inp': 'announcement' })">
                </form>
            </div>

        </div>
    </div>
    
</body>
</html>