818 lines
31 KiB
HTML
Executable File
818 lines
31 KiB
HTML
Executable File
{% load static basefilters horillafilters employee_filter i18n %} {% load tz %} {% now "Y-m-d" as current_date %}
|
|
{% load accessibility_filters %}
|
|
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
|
|
|
|
<div id="mainNav"></div>
|
|
<!-- End of Navigation -->
|
|
<style>
|
|
.oh-card-dashboard--moveable {
|
|
padding: 0 10px 20px 10px;
|
|
}
|
|
|
|
.oh-card-dashboard:not(.tile) {
|
|
cursor: default;
|
|
min-height: 425px;
|
|
}
|
|
|
|
.oh-dashboard__movable-cards {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.oh-card-dashboard--moveable {
|
|
padding-right: 0;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.progress {
|
|
height: 20px;
|
|
width: 110px;
|
|
background-color: lightgrey;
|
|
border: 2px solid #27C20C;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: #27C20C;
|
|
/* Set your desired progress bar color */
|
|
}
|
|
|
|
.progress-text {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.oh-modal_close--custom {
|
|
border: none;
|
|
background: none;
|
|
font-size: 1.5rem;
|
|
opacity: 0.7;
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 15px;
|
|
}
|
|
|
|
.container-heading {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
}
|
|
|
|
.oh-kanban-card__title {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border: 1px solid hsl(8deg 77% 56% / 40%);
|
|
border-radius: 18px;
|
|
margin-right: 10px;
|
|
background-color: hsl(24.23deg 100% 58.24% / 52.94%);
|
|
}
|
|
|
|
.announcement_title {
|
|
margin-bottom: 10px;
|
|
padding: 8px;
|
|
margin-right: 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-wrapper {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%); /* Center the modal */
|
|
width: 80%; /* Adjust the width of the modal */
|
|
height: 80%; /* Adjust the height of the modal */
|
|
overflow: hidden;
|
|
z-index: 1001;
|
|
background: transparent; /* Ensure background is transparent */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.blurred-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
filter: blur(5px);
|
|
opacity: 2; /* Adjust opacity level */
|
|
z-index: 1000; /* Ensure it's behind the canvas */
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<div class="oh-wrapper">
|
|
|
|
<!-- back button -->
|
|
<div class="d-none mt-5" id="back_button" style="width: 10%">
|
|
<a href="{% url 'home-page' %}" class="oh-btn oh-btn--secondary oh-btn--shadow ms-3">
|
|
<ion-icon class="me-2 md hydrated" name="arrow-back-outline" role="img"
|
|
aria-label="arrow-back-outline"></ion-icon>{% trans "Back" %}</a>
|
|
</div>
|
|
<!-- end of back button -->
|
|
<div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">
|
|
|
|
|
|
<div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
|
|
<div class="oh-dashboard__cards row">
|
|
{% if perms.employee.view_employee %}
|
|
{% if "recruitment"|app_installed %}
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-card-dashboard oh-card-dashboard--success tile">
|
|
<a href="{% url 'candidate-view' %}?joining_date={{current_date}}"
|
|
style="text-decoration: none">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "New Joining Today" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count" hx-get="{% url 'joining-today-count' %}" hx-trigger="load">
|
|
<div style="height: 67px;"></div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile">
|
|
<a href="{% url 'candidate-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
|
|
style="text-decoration: none">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "New Joining This Week" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count" hx-get="{% url 'joining-week-count' %}" hx-trigger="load">
|
|
<div style="height: 67px;"></div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<a href="{% url 'employee-view' %}" style="text-decoration: none">
|
|
<div class="oh-card-dashboard oh-card-dashboard--neutral tile">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Total Strength" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count" hx-get="{% url 'total-employees-count' %}" hx-trigger="load">
|
|
<div style="height: 67px;"></div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
<div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
|
|
{% include "dashboard_tile_container.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
|
|
{% if 'birthday_view'|feature_is_accessible:request or perms.employee.view_employee %}
|
|
<div class="oh-dashboard__events" hx-get="{% url 'get-birthday' %}" hx-trigger="load"> </div>
|
|
{% endif %}
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
|
|
<div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
|
|
<span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
|
|
{% if perms.base.add_announcement %}
|
|
<span>
|
|
<button id="addAnnouncement" style="display: inline-block;padding: 0px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
|
|
hx-get="{% url 'create-announcement' %}" hx-target="#objectCreateModalTarget"
|
|
hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
|
|
title="{% trans 'Create Announcement' %}">
|
|
<ion-icon name="add-outline" class="m-0"></ion-icon>
|
|
</button>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="oh-card-dashboard__body" hx-get="{% url 'announcement-list' %}" hx-trigger="load" id="announcementListCard">
|
|
<div class="animated-background"></div>
|
|
</div>
|
|
</div>
|
|
{% if "leave"|app_installed %}
|
|
{% if perms.leave.view_leaverequest or request.user|is_reportingmanager %}
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load" style="height:300px;">
|
|
<div class="animated-background"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if perms.employee.view_employeeworkinformation or request.user|is_reportingmanager %}
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
|
|
</div>
|
|
<!-- Search bar -->
|
|
<div class="oh-search-bar mb-3">
|
|
<input type="text" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
|
|
hx-trigger="keyup changed dealy:0.3s" id="employeeSearch" name="search"
|
|
placeholder="Search Employee">
|
|
</div>
|
|
<div class="oh-card-dashboard__body" hx-get="{% url 'emp-workinfo-complete' %}" hx-trigger="load">
|
|
<div class="animated-background"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<span class="oh-modal__dialog-title" id="sendMailModalLabel">
|
|
<h5>{% trans 'Send Mail' %}</h5>
|
|
</span>
|
|
<button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body" id="mail-content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="oh-modal" id="bigModal" role="dialog" aria-labelledby="bigModal" aria-hidden="true">
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<h2 class="oh-modal__dialog-title" id="">
|
|
{% trans "Details" %}
|
|
</h2>
|
|
<button class="oh-modal__close" aria-label="Close">
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body oh-modal__dialog-relative" id="bigModalTarget"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="oh-modal" id="editModal" role="dialog" aria-labelledby="editModal" aria-hidden="true">
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<h2 class="oh-modal__dialog-title" id="editModalLabel">
|
|
{% trans "Add Asset Report" %}
|
|
</h2>
|
|
<button type="button" class="oh-modal_close--custom"
|
|
onclick="$('#editModal').removeClass('oh-modal--show');">
|
|
<ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body" id="editModalForm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "announcement_single_view.html" %}
|
|
|
|
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script src="{% static 'dashboard/getBirthday.js' %}"></script>
|
|
<script src="{% static 'dashboard/employeeChart.js' %}"></script>
|
|
|
|
{% if "leave"|app_installed %}
|
|
<script src="{% static 'dashboard/onLeave.js' %}"></script>
|
|
{% endif %}
|
|
|
|
{% if "leave"|app_installed %}
|
|
<script src="{% static 'dashboard/leaveChart.js' %}"></script>
|
|
{% endif %}
|
|
|
|
{% if "recruitment"|app_installed %}
|
|
{% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
|
|
<script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if "attendance"|app_installed %}
|
|
{% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
|
|
<script src="{% static 'dashboard/attendanceChart.js' %}"></script>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if "onboarding"|app_installed %}
|
|
<!-- onboarding dashboard -->
|
|
<script src="{% static 'dashboard/onboardChart.js' %}"></script>
|
|
{% endif %}
|
|
|
|
{% if "pms"|app_installed %}
|
|
<!-- PMS chart -->
|
|
<script src="{% static 'src/dashboard/pmsChart.js' %}"></script>
|
|
{% endif %}
|
|
|
|
<!-- leave dashboard -->
|
|
<script>
|
|
|
|
// Function to remove the div after 20 seconds
|
|
function removeBirthdayDiv() {
|
|
const pageWrapper = document.querySelector('.page-wrapper');
|
|
if (pageWrapper) {
|
|
pageWrapper.remove(); // Remove the div
|
|
localStorage.setItem('birthdayShown', 'true'); // Set a flag in localStorage
|
|
}
|
|
}
|
|
|
|
// Check localStorage to see if the div has already been shown
|
|
if (!localStorage.getItem('birthdayShown')) {
|
|
// If not shown before, display the div
|
|
setTimeout(removeBirthdayDiv, 12000); // Remove after 12 seconds
|
|
} else {
|
|
// If already shown, remove it immediately (or don't add it at all)
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const pageWrapper = document.querySelector('.page-wrapper');
|
|
if (pageWrapper) {
|
|
pageWrapper.remove(); // Remove if already shown
|
|
}
|
|
});
|
|
}
|
|
|
|
function setDifference(setA, setB) {
|
|
if (setB.length > setA.length) {
|
|
temp = setA
|
|
setA = setB
|
|
setB = temp
|
|
}
|
|
return [...setA.filter(element => !setB.includes(element))];
|
|
}
|
|
$(document).ready(function () {
|
|
if (localStorage.getItem("tileOrder")) {
|
|
var tileOrder = []
|
|
$.each(
|
|
$(".oh-card-dashboard--moveable"),
|
|
function (indexInArray, valueOfElement) {
|
|
tileOrder.push($(valueOfElement).attr("id"));
|
|
}
|
|
);
|
|
var storedIds = JSON.parse(localStorage.getItem("tileOrder"))
|
|
var existingElements = $(".oh-card-dashboard--moveable[id]")
|
|
var existingElementsIds = [];
|
|
$.each(existingElements, function (indexInArray, valueOfElement) {
|
|
existingElementsIds.push($(this).attr("id"))
|
|
});
|
|
var newOrderIds = [...storedIds, ...setDifference(storedIds, existingElementsIds)]
|
|
if (storedIds.length != existingElementsIds.length) {
|
|
localStorage.setItem("tileOrder", JSON.stringify(newOrderIds))
|
|
}
|
|
|
|
} else {
|
|
localStorage.setItem("tileOrder", JSON.stringify(
|
|
[
|
|
"notInYetId", "LeaveApprove", "shiftRequestApprove", "WorkTypeRequestApprove", "AttendanceValidate", "OTApprove",
|
|
"LeaveAllocationApprove", "feedbackAnswer", "assetRequestApprove", "movable8", "pendingHours", "notoutYetId",
|
|
"movable2", "movable3", "movable4", "movable1", "movable5", "movable6", "movable7", "movable9", "movable10", "movable11"
|
|
]
|
|
))
|
|
}
|
|
// localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
|
|
|
|
function orderDashboardTile() {
|
|
var orderIds = JSON.parse(localStorage.getItem("tileOrder"));
|
|
const parentContainer = $("#tileContainer");
|
|
if (orderIds != null) {
|
|
const sortedElements = [];
|
|
|
|
// Loop through the desired order of IDs
|
|
for (const id of orderIds) {
|
|
const element = $("#" + id);
|
|
if (element.length) {
|
|
sortedElements.push(element);
|
|
}
|
|
}
|
|
|
|
// Clear the parent container
|
|
if (sortedElements.length) {
|
|
parentContainer.empty();
|
|
}
|
|
// Append the sorted elements to the parent container
|
|
for (const element of sortedElements) {
|
|
parentContainer.append(element);
|
|
}
|
|
}
|
|
}
|
|
orderDashboardTile();
|
|
$(".oh-card-dashboard--moveable").mouseup(function () {
|
|
var tileOrder = [];
|
|
setTimeout((e) => {
|
|
$.each(
|
|
$(".oh-card-dashboard--moveable"),
|
|
function (indexInArray, valueOfElement) {
|
|
tileOrder.push($(valueOfElement).attr("id"));
|
|
}
|
|
);
|
|
localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
|
|
}, 10);
|
|
});
|
|
});
|
|
|
|
function closeNew(anchorElement) {
|
|
$(anchorElement).parent().find('#newTab').hide();
|
|
}
|
|
|
|
var w = c.width = window.innerWidth,
|
|
h = c.height = window.innerHeight,
|
|
ctx = c.getContext('2d'),
|
|
|
|
hw = w / 2, // half-width
|
|
hh = h / 2,
|
|
|
|
opts = {
|
|
strings: ['HAPPY', 'BIRTHDAY!',"{{request.user.employee_get|escapejs}}"],
|
|
charSize: 60,
|
|
charSpacing: 45,
|
|
lineHeight: 65,
|
|
cx: w / 2,
|
|
cy: h / 2,
|
|
fireworkPrevPoints: 10,
|
|
fireworkBaseLineWidth: 5,
|
|
fireworkAddedLineWidth: 8,
|
|
fireworkSpawnTime: 200,
|
|
fireworkBaseReachTime: 30,
|
|
fireworkAddedReachTime: 30,
|
|
fireworkCircleBaseSize: 20,
|
|
fireworkCircleAddedSize: 10,
|
|
fireworkCircleBaseTime: 30,
|
|
fireworkCircleAddedTime: 30,
|
|
fireworkCircleFadeBaseTime: 10,
|
|
fireworkCircleFadeAddedTime: 5,
|
|
fireworkBaseShards: 20,
|
|
fireworkAddedShards: 5,
|
|
fireworkShardPrevPoints: 3,
|
|
fireworkShardBaseVel: 4,
|
|
fireworkShardAddedVel: 2,
|
|
fireworkShardBaseSize: 10,
|
|
fireworkShardAddedSize: 3,
|
|
gravity: 0.1,
|
|
upFlow: -0.1,
|
|
letterContemplatingWaitTime: 360,
|
|
balloonSpawnTime: 10,
|
|
balloonBaseInflateTime: 10,
|
|
balloonAddedInflateTime: 10,
|
|
balloonBaseSize: 60,
|
|
balloonAddedSize: 20,
|
|
balloonBaseVel: 0.4,
|
|
balloonAddedVel: 0.4,
|
|
balloonBaseRadian: -(Math.PI / 2 - 0.5),
|
|
balloonAddedRadian: -1,
|
|
},
|
|
calc = {
|
|
totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length)
|
|
},
|
|
|
|
Tau = Math.PI * 2,
|
|
TauQuarter = Tau / 4,
|
|
|
|
letters = [];
|
|
|
|
ctx.font = opts.charSize + 'px "Lobster"';
|
|
|
|
|
|
function Letter(char, x, y) {
|
|
this.char = char;
|
|
this.x = x;
|
|
this.y = y;
|
|
|
|
this.dx = -ctx.measureText(char).width / 2;
|
|
this.dy = +opts.charSize / 2;
|
|
|
|
this.fireworkDy = this.y - hh;
|
|
|
|
var hue = x / calc.totalWidth * 360;
|
|
|
|
this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
|
|
this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
|
|
this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
|
|
this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);
|
|
|
|
{% comment %} this.color = 'hsl(8, 77%, 56%)'; // Base color
|
|
this.lightAlphaColor = 'hsla(8, 77%, 56%, 0.5)'; // Semi-transparent
|
|
this.lightColor = 'hsla(8, 77%, 56%, 0.8)'; // Slightly transparent
|
|
this.alphaColor = 'hsla(8, 77%, 56%, 0.6)'; // Semi-transparent {% endcomment %}
|
|
|
|
|
|
this.reset();
|
|
}
|
|
Letter.prototype.reset = function () {
|
|
this.phase = 'firework';
|
|
this.tick = 0;
|
|
this.spawned = false;
|
|
this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
|
|
this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
|
|
this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
|
|
this.prevPoints = [[0, hh, 0]];
|
|
}
|
|
Letter.prototype.step = function () {
|
|
if (this.phase === 'firework') {
|
|
if (!this.spawned) {
|
|
++this.tick;
|
|
if (this.tick >= this.spawningTime) {
|
|
this.tick = 0;
|
|
this.spawned = true;
|
|
}
|
|
} else {
|
|
++this.tick;
|
|
|
|
var linearProportion = this.tick / this.reachTime,
|
|
harmonicProportion = Math.sin(linearProportion * TauQuarter),
|
|
|
|
x = linearProportion * this.x,
|
|
y = hh + harmonicProportion * this.fireworkDy;
|
|
|
|
if (this.prevPoints.length > opts.fireworkPrevPoints)
|
|
this.prevPoints.shift();
|
|
|
|
this.prevPoints.push([x, y, linearProportion * this.lineWidth]);
|
|
|
|
var lineWidthProportion = 1 / (this.prevPoints.length - 1);
|
|
|
|
for (var i = 1; i < this.prevPoints.length; ++i) {
|
|
var point = this.prevPoints[i],
|
|
point2 = this.prevPoints[i - 1];
|
|
|
|
ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
|
|
ctx.lineWidth = point[2] * lineWidthProportion * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(point[0], point[1]);
|
|
ctx.lineTo(point2[0], point2[1]);
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (this.tick >= this.reachTime) {
|
|
this.phase = 'contemplate';
|
|
|
|
this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
|
|
this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
|
|
this.circleCreating = true;
|
|
this.circleFading = false;
|
|
|
|
this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
|
|
this.tick = 0;
|
|
this.tick2 = 0;
|
|
|
|
this.shards = [];
|
|
|
|
var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
|
|
angle = Tau / shardCount,
|
|
cos = Math.cos(angle),
|
|
sin = Math.sin(angle),
|
|
|
|
x = 1,
|
|
y = 0;
|
|
|
|
for (var i = 0; i < shardCount; ++i) {
|
|
var x1 = x;
|
|
x = x * cos - y * sin;
|
|
y = y * cos + x1 * sin;
|
|
|
|
this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
|
|
}
|
|
}
|
|
}
|
|
} else if (this.phase === 'contemplate') {
|
|
++this.tick;
|
|
|
|
if (this.circleCreating) {
|
|
++this.tick2;
|
|
var proportion = this.tick2 / this.circleCompleteTime,
|
|
harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
|
|
ctx.arc(this.x, this.y, harmonic * this.circleFinalSize, 0, Tau);
|
|
ctx.fill();
|
|
|
|
if (this.tick2 > this.circleCompleteTime) {
|
|
this.tick2 = 0;
|
|
this.circleCreating = false;
|
|
this.circleFading = true;
|
|
}
|
|
} else if (this.circleFading) {
|
|
ctx.fillStyle = this.lightColor.replace('light', 70);
|
|
ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
|
|
|
|
++this.tick2;
|
|
var proportion = this.tick2 / this.circleFadeTime,
|
|
harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - harmonic);
|
|
ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
|
|
ctx.fill();
|
|
|
|
if (this.tick2 >= this.circleFadeTime)
|
|
this.circleFading = false;
|
|
|
|
} else {
|
|
ctx.fillStyle = this.lightColor.replace('light', 70);
|
|
ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
|
|
}
|
|
|
|
for (var i = 0; i < this.shards.length; ++i) {
|
|
this.shards[i].step();
|
|
|
|
if (!this.shards[i].alive) {
|
|
this.shards.splice(i, 1);
|
|
--i;
|
|
}
|
|
}
|
|
|
|
if (this.tick > opts.letterContemplatingWaitTime) {
|
|
this.phase = 'balloon';
|
|
|
|
this.tick = 0;
|
|
this.spawning = true;
|
|
this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
|
|
this.inflating = false;
|
|
this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
|
|
this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;
|
|
|
|
var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
|
|
vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();
|
|
|
|
this.vx = Math.cos(rad) * vel;
|
|
this.vy = Math.sin(rad) * vel;
|
|
}
|
|
} else if (this.phase === 'balloon') {
|
|
ctx.strokeStyle = this.lightColor.replace('light', 80);
|
|
|
|
if (this.spawning) {
|
|
++this.tick;
|
|
ctx.fillStyle = this.lightColor.replace('light', 70);
|
|
ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
|
|
|
|
if (this.tick >= this.spawnTime) {
|
|
this.tick = 0;
|
|
this.spawning = false;
|
|
this.inflating = true;
|
|
}
|
|
} else if (this.inflating) {
|
|
++this.tick;
|
|
|
|
var proportion = this.tick / this.inflateTime,
|
|
x = this.cx = this.x,
|
|
y = this.cy = this.y - this.size * proportion;
|
|
|
|
ctx.fillStyle = this.alphaColor.replace('alp', proportion);
|
|
ctx.beginPath();
|
|
generateBalloonPath(x, y, this.size * proportion);
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(x, this.y);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = this.lightColor.replace('light', 70);
|
|
ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
|
|
|
|
if (this.tick >= this.inflateTime) {
|
|
this.tick = 0;
|
|
this.inflating = false;
|
|
}
|
|
} else {
|
|
this.cx += this.vx;
|
|
this.cy += this.vy += opts.upFlow;
|
|
|
|
ctx.fillStyle = this.color;
|
|
ctx.beginPath();
|
|
generateBalloonPath(this.cx, this.cy, this.size);
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(this.cx, this.cy);
|
|
ctx.lineTo(this.cx, this.cy + this.size);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = this.lightColor.replace('light', 70);
|
|
ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);
|
|
|
|
if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
|
|
this.phase = 'done';
|
|
}
|
|
}
|
|
}
|
|
function Shard(x, y, vx, vy, color) {
|
|
var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();
|
|
|
|
this.vx = vx * vel;
|
|
this.vy = vy * vel;
|
|
|
|
this.x = x;
|
|
this.y = y;
|
|
|
|
this.prevPoints = [[x, y]];
|
|
this.color = color;
|
|
|
|
this.alive = true;
|
|
|
|
this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
|
|
}
|
|
Shard.prototype.step = function () {
|
|
this.x += this.vx;
|
|
this.y += this.vy += opts.gravity;
|
|
|
|
if (this.prevPoints.length > opts.fireworkShardPrevPoints)
|
|
this.prevPoints.shift();
|
|
|
|
this.prevPoints.push([this.x, this.y]);
|
|
|
|
var lineWidthProportion = this.size / this.prevPoints.length;
|
|
|
|
for (var k = 0; k < this.prevPoints.length - 1; ++k) {
|
|
var point = this.prevPoints[k],
|
|
point2 = this.prevPoints[k + 1];
|
|
|
|
ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
|
|
ctx.lineWidth = k * lineWidthProportion;
|
|
ctx.beginPath();
|
|
ctx.moveTo(point[0], point[1]);
|
|
ctx.lineTo(point2[0], point2[1]);
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (this.prevPoints[0][1] > hh)
|
|
this.alive = false;
|
|
}
|
|
function generateBalloonPath(x, y, size) {
|
|
ctx.moveTo(x, y);
|
|
ctx.bezierCurveTo(x - size / 2, y - size / 2,
|
|
x - size / 4, y - size,
|
|
x, y - size);
|
|
ctx.bezierCurveTo(x + size / 4, y - size,
|
|
x + size / 2, y - size / 2,
|
|
x, y);
|
|
}
|
|
|
|
function anim() {
|
|
window.requestAnimationFrame(anim);
|
|
|
|
// Clear the canvas for the next frame
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
ctx.translate(hw, hh);
|
|
|
|
var done = true;
|
|
for (var l = 0; l < letters.length; ++l) {
|
|
letters[l].step();
|
|
if (letters[l].phase !== 'done') done = false;
|
|
}
|
|
|
|
ctx.translate(-hw, -hh);
|
|
|
|
if (done)
|
|
for (var l = 0; l < letters.length; ++l)
|
|
letters[l].reset();
|
|
}
|
|
|
|
for (var i = 0; i < opts.strings.length; ++i) {
|
|
for (var j = 0; j < opts.strings[i].length; ++j) {
|
|
letters.push(new Letter(opts.strings[i][j],
|
|
j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
|
|
i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
|
|
}
|
|
}
|
|
|
|
anim();
|
|
|
|
window.addEventListener('resize', function () {
|
|
w = c.width = window.innerWidth;
|
|
h = c.height = window.innerHeight;
|
|
|
|
hw = w / 2;
|
|
hh = h / 2;
|
|
|
|
ctx.font = opts.charSize + 'px Verdana';
|
|
})
|
|
|
|
</script>
|
|
<script src="{% static 'build/js/dashboardDriver.js' %}"></script>
|
|
|
|
{% if not request.user.driverviewed_set.first or "dashboard" not in request.user.driverviewed_set.first.user_viewed %}
|
|
<script>
|
|
runDriver()
|
|
</script>
|
|
{% endif %}
|