Files
selmer-bot-website/calendar.html
T

577 lines
20 KiB
HTML
Raw Normal View History

2022-08-12 10:29:57 -07:00
<!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">
<span id="IMPORTS">
<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico?raw=true" type="image/x-icon">
2022-08-12 10:29:57 -07:00
<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>
<script src="https://js.stripe.com/v3/"></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=Rouge+Script&family=Share+Tech+Mono&display=swap" rel="stylesheet">
</span>
<title>Selmer Bot Web Dashboard</title>
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body {
/* background-color: rgb(4, 4, 85); */
background-color: rgb(41, 42, 48);
width:100%; height:100%; margin:0; padding:0;
}
/* .dropdown a:hover { background-color: #ddd; } */
.show { display: block; }
.hide { display: none; }
.loadingscreen {
height: 90vh;
background-color: bisque;
z-index: 100;
}
.navbar {
background-color: rgb(0, 0, 0);
/* height: 50px;
border-width: 1px;
border-style: double; */
}
.navbar .nav-item {
margin-right: 25px;
margin-left: 25px;
}
#right {
float: right;
margin-right: 50px;
}
.box {
font-size: 20px;
height: 40px;
width: auto;
margin-bottom: 15px;
padding: 3px;
border: 1px solid black;
clear: both;
align-content: center;
margin-right: 30px;
margin-left: 30px;
}
.statusdiv {
border-style: dashed;
border-color: rgb(247, 189, 0);
width: 140px;
height: 120px;
margin-top: 20px;
float: right;
margin-right: 50px;
text-align: center;
}
.saved {
background-color: rgb(11, 184, 11);
}
.saving {
background-color: orange;
}
.failed {
background-color: red;
}
.buttonsmainbar {
background-color: green;
width: 200px;
height: 60px;
}
.btnmain {
background-color: rgb(0, 0, 0);
}
.sidebar {
background-color: #42424b;
width: 11%;
position: fixed;
top: 75px;
bottom: 0;
display: flex;
flex-wrap: wrap;
border: 0px;
border-right: 2px;
border-color: black;
border-style: solid;
}
.wc {
align-content: center;
align-self: center;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
letter-spacing: 1px;
}
.lg {
align-content: center;
align-self: center;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
letter-spacing: 1px;
}
.form-select {
width: 200px;
background-color:rgb(187, 183, 183);
border-color: #000000;
}
</style>
<!-- Buttons -->
<style>
.jumpButton {
/* color: #ffffff; */
font-size: 15px;
border: 1px solid #000000;
width: 200px;
height: 40px;
cursor: pointer;
align-self: center;
background-color: rgb(2, 2, 192);
}
.jumpButton:hover {
color: #2d63c8;
/* background-color: #ffffff; */
}
/* SUBMIT BUTTON START */
.submitButton{
position: relative;
background-color: black;
border-radius: 4em;
font-size: 16px;
color: white;
padding: 0.8em 1.8em;
cursor:pointer;
user-select:none;
text-align: center;
text-decoration: none;
cursor: pointer;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s; /* Safari */
}
.submitButton:hover {
transition-duration: 0.1s;
background-color: #3A3A3A;
}
.submitButton:after {
content: "";
display: block;
position: absolute;
border-radius: 4em;
left: 0;
top:0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;
box-shadow: 0 0 10px 40px white;
}
.submitButton:active:after {
box-shadow: 0 0 0 0 white;
position: absolute;
border-radius: 4em;
left: 0;
top:0;
opacity: 1;
transition: 0s;
}
.submitButton:active {
top: 1px;
}
/* SUBMIT BUTTON END */
.logoutbtn {
margin-top: 14px;
scale: 1.4;
}
.logoutbtn:hover {
cursor: pointer;
color: red;
}
#sevradio br {
margin-top: 10px;
}
.btnside {
color: #ffffff;
background-color: #42424b;
font-size: 19px;
/* border: 2px solid #000000; */
outline: none;
border: none;
width: 100%;
height: 50px;
cursor: pointer;
}
.btnside:hover {
color: #ffffff;
background-color: #377aea;
}
.helpbtn {
margin-top: 30px;
margin-bottom: 30px;
font-size: 20px;
align-self: right;
padding: 0px;
border-radius: 50%;
border-style: solid;
}
.calbtn {
width: 100px;
height: 70px;
}
.green {
background-color: rgb(6, 185, 6);
}
.red {
background-color: rgb(129, 129, 129);
}
2022-09-29 11:44:55 -04:00
.uploadLabel {
border: 1px solid #ccc;
display: inline-block;
padding: 7px 15px;
cursor: pointer;
border-radius: 5px;
background-color: rgb(13, 179, 179);
scale: 1.5;
margin-top: 50px;
}
.uploadButton {
display: none;
}
2022-08-12 10:29:57 -07:00
</style>
<!-- Calendar -->
<script>
async function openNewCalWindow(evjs, day) {
const ev = JSON.parse(evjs);
2022-09-14 18:35:45 -04:00
await new Promise((res, rej) => { res(window.open('https://www.selmerbot.com/calEvent.html','popUpWindow','loaction=no,width=600,height=300,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')); })
2022-08-12 10:29:57 -07:00
.then((w) => {
if (!w) { w.close(); return alert("Your browser has JavaScript Disabled!"); }
w.sessionStorage.setItem("evlist", evjs);
w.sessionStorage.setItem('day', day);
2022-08-14 15:12:30 -07:00
w.sessionStorage.setItem('ref', 'user');
2022-08-12 10:29:57 -07:00
w.location.reload();
w.document.write('<title>Editing ${(new Date(Number(ev.time)))}</title>');
})
}
async function createCalEvent(day) {
2022-09-14 18:35:45 -04:00
await new Promise((res, rej) => { res(window.open('https://www.selmerbot.com/newCalEvent.html','popUpWindow','loaction=no,width=400,height=350,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')); })
2022-08-12 10:29:57 -07:00
.then((w) => {
if (!w) { w.close(); return alert("Your browser has JavaScript Disabled!"); }
w.sessionStorage.setItem("day", day);
2022-08-14 15:12:30 -07:00
w.sessionStorage.setItem("ref", 'user');
2022-08-12 10:29:57 -07:00
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;
}
document.getElementById('calHeader').style = "";
2022-08-12 10:29:57 -07:00
}
</script>
<script>
2022-08-12 20:01:29 -07:00
function getSessionData() {
return new Promise((resolve, reject) => {
var xhrsess = new XMLHttpRequest();
2022-09-14 18:35:45 -04:00
xhrsess.open('post', 'https://www.selmerbot.com/getSessionInfo/', true);
2022-08-12 20:01:29 -07:00
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();
});
}
2022-08-12 10:29:57 -07:00
window.onload = () => {
2022-08-14 11:21:20 -07:00
var sessionId = window.localStorage.getItem('sessionId');
2022-08-12 10:29:57 -07:00
2022-08-14 11:21:20 -07:00
if (!sessionId) {
2022-08-12 10:29:57 -07:00
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%2Fwww.selmerbot.com%2F&response_type=token&scope=identify%20guilds';
2022-08-12 10:29:57 -07:00
}
}
//Get serverId
2022-08-14 11:21:20 -07:00
// const id = serverSettings.Id; // window.localStorage.getItem('Id').toString();
const session = getSessionData();
session.then((sessionInfo) => {
const id = sessionInfo.userId;
//Check if the user has premium
var xhrverify = new XMLHttpRequest();
2022-09-14 18:35:45 -04:00
xhrverify.open('post', 'https://www.selmerbot.com/verifypremium/', true);
2022-08-14 11:21:20 -07:00
xhrverify.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
//Use the guild Id as the userId
2022-08-14 11:21:20 -07:00
xhrverify.setRequestHeader('userId', id);
xhrverify.onloadend = (e) => {
if (xhrverify.response == "Unauthorized") {
document.getElementById("unauth").style.display = "block";
return;
}
var xhr2 = new XMLHttpRequest();
2022-09-14 18:35:45 -04:00
xhr2.open('get', 'https://www.selmerbot.com/getCal/', true);
2022-08-14 11:21:20 -07:00
xhr2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
//Use the guild Id as the userId
xhr2.setRequestHeader('userId', id);
2022-09-29 11:44:55 -04:00
// //import ics file
// const form = document.createElement("span");
// const label = document.createElement("label");
// label.innerText = "Upload File";
// label.className = "inpBtn";
// document.getElementsByTagName("body")[0].appendChild(label);
// const uploadICS = document.createElement('input');
// uploadICS.type = "file";
// form.appendChild(uploadICS);
// document.getElementsByTagName("body")[0].appendChild(form);
2022-08-14 11:21:20 -07:00
xhr2.onloadend = (e) => {
const calList = new Map();
const res = JSON.parse(xhr2.response);
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]]);
}
}
2022-08-14 11:21:20 -07:00
});
2022-08-12 10:29:57 -07:00
2022-08-14 11:21:20 -07:00
calSetup(calList);
}
2022-08-14 11:21:20 -07:00
xhr2.send();
}
2022-08-12 10:29:57 -07:00
2022-08-14 11:21:20 -07:00
xhrverify.send();
});
2022-08-12 10:29:57 -07:00
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-fixed-top">
<div class="container-fluid mx-auto">
<a class="navbar-brand" href="index.html">
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
</a>
<!-- <li class="nav-item">
<a href="index.html" style="color: white" class="nav-link"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2;"></i></a>
</li> -->
<ul class="navbar-nav">
<li class="nav-item">
<a href="myGuilds.html" 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.html" 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">
2022-09-29 11:44:55 -04:00
<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>
2022-08-12 10:29:57 -07:00
</li>
<li class="nav-item">
<a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
2022-08-12 10:29:57 -07:00
</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>
2022-08-12 10:29:57 -07:00
</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>
2022-08-12 10:41:21 -07:00
<div id="cal" class="wc" style="margin-top: 20px;">
<h1 id="monthName" style="text-align: center; margin-top: 50px; margin-bottom: 25px;"></h1>
2022-08-12 10:29:57 -07:00
<form>
<table id="spaceId" style="background-color: lightgrey;"
cellspacing="15" cellpadding="15" class="mx-auto">
<caption style="caption-side: top;"></caption>
<div id="unauth" style="display: none;" class="text-center">
<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.html"><i class="fa-solid fa-crown" style="scale: 4; color: gold;" alt="PREMIUM"></i></a>
</div>
2022-09-29 11:44:55 -04:00
2022-08-12 10:29:57 -07:00
<thead>
<tr id="calHeader" style="display: none;">
2022-08-12 10:29:57 -07:00
<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>
</form>
</body>
</html>