added new navigation ui
This commit is contained in:
parent
3849176055
commit
d98682c0e5
@ -879,6 +879,8 @@ def form_builder(request, template_slug=None):
|
||||
context = {}
|
||||
if template_slug:
|
||||
template = get_object_or_404(FormTemplate, slug=template_slug)
|
||||
job_slug=template.job.slug
|
||||
context['job_slug']=job_slug
|
||||
context["template"] = template
|
||||
context["template_slug"] = template.slug
|
||||
context["template_name"] = template.name
|
||||
@ -4814,60 +4816,73 @@ def interview_list(request):
|
||||
return render(request, "interviews/interview_list.html", context)
|
||||
|
||||
|
||||
from django_ratelimit.decorators import ratelimit
|
||||
@ratelimit(key='user_or_ip', rate='1/m', block=True)
|
||||
# from django_ratelimit.decorators import ratelimit
|
||||
# @ratelimit(key='user_or_ip', rate='1/m', block=True)
|
||||
from django.core.cache import cache
|
||||
@login_required
|
||||
@staff_user_required
|
||||
def generate_ai_questions(request, slug):
|
||||
"""Generate AI-powered interview questions for a scheduled interview"""
|
||||
lock_key = f"ai_lock_{request.user.id}"
|
||||
is_new_request = cache.add(lock_key, "locked", timeout=60)
|
||||
if not is_new_request:
|
||||
return JsonResponse({
|
||||
"error": "Request in progress. Please wait a moment."
|
||||
}, status=429)
|
||||
from django_q.tasks import async_task
|
||||
|
||||
schedule = get_object_or_404(ScheduledInterview, slug=slug)
|
||||
messages.info(request,_("Generating interview questions."))
|
||||
|
||||
if request.method == "POST":
|
||||
# Queue the AI question generation task
|
||||
|
||||
task_id = async_task(
|
||||
"recruitment.tasks.generate_interview_questions",
|
||||
schedule.id,
|
||||
sync=False
|
||||
)
|
||||
try:
|
||||
|
||||
|
||||
if request.method == "POST":
|
||||
# Queue the AI question generation task
|
||||
|
||||
# if request.headers.get("X-Requested-With") == "XMLHttpRequest":
|
||||
# return JsonResponse({
|
||||
# "status": "success",
|
||||
# "message": "AI question generation started in background",
|
||||
# "task_id": task_id
|
||||
# })
|
||||
# else:
|
||||
# messages.success(
|
||||
# request,
|
||||
# "AI question generation started. Questions will appear shortly."
|
||||
# )
|
||||
# return redirect("interview_detail", slug=slug)
|
||||
task_id = async_task(
|
||||
"recruitment.tasks.generate_interview_questions",
|
||||
schedule.id,
|
||||
sync=False
|
||||
)
|
||||
|
||||
|
||||
# # For GET requests, return existing questions if any
|
||||
# questions = schedule.ai_questions.all().order_by("created_at")
|
||||
# if request.headers.get("X-Requested-With") == "XMLHttpRequest":
|
||||
# return JsonResponse({
|
||||
# "status": "success",
|
||||
# "message": "AI question generation started in background",
|
||||
# "task_id": task_id
|
||||
# })
|
||||
# else:
|
||||
# messages.success(
|
||||
# request,
|
||||
# "AI question generation started. Questions will appear shortly."
|
||||
# )
|
||||
# return redirect("interview_detail", slug=slug)
|
||||
|
||||
# if request.headers.get("X-Requested-With") == "XMLHttpRequest":
|
||||
# return JsonResponse({
|
||||
# "status": "success",
|
||||
# "questions": [
|
||||
# {
|
||||
# "id": q.id,
|
||||
# "text": q.question_text,
|
||||
# "type": q.question_type,
|
||||
# "difficulty": q.difficulty_level,
|
||||
# "category": q.category,
|
||||
# "created_at": q.created_at.isoformat()
|
||||
# }
|
||||
# for q in questions
|
||||
# ]
|
||||
# })
|
||||
# # For GET requests, return existing questions if any
|
||||
# questions = schedule.ai_questions.all().order_by("created_at")
|
||||
|
||||
return redirect("interview_detail", slug=slug)
|
||||
# if request.headers.get("X-Requested-With") == "XMLHttpRequest":
|
||||
# return JsonResponse({
|
||||
# "status": "success",
|
||||
# "questions": [
|
||||
# {
|
||||
# "id": q.id,
|
||||
# "text": q.question_text,
|
||||
# "type": q.question_type,
|
||||
# "difficulty": q.difficulty_level,
|
||||
# "category": q.category,
|
||||
# "created_at": q.created_at.isoformat()
|
||||
# }
|
||||
# for q in questions
|
||||
# ]
|
||||
# })
|
||||
|
||||
return redirect("interview_detail", slug=slug)
|
||||
except Exception:
|
||||
# If the task fails to enqueue, release the lock so they can try again
|
||||
cache.delete(lock_key)
|
||||
raise
|
||||
|
||||
|
||||
@login_required
|
||||
|
||||
@ -777,4 +777,184 @@ html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !import
|
||||
.pagination .page-item:last-child .page-link {
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* 7. CRM Sidebar Layout (V2025) */
|
||||
/* ---------------------------------- */
|
||||
|
||||
:root {
|
||||
--sidebar-width: 260px;
|
||||
--topbar-height: 64px;
|
||||
--sidebar-bg: #00363a;
|
||||
--sidebar-hover: rgba(255, 255, 255, 0.1);
|
||||
--sidebar-active: #007c8a; /* kaauh-light-teal */
|
||||
}
|
||||
|
||||
/* Sidebar Container */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0; /* Default LTR */
|
||||
background-color: var(--sidebar-bg);
|
||||
z-index: 1050;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 4px 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 1.25rem 0;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* CRM-style Nav Links */
|
||||
.nav-link-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.85rem 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: none !important;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.nav-link-custom:hover {
|
||||
color: #fff;
|
||||
background-color: var(--sidebar-hover);
|
||||
}
|
||||
|
||||
.nav-link-custom.active {
|
||||
color: #fff;
|
||||
background-color: var(--sidebar-active);
|
||||
border-left: 4px solid var(--kaauh-warning); /* Highlight accent */
|
||||
}
|
||||
|
||||
.nav-link-custom i {
|
||||
width: 28px;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Main Wrapper - Offsets content for sidebar */
|
||||
.main-wrapper {
|
||||
margin-left: var(--sidebar-width);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Top Horizontal Content Header */
|
||||
.content-header {
|
||||
height: var(--topbar-height);
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid var(--kaauh-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 1.5rem;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* 8. CRM Mobile Responsiveness */
|
||||
/* ---------------------------------- */
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.sidebar {
|
||||
left: calc(-1 * var(--sidebar-width));
|
||||
}
|
||||
|
||||
.sidebar.show {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* 9. CRM RTL Adjustments */
|
||||
/* ---------------------------------- */
|
||||
|
||||
html[dir="rtl"] .sidebar {
|
||||
left: auto;
|
||||
right: 0;
|
||||
box-shadow: -4px 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .main-wrapper {
|
||||
margin-left: 0;
|
||||
margin-right: var(--sidebar-width);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .nav-link-custom {
|
||||
border-left: none;
|
||||
border-right: 4px solid transparent;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .nav-link-custom.active {
|
||||
border-right: 4px solid var(--kaauh-warning);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
html[dir="rtl"] .sidebar {
|
||||
right: calc(-1 * var(--sidebar-width));
|
||||
left: auto;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .sidebar.show {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar .mt-auto {
|
||||
background: rgba(0, 0, 0, 0.1); /* Slightly darker than sidebar bg */
|
||||
}
|
||||
|
||||
.sidebar .mt-auto span {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.sidebar .mt-auto:hover span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.powered-by-footer {
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.powered-by-footer:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -6,822 +6,191 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Applicant Tracking System' %}">
|
||||
|
||||
<title>{% block title %}{% trans 'University ATS' %}{% endblock %}</title>
|
||||
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'image/favicon/apple-touch-icon.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'image/favicon/favicon-16x16.png'%}">
|
||||
<link rel="manifest" href="{% static 'image/favicon/site.webmanifest'%}">
|
||||
|
||||
{% comment %} Load correct Bootstrap CSS file for RTL/LTR {% endcomment %}
|
||||
{% if LANGUAGE_CODE == 'ar' %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'image/favicon/apple-touch-icon.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'image/favicon/favicon-16x16.png'%}">
|
||||
<link rel="manifest" href="{% static 'image/favicon/site.webmanifest'%}">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||||
<script src="{% static 'js/typo.js' %}"></script>
|
||||
|
||||
|
||||
{% block customCSS %}{% endblock %}
|
||||
{% block customCSS %}{% endblock %}
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||
<body>
|
||||
|
||||
<div class="top-bar d-none d-md-block">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2 max-width-1600">
|
||||
<div class="logo-container d-flex gap-2">
|
||||
</div>
|
||||
<div class="clogo-container d-flex gap-2">
|
||||
</div>
|
||||
<div class="logo-container d-flex gap-2 align-items-center">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy" style="height: 35px; object-fit: contain;">
|
||||
<div class="kaauh-logo-container d-flex flex-column flex-md-row align-items-center gap-2 me-0">
|
||||
<div class="hospital-text text-center text-md-start me-0">
|
||||
<div class="en text-xs">{% trans "Princess Nourah bint Abdulrahman University"%}</div>
|
||||
<div class="en text-xs">{% trans "King Abdullah bin Abdulaziz University Hospital"%}</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 40px; max-width: 40px;">
|
||||
</div>
|
||||
</div>
|
||||
<aside class="sidebar d-flex flex-column" id="sidebar">
|
||||
<div class="sidebar-brand">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="Logo" style="width: 50px;">
|
||||
<div class="text-white small mt-2 fw-bold">KAAUH ATS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
|
||||
<div class="container-fluid max-width-1600">
|
||||
|
||||
|
||||
|
||||
<a class="navbar-brand text-white d-none d-lg-block me-4 pe-4" href="{% url 'dashboard' %}" aria-label="Home">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" style="width: 60px; height: 60px;">
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
{% if request.user.is_authenticated and request.user.is_staff %}
|
||||
<a class="nav-link-custom {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'dashboard' %}">
|
||||
<i class="fas fa-th-large me-2"></i> {% trans "Dashboard" %}
|
||||
</a>
|
||||
|
||||
<a class="nav-link-custom {% if 'message' in request.path %}active{% endif %}" href="{% url 'message_list' %}">
|
||||
<i class="fas fa-envelope me-2"></i>
|
||||
{% trans "Messages" %}
|
||||
{% if request.user.get_unread_message_count > 0 %}
|
||||
<span class="badge rounded-pill bg-danger ms-auto">
|
||||
{{ request.user.get_unread_message_count }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{# Toggler: order-lg-0 ensures it's before navigation links on desktop, but it stays where it is on mobile #}
|
||||
<button class="navbar-toggler order-lg-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="nav-link-custom {% if 'job' in request.path and 'bank' not in request.path %}active{% endif %}" href="{% url 'job_list' %}">
|
||||
<i class="fas fa-briefcase me-2"></i> {% trans "Jobs" %}
|
||||
</a>
|
||||
|
||||
{# Language and Profile Controls (Keep outside collapse for mobile access) #}
|
||||
<div class="d-flex align-items-center order-lg-3">
|
||||
{% comment %} <ul class="navbar-nav flex-row">
|
||||
<li class="nav-item me-2">
|
||||
<li class="nav-item me-2">
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
<li class="nav-item me-2">
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية (Arabic)
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> {% endcomment %}
|
||||
<a class="nav-link-custom {% if 'job_bank' in request.resolver_match.url_name %}active{% endif %}" href="{% url 'job_bank' %}">
|
||||
<i class="fas fa-university me-2"></i> {% trans "Job Bank" %}
|
||||
</a>
|
||||
|
||||
<ul class="navbar-nav ms-2 ms-lg-4">
|
||||
<!-- Notification Bell for Admin Users -->
|
||||
{% comment %} {% if request.user.is_authenticated and request.user.is_staff %}
|
||||
<li class="nav-item dropdown me-2">
|
||||
<a class="nav-link position-relative" href="#" role="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fas fa-bell"></i>
|
||||
<span id="admin-notification-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="display: none; font-size: 0.6em; min-width: 18px; height: 18px; line-height: 18px;">
|
||||
0
|
||||
</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" style="min-width: 300px;" aria-labelledby="notificationDropdown">
|
||||
<li class="dropdown-header d-flex justify-content-between align-items-center">
|
||||
<span>{% trans "Messages" %}</span>
|
||||
<a href="#" class="text-decoration-none">{% trans "View All" %}</a>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<div id="admin-notification-list" class="px-3 py-2 text-muted text-center">
|
||||
<small>{% trans "Loading messages..." %}</small>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %} {% endcomment %}
|
||||
{% comment %} <li class="nav-item me-2">
|
||||
<a class="nav-link" href="{% url 'message_list' %}">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</a>
|
||||
</li> {% endcomment %}
|
||||
|
||||
<li class="nav-item me-2 d-none d-lg-block">
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="btn bg-primary-theme text-white" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية
|
||||
</button>
|
||||
</form>
|
||||
{% elif LANGUAGE_CODE == 'ar' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="btn bg-primary-theme text-white" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li class="nav-item mx-3 d-none d-lg-block mt-2">
|
||||
<a href="{% url 'message_list' %}" class="btn btn-sm btn-outline-warning position-relative">
|
||||
<i class="fas fa-envelope me-1"></i>
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
{{ request.user.get_unread_message_count }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button
|
||||
class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
aria-label="{% trans 'Toggle user menu' %}"
|
||||
data-bs-auto-close="outside"
|
||||
data-bs-offset="0, 16"
|
||||
>
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
|
||||
style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar" title="{% trans 'Your account' %}">
|
||||
{% if user.first_name %}
|
||||
{{ user.first_name|first|capfirst }} {{ user.last_name|first|capfirst }}
|
||||
{% else %}
|
||||
{{user.username|first|capfirst}}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3" style="min-width: 240px;">
|
||||
<li class="px-4 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
|
||||
style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
|
||||
title="{% trans 'Your account' %}">
|
||||
{% else %}
|
||||
<div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
|
||||
style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
|
||||
<div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
|
||||
<li class="nav-item me-3 dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-teal d-lg-none">
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="btn bg-primary-theme text-white" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية
|
||||
</button>
|
||||
</form>
|
||||
{% elif LANGUAGE_CODE == 'ar' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="btn bg-primary-theme text-white" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</li>
|
||||
|
||||
<li class="d-lg-none">
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-teal" href="{% url 'message_list' %}">
|
||||
<i class="fas fa-envelope fs-5 me-3"></i> <span>{% trans "Messages" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<li>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-teal" href="{% url 'user_detail' request.user.pk %}">
|
||||
<i class="fas fa-user-circle me-3 fs-5"></i> <span>{% trans "My Profile" %}</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-teal" href="{% url 'job_bank' %}">
|
||||
<i class="fas fa-bank me-3 fs-5"></i> <span>{% trans "Job Bank" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% if request.user.is_superuser %}
|
||||
<li>
|
||||
<a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none text-teal" href="{% url 'settings' %}">
|
||||
<i class="fas fa-cog me-3 fs-5"></i> <span>{% trans "Settings" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li><hr class="dropdown-divider my-1"></li>
|
||||
<li>
|
||||
<form method="post" action="{% url 'account_logout'%}" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="dropdown-item py-2 px-4 d-flex align-items-center border-0 bg-transparent text-start w-100"
|
||||
aria-label="{% trans 'Sign out' %}"
|
||||
>
|
||||
<i class="fas fa-sign-out-alt me-3 fs-5" style="color:red;"></i>
|
||||
<span style="color:red;">{% trans "Sign Out" %}</span>
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{# End Language and Profile Controls #}
|
||||
|
||||
{# Main Navigation Links (This collapses on mobile) - order-lg-1 ensures it is centered on desktop #}
|
||||
<div class="collapse navbar-collapse order-lg-1" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-briefcase me-2"></i>
|
||||
{% trans "Jobs" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'application_list' %}active{% endif %}" href="{% url 'application_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-user-tie me-2"></i>
|
||||
{% trans "Applications" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'person_list' %}active{% endif %}" href="{% url 'person_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-user me-2"></i>
|
||||
{% trans "Applicant" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'agency_list' %}active{% endif %}" href="{% url 'agency_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-building me-2"></i>
|
||||
{% trans "Agencies" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'interview_list' %}active{% endif %}" href="{% url 'interview_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-calendar-check me-2"></i>
|
||||
{% trans "Meetings & interviews" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'kaauh_career' %}active{% endif %}" href="{% url 'kaauh_career' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-globe me-2"></i>
|
||||
|
||||
{% trans "Career Page" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% comment %} <li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'interview_list' %}active{% endif %}" href="{% url 'interview_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
{% trans "Onsite Interviews" %}
|
||||
</span>
|
||||
</a>
|
||||
</li> {% endcomment %}
|
||||
{% comment %} <li class="nav-item me-lg-4">
|
||||
<a class="nav-link {% if request.resolver_match.url_name == 'participants_list' %}active{% endif %}" href="{% url 'participants_list' %}">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
|
||||
</svg>
|
||||
{% trans "Participants" %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
{% comment %} <li class="nav-item dropdown ms-lg-2">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
||||
data-bs-offset="0, 8" data-bs-auto-close="outside">
|
||||
{% trans "More" %}
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-bs-popper="static">
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
|
||||
</ul>
|
||||
</li> {% endcomment %}
|
||||
</ul>
|
||||
<a class="nav-link-custom {% if 'application' in request.path %}active{% endif %}" href="{% url 'application_list' %}">
|
||||
<i class="fas fa-user-tie me-2"></i> {% trans "Applications" %}
|
||||
</a>
|
||||
<a class="nav-link-custom {% if 'person' in request.path %}active{% endif %}" href="{% url 'person_list' %}">
|
||||
<i class="fas fa-user me-2"></i> {% trans "Applicants" %}
|
||||
</a>
|
||||
<a class="nav-link-custom {% if 'agency' in request.path %}active{% endif %}" href="{% url 'agency_list' %}">
|
||||
<i class="fas fa-building me-2"></i> {% trans "Agencies" %}
|
||||
</a>
|
||||
<a class="nav-link-custom {% if 'interview' in request.path %}active{% endif %}" href="{% url 'interview_list' %}">
|
||||
<i class="fas fa-calendar-alt me-2"></i> {% trans "Interviews" %}
|
||||
</a>
|
||||
<a class="nav-link-custom {% if request.resolver_match.url_name == 'kaauh_career' %}active{% endif %}" href="{% url 'kaauh_career' %}">
|
||||
<i class="fas fa-globe me-2"></i> {% trans "Career Page" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if request.user.is_authenticated and request.user.is_superuser %}
|
||||
<div class="mt-auto">
|
||||
<div class="mt-4 pt-3 border-top border-secondary mx-3">
|
||||
<small class="text-white-50 px-2 uppercase">{% trans "System" %}</small>
|
||||
</div>
|
||||
<a class="nav-link-custom {% if 'settings' in request.path %}active{% endif %}" href="{% url 'settings' %}">
|
||||
<i class="fas fa-cog me-2"></i> {% trans "Settings" %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% if request.user.is_authenticated %}
|
||||
<div class="p-3 border-top border-secondary">
|
||||
<form method="post" action="{% url 'account_logout'%}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-link text-danger text-decoration-none p-0">
|
||||
<i class="fas fa-sign-out-alt me-2"></i> {% trans "Sign Out" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
<div class="mt-auto p-3 border-top border-secondary text-center">
|
||||
<a href="https://tenhal.sa/" class="text-decoration-none" target="_blank">
|
||||
<div class="text-white-50" style="font-size: 0.7rem; letter-spacing: 0.5px;">
|
||||
{% trans "POWERED BY" %}
|
||||
<span class="text-white fw-bold">TENHAL</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="content-header justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn d-lg-none me-2" onclick="document.getElementById('sidebar').classList.toggle('show')">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<div class="hospital-text d-none d-md-block">
|
||||
<small class="text-teal fw-bold">{% trans "KAAUH Applicant Tracking System" %}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main id="messageContent" class="container-fluid flex-grow-1" style="max-width: 1600px; margin: 0 auto;">
|
||||
{% if messages %}
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="{% url 'message_list' %}" class="btn btn-sm btn-outline-secondary position-relative d-none d-lg-block">
|
||||
<i class="fas fa-envelope"></i>
|
||||
{% if request.user.get_unread_message_count > 0 %}
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
{{ request.user.get_unread_message_count }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
|
||||
<input name="language" type="hidden" value="ar">
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="submit">🇸🇦 العربية</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
|
||||
<input name="language" type="hidden" value="en">
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="submit">🇺🇸 English</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn p-0 border-0" data-bs-toggle="dropdown">
|
||||
{% if user.profile_image %}
|
||||
<img src="{{ user.profile_image.url }}" class="rounded-circle border" width="35" height="35">
|
||||
{% else %}
|
||||
<div class="profile-avatar" style="width: 35px; height: 35px; font-size: 0.8rem;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end shadow border-0">
|
||||
<li class="px-3 py-2 border-bottom">
|
||||
<div class="fw-bold small">{{ user.get_full_name|default:user.username }}</div>
|
||||
<div class="text-muted text-xs">{{ user.email|truncatechars:20 }}</div>
|
||||
</li>
|
||||
<li><a class="dropdown-item mt-1" href="{% url 'user_detail' request.user.pk %}">{% trans "Profile" %}</a></li>
|
||||
{% comment %} <li><a class="dropdown-item" href="{% url 'job_bank' %}">{% trans "Job Bank" %}</a></li> {% endcomment %}
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<form method="post" action="{% url 'account_logout'%}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="dropdown-item text-danger">{% trans "Sign Out" %}</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-container">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }} alert-dismissible fade show mt-2" role="alert">
|
||||
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans 'Close' %}"></button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="mt-auto">
|
||||
<div class="footer-bottom py-3 small text-muted" style="background-color: #00363a;">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap max-width-1600">
|
||||
<p class="mb-0 text-white-50">
|
||||
{% comment %} © {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %}
|
||||
{% trans "All rights reserved." %} {% endcomment %}
|
||||
</p>
|
||||
<a class="text-decoration-none" href="https://tenhal.sa/" target='_blank'>
|
||||
<p class="mb-0 text-white-50">
|
||||
{% trans "Powered by" %} <strong class="text-white">Tenhal</strong>
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% include 'includes/delete_modal.html' %}
|
||||
|
||||
<div class="text-center mt-4 powered-by-footer">
|
||||
<a href="https://tenhal.sa/" class="text-decoration-none" target="_blank">
|
||||
<p class="text-muted small">
|
||||
Tenhal | تنحل
|
||||
</p>
|
||||
<a>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/bundles/datastar.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Navbar collapse auto-close on link click (Standard Mobile UX)
|
||||
const navbarCollapse = document.getElementById('navbarNav');
|
||||
if (navbarCollapse) {
|
||||
// Select all links, including those inside "More" dropdown
|
||||
const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item');
|
||||
const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
// Only collapse if nav is actually shown (i.e., on mobile)
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
// Check if click was on a non-dropdown-toggle or a dropdown item (which navigate away)
|
||||
if (!link.classList.contains('dropdown-toggle')) {
|
||||
bsCollapse.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile logout confirmation (Good UX for small screens)
|
||||
const logoutButton = document.querySelector('form[action$="/logout/"] button');
|
||||
if (logoutButton) {
|
||||
logoutButton.addEventListener('click', (e) => {
|
||||
// Check if screen is small (Bootstrap 'lg' breakpoint is 992px)
|
||||
if (window.innerWidth < 992) {
|
||||
const confirmed = confirm('{% trans "Are you sure you want to sign out?" %}');
|
||||
if (!confirmed) e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function form_loader(){
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
||||
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.classList.add('loading');
|
||||
window.addEventListener('unload', function() {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('loading');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function remove_form_loader(){
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('htmx:afterRequest', function(evt) {
|
||||
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
||||
if (submitButton) {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('loading');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//form_loader();
|
||||
|
||||
try{
|
||||
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
||||
remove_form_loader();
|
||||
});
|
||||
}catch(e){
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
function closeOpenBootstrapModal() {
|
||||
const openModalElement = document.querySelector('.modal.show');
|
||||
if (openModalElement) {
|
||||
const modal = bootstrap.Modal.getInstance(openModalElement);
|
||||
if (modal) {
|
||||
modal.hide();
|
||||
} else {
|
||||
console.warn("Found an open modal element, but could not get the Bootstrap Modal instance.");
|
||||
}
|
||||
} else {
|
||||
console.log("No open Bootstrap Modal found to close.");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Update unread message count on page load
|
||||
fetch('/api/unread-count/')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const badge = document.getElementById('unread-messages-badge');
|
||||
if (badge && data.unread_count > 0) {
|
||||
badge.textContent = data.unread_count;
|
||||
badge.style.display = 'inline-block';
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error fetching unread count:', error));
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Notification JavaScript for Admin Users -->
|
||||
{% comment %} {% if request.user.is_authenticated and request.user.is_staff %}
|
||||
<script>
|
||||
// SSE Notification System
|
||||
let eventSource = null;
|
||||
let reconnectAttempts = 0;
|
||||
let maxReconnectAttempts = 5;
|
||||
let reconnectDelay = 1000; // Start with 1 second
|
||||
|
||||
function connectSSE() {
|
||||
// Close existing connection if any
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
|
||||
// Create new EventSource connection
|
||||
eventSource = new EventSource('');
|
||||
|
||||
eventSource.onopen = function(event) {
|
||||
console.log('SSE connection opened');
|
||||
reconnectAttempts = 0;
|
||||
reconnectDelay = 1000; // Reset delay on successful connection
|
||||
|
||||
// Update connection status indicator if exists
|
||||
const statusIndicator = document.getElementById('sse-status');
|
||||
if (statusIndicator) {
|
||||
statusIndicator.className = 'text-success';
|
||||
statusIndicator.title = 'Connected';
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.onmessage = function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (event.type === 'new_notification') {
|
||||
handleNewNotification(data);
|
||||
} else if (event.type === 'count_update') {
|
||||
updateNotificationCount(data.count);
|
||||
} else if (event.type === 'heartbeat') {
|
||||
console.log('SSE heartbeat received');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing SSE message:', error);
|
||||
}
|
||||
};
|
||||
|
||||
eventSource.addEventListener('new_notification', function(event) {
|
||||
try {
|
||||
const notification = JSON.parse(event.data);
|
||||
handleNewNotification(notification);
|
||||
} catch (error) {
|
||||
console.error('Error parsing new notification:', error);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('count_update', function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
updateNotificationCount(data.count);
|
||||
} catch (error) {
|
||||
console.error('Error parsing count update:', error);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('heartbeat', function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('SSE heartbeat:', new Date(data.timestamp * 1000));
|
||||
} catch (error) {
|
||||
console.error('Error parsing heartbeat:', error);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener('error', function(event) {
|
||||
console.error('SSE error:', event);
|
||||
handleSSEError();
|
||||
});
|
||||
|
||||
eventSource.onerror = function(event) {
|
||||
console.error('SSE connection error:', event);
|
||||
handleSSEError();
|
||||
};
|
||||
}
|
||||
|
||||
function handleNewNotification(notification) {
|
||||
console.log('New notification received:', notification);
|
||||
|
||||
// Update badge
|
||||
updateNotificationCount();
|
||||
|
||||
// Show toast notification
|
||||
showToast(notification);
|
||||
|
||||
// Update dropdown list
|
||||
addNotificationToList(notification);
|
||||
|
||||
// Play sound (optional)
|
||||
playNotificationSound();
|
||||
}
|
||||
|
||||
function updateNotificationCount(count) {
|
||||
const badge = document.getElementById('admin-notification-badge');
|
||||
|
||||
if (count !== undefined) {
|
||||
// Use provided count
|
||||
if (count > 0) {
|
||||
badge.style.display = 'inline-block';
|
||||
badge.textContent = count;
|
||||
} else {
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
// Fetch current count
|
||||
fetch('{% url "admin_notification_count" %}')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.count > 0) {
|
||||
badge.style.display = 'inline-block';
|
||||
badge.textContent = data.count;
|
||||
} else {
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching notification count:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function addNotificationToList(notification) {
|
||||
const list = document.getElementById('admin-notification-list');
|
||||
if (!list) return;
|
||||
|
||||
// Create new notification element
|
||||
const notificationElement = document.createElement('div');
|
||||
notificationElement.className = 'notification-item px-3 py-2 border-bottom';
|
||||
notificationElement.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="fw-semibold small">${notification.message}</div>
|
||||
<div class="text-muted small">${notification.type}</div>
|
||||
</div>
|
||||
<span class="badge bg-info ms-2">${notification.status}</span>
|
||||
</div>
|
||||
<div class="text-muted small mt-1">${notification.time_ago}</div>
|
||||
`;
|
||||
|
||||
// Add click handler to navigate to notification detail
|
||||
notificationElement.style.cursor = 'pointer';
|
||||
notificationElement.addEventListener('click', function() {
|
||||
window.location.href = notification.url;
|
||||
});
|
||||
|
||||
// Insert at the top of the list
|
||||
list.insertBefore(notificationElement, list.firstChild);
|
||||
|
||||
// Remove "No new messages" placeholder if exists
|
||||
const placeholder = list.querySelector('.text-muted.text-center');
|
||||
if (placeholder) {
|
||||
placeholder.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function showToast(notification) {
|
||||
// Create toast container if it doesn't exist
|
||||
let toastContainer = document.getElementById('toast-container');
|
||||
if (!toastContainer) {
|
||||
toastContainer = document.createElement('div');
|
||||
toastContainer.id = 'toast-container';
|
||||
toastContainer.className = 'position-fixed top-0 end-0 p-3';
|
||||
toastContainer.style.zIndex = '1050';
|
||||
document.body.appendChild(toastContainer);
|
||||
}
|
||||
|
||||
// Create toast element
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast show align-items-center text-white bg-primary border-0 mb-2';
|
||||
toast.setAttribute('role', 'alert');
|
||||
toast.setAttribute('aria-live', 'assertive');
|
||||
toast.setAttribute('aria-atomic', 'true');
|
||||
toast.innerHTML = `
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<strong>New Notification</strong><br>
|
||||
<small>${notification.message}</small>
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add click handler to close toast
|
||||
const closeButton = toast.querySelector('.btn-close');
|
||||
closeButton.addEventListener('click', function() {
|
||||
toast.remove();
|
||||
});
|
||||
|
||||
// Add to container
|
||||
toastContainer.appendChild(toast);
|
||||
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function playNotificationSound() {
|
||||
// Create and play a simple notification sound
|
||||
try {
|
||||
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
const oscillator = audioContext.createOscillator();
|
||||
const gainNode = audioContext.createGain();
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioContext.destination);
|
||||
|
||||
oscillator.frequency.value = 800; // 800 Hz tone
|
||||
oscillator.type = 'sine';
|
||||
|
||||
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
|
||||
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
|
||||
|
||||
oscillator.start(audioContext.currentTime);
|
||||
oscillator.stop(audioContext.currentTime + 0.1);
|
||||
} catch (error) {
|
||||
console.log('Could not play notification sound:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSSEError() {
|
||||
// Update connection status indicator if exists
|
||||
const statusIndicator = document.getElementById('sse-status');
|
||||
if (statusIndicator) {
|
||||
statusIndicator.className = 'text-danger';
|
||||
statusIndicator.title = 'Disconnected';
|
||||
}
|
||||
|
||||
// Attempt to reconnect with exponential backoff
|
||||
if (reconnectAttempts < maxReconnectAttempts) {
|
||||
reconnectAttempts++;
|
||||
console.log(`Attempting to reconnect (${reconnectAttempts}/${maxReconnectAttempts}) in ${reconnectDelay}ms...`);
|
||||
|
||||
setTimeout(() => {
|
||||
connectSSE();
|
||||
reconnectDelay = Math.min(reconnectDelay * 2, 30000); // Max 30 seconds
|
||||
}, reconnectDelay);
|
||||
} else {
|
||||
console.error('Max reconnection attempts reached. Falling back to polling.');
|
||||
// Fallback to polling
|
||||
setInterval(updateNotificationBadge, 30000);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize SSE connection on page load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Only connect SSE for authenticated staff users
|
||||
/*if ('{{ request.user.is_authenticated|yesno:"true,false" }}' === 'true' && '{{ request.user.is_staff|yesno:"true,false" }}' === 'true') {
|
||||
connectSSE();
|
||||
|
||||
// Initial notification count update
|
||||
updateNotificationCount();
|
||||
}
|
||||
*/
|
||||
});
|
||||
|
||||
// Cleanup on page unload
|
||||
window.addEventListener('beforeunload', function() {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Fallback function for manual refresh
|
||||
function updateNotificationBadge() {
|
||||
fetch('{% url "admin_notification_count" %}')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const badge = document.getElementById('admin-notification-badge');
|
||||
const list = document.getElementById('admin-notification-list');
|
||||
|
||||
if (data.count > 0) {
|
||||
badge.style.display = 'inline-block';
|
||||
badge.textContent = data.count;
|
||||
} else {
|
||||
badge.style.display = 'none';
|
||||
}
|
||||
|
||||
// Update notification list
|
||||
if (data.recent_notifications && data.recent_notifications.length > 0) {
|
||||
list.innerHTML = data.recent_notifications.map(msg => `
|
||||
<div class="notification-item px-3 py-2 border-bottom">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="fw-semibold small">${msg.message}</div>
|
||||
<div class="text-muted small">${msg.type}</div>
|
||||
</div>
|
||||
<span class="badge bg-info ms-2">${msg.status}</span>
|
||||
</div>
|
||||
<div class="text-muted small mt-1">${msg.time_ago}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
list.innerHTML = '<div class="px-3 py-2 text-muted text-center"><small>{% trans "No new messages" %}</small></div>';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching notifications:', error);
|
||||
const list = document.getElementById('admin-notification-list');
|
||||
list.innerHTML = '<div class="px-3 py-2 text-muted text-center"><small>{% trans "Error loading messages" %}</small></div>';
|
||||
});
|
||||
}
|
||||
</script> {% endcomment %}
|
||||
{% comment %} {% endif %} {% endcomment %}
|
||||
|
||||
{% block customJS %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -1,10 +1,10 @@
|
||||
{% load static i18n %}
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% trans "ATS Form Builder" %}</title>
|
||||
<title>ATS Form Builder</title>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
@ -678,7 +678,7 @@
|
||||
const djangoConfig = {
|
||||
csrfToken: "{{ csrf_token }}",
|
||||
saveUrl: "{% url 'save_form_template' %}",
|
||||
loadUrl: {% if template_slug %}"{% url 'load_form_template' template_slug %}"{% else %}null{% endif %},
|
||||
loadUrl: {% if template_slug %}"{% url 'load_form_template' job_slug %}"{% else %}null{% endif %},
|
||||
templateId: {% if template_slug %}'{{ template_slug }}'{% else %}null{% endif %},
|
||||
jobId: {% if job_id %}{{ job_id }}{% else %}null{% endif %} // Add this if you need it
|
||||
};
|
||||
|
||||
@ -5,11 +5,6 @@
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
.job-applicants-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.job-header {
|
||||
background: linear-gradient(135deg, #00636e 0%, #004a53 100%);
|
||||
|
||||
@ -6,11 +6,7 @@
|
||||
|
||||
{% block customCSS %}
|
||||
<style>
|
||||
.job-bank-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.job-bank-header {
|
||||
background: linear-gradient(135deg, #00636e 0%, #004a53 100%);
|
||||
|
||||
@ -6,297 +6,195 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Agency Portal' %}">
|
||||
<title>{% block title %}{% trans 'KAAUH Agency Portal' %}{% endblock %}</title>
|
||||
<meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Portal' %}">
|
||||
<title>{% block title %}{% trans 'KAAUH Portal' %}{% endblock %}</title>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'image/favicon/apple-touch-icon.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'image/favicon/favicon-32x32.png'%}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'image/favicon/favicon-16x16.png'%}">
|
||||
<link rel="manifest" href="{% static 'image/favicon/site.webmanifest'%}">
|
||||
|
||||
|
||||
{# Load correct Bootstrap CSS file for RTL/LTR #}
|
||||
{% if LANGUAGE_CODE == 'ar' %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
||||
|
||||
{% block customCSS %}{% endblock %}
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||
|
||||
<div class="top-bar d-none d-md-block" style="background-color: #f8f9fa;">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2" style="max-width: 1600px; margin: 0 auto; padding: 0.5rem 0;">
|
||||
<div class="logo-group d-flex gap-3 align-items-center">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy" style="height: 35px; object-fit: contain;">
|
||||
</div>
|
||||
<div class="hospital-info d-flex gap-2 align-items-center">
|
||||
<div class="hospital-text text-center text-md-end">
|
||||
<div class="small fw-semibold" style="color: #004a53;">
|
||||
{% if LANGUAGE_CODE == 'ar' %}
|
||||
جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية
|
||||
<br>
|
||||
ومستشفى الملك عبدالله بن عبدالعزيز التخصصي
|
||||
{% else %}
|
||||
Princess Nourah bint Abdulrahman University
|
||||
<br>
|
||||
King Abdullah bin Abdulaziz University Hospital
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<img src="{% static 'image/kaauh.png' %}" alt="KAAUH Logo" style="max-height: 40px; max-width: 40px;">
|
||||
</div>
|
||||
<aside class="sidebar d-flex flex-column" id="sidebar">
|
||||
<div class="sidebar-brand">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="Logo" style="width: 50px;">
|
||||
<div class="text-white small mt-2 fw-bold">
|
||||
{% if request.user.user_type == 'agency' %}{% trans "Agency Portal" %}{% else %}{% trans "Candidate Portal" %}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Using inline style for nav background color - replace with a dedicated CSS class (e.g., .bg-kaauh-nav) if defined in main.css #}
|
||||
<div style="background-color: #00636e;">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
|
||||
<div class="container-fluid" style="max-width: 1600px;">
|
||||
{% if request.user.user_type == 'candidate' %}
|
||||
<a class="navbar-brand text-white" href="{% url 'applicant_portal_dashboard' %}" aria-label="Applicant Dashboard">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" style="width: 40px; height: 40px;">
|
||||
<span class="ms-3 d-none d-md-inline fw-semibold">{% trans "Applicant Portal" %}</span>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
{% if request.user.user_type == 'agency' %}
|
||||
<a class="nav-link-custom {% if 'dashboard' in request.path %}active{% endif %}" href="{% url 'agency_portal_dashboard' %}">
|
||||
<i class="fas fa-th-large me-2"></i> {% trans "Dashboard" %}
|
||||
</a>
|
||||
{% elif request.user.user_type == 'agency' %}
|
||||
<a class="navbar-brand text-white" href="{% url 'agency_portal_dashboard' %}" aria-label="Agency Dashboard">
|
||||
<img src="{% static 'image/kaauh_green1.png' %}" alt="{% trans 'kaauh logo green bg' %}" style="width: 40px; height: 40px;">
|
||||
<span class="ms-3 d-none d-md-inline fw-semibold">{% trans "Agency Portal" %}</span>
|
||||
<a class="nav-link-custom {% if 'persons' in request.path %}active{% endif %}" href="{% url 'agency_portal_persons_list' %}">
|
||||
<i class="fas fa-users me-2"></i> {% trans "Applicants" %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="nav-link-custom {% if 'dashboard' in request.path %}active{% endif %}" href="{% url 'applicant_portal_dashboard' %}">
|
||||
<i class="fas fa-th-large me-2"></i> {% trans "Dashboard" %}
|
||||
</a>
|
||||
<a class="nav-link-custom {% if 'career' in request.path %}active{% endif %}" href="{% url 'kaauh_career' %}">
|
||||
<i class="fas fa-briefcase me-2"></i> {% trans "Careers" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<a class="nav-link-custom {% if 'message' in request.path %}active{% endif %}" href="{% url 'message_list' %}">
|
||||
<i class="fas fa-envelope me-2"></i> {% trans "Messages" %}
|
||||
{% if request.user.get_unread_message_count > 0 %}
|
||||
<span class="badge rounded-pill bg-danger ms-auto">{{ request.user.get_unread_message_count }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#agencyNavbar"
|
||||
aria-controls="agencyNavbar" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<div class="mt-auto">
|
||||
<div class="mt-4 pt-3 border-top border-secondary mx-3">
|
||||
<small class="text-white-50 px-2 uppercase">{% trans "Account" %}</small>
|
||||
</div>
|
||||
<a class="nav-link-custom {% if 'profile' in request.path %}active{% endif %}" href="{% url 'user_detail' request.user.pk %}">
|
||||
<i class="fas fa-user-circle me-2"></i> {% trans "My Profile" %}
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="p-3 border-top border-secondary">
|
||||
<form method="post" action="{% url 'account_logout'%}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-link text-danger text-decoration-none p-0 w-100 text-start">
|
||||
<i class="fas fa-sign-out-alt me-2"></i> {% trans "Sign Out" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mt-auto p-3 border-top border-secondary text-center">
|
||||
<a href="https://tenhal.sa/" class="text-decoration-none" target="_blank">
|
||||
<div class="text-white-50" style="font-size: 0.7rem; letter-spacing: 0.5px;">
|
||||
{% trans "POWERED BY" %}
|
||||
<span class="text-white fw-bold">TENHAL</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="collapse navbar-collapse" id="agencyNavbar">
|
||||
<div class="main-wrapper">
|
||||
<header class="content-header justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn d-lg-none me-2" onclick="document.getElementById('sidebar').classList.toggle('show')">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<div class="hospital-text d-none d-md-block">
|
||||
<small class="text-teal fw-bold">
|
||||
{% if request.user.user_type == 'agency' %}
|
||||
{% trans "Agency Portal" %}
|
||||
{% else %}
|
||||
{% trans "Applicant Portal" %}
|
||||
{% endif %}
|
||||
<span class="text-muted mx-2">|</span>
|
||||
<span class="text-secondary">KAAUH</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-nav ms-auto">
|
||||
<li class="nav-item me-2">
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="btn bg-primary-theme text-white" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية
|
||||
</button>
|
||||
</form>
|
||||
{% elif LANGUAGE_CODE == 'ar' %}
|
||||
<form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="btn bg-primary-theme text-white" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</li>
|
||||
{# NAVIGATION LINKS (Add your portal links here if needed) #}
|
||||
{% if request.user.user_type == 'agency' %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="{% url 'agency_portal_dashboard' %}">
|
||||
<i class="fas fa-tachometer-alt me-1"></i> {% trans "Dashboard" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="{% url 'agency_portal_persons_list' %}">
|
||||
<i class="fas fa-users me-1"></i> {% trans "Applicants" %}
|
||||
</a>
|
||||
</li>
|
||||
{% elif request.user.user_type == 'candidate' %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="{% url 'applicant_portal_dashboard' %}">
|
||||
<i class="fas fa-tachometer-alt me-1"></i> {% trans "Dashboard" %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="{% url 'kaauh_career' %}">
|
||||
<i class="fas fa-globe me-1"></i> {% trans "Careers" %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<a href="{% url 'message_list' %}" class="btn btn-sm btn-outline-secondary position-relative d-flex align-items-center justify-content-center" style="width: 36px; height: 36px; border-radius: 8px;">
|
||||
<i class="fas fa-envelope"></i>
|
||||
{% if request.user.get_unread_message_count > 0 %}
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.65rem;">
|
||||
{{ request.user.get_unread_message_count }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{% if LANGUAGE_CODE == 'en' %}
|
||||
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
|
||||
<input name="language" type="hidden" value="ar">
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="submit">🇸🇦 العربية</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
|
||||
<input name="language" type="hidden" value="en">
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button class="btn btn-sm btn-outline-secondary" type="submit">🇺🇸 English</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn p-0 border-0 d-flex align-items-center" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<div class="profile-avatar shadow-sm" style="width: 36px; height: 36px; font-size: 0.85rem; border: 2px solid white;">
|
||||
{{ user.username|first|upper }}
|
||||
</div>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2">
|
||||
<li class="px-3 py-2 border-bottom">
|
||||
<div class="fw-bold small text-dark">{{ user.get_full_name|default:user.username }}</div>
|
||||
<div class="text-muted" style="font-size: 0.75rem;">{{ user.email|truncatechars:22 }}</div>
|
||||
</li>
|
||||
<li><a class="dropdown-item mt-1" href="{% url 'user_detail' request.user.pk %}"><i class="fas fa-user-circle me-2 text-muted"></i>{% trans "My Profile" %}</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<form method="post" action="{% url 'account_logout'%}" class="m-0">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="dropdown-item text-danger d-flex align-items-center">
|
||||
<i class="fas fa-sign-out-alt me-2"></i>{% trans "Sign Out" %}
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% comment %}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown"
|
||||
data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
|
||||
<i class="fas fa-globe me-1"></i>
|
||||
<span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu {% if LANGUAGE_CODE == 'ar' %}dropdown-menu-start{% else %}dropdown-menu-end{% endif %}" data-bs-popper="static">
|
||||
<li>
|
||||
<form action="/i18n/setlang/" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
|
||||
<span class="me-2">🇺🇸</span> English
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
<li>
|
||||
<form action="/i18n/setlang/" method="post" class="d-inline">{% csrf_token %}
|
||||
<input name="next" type="hidden" value="{{ request.get_full_path }}">
|
||||
<button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
|
||||
<span class="me-2">🇸🇦</span> العربية (Arabic)
|
||||
</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</li> {% endcomment %}
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="{% url 'user_detail' request.user.pk %}">
|
||||
<i class="fas fa-user-circle me-1"></i> <span>{% trans "My Profile" %}</span></a></li>
|
||||
{% endif %}
|
||||
<li class="nav-item mx-2 mt-2">
|
||||
<a href="{% url 'message_list' %}"
|
||||
class=" btn btn-sm btn-outline-warning position-relative">
|
||||
<i class="fas fa-envelope me-1"></i>
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
{{ request.user.get_unread_message_count }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<main class="main-container">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-item ms-3">
|
||||
{% if request.user.is_authenticated %}
|
||||
<form method="post" action="{% url 'account_logout' %}" class="d-inline py-2 d-flex align-items-center">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-outline-light btn-sm">
|
||||
<i class="fas fa-sign-out-alt me-1"></i> {% trans "Logout" %}
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="mt-auto py-3 border-top bg-white">
|
||||
<div class="container-fluid px-4">
|
||||
<div class="d-flex justify-content-between align-items-center small text-muted">
|
||||
<span>© {% now "Y" %} KAAUH. {% trans "All rights reserved." %}</span>
|
||||
<div class="d-flex gap-3">
|
||||
<img src="{% static 'image/vision.svg' %}" alt="Vision 2030" style="height: 25px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="text-center mt-4 powered-by-footer">
|
||||
<a href="https://tenhal.sa/" class="text-decoration-none" target="_blank">
|
||||
<p class="text-muted small">
|
||||
Tenhal | تنحل
|
||||
</p>
|
||||
<a>
|
||||
</div>
|
||||
|
||||
<main id="message-container" class="container-fluid flex-grow-1" style="max-width: 1600px; margin: 0 auto;">
|
||||
{# Messages Block (Correct) #}
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }} alert-dismissible fade show mt-2" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans 'Close' %}"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
{# Footer (Correct) #}
|
||||
<footer class="mt-auto">
|
||||
<div class="footer-bottom py-3 small text-muted" style="background-color: #00363a;">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap" style="max-width: 1600px; margin: 0 auto;">
|
||||
<p class="mb-0 text-white-50">
|
||||
© {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %}
|
||||
{% trans "All rights reserved." %}
|
||||
</p>
|
||||
<p class="mb-0 text-white-50">
|
||||
{% if request.user.user_type == 'candidate' %}
|
||||
{% trans "Candidate Portal" %}
|
||||
{% elif request.user.user_type == 'agency' %}
|
||||
{% trans "Agency Portal" %}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% include 'includes/delete_modal.html' %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.6/bundles/datastar.js"></script>
|
||||
|
||||
{# JavaScript (Left unchanged as it was mostly correct) #}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Navbar collapse auto-close on link click (Mobile UX)
|
||||
const navbarCollapse = document.getElementById('agencyNavbar');
|
||||
if (navbarCollapse) {
|
||||
const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item');
|
||||
const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
if (!link.classList.contains('dropdown-toggle')) {
|
||||
bsCollapse.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile logout confirmation
|
||||
const logoutButton = document.querySelector('form[action*="logout"] button');
|
||||
if (logoutButton) {
|
||||
logoutButton.addEventListener('click', (e) => {
|
||||
if (window.innerWidth < 992) {
|
||||
const confirmed = confirm('{% trans "Are you sure you want to logout?" %}');
|
||||
if (!confirmed) e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function form_loader(){
|
||||
const forms = document.querySelectorAll('form');
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
const submitButton = form.querySelector('button[type="submit"], input[type="submit"]');
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.classList.add('loading');
|
||||
window.addEventListener('unload', function() {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('loading');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
document.addEventListener('htmx:afterSwap', form_loader);
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
|
||||
function closeOpenBootstrapModal() {
|
||||
const openModalElement = document.querySelector('.modal.show');
|
||||
if (openModalElement) {
|
||||
const modal = bootstrap.Modal.getInstance(openModalElement);
|
||||
if (modal) {
|
||||
modal.hide();
|
||||
} else {
|
||||
console.warn("Found an open modal element, but could not get the Bootstrap Modal instance.");
|
||||
}
|
||||
} else {
|
||||
console.log("No open Bootstrap Modal found to close.");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
{% block customJS %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -1,7 +1,7 @@
|
||||
<!-- templates/recruitment/interview_calendar.html -->
|
||||
{% extends "base.html" %}
|
||||
{% load static i18n %}
|
||||
{% load static i18n %}
|
||||
{% block title %} {% trans "Interview Calendar" %} {% endblock %}
|
||||
|
||||
{% block customCSS %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
|
||||
<style>
|
||||
@ -11,114 +11,79 @@
|
||||
--calendar-hover: rgba(0, 99, 110, 0.2);
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
background-color: var(--calendar-color);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
background-color: white;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--kaauh-border);
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
color: var(--calendar-color) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.fc-button-primary {
|
||||
background-color: var(--calendar-color) !important;
|
||||
border-color: var(--calendar-color) !important;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.fc-button-primary:hover {
|
||||
background-color: #004d56 !important;
|
||||
border-color: #004d56 !important;
|
||||
}
|
||||
|
||||
.fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active {
|
||||
background-color: #003a40 !important;
|
||||
border-color: #003a40 !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-day.fc-day-today {
|
||||
background-color: var(--calendar-light) !important;
|
||||
}
|
||||
|
||||
.fc-event-title {
|
||||
font-weight: 500;
|
||||
.fc-event {
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-scheduled {
|
||||
background-color: #e3f2fd;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
.status-confirmed {
|
||||
background-color: #e8f5e9;
|
||||
color: #1b5e20;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background-color: #ffebee;
|
||||
color: #b71c1c;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #f5f5f5;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.interview-details {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.interview-details .card {
|
||||
border-left: 4px solid var(--calendar-color);
|
||||
}
|
||||
.status-scheduled { background-color: #e3f2fd; color: #0d47a1; }
|
||||
.status-confirmed { background-color: #e8f5e9; color: #1b5e20; }
|
||||
.status-cancelled { background-color: #ffebee; color: #b71c1c; }
|
||||
.status-completed { background-color: #f5f5f5; color: #424242; }
|
||||
|
||||
.calendar-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.25rem;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: #f9fbfd;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px dashed #dee2e6;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4">
|
||||
<div class="calendar-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h1 class="h3 mb-0">{% trans "Interview Calendar" %}</h1>
|
||||
<div>
|
||||
<span class="h5">{{ job.title }}</span>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1 page-header">{% trans "Interview Calendar" %}</h1>
|
||||
<p class="text-muted mb-0">{{ job.title|default:"Global Schedule" }}</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-muted small mb-0">Tenhal | تنحل</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -145,25 +110,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="interview-details" id="interview-details" style="display: none;">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">{% trans "Interview Details" %}</h5>
|
||||
<div class="interview-details mt-4" id="interview-details" style="display: none;">
|
||||
<div class="card shadow-sm border-start border-4 border-info">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
|
||||
<h5 class="mb-0 text-primary-theme"><i class="fas fa-info-circle me-2"></i>{% trans "Interview Details" %}</h5>
|
||||
<button type="button" class="btn-close" id="close-details"></button>
|
||||
</div>
|
||||
<div class="card-body" id="interview-info">
|
||||
<!-- Interview details will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include FullCalendar JS -->
|
||||
{{ events|json_script:"calendar-events-data" }}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
var events = {{ events|safe }};
|
||||
|
||||
// FIX: Parse the JSON script to avoid "None is not defined" error
|
||||
const eventsData = JSON.parse(document.getElementById('calendar-events-data').textContent);
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
initialView: 'dayGridMonth',
|
||||
@ -172,77 +139,64 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
events: events,
|
||||
events: eventsData,
|
||||
eventClick: function(info) {
|
||||
// Prevent default browser behavior
|
||||
info.jsEvent.preventDefault();
|
||||
|
||||
// Show interview details
|
||||
showInterviewDetails(info.event);
|
||||
},
|
||||
eventMouseEnter: function(info) {
|
||||
// Change cursor to pointer on hover
|
||||
document.body.style.cursor = 'pointer';
|
||||
},
|
||||
eventMouseLeave: function() {
|
||||
// Reset cursor
|
||||
document.body.style.cursor = 'default';
|
||||
},
|
||||
height: 'auto',
|
||||
aspectRatio: 2,
|
||||
eventDisplay: 'block',
|
||||
displayEventTime: true,
|
||||
displayEventEnd: true,
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
// Function to show interview details
|
||||
function showInterviewDetails(event) {
|
||||
const detailsContainer = document.getElementById('interview-details');
|
||||
const infoContainer = document.getElementById('interview-info');
|
||||
|
||||
const statusClass = `status-${event.extendedProps.status}`;
|
||||
const statusText = event.extendedProps.status.charAt(0).toUpperCase() + event.extendedProps.status.slice(1);
|
||||
const status = event.extendedProps.status || 'scheduled';
|
||||
const statusClass = `status-${status}`;
|
||||
const statusText = status.charAt(0).toUpperCase() + status.slice(1);
|
||||
|
||||
let meetingInfo = '';
|
||||
// FIX: Corrected translation tags and property checks
|
||||
if (event.extendedProps.meeting_id) {
|
||||
meetingInfo = `
|
||||
<div class="mb-3">
|
||||
<h6>{ % tran "Meeting Information" %}</h6>
|
||||
<p><strong>{ % tran "Meeting ID:" %}</strong> ${event.extendedProps.meeting_id}</p>
|
||||
<p><strong>{ % tran "Join URL:" %}</strong> <a href="${event.extendedProps.join_url}" target="_blank">${event.extendedProps.join_url}</a></p>
|
||||
<div class="mt-3 p-3 bg-light rounded border">
|
||||
<h6 class="text-primary-theme"><i class="fas fa-video me-2"></i>{% trans "Meeting Information" %}</h6>
|
||||
<p class="mb-1"><strong>{% trans "Meeting ID:" %}</strong> ${event.extendedProps.meeting_id}</p>
|
||||
<p class="mb-0"><strong>{% trans "Join URL:" %}</strong> <a href="${event.extendedProps.join_url}" target="_blank" class="text-break">${event.extendedProps.join_url}</a></p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
infoContainer.innerHTML = `
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>{% trans "Candidate Information" %}</h6>
|
||||
<p><strong>{% trans "Name:" %}</strong> ${event.extendedProps.candidate}</p>
|
||||
<div class="col-md-6 border-end">
|
||||
<h6 class="text-muted text-uppercase small fw-bold">{% trans "Candidate" %}</h6>
|
||||
<p class="mb-1"><strong>{% trans "Name:" %}</strong> ${event.extendedProps.candidate}</p>
|
||||
<p><strong>{% trans "Email:" %}</strong> ${event.extendedProps.email}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>{% trans "Interview Details" %}</h6>
|
||||
<p><strong>{% trans "Date:" %}</strong> ${event.start.toLocaleDateString()}</p>
|
||||
<p><strong>{% trans "Time:" %}</strong> ${event.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})} - ${event.end.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
|
||||
<h6 class="text-muted text-uppercase small fw-bold">{% trans "Schedule" %}</h6>
|
||||
<p class="mb-1"><strong>{% trans "Date:" %}</strong> ${event.start.toLocaleDateString()}</p>
|
||||
<p class="mb-1"><strong>{% trans "Time:" %}</strong> ${event.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
|
||||
<p><strong>{% trans "Status:" %}</strong> <span class="status-badge ${statusClass}">${statusText}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
${meetingInfo}
|
||||
<div class="mt-3">
|
||||
<a href="${event.url}" class="btn btn-primary btn-sm">{% trans "View Full Details" %}</a>
|
||||
<div class="mt-4 pt-3 border-top">
|
||||
<a href="${event.url}" class="btn btn-main-action btn-sm">
|
||||
<i class="fas fa-external-link-alt me-1"></i> {% trans "View Full Application" %}
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
detailsContainer.style.display = 'block';
|
||||
|
||||
// Scroll to details
|
||||
detailsContainer.scrollIntoView({ behavior: 'smooth' });
|
||||
detailsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
// Close details button
|
||||
document.getElementById('close-details').addEventListener('click', function() {
|
||||
document.getElementById('interview-details').style.display = 'none';
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user