mirror of
https://github.com/ION606/selmer-bot-website.git
synced 2026-05-14 22:16:54 +00:00
Added the caledar function
This commit is contained in:
ION606
@@ -0,0 +1,238 @@
|
||||
<!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">
|
||||
|
||||
<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" 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">
|
||||
|
||||
<style>
|
||||
/* 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;
|
||||
/* margin-left: 65px; */
|
||||
margin-left: 30px;
|
||||
-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;
|
||||
}
|
||||
|
||||
|
||||
.btnActive {
|
||||
color: #ffffff;
|
||||
background-color: #ff1117;
|
||||
font-size: 13px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 9px;
|
||||
padding: 10px 40px;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.btnCanceled {
|
||||
color: #ffffff;
|
||||
background-color: #7a7a7a;
|
||||
font-size: 13px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 9px;
|
||||
padding: 10px 40px;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
margin-left: 40px;
|
||||
}
|
||||
/* SUBMIT BUTTON END */
|
||||
|
||||
.time input {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inp input {
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(128, 128, 128);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
const d = new Date();
|
||||
document.title = `Editing ${d.getMonth()}/${sessionStorage.getItem('day')}/${d.getFullYear()}`;
|
||||
}
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
window.close();
|
||||
};
|
||||
|
||||
|
||||
function sendData(event) {
|
||||
event.preventDefault();
|
||||
|
||||
try {
|
||||
const name = document.getElementById('ename').value;
|
||||
const desc = document.getElementById('edesc').value;
|
||||
const url = document.getElementById('elink').value;
|
||||
const loc = document.getElementById('eloc').value;
|
||||
|
||||
//Time
|
||||
var hour = Number(document.getElementById('ehr').value);
|
||||
var minute = Number(document.getElementById('emin').value);
|
||||
var offset = Number(document.getElementById('tofst').value);
|
||||
var day = sessionStorage.getItem('day');
|
||||
|
||||
|
||||
//Check if it's a valid name/desc
|
||||
if (!name) {
|
||||
return alert("Please enter a valid name!");
|
||||
}
|
||||
|
||||
//Check if it's a valid time
|
||||
if (!(hour != undefined && minute != undefined && hour >= 0 && minute >= 0 && hour < 24 && minute < 60)) {
|
||||
return alert("Please enter a valid time!");
|
||||
}
|
||||
|
||||
if (!offset || offset >= 60 || offset < 0) {
|
||||
offset = 0;
|
||||
}
|
||||
|
||||
//Deal with the offset
|
||||
//Convert the offset into ms timestamp and subtract
|
||||
const offsetTS = offset * 60000;
|
||||
|
||||
const d = new Date(new Date().getFullYear(), new Date().getMonth(), day, hour, minute);
|
||||
const serverSettings = JSON.parse(window.localStorage.getItem('serverInfo'));
|
||||
const id = window.localStorage.getItem('Id');
|
||||
|
||||
//Reminder format = { time: 1212122, event: { guildId: "930148608400035860", userId: "12", name: "Some Generic Name", description: "Some description", offset: "15", link: "https://www.example.com" location: "Some location" } }
|
||||
let obj = { time: String(d.getTime() - offsetTS), event: { guildId: serverSettings.Id, userId: id, name: name, description: desc, offset: offset, link: url, location: loc } }
|
||||
|
||||
//Send the data to the server
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('post', 'http://www.selmerbot.com/newCalEvent/', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
||||
xhr.setRequestHeader(`newCalEvent`, JSON.stringify(obj));
|
||||
|
||||
xhr.onloadend = (e) => {
|
||||
console.log(xhr.response);
|
||||
if (xhr.response == "OK") {
|
||||
//make sure the opened window isn't a popup
|
||||
if (window.opener.opener == null) { window.opener.location.reload(); }
|
||||
|
||||
alert("Saved!");
|
||||
window.close();
|
||||
} else if (xhr.response == "Internal Server Error") {
|
||||
alert("Internal Server Error\nPlease try again!");
|
||||
window.close();
|
||||
} else if (xhr.response == "Conflict") {
|
||||
alert("There's already an event at this time!");
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
|
||||
// alert(`${name}, ${desc}, ${url}, ${loc}, ${d}`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("An error has occured, please try again!");
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
Name:
|
||||
Description:
|
||||
Day: Hour: Minute: //Scroller?
|
||||
Location:
|
||||
Link:
|
||||
-->
|
||||
<div name="newCalEvent" style="margin-top: 20px; margin-left: 20px;">
|
||||
<form class="inp">
|
||||
<label for="ename">Event Name:</label>
|
||||
<input type="text" id="ename" name="ename"><br><br>
|
||||
|
||||
<label for="edesc">Event Descriptions:</label>
|
||||
<input type="text" id="edesc" name="edesc"><br><br>
|
||||
|
||||
<!-- Time Start -->
|
||||
<div class="time">
|
||||
<label for="ehr">Hour:</label> <input type="text" id="ehr" name="ehr">
|
||||
<label for="emin">Minute:</label> <input type="text" id="emin" name="emin">
|
||||
<label for="tofst">Offset (minutes):</label> <input type="text" id="tofst" name="tofst"><br><br>
|
||||
</div>
|
||||
<!-- Time End -->
|
||||
|
||||
<label for="elink">Event Link:</label>
|
||||
<input type="text" id="elink" name="elink"><br><br>
|
||||
|
||||
<label for="eloc">Event Location:</label>
|
||||
<input type="text" id="eloc" name="eloc"><br><br>
|
||||
|
||||
<input type="submit" value="Submit", class="submitButton" onclick="sendData(event)">
|
||||
|
||||
</form>
|
||||
<!-- <input type="time"> come back to this -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user