Created script to get sent webhooks from our endpoint. Not many filtering options. Update some templates for Spark, and Luminate.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,325 @@
|
||||
<script>
|
||||
const training_eventsArr=[];
|
||||
</script>
|
||||
{% for training_event in training_events.available %}
|
||||
{% for session in training_event.sessions %}
|
||||
<script>
|
||||
training_eventsArr.push("{{ session.day }}{{ session.month }}{{ session.year }}");
|
||||
//console.log("{{ training_event.title }} {{ session.day }} {{ session.month }} {{ session.year }}" )
|
||||
</script>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
||||
<div class="calFrame">
|
||||
<div class="container">
|
||||
<div class="calendar">
|
||||
<header>
|
||||
<pre class="left">◀</pre>
|
||||
|
||||
<div class="header-display">
|
||||
<p class="display">""</p>
|
||||
</div>
|
||||
|
||||
<pre class="right">▶</pre>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="week">
|
||||
<div>Su</div>
|
||||
<div>Mo</div>
|
||||
<div>Tu</div>
|
||||
<div>We</div>
|
||||
<div>Th</div>
|
||||
<div>Fr</div>
|
||||
<div>Sa</div>
|
||||
</div>
|
||||
<div class="days"></div>
|
||||
</div>
|
||||
<div class="divToday">Today</div>
|
||||
<!--<div class="display-selected">
|
||||
<p class="selected"></p>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*variables*/
|
||||
:root {
|
||||
--white: #ffff;
|
||||
--main: #eaedf0;
|
||||
--accent: #0041ff;
|
||||
--accent-2: #ebedf0;
|
||||
}
|
||||
|
||||
/*styles*/
|
||||
.divToday:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.divToday {
|
||||
background-color: var(--accent);
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.calFrame {
|
||||
background-color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.days {
|
||||
height: 144px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
border-radius: 35px;
|
||||
border: 1px solid;
|
||||
padding: 1em;
|
||||
height: 265px;
|
||||
width: 280px;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* padding: 4px; */
|
||||
width: 230px;
|
||||
}
|
||||
.header-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-display p {
|
||||
color: var(--accent);
|
||||
margin: 5px;
|
||||
font-size: 1.2rem;
|
||||
word-spacing: 0.5rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
cursor: unset;
|
||||
font-size: 1.2rem;
|
||||
color: var(--accent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.days, .week {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
margin: auto;
|
||||
/* padding: 0px 20px; */
|
||||
justify-content: space-between;
|
||||
width: 210px;
|
||||
}
|
||||
.week div, .days div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.days div:hover {
|
||||
background: var(--accent-2);
|
||||
color: rgb(25, 25, 201);
|
||||
cursor: pointer;
|
||||
}
|
||||
.week div {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.current-date {
|
||||
background-color: var(--accent);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.has-event {
|
||||
background-color: red;
|
||||
color: var(--white);
|
||||
}
|
||||
.display-selected {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"];
|
||||
let display = document.querySelector(".display");
|
||||
let days = document.querySelector(".days");
|
||||
let previous = document.querySelector(".left");
|
||||
let next = document.querySelector(".right");
|
||||
let selected = document.querySelector(".selected");
|
||||
let today = document.querySelector(".divToday");
|
||||
|
||||
let date = new Date();
|
||||
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth();
|
||||
|
||||
// Main function to render Calendar
|
||||
function displayCalendar() {
|
||||
const firstDay = new Date(year, month, 1);
|
||||
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
|
||||
const firstDayIndex = firstDay.getDay(); //4
|
||||
|
||||
const numberOfDays = lastDay.getDate(); //31
|
||||
|
||||
|
||||
let formattedDate = montharr[firstDay.getMonth()]+" " +firstDay.getFullYear().toString();
|
||||
|
||||
display.innerHTML = `${formattedDate}`;
|
||||
|
||||
for (let x = 1; x <= firstDayIndex; x++) {
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML += "";
|
||||
|
||||
days.appendChild(div);
|
||||
}
|
||||
//console.log("In Display " + month + " Year " + year);
|
||||
for (let i = 1; i <= numberOfDays; i++) {
|
||||
let div = document.createElement("div");
|
||||
let currentDate = new Date(year, month, i);
|
||||
|
||||
div.dataset.date = currentDate.getDate().toString()+montharr[currentDate.getMonth()]+currentDate.getFullYear().toString();
|
||||
|
||||
|
||||
div.innerHTML += i;
|
||||
days.appendChild(div);
|
||||
if (
|
||||
currentDate.getFullYear() === new Date().getFullYear() &&
|
||||
currentDate.getMonth() === new Date().getMonth() &&
|
||||
currentDate.getDate() === new Date().getDate()
|
||||
)
|
||||
{
|
||||
div.classList.add("current-date");
|
||||
}
|
||||
if (training_eventsArr.includes(div.dataset.date))
|
||||
{
|
||||
div.classList.add("has-event");
|
||||
|
||||
div.outerHTML="<a href='app/training_events' style='text-decoration: none;' target='_blank'>"+div.outerHTML+"</a>";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Call the function to display the calendar
|
||||
displayCalendar();
|
||||
|
||||
//Today Event Listener
|
||||
today.addEventListener("click", () => {
|
||||
days.innerHTML = "";
|
||||
date = new Date();
|
||||
year = date.getFullYear();
|
||||
month = date.getMonth();
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="0.5";
|
||||
document.querySelector(".left").style.cursor="unset";
|
||||
displayCalendar();
|
||||
|
||||
});
|
||||
|
||||
|
||||
//Previous Event Listener
|
||||
previous.addEventListener("click", () => {
|
||||
|
||||
if ( year === new Date().getFullYear() && month === new Date().getMonth() )
|
||||
{
|
||||
|
||||
return; //Skip the Previous if it is Current Month as thie is for Upcoming Events
|
||||
}
|
||||
days.innerHTML = "";
|
||||
//selected.innerHTML = "";
|
||||
//console.log("Before Pre set " + month + " Year " + year);
|
||||
if (month < 0) {
|
||||
month = 11;
|
||||
year = year - 1;
|
||||
}
|
||||
|
||||
month = month - 1;
|
||||
date.setMonth(month);
|
||||
displayCalendar();
|
||||
//console.log("after Pre set " + month + " Year " + year);
|
||||
|
||||
//Disable Previous if the current Display Month is same as today Month as thie is for Upcoming Events
|
||||
if (year === new Date().getFullYear() && month === new Date().getMonth() )
|
||||
{
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="0.5";
|
||||
document.querySelector(".left").style.cursor="unset";
|
||||
|
||||
}
|
||||
//displaySelected();
|
||||
});
|
||||
|
||||
//Next Button event listener
|
||||
next.addEventListener("click", () => {
|
||||
days.innerHTML = "";
|
||||
//selected.innerHTML = "";
|
||||
//console.log("Before Next set " + month + " Year " + year);
|
||||
if (month >= 11) {
|
||||
month = -1;
|
||||
year = year + 1;
|
||||
}
|
||||
|
||||
month = month + 1;
|
||||
date.setMonth(month);
|
||||
|
||||
displayCalendar();
|
||||
//console.log("After Next set " + month + " Year " + year);
|
||||
|
||||
if ( year === new Date().getFullYear() && month+1 === new Date().getMonth()+1 )
|
||||
{
|
||||
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="0.5";
|
||||
document.querySelector(".left").style.cursor="unset";
|
||||
|
||||
}
|
||||
else { //Enable Previous Buttom if the current display month is not currnet month
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="100";
|
||||
document.querySelector(".left").style.cursor="pointer";
|
||||
|
||||
}
|
||||
// displaySelected();
|
||||
});
|
||||
|
||||
//Currently not in Use
|
||||
function displaySelected() {
|
||||
const dayElements = document.querySelectorAll(".days div");
|
||||
dayElements.forEach((day) => {
|
||||
day.addEventListener("click", (e) => {
|
||||
const selectedDate = e.target.dataset.date;
|
||||
selected.innerHTML = `Selected Date : ${selectedDate}`;
|
||||
});
|
||||
});
|
||||
}
|
||||
displaySelected();
|
||||
</script>
|
||||
Reference in New Issue
Block a user